Cara Menambahkan Menu Navigasi Di Theme MobilePress

Cara Menambahkan Menu Navigasi Di Theme MobilePress Di postingan terdahulu tentang Free WordPress Theme Mobile dan Cara membuat wordpress versi mobile dengan W3 Total Cache, cukup banyak pertanyaan tentang cara menambahkan menu navigasi seperti Home, About Me, Daftar Isi, Contact dan lain-lain di Theme MobilePress, contohnya seperti yang ada di blog ini untuk tampilan versi mobile.

Theme MobilePress sebenarnya secara default sudah menambahkan menu navigasi untuk link halaman seperti About Me, Daftar Isi, Contact dan lain-lain. Tapi menu navigasi tersebut hanya ditampilkan di halaman depan/home atau file index.php, dan penempatannnya ada di bawah judul postingan dan ditampilkan secara vertikal. Bagi sebagian blogger mungkin kurang suka dengan konfigurasi seperti itu, dan ingin menggantinya sesuai selera tapi tidak tahu caranya.

Cara menambahkan menu navigasi di Theme Mobile sebenarnya sangat mudah yakni hampir mirip seperti ketika kita menambahkan sebuah link dalam format HTML. Untuk detailnya ikuti panduan di bawah ini :

Cara Menambahkan Menu Navigasi Di Theme MobilePress

1. Buka file header.php yang ada di folder theme yang digunakan (default atau iphone).
2. Cari kode berikut ini :

   <div id="header">
   <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
   <p><?php bloginfo('description'); ?></p>
   </div>

3. Tambahkan kode untuk menampilkan menu navigasi halaman berikut, di bawah kode tersebut :

   <div><a href="http://domainanda.com">Home</a> | <a href="http://domainanda.com/about-me">About Me</a> | <a href="http://domainanda.com/daftar-isi">Daftar Isi</a> | <a href="http://domainanda.com/daftar-link">Daftar Link</a> | <a href="http://domainanda.com/contact">Contact</a></div>

   Catatan : Untuk URL halaman/nama halaman silahkan disesuaikan. Untuk pemisah antar menu/link bisa menggunakan tanda |, », ◊, ♦ atau sesuai selera.

4. Untuk mempermanis tampilannya bisa kita tambahkan sedikit kode CSS misalnya seperti ini :

   .menu-mobile {
   padding:8px;
   background:#e4f2fd;
   border-bottom:1px solid #c6d9e9;
   color:#2583ad;
   font-size: 125%}
   
   .menu-mobile a {
   color:#2583ad
   }

5. Tambahkan kode CSS tersebut di file header.php, tepatnya sebelum penutup tag </style>.
6. Buka file index.php, cari kode berikut ini :

   <div id="pageblock">
   
   <h2>Blog Pages</h2>
   
   </div>
   
   <div class="page">
   
   <ol id="pages">
   <?php wp_list_pages('title_li='); ?>
   </ol>
   
   </div>

7. Kemudian hapus kode tersebut

Gimana mudah kannn? Jangan lupa selalu lakukan backup file sebelum melakukan editing, untuk berjaga-jaga jika terjadi error karena kesalahan penulisan kode.