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.
weit nyimak ki sedot….
okelah….bagus
Reply
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
mas kalo udah pake cara yg bagian kedua boleh pake cara ini ga.?
Reply
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
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:28-06-2015 at 19:11
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
Wahh…
Mantap sob ;-)
Reply
sangat menarik nih di tunggu kelanjutan artikelnya
Reply
matep banget gan dan sanagat keren baget
Reply
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