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
- Buka file
header.php
yang ada di folder theme yang digunakan (default atau iphone). - Cari kode berikut ini :
<div id="header"> <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1> <p><?php bloginfo('description'); ?></p> </div>
- 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.
- 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 }
- Tambahkan kode CSS tersebut di file
header.php
, tepatnya sebelum penutup tag</style>
. - 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>
- 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.
makasih gan, sangat membantu websitenya :)
Reply
Makasih infonya Mas :D
sangat bermanfaat.
Reply
wah.. keren nih tutorialnya.. baru nemu di sini.. makasih infonya mas..
Reply
Tambahkan kode CSS tersebut di
file header.php , tepatnya
sebelum penutup tag
nah, yang ini gimana caranya Mas ? Cz di plugin mobile press themenya nggak ada tag itu. Saya pake mobilepress 1.2.1
Reply
Terima kasih mas bantuannya, sudah berhasil di website kantor saya….
Reply
kang alwi kok di coba ama saya ga bekerja ya……
Reply
Waahh..
Mantap sob :-D
Reply
mantab gan , thanks buat sharenya :)
Reply
mantap mas, bisa saya terapkan :D
Reply