Cara Menggabungkan File CSS WordPress (Bag.1)

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.