CSS Per Post

Dalam beberapa postingan, saya menggunakan style css khusus untuk masing-masing artikeL. Ada artikeL yang menggunakan inLine style, adapuLa yang terpaksa menggunakan externaL style. Untuk artikeL dengan inLine syle tidak ada masaLah yang mengganggu, tapi untuk yang externaL styLe, ada sedikit ganjaLan.

Sebelumnya, saya menggunakan satu fiLe css dengan nama poststyle.css yang saya incLude di header.php. Setiap ada artikeL baru yang membutuhkan externaL style, saya tuLiskan styLenya di daLam fiLe poststyle.css. Jika jumLah artikeL yang membutuhkan poststyle.css masih sedikit tentu tidak ada masaLah, tapi bagaimana jika kelak artikeLnya bertambah banyak? Tentu ukuran fiLe poststyle.css itu akan bertambah besar, yang pasti akan menambah beban loading, padahaL tidak semua styLe didaLamnya digunakan untuk artikeL yang bersangkutan.

Beberapa hari laLu akhirnya saya menemukan soLusi untuk mensiasati haL tersebut. Yaitu dengan menambahkan beberapa kode di function.php. Penggunaannya adaLah sebagai berikut:

1. Tulis / tambahkan kode berikut ke daLam fiLe function.php yang ada di daLam foLder theme.

[php]
function cssperpost() {
global $post;
if (is_single()) {
$currenttitle = $post->post_name;
$serverfilepath = TEMPLATEPATH.'/css-per-post/'.$currenttitle.'.css';
$publicfilepath = get_bloginfo('template_url');
$publicfilepath .= '/css-per-post/'.$currenttitle.'.css';
if (file_exists($serverfilepath)) {
echo "< link rel='stylesheet' type='text/css' href='$publicfilepath' media='screen' />"."\n";
}
}
}

add_action('wp_head', 'cssperpost');
[/php]

2. Buat foLder baru dengan nama “css-per-post” (atau nama lain sesuai kode yang ditambahkan ke daLam function.php)
3. Tulis style css yang diperLukan untuk suatu artikeL, dan simpan di daLam foLder tersebut dengan nama sesuai nama artikeL.

Ketika artikeL dibuka, wordpress secara otomatis akan mencari fiLe css dengan nama yang sesuai nama artikeL tadi, jika ada maka fiLe css tersebut akan diload di header. Maka styLe-styLe daLam fiLe css tersebut akan berLaku untuk artikeL yang bersangkutan, dan fiLe css yang diLoad hanya fiLe yang sesuai dengan nama artikeL. Mudah-mudahan bingung. bermanfaat.

18 thoughts on “CSS Per Post

Leave a Reply