Home » Optimasi Wordpress » Cara Menambahkan Menu Navigasi Di Theme MobilePress

Cara Menambahkan Menu Navigasi Di Theme MobilePress

5 Aug. 201219 comments
Cara Menambahkan Menu Navigasi Di Theme MobilePress

Menu navigasi theme mobilpressCara 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.

Mudah-mudahan artikel tentang Cara Menambahkan Menu Navigasi Di Theme MobilePress ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Cara Menghapus Logo WP Dan Menu Di Admin Bar
  2. Cara Menghapus Post Revision Dari Database
  3. Optimasi File wp-config.php
  4. Tips Menghemat Quota Bandwidth
  5. Membuat Anti Spam Dengan WP-reCAPTCHA
  6. Cara Mencegah atau Menghalau Spambot
  7. Menampilkan Query Database WordPress
  8. Cara Mempercepat Loading Blog WordPress (Minimize SQL Queries)
  9. Cara Membuat Spoiler
  10. Pasang Quiz Anti Spam Tanpa Plugin
  1. 14-11-2012 at 21:25 | #1

    makasih gan, sangat membantu websitenya :)

    Reply

  2. 2-2-2013 at 06:25 | #2

    Makasih infonya Mas :D
    sangat bermanfaat.

    Reply

  3. 7-2-2013 at 00:07 | #3

    wah.. keren nih tutorialnya.. baru nemu di sini.. makasih infonya mas..

    Reply

  4. 19-3-2013 at 05:10 | #4

    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

  5. 2-4-2013 at 09:29 | #5

    Terima kasih mas bantuannya, sudah berhasil di website kantor saya….

    Reply

  6. 25-5-2013 at 10:44 | #6

    kang alwi kok di coba ama saya ga bekerja ya……

    Reply

  7. 10-11-2013 at 18:41 | #7

    Waahh..
    Mantap sob :-D

    Reply

  8. 7-12-2015 at 07:34 | #8

    mantab gan , thanks buat sharenya :)

    Reply

  9. 28-9-2016 at 23:15 | #9

    mantap mas, bisa saya terapkan :D

    Reply

Comment pages
1 22753
0+9=? (Wajib diisi)