Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll
Kalau sebelumnya sudah saya bahas tentang cara mengoptimasi file CSS WordPress dengan 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 :
- 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
- 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).
<?php header("Content-type: text/css"); ?>
- 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 :
<?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(); ?>- Untuk file style_home.php isinya sama dengan kode di atas, hanya pada kode
require_once('style.css');
diganti menjadirequire_once('style_home.css');
demikian juga untuk file style_single_page.php diisi dengan kode di atas dan ganti koderequire_once('style.css');
menjadirequire_once('style_single_page.css');
jika ada file css lain, anda bisa sekaligus menggabungkannya dengan menambahkan fungsirequire_once('namafilecsstambahan.css');
- 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 :
ob_start("ob_gzhandler"); ob_start("compress");
- 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) :
<?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.
(Maaf) izin mengamankan PERTAMAX dulu. Boleh, kan?!
amankan dulu
Reply
alamendah Reply:3-10-2010 at 00:44
(Maaf) izin mengamankan KEDUAX dulu. Boleh, kan?!
Reply
alamendah Reply:3-10-2010 at 00:45
(Maaf) izin mengamankan KETIGAX dulu. Boleh, kan?!
Reply
alamendah Reply:3-10-2010 at 00:45
(Maaf) izin mengamankan KEEMPAX dulu. Boleh, kan?!
Reply
alamendah Reply:3-10-2010 at 00:45
(Maaf) izin mengamankan KELIMAAAX dulu. Boleh, kan?!
Reply
alamendah Reply:3-10-2010 at 00:46
tapi terus terang gak begitu mudeng dengan css
Reply
alamendah Reply:3-10-2010 at 00:47
jadi sekedar ikutan baca
Reply
alamendah Reply:3-10-2010 at 00:47
terus ikutan komeng ….
Reply
Alwi Reply:3-10-2010 at 00:48
Boleh … boleh …. boleh …. heee kaya ipin upin
Reply
alamendah Reply:3-10-2010 at 00:52
terima kasih atas izinya, Kang….
Reply
My Little Princess Reply:3-10-2010 at 06:23
kang alwi langsung menjawab he he
Reply
Barcode Printer Reply:3-10-2010 at 19:24
keduak juga masih aman dibawah Kang Alamendah
Reply
Muhammad Faisal Aziz Reply:5-10-2010 at 14:26
Izin nyemplit ya.Boleh kan?
Reply
Muhammad Faisal Aziz Reply:5-10-2010 at 14:27
yang penting bersillaturrahminya
Reply
Barcode Printer Reply:3-10-2010 at 19:23
Aman terkendali disini dibawah pertamax
Reply
Muhammad Faisal Aziz Reply:5-10-2010 at 14:28
iya,langsung terkendali situasinya..
Reply
RifkyMedia™ Reply:3-10-2010 at 23:36
Nyempil pertamax nya gan !
Reply
Muhammad Faisal Aziz Reply:5-10-2010 at 14:27
ikut nyemplit disini juga
Reply
Hybrid car Reply:4-10-2010 at 10:32
Mulai nih…mulai……
ngebuuut….. :)
Reply
alamendah Reply:5-10-2010 at 05:39
cuman meregangkan otot-otot jari saja
Wakakakakakak
Reply
Muhammad Faisal Aziz Reply:5-10-2010 at 14:28
jangan ngebut dulu,nanti diakhir-akhirnya lemes
Reply
ha ha pak alam pun sudah datang
Reply
Barcode Printer Reply:3-10-2010 at 19:23
Pak Alam turun gunung dari rimba raya yang penuh satwa dan tumbuhan
Reply
Muhammad Faisal Aziz Reply:5-10-2010 at 14:29
bikin para komentator lainnya langsung tancap gas
Reply
Hybrid car Reply:4-10-2010 at 10:33
Ini yang bikin siap-siap tancap gas…
Reply
Muhammad Faisal Aziz Reply:5-10-2010 at 14:29
iya,saya udah siap untuk beradu kecepatan lagi
Reply
alamendah Reply:5-10-2010 at 05:40
lama gak muncul kangen juga
Reply
Hybrid car Reply:5-10-2010 at 08:58
Meregangkan otot jari saja sudah begini ngebutnya, apalagi kalau sudah meregang semuanya… hehe…
Reply
Muhammad Faisal Aziz Reply:5-10-2010 at 14:30
mulai cepetnya di tanggal 20-an
Reply
nice info nih, bagus banget ah
Reply
Barcode Printer Reply:3-10-2010 at 19:23
iya sip banget nih, trims sharing nya
Reply
ini sambungan dari bag 1 ya? keren
Reply
Barcode Printer Reply:3-10-2010 at 19:24
musti dicoba offlen dulu nih kalo nggak bisa kacau nantinya
Reply
Barcode Printer Reply:3-10-2010 at 19:25
semakin hari info script wordpress semakin sip aja disini
Reply
Alwi Reply:3-10-2010 at 19:28
Ok ini sambungannya, dan mesti dicoba di sever lokal dulu apalagi kalau bisa pakai dreamweaever mantab dan sangat membantu dalam utak-atik css
Reply
citromduro Reply:4-10-2010 at 02:02
nah bagaimana cara agar bisa edit offline ni
caari ilmunya dulu nih perlu
Reply
citromduro Reply:4-10-2010 at 02:02
sekaligus buat materi pelajaran web database, kalau online susah, tapi kalau local kan lebih cepat
Reply
wah bisa belajar CSS bih, mudah2an update trs artikel tentang CSS biar saya bisa belajar Online :)
Reply
mampir mas alwi heheheheh:D
Reply
Hybrid car Reply:4-10-2010 at 10:36
Tak temani ya mas…..
Reply
saya masih bingung mas, tidak pernah edit css sih
Reply
citromduro Reply:4-10-2010 at 02:01
saya pernah baca-baca untuk blogspot css bisa dihosting di lain tempat untuk mempercepat loading blog
tapi memahami kode css saja belum bisa, bagaimana upload cssnya :D
Reply
Hybrid car Reply:4-10-2010 at 10:50
tenang bung citro, saya dulu juga mengalami seperti itu….pelan pelan saja.. hehe…
Reply
mksh banyak atas pengetahuannya,
sangat bermanfaat sekali.
Reply
weh.. keren.. sumpah..
kenapa aku ga kepikiran dibuat gini ya?
hhmmm..
saLut deh buat Kang Alwi..
langsung dipraktekkan, Kang..
makasih banget lho..
suer…
Reply
jagadkomputer Reply:5-10-2010 at 13:35
yg di atas saya ini masternya CSS… :D
Reply
Hybrid car Reply:8-10-2010 at 09:28
Iya toh ? Mohon Ijin berguru bung Hari….
Reply
Hybrid car Reply:8-10-2010 at 09:29
Site-nya kok “Under Construction” sob ?
Reply
Siip bung alwi… ini sambungannya yang dulu to ? ijin copas ya….
Reply