Home » CSS » Optimasi Wordpress » Cara Menggabungkan File CSS WordPress

Cara Menggabungkan File CSS WordPress

4 Sep. 201062 comments
Cara Menggabungkan File CSS WordPress

Cascading Style Sheets atau CSS adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup atau suatu metode atau cara yang digunakan untuk mengatur tampilan suatu halaman website atau situs, seperti tata letaknya, jenis font, warna font, pengaturan background, pengaturan navigasi dan masih banyak lagi. Dengan menggunakan methode CSS ini kita bisa dengan mudah mengubah sebagian atau keseluruhan tampilan dari sebuah website sehingga  menjadi enak dilihat dan mudah navigasinya.

Untuk metode pemasangannya ada beberapa cara, yaitu External Style Sheet (file CSS ditempatkan terpisah atau di luar file HTML), Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML) dan Inline Style Sheet (Kode CSS langsung dipasang di tag HTML). Untuk blog wordpress hampir semua theme yang digunakan memakai cara pertama (External Style Sheet).

Theme pada blog wordpress ada yang menggunakan satu buah file CSS namun ada juga yang menggunakan beberapa file CSS sesuai tujuan dan kegunaannya. Tujuan adanya pemisahan file css adalah untuk memudahkan dalam pengeditan sesuai dengan jenis kegunaannya, namun mempunyai kelemahan dari sisi kecepatan akses atau waktu loading karena akan menambah jumlah recources atau menambah jumlah http request. Salah satu cara untuk mengoptimalkannya (mengurangi jumlah http request), kita bisa menggabungkan beberapa file css yang kita gunakan sekaligus mengkompresnya secara otomatis dengan fungsi PHP.

Cara Menggabungkan File CSS WordPress :

1. Buka semua file css yang ada di folder theme yang digunakan, kemudian tempatkan kode berikut di masing-masing file css tersebut (di bagian paling atas).

<?php header("Content-type: text/css"); ?>

2. Buat file php (ekstensi php) di folder yang sama dengan file css ditempatkan pada theme yang anda gunakan, bisa lewat Cpanel atau FTP. Nama file terserah anda, misalnya style.css.php kemudian isi dengan kode berikut ini (sudah saya sertakan kode untuk Cache-Control, expires header, fungsi kompresi dan penggabungan file css :

<?php
ob_start("ob_gzhandler");
ob_start("compress");
// required header info and character set
header("Content-type: text/css; charset: UTF-8");
// duration of cached content (Cache for 1 weeks)
$offset = 60 * 60 * 24 * 7;
$ts = gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
// cache control to process
header ('Cache-Control: max-age=' . $offset . ', must-revalidate');
//set etag-header
header('ETag: "'.md5($ts).'"');
// expiration header format
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s",time() + $offset) . " GMT";
// send cache expiration header to browser
header($ExpStr);
// initialize compress function for white-space removal
ob_start("compress");
// Begin function compress
function compress($buffer) {
// remove comments
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
// remove tabs, spaces, new lines, etc.
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
// remove unnecessary spaces
$buffer = str_replace('{ ', '{', $buffer);
$buffer = str_replace(' }', '}', $buffer);
$buffer = str_replace('; ', ';', $buffer);
$buffer = str_replace(', ', ',', $buffer);
$buffer = str_replace(' {', '{', $buffer);
$buffer = str_replace('} ', '}', $buffer);
$buffer = str_replace(': ', ':', $buffer);
$buffer = str_replace(' ,', ',', $buffer);
$buffer = str_replace(' ;', ';', $buffer);
return $buffer;}
require_once('style.css');
require_once('style1.css');
require_once('style2.css');
ob_end_flush();
?>

Silahkan ganti style.css, style1.css, dan style2.css dengan nama file-file css yang anda gunakan. Jika file css hanya satu buah cukup dengan kode require_once(‘style.css‘);

Kode di atas digunakan untuk server apache yang telah mengaktifkan kompressi dengan deflate module loaded. Untuk server yang tidak mengaktifkan module tersebut bisa menggunakan alternatif lain dalam menggunakan fungsi kompresinya yaitu dengan ZLIB kompressi, caranya bisa dilihat di postingan saya sebelumnya, Mempercepat Loading WordPress dengan Zlib Compression. Jika kompresinya menggunakan ZLIB silahkan hapus kode ini :

ob_start("ob_gzhandler");
ob_start("compress");

3. Buka file header.php yang ada di folder theme yang digunakan, kemudian ganti ektensi file css untuk url stylesheet dari style.css menjadi style.css.php

Cara lain dalam mengoptimasi file css yaitu kita bisa menggunakan file css yang berbeda untuk halaman utama (home), untuk postingan, archive, dan kategori, sehingga file css yang ditampilkan betul-betul sesuai dengan yang dibutuhkan (ukuran file css menjadi lebih ringkas). Misalkan pengaturan css untuk komentar pasti tidak dibutuhkan ketika pengunjung membuka halaman utama (home), atau sebaliknya fungsi css untuk pengaturan penomoran halaman (paging) hanya dibutuhkan di halaman utama (home), kategori/tag, archive dan halaman hasil pencarian atau search. Caranya .. ? tunggu postingan berikutnya.

Mudah-mudahan artikel tentang Cara Menggabungkan File CSS WordPress ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. CSS3, Sonic Mengejar Bola
  2. CSS Image Sprites Generator
  3. Membuat Efek Text Stroke Dengan CSS
  4. Cara Mengganti Font Dalam Postingan
  5. Membuat Background Pattern Dengan CSS3 Repeat Linear Gradient
  6. CSS3 Linear Gradient, Fitur Baru Opera 11.11
  7. Membuat Menu Navigasi Dengan CSS3
  8. Border Style, Border Width, Border Color
  9. Cara Mengganti Background Theme WordPress
  10. Source Code Main Remi Bersama Top Komentator
  1. juan
    1-4-2012 at 22:32 | #1

    weit nyimak ki sedot….
    okelah….bagus

    Reply

  2. 6-4-2012 at 07:48 | #2

    Mas, saya sudah mengikuti beberapa artikel tentang kompresi ini mulai dr zlib compression sampai ke menggabungkan-file-css. Minta sarannya: saya hosting di hostgator dan menggunakan plugin W3 Total Cache..kira2 metode mana yg bisa saya pakai untuk web saya ?

    Reply

  3. 10-4-2012 at 21:21 | #3

    mas kalo udah pake cara yg bagian kedua boleh pake cara ini ga.?

    Reply

  4. 28-6-2012 at 10:46 | #4

    misalnya gini..
    saya sudah mengkombinasikan semua file CSSnya..trus saya buad penjalanya di bagian header.

    apa penjalan yg laen harus dihapus atau di biarkan?

    Reply

  5. 11-12-2012 at 21:09 | #5

    3. Buka file header.php yang ada di folder theme yang digunakan, kemudian ganti ektensi file css untuk url stylesheet dari style.css menjadi style.css.php

    ektensi yang mana maksudnya mas,.. coz udah saya cari di dalam header.php nggak ketemu tuh style.css

    yang ada ini

    @import url( );

    Reply

    Ardyan Satya Reply:

    Saya juga punya pertanyaan yg sama dengan mas Roby.

    Bagaimana kang Alwi, mohon penjelasannya lagi tentang bagian 3 nya, sudah saya buka header.php namun stylesheet belum ketemu juga.. Terima Kasih

    Reply

  6. 10-11-2013 at 15:28 | #6

    Wahh…
    Mantap sob ;-)

    Reply

  7. 7-4-2014 at 12:27 | #7

    sangat menarik nih di tunggu kelanjutan artikelnya

    Reply

  8. 16-4-2014 at 18:55 | #8

    matep banget gan dan sanagat keren baget

    Reply

  9. Komang sudiartha
    6-9-2014 at 12:00 | #9

    sebelum saya mencobanya di web web saya….
    ada hal yang kurang saya mengerti dari scriptnya:
    1. jika file css-nya berlokasi di folder yang berbeda bagaimana penjabarannya pada:
    require_once(‘style.css’);
    require_once(‘style1.css’);
    require_once(‘style2.css’); dst apakah foldernya juga harus diikutkan.??

    2. apakah hal yang sama bisa digunakan untuk file javascript-js?

    tambah berkerut nich jidat ….
    trims

    Reply

Comment pages
5+9=? (Wajib diisi)