Home » CSS » Optimasi Wordpress » Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll

Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll

3 Okt. 201075 comments
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 :

  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.

Mudah-mudahan artikel tentang Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Cara Mencegah Copy Paste Dengan CSS
  2. Main Remi Bersama Top Komentator
  3. Free CSS Button Generator
  4. Custom CSS Per Post
  5. Mempercantik Tampilan Code Snippets Dengan CSS
  6. Customisasi Tampilan Tag Cloud
  7. Cara Menggabungkan File CSS WordPress
  8. Membuat Menu Navigasi Dengan CSS3
  9. Tips dan Tricks CSS (Cascading Style Sheets)
  10. Bypass Template Path dan Stylesheet Path
  1. 3-10-2010 at 00:44 | #1

    (Maaf) izin mengamankan PERTAMAX dulu. Boleh, kan?!
    amankan dulu

    Reply

    alamendah Reply:

    (Maaf) izin mengamankan KEDUAX dulu. Boleh, kan?!

    Reply

    alamendah Reply:

    (Maaf) izin mengamankan KETIGAX dulu. Boleh, kan?!

    Reply

    alamendah Reply:

    (Maaf) izin mengamankan KEEMPAX dulu. Boleh, kan?!

    Reply

    alamendah Reply:

    (Maaf) izin mengamankan KELIMAAAX dulu. Boleh, kan?!

    Reply

    alamendah Reply:

    tapi terus terang gak begitu mudeng dengan css

    Reply

    alamendah Reply:

    jadi sekedar ikutan baca

    Reply

    alamendah Reply:

    terus ikutan komeng ….

    Reply

    Alwi Reply:

    Boleh … boleh …. boleh …. heee kaya ipin upin

    Reply

    alamendah Reply:

    terima kasih atas izinya, Kang….

    Reply

    My Little Princess Reply:

    kang alwi langsung menjawab he he

    Reply

    Barcode Printer Reply:

    keduak juga masih aman dibawah Kang Alamendah

    Reply

    Muhammad Faisal Aziz Reply:

    Izin nyemplit ya.Boleh kan?

    Reply

    Muhammad Faisal Aziz Reply:

    yang penting bersillaturrahminya

    Reply

    Barcode Printer Reply:

    Aman terkendali disini dibawah pertamax

    Reply

    Muhammad Faisal Aziz Reply:

    iya,langsung terkendali situasinya..

    Reply

    RifkyMedia™ Reply:

    Nyempil pertamax nya gan !

    Reply

    Muhammad Faisal Aziz Reply:

    ikut nyemplit disini juga

    Reply

    Hybrid car Reply:

    Mulai nih…mulai……
    ngebuuut….. :)

    Reply

    alamendah Reply:

    cuman meregangkan otot-otot jari saja
    Wakakakakakak

    Reply

    Muhammad Faisal Aziz Reply:

    jangan ngebut dulu,nanti diakhir-akhirnya lemes

    Reply

  2. 3-10-2010 at 06:23 | #2

    ha ha pak alam pun sudah datang

    Reply

    Barcode Printer Reply:

    Pak Alam turun gunung dari rimba raya yang penuh satwa dan tumbuhan

    Reply

    Muhammad Faisal Aziz Reply:

    bikin para komentator lainnya langsung tancap gas

    Reply

    Hybrid car Reply:

    Ini yang bikin siap-siap tancap gas…

    Reply

    Muhammad Faisal Aziz Reply:

    iya,saya udah siap untuk beradu kecepatan lagi

    Reply

    alamendah Reply:

    lama gak muncul kangen juga

    Reply

    Hybrid car Reply:

    Meregangkan otot jari saja sudah begini ngebutnya, apalagi kalau sudah meregang semuanya… hehe…

    Reply

    Muhammad Faisal Aziz Reply:

    mulai cepetnya di tanggal 20-an

    Reply

  3. 3-10-2010 at 13:35 | #3

    nice info nih, bagus banget ah

    Reply

    Barcode Printer Reply:

    iya sip banget nih, trims sharing nya

    Reply

  4. 3-10-2010 at 19:22 | #4

    ini sambungan dari bag 1 ya? keren

    Reply

    Barcode Printer Reply:

    musti dicoba offlen dulu nih kalo nggak bisa kacau nantinya

    Reply

    Barcode Printer Reply:

    semakin hari info script wordpress semakin sip aja disini

    Reply

    Alwi Reply:

    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:

    nah bagaimana cara agar bisa edit offline ni
    caari ilmunya dulu nih perlu

    Reply

    citromduro Reply:

    sekaligus buat materi pelajaran web database, kalau online susah, tapi kalau local kan lebih cepat

    Reply

  5. 3-10-2010 at 20:37 | #5

    wah bisa belajar CSS bih, mudah2an update trs artikel tentang CSS biar saya bisa belajar Online :)

    Reply

  6. 3-10-2010 at 23:36 | #6

    mampir mas alwi heheheheh:D

    Reply

    Hybrid car Reply:

    Tak temani ya mas…..

    Reply

  7. 4-10-2010 at 02:00 | #7

    saya masih bingung mas, tidak pernah edit css sih

    Reply

    citromduro Reply:

    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:

    tenang bung citro, saya dulu juga mengalami seperti itu….pelan pelan saja.. hehe…

    Reply

  8. 4-10-2010 at 06:00 | #8

    mksh banyak atas pengetahuannya,
    sangat bermanfaat sekali.

    Reply

  9. 4-10-2010 at 08:41 | #9

    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:

    yg di atas saya ini masternya CSS… :D

    Reply

    Hybrid car Reply:

    Iya toh ? Mohon Ijin berguru bung Hari….

    Reply

    Hybrid car Reply:

    Site-nya kok “Under Construction” sob ?

    Reply

  10. 4-10-2010 at 10:33 | #10

    Siip bung alwi… ini sambungannya yang dulu to ? ijin copas ya….

    Reply

Comment pages
1+6=? (Wajib diisi)