January 2019

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 :

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 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');
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.

Makasih buat kalian senpai yang mau mengunjungi blog saya :D

See you next time

Border Style, Border Width, Border Color

Kalau di postingan sebelumnya sengaja saya bahas yang ringan dan enteng yakni tentang cara mengganti background theme wordPress, tutorial kali ini juga masih membahas yang ringan, enteng, renyah dan gurih heee .. (krupuk kali … ) yakni tentang css border. Pembahasannya kita fokuskan kepada border style, border width dan border color.

Border Style :

Di CSS border properties bentuk-bentuk border ada beberapa macam di antaranya, dotted, dashed, solid, double, groove, ridge, inset dan outset.

Contoh :

Contoh tanpa border/No border, penulisan kodenya : border-style:none

Contoh dotted border, penulisan kodenya : border-style:dotted

Contoh dashed border, penulisan kodenya : border-style:dashed

Contoh solid border, penulisan kodenya : border-style:solid

Contoh double border, penulisan kodenya : border-style:double

Contoh groove border, penulisan kodenya : border-style:groove

Contoh ridge border, penulisan kodenya : border-style:ridge

Contoh inset border, penulisan kodenya : border-style:inset

Contoh outset border, penulisan kodenya : border-style:outset

Border Width :

Dengan suatu border properties, border bisa diatur lebar/ketebalannya. Untuk pengaturan ketebalan suatu border bisa menggunakan pixels (px) atau bisa menggunakan salah satu ukuran yang biasa digunakan dalam css yaitu, thin, medium, atau thick (tipis, sedang, atau tebal).

Contoh sebuah border dengan style : solid width : 5px

penulisan kodenya : border-style:solid;border-width:5px;

Contoh sebuah border dengan style : ridge width : thick

penulisan kodenya : border-style:solid;border-width:thick;

Border Color :

Dengan suatu border properties, border bisa diatur warnanya. Untuk pengaturan warna suatu border bisa menggunakan nama suatu warna (dalam bahasa Inggris tentunya) misalnya, blue, red, yellow, grey dll, atau bisa menggunakan RGB misalnya, rgb(0.51.26), atau HEX misalnya, #330000

Contoh border style:double width:3px color:#330000

penulisan kodenya : border-style:double;border-width:3px;border-color:#330000;

Penulisan kode border properties di atas bisa diringkas (shorthand) menjadi : border:double 3px #330000;

Contoh lain penggunaan border style yang berbeda untuk bagian atas (top), kanan (right), bawah (bottom) dan kiri (left) :

penulisan kodenya : border-style:dotted solid dashed double;border-width:1px 2px 3px 4px;border-color:#330000 blue red green;

Keterangan :
border-style:dotted solid dashed double, urutanya dari atas kanan bawah kiri. Atas=dotted kanan=solid bawah=dashed kiri=double. Demikian juga untuk width dan color urutannya dari atas kanan bawah kiri. Kemudian jika ditulis seperti ini : border-style:dotted solid dashed artinya bagian atas=dotted, kanan dan kiri=solid, bawah/bottom=dashed. Jika ditulis seperti ini : border-style:dotted dashed artinya bagian atas dan bawah=dotted, bagian kiri dan kanan=dashed.

Border juga bisa diset hanya pada bagian tertentu saja (individual border) misalnya hanya akan memberi border pada bagian bawah, maka penulisan kodenya menjadi : border-bottom, bagian atas saja (border-top), bagian kiri saja (border-left) atau kanan saja (border-right). Contoh pemberian boder hanya pada bagian bawah saja (border-bottom) dengan border style : dashed :

penulisan kodenya (langsung disingkat/shorthand) : border-bottom:dashed 3px #00331A;

Pada bagian tertentu, border juga bisa dibuat menjadi transparan/hidden/tersembunyi. Misalnya pada bagian atas (border-top) dibuat menjadi transparan.

penulisan kodenya (langsung disingkat/shorthand) : border:solid 3px #00331A;border-top:none; atau bisa juga seperti ini : border:solid 0 3px 3px 3px #00331A;

Selain dengan none untuk menghilangkan tampilan border juga bisa menggunakan transparent atau hidden.

Oke itu pengenalan dasar-dasar tentang border, baik border style, border width maupun border color. Dengan kreatifitas serta pengembangan lebih lanjut dan dipadukan dengan kelebihan-kelebihan yang ada di CSS3 nantinya anda akan bisa menghasilkan berbagai macam tampilan border yang menarik.

Makasih buat kalian semua senpai yang mau mengunjungi blog saya :D
See you next time

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.

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 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');
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.

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.

Terima kasih senpai yang mau mengunjungi blog saya :D

See you next time

Membuat Efek Text Stroke Dengan CSS

Bagi yang biasa menggunakan Photoshop mungkin sudah tidak asing dengan fungsi stroke pada tampilan text/font. Dengan CSS kita pun bisa menampilkan efek stroke pada text/font yang digunakan. Text-stroke adalah sebuah eksperimen dengan menggunakan CSS property, yakni semacam pemberian efek border atau outline, tapi efek stroke ini hanya berfungsi pada browser atau peramban yang sudah mendukung WebKit seperti Google Chrome dan Safari. Dengan CSS property kita juga bisa menambahkan efek lainnya seperti tampilan font menjadi transparan, efek shadow, dan juga bisa dikombinasikan dengan ::first-letter dan ::first-line.

Contoh screenshort font dengan text-stroke :

Untuk menampilkan seperti screenshort di atas kodenya adalah :

<div style="font-family: Arial Black; font-size: 60px;
-webkit-text-stroke: 3px grey; color: blue;">TEKS ANDA DI SINI</div>

Hasilnya seperti contoh di bawah ini (harus menggunakan peramban dengan fitur WebKit seperti Google Chrome/Safari versi terbaru) :

CONTOH STROKE

Text-stroke transparan kodenya adalah :

<div style="font-family: Arial Black; font-size: 40px;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 2px #217408;">TEKS ANDA DI SINI</div>

Hasilnya seperti ini :

TRANSPARENT STROKE

Makasih buat kalian semua senpai yang mau mengunjungi blog saya :D
See you next time