Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll

Kalau sebelumnya sudah saya bahas tentang cara mengoptimasi file CSS WordPressdengan menggabungkan beberapa file css yang kita gunakan dengan fungsi php, maka pada postingan kali ini akan saya bahas cara mengoptimasi file CSS WordPress (Bag.2) yakni tentang bagaimana cara membuat file CSS yang berbeda untuk halaman yang berbeda-beda.

Seperti kita ketahui, sebagian besar theme wordpress hanya menggunakan satu buah file css untuk menampilkan fungsi-fungsi yang ada di halaman utama (home atau file index.php), halaman posting (single.php), komentar, sidebar, footer, dan lain-lain. Jika kita membuka halaman depan (homepage), maka browserpun akan mengunduh file CSS tersebut, padahal tidak semua kode dalam file CSS itu dibutuhkan di halaman depan atau homepage (bisa dicek dengan add on firebug dan pagespeed), seperti kode css untuk pengaturan tampilan komentar dan tracback 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.

Untuk mengoptimalkannya kita bisa menggunakan file css yang berbeda untuk halaman utama (home), untuk postingan, archive, kategori/tag dan lain-lain sehingga file css yang ditampilkan betul-betul sesuai dengan yang dibutuhkan sehingga ukuran file css menjadi lebih kecil. Karena ukuran file css kecil, maka waktu loading akan menjadi lebih cepat.

Caranya ikuti langkah berikut ini :

1. Buka folder theme yang anda gunakan (lewat cpanel). Buat 2 buah file css baru (ekstensi css) dengan nama style_home.css dan style_single_page.css
2. Buka file style.css (file css asli bawaan theme) salin semua isinya dan copykan ke file style_home.css dan style_single_page.css. Tambahkan kode berikut ini di bagian paling atas file-file css tersebut (3 buah file).

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

4. Langkah berikutnya, buat 3 buah file php (ekstensi php) dengan nama style.php, style_home.php dan style_single_page.php. Untuk file style.php isi dengan kode berikut ini :

5. <?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');
   ob_end_flush();
   ?>

6. Untuk file style_home.php isinya sama dengan kode di atas, hanya pada kode require_once('style.css'); diganti menjadi require_once('style_home.css');demikian juga untuk file style_single_page.php diisi dengan kode di atas dan ganti kode require_once('style.css'); menjadi require_once('style_single_page.css'); jika ada file css lain, anda bisa sekaligus menggabungkannya dengan menambahkan fungsi require_once('namafilecsstambahan.css');
7. Kode di atas digunakan untuk server apache yang telah mengaktifkan kompresi 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 ini, Mempercepat Loading WordPress dengan Zlib Compression. Jika kompresinya menggunakan ZLIB silahkan hapus kode ini :

8. ob_start("ob_gzhandler");
   ob_start("compress");

9. Langkah berikutnya kita buat conditional tag, caranya buka file header php dan ganti url file style.css (kecuali url file style.css untuk IE) dengan kode berikut ini (jangan lupa dibackup dulu isi file header.php) :

10. <?php if (is_home()){?>
    <link rel="stylesheet" href="http://namadomain.com/wp-content/themes/namafoldertheme/style_home.php" type="text/css" media="screen" />
    <?php } else if (is_single() || is_page()) { ?>
    <link rel="stylesheet" href="http://namadomain.com/wp-content/themes/namafoldertheme/style_single_page.php" type="text/css" media="screen" />
    <?php } else {?>
    <link rel="stylesheet" href="http://namadomain.com/wp-content/themes/namafoldertheme/style.php" type="text/css" media="screen" />
    <?php }?>

Ganti yang saya beri warna merah (namadomain.com), dengan nama domain yang anda gunakan dan namafoldertheme diganti dengan nama folder theme yang anda gunakan.

Cara kerjanya, ketika pengunjung membuka halaman depan (home) maka yang akan digunakan adalah file style_home.php, ketika pengunjung membuka postingan atau sebuah halaman (page) maka yang akan digunakan adalah file style_single_page.php, sedangkan ketika pengunjung membuka selain halaman utama (home), postingan dan page, seperti halaman categori, tag, search dan lain-lain, maka yang akan digunakan adalah file style.php.

Langkah terakhir buka file style_home.css, di sini anda bisa menyeleksi kemudian menghapus kode-kode yang tidak dibutuhkan seperti pengaturan komentar, reply, trackback dan lain-lain tapi jangan lupa dibackup dulu kodenya. Demikian juga untuk file style_single_page.css anda juga bisa menyeleksi kemudian menghapus kode-kode yang tidak dibutuhkan seperti pengaturan paging atau penomoran halaman biasanya tidak dibutuhkan di halaman posting, fungsi penomoran halaman biasanya hanya dibutuhkan di halaman depan (home), halaman search, archive dan kategori/tag.

Dengan cara ini maka ukuran file css akan menjadi lebih kecil dan betul-betul efektif serta efisien sesuai kegunaan dan fungsinya.  Contoh untuk blog ini file css defaultnya berukuran 23 kb, dengan menggunakan metode ini, kini untuk halaman home (file style_home.css) hanya berukuran 5.3kb, karena menggunakan fungsi kompresi, terkirim ke browser pengunjung hanya 1.7kB (kecil banget kaaan) dan hanya menggunakan satu buah file css termasuk yang dari plugin sudah saya includkan (mengurangi http request).

Dengan metode ini anda juga bisa membuat customisasi tampilan antara halaman depan (home), postingan dan lainnya, seperti jenis, ukuran dan warna font, background, pengaturan sidebar dan lainnya.

Makasih buat kalian senpai yang mau mengunjungi blog saya :D

See you next time

ADS HERE !!!