Wednesday 26 September 2012

Membuat Tab Menu Horizontal Pada Blog Wordpress


Ok teman-teman sedikit saya beri tips untuk membuat tab menu horizontal pada themes wordpress, perlu diperhatikan bahwa modifikasi ini hanya bisa dilakukan pada blog yang memilki hostingan sendiri berplatform wordpress self hosting maksudnya. Modifikasi template ini sudah saya coba dan saya terapkan pada blog saya, dimana terdapat postingan khusus memuat postingan-postingan yang berkategori tutorial.

Ok tidak perlu berlama-lama, langsung saja

  1. Login ke blog sobat
  2. Langsung menuju ke Dashboard, pilih categories
  3. Pada Add Category isiskan Category name misalnya pada blog saya diisikan Tutorial isi Description blog anda, apa saja tentang blog anda kemudian klik Add Category
  4. Buka Notepad kemudian tuliskan code berikut :

    <?php /* Template Name: Tutorial */ $paged=get_query_var('paged'); query_posts('cat=16&paged='.$paged); load_template (TEMPLATEPATH. "/index.php"); ?>

    Keterangan : Template Name : diisikan dengan nama tab menu yang kita buat dan harus sama pemberian nama pada kategori yang kita buat tadi query_posts('cat=16&paged='.$paged); cat=16 sesuai kategori yang saya punya, ganti cat ID-nya dengan yang anda punya. Bagai mana cara melihat cat ID yang sobat punya, kembali pada Dashboard sobat kemudian pilih categories kemudian sorot dengan mouse pada categori yang anda buat tadi misalnya categori Tutorial, nah sekarang perhatikan pada area status bar anda disitu tertulis cat ID=, selanjutnya anda menggantinya.

  5. Save notepad tadi dengan nama sesuai penamaan kategori dan Tempalte Name yang sobat buat tadi.
  6. Login ke hosting sobat dan upload file tadi yang kita buat pada themes yang anda gunakan misalnya public_html/wp-content/themes/nama themes sobat/
  7. Kembali pada Dashboard kemudian pilih Page selanjutnya Add New Page.
  8. Buat judul halaman sesuai kategori, Tempalte Name, dan nama file yang barusan anda upload. misalnya saya punya Tutorial.
  9. Selanjutnya tentukan letak urutan halaman (order) pada panel Attributes, selajutnya masih tetap pada panel Attributes pilih Template, jika berhasil file yang diupload di hostingan anda maka pada template terdapat pilihan Tutorial, kemudian Publish...
tedetttt.. berhasil deh..hehehehehe jika ingin menambah tab baru langkah-langkahnya sama hanya saja file yang diupload dibuat baru ganti namanya dengan tab yang akan sobat buat kemudian Template Name, Cat ID juga diganti.

Cara kedua berikut langkah-langkahnya :

  1. Terlebih dahulu Backup themes sobat
  2. Masih tetap pada Dashboard - Appearance kemudian pilih Editor
  3. Pada themes yang aktif pilih Header kemudian cari code seperti berikut :

    <div class="topBar"> <ul class="meniu"> <?php if (is_home()) { ?> <li class="page_item current_page_item"><a href="<?php bloginfo('url'); ?>/">Home</a></li> <?php } else { ?> <li class="page_item"><a href="<?php bloginfo('url'); ?>/">Home</a></li> <?php } ?> <?php wp_list_pages('title_li='); ?> </ul> <div class="fSearch"> <form id="searchform" action="<?php bloginfo('url'); ?>/" method="get" role="search"> <input id="s" type="text" name="s" value="type here &amp; press enter" onfocus="this.value=''" /> <input id="searchsubmit" class="hidden" type="submit" value=""/> </form> </div> <br clear="all" /> </div>

  4. Selanjutnya copy pastekan code diantara <?php } ?> dan <?php wp_list_pages('title_li='); ?> berikut codenya :

    <?php if (is_home()) { ?>
    <li class="page_item current_page_item"><a href="http://andisyam.co.cc/tutorial/">Tutorial</a></li>
    <?php } else { ?>
    <li class="page_item"><a href="http://andisyam.co.cc/tutorial/">Tutorial</a></li>
    <?php }

    Keterangan : ganti kode ini "<?php bloginfo('url'); ?" dengan alamat postingan sobat yang berkategorikan Tutorial misalnya yang saya punya adalah "http://andisyam.co.cc/tutorial/" kemudian beri nama Tutorial seperti contoh kode diatas.
Ok kurang lebih kode lengkapnya seperti ini :

<div class="topBar">
<ul class="meniu">
<?php if (is_home()) { ?>
<li class="page_item current_page_item"><a href="<?php bloginfo('url'); ?>/">Home</a></li>
<?php } else { ?>
<li class="page_item"><a href="<?php bloginfo('url'); ?>/">Home</a></li>
<?php } ?>

<?php if (is_home()) { ?>
<li class="page_item current_page_item"><a href="http://andisyam.co.cc/tutorial/">Tutorial</a></li>
<?php } else { ?>
<li class="page_item"><a href="http://andisyam.co.cc/tutorial/">Tutorial</a></li>
<?php } ?>
<?php wp_list_pages('title_li='); ?>
</ul>
<div class="fSearch">
<form id="searchform" action="<?php bloginfo('url'); ?>/" method="get" role="search">
<input id="s" type="text" name="s" value="type here &amp; press enter" onfocus="this.value=''" />
<input id="searchsubmit" class="hidden" type="submit" value=""/>
</form>
</div>
<br clear="all" />
</div>

Cara kedua ini tergantung themes yang digunakan, akan tetapi cukup perhatikan kode "<div>" tanpa tanda petik dan kode yang bertuliskan "Home"
Selamat mencoba. Jika artikel ini dirasa bermanfaat tinggalkan komentar teman-teman sekalian, dan jika ada kekurangan pada artikel ini mohon masukan para master-master blog.