Cinila’s Personal Playground - the bloody journal

Sliding door, adalah salah satu teknik CSS yang sering saya gunakan. Idenya sih sebenarnya simple, cuma implementasinya yang sedikit membutuhkan ketelatenan. Tapi hasilnya bener-bener worth it sih buat saya. Menu list yang sederhana (hanya terdiri dari tag <ul> dan <li>), bisa tampil lain banget. Yup CSS is like magic. Snail theme yang saya pakai sebelum ini juga memakai sliding door. Hanya saja saya kesulitan “menyatukan” sliding door dan wp_list_page.

Saya akan tunjukan kenapa saya (yang tidak paham php) kesulitan menyatukan sliding door dan wp_list_page. Ini adalah list item hasil dari teknik sliding door.

<ul>
<li><a href="link_to_home" id="current"><span>Home</span></a></li>
<li><a href="link_to_archives"><span>Archives</span></a></li>
<li><a href="link_to_contact"><span>Contact</span></a></li>
</ul>

Sedangkan wp_list_page men-generate list page dengan output seperti ini

<li class="pagenav">
Pages
<ul>
<li class="page_item current_page_parent"><a href="link_to_page1" title="Page1">Page1</a></li>
<li class="page_item"><a href="link_to_page2" title="Page2">Page2</a></li>
</ul>
</li>

See what I mean?
Dulu sih saya terpaksa bikin manual tanpa wp_list_page. Ya karena hal-hal beginilah yang akhirnya bikin saya berpikir dua kali kalo ada yang minta theme, kalau yang paham html sih nggak masalah, kalau yang maunya pasang theme langsung beres, wah pasti nantinya saya harus kasih support sepenuh jiwa raga… hahhaha.

Nah jika anda mengerti sedikit saja PHP, mungkin akan gampang merubah file php-nya, ada beberapa alternatif yang bisa dilakukan. Dengan cara seperti dalam support forum ini. Atau dengan cara yang dilakukan si mas dengan theme OMG yang baru dirilis itu.

<?php
$pages = wp_list_pages('sort_column=menu_order&title_li=&echo=0&depth=1');
$pages = preg_replace('%<a ([^>]+)>%U’,'<a $1><span>’, $pages);
$pages = str_replace(’</a>’,'</span></a>’, $pages);
echo $pages;
?>

Sedangkan cara yang saya lakukan lebih simple. Pertama saya sudah tahu dari awal, page apa saja yang ingin saya tampilkan jadi menu, yang kedua CSS style untuk #current dalam list menu saya terdapat pada tag a.

<li><a href="<?php bloginfo('url') ?>/" <?php if (is_home()) { echo "id=\"current\""; } ?>><span>Home</span></a></li>
<li><a href="<?php bloginfo('url') ?>/about" <?php if (is_page('about')) { echo "id=\"current\""; } ?>><span>About</span></a></li>
<li><a href="<?php bloginfo('url') ?>/archives" <?php if (is_page('archives')) { echo "id=\"current\""; } ?>><span>Archives</span></a></li>
<li><a href="<?php bloginfo('url') ?>/contact" <?php if (is_page('contact')) { echo "id=\"current\""; } ?>><span>Contact</span></a></li>

Memang ada kelemahan dari cara saya, kalau nanti saya mau menambah menu diatas saya harus secara manual meng-edit header.php. Tapi sejauh ini hanya empat menu itu sudah cukup buatku. Dan tentu saja saya menerima (banget) masukan supaya lebih bisa menyatukan sliding door dan wp_list_page.