Fajar Herianto

Membuat Dan Memasang Navbar Di WordPress


Navbar pada suatu blog merupakan salah satu komponen penting, khususnya dalam hal kegunaan dan daya tarik visual. Navigasi Bar atau disingkat dengan Navbar adalah bagian dari halaman blog yang berisi link hypertext yang berfungsi untuk menavigasi atau menghubungkan antara halaman-halaman subuah blog secara mudah dan cepat. Navbar biasanya terletak tepat dibawah header blog.
Berikut ini adalah contoh navbar pada blog:

Navbar pada WordPress ada dua tipe,

Yang pertama adalah Primary Navbar, navbar ini biasanya letaknya paling atas (diatas Secondary Navbar) dan biasanya menampilkan berdasarkan Pages yang kita buat.
Yang kedua adalah Secondary Navbar, navbar kedua yang letaknya tepat dibawah Primary Navbar dan biasanya menampilkan berdasarkan Kategori yang kita buat.
Tidak semua tema WordPress memiliki dua buah tipe navbar sekaligus, kebanyakan dari tema itu hanya memiliki Primary Navbar. Namun juga ada beberapa tema yang tidak mendukung adanya navbar ini. Lantas bagaimana untuk membuat navbar pada tema yang tidak mendukung navbar? Jawabannya kita bisa membuatnya secara manual.
Manual disini kita tidak harus membuat navbar dengan bahasa pemograman yang membingungkan (karna WordPress memang tidak mengijinkan itu) :lol: namun WordPress telah menyediakan fitur “Menus” yang dapat digunakan membuat navbar secara mudah.
Saya akan menjelaskan bagaimana cara membuat navbar dengan fitur Menus. Cara ini berhasil merubah default navbar yang ada pada tema Enterprise sesuai kehendak Kita. Tidak lagi menampilkan navbar berdasarkan Pages dan Kategori lagi, namun bisa menampilkan berdasarkan Single Posts dan link dari luar blog Kita. Semoga cara ini juga berlaku untuk tema WordPress yang lainnya pula.

Untuk Memulai Membuat Navbar.

  1. Tentu saja Anda login dulu ke dashboard WordPress Anda.
  2. Pada sisi kiri halaman Dashboard klik [Appearance] > [Menus].
  3. Maka akan terbuka halaman Menus, untuk segera memulai membuat navbar silahkan cari menu seperti yang terlihat pada screenshot dibawah.
  4. Kemudian berilah nama navbar pada kolom “Menu Name“, pemberian nama ini nantinya akan digunakan sebagai ID navbar. Sebagai contoh berilah nama navbar dengan “My Custom Menu“, sama seperti screenshot diatas.
  5. Anda diperbolehkan membuat lebih dari satu ID Navbar dengan meng-klik tanda [ + ].
    Add More Menus
  6. Setelah selesai klik tombol [Create Menu].
Pada tahap ini pembuatan navbar baru setengahnya, dan selanjutnya kita akan mengisinya dengan link-link atau menu yang nantinya akan bisa tampil berderet (horizontal) dan dropdown di navbar.

Untuk membuat navbar berdasarkan Pages;

  1. Masih pada halaman Menus, cari menu “Pages” seperti terlihat pada screenshot dibawah.
    Menu Editor Select Pages
    Didalam menu Pages akan terlihat daftar pages yang telah anda buat. Jika tidak ada Saya sarankan untuk membuat Pages, silahkan baca disini.
  2. Silahkan pilih Pages yang ingin Anda tampilkan pada navbar dengan cara memberi tanda centang [ √ ].
  3. Setelah selesai klik tombol [Add to Menu].

Untuk membuat navbar berdasarkan Kategori;

  1. Masih pada halaman Menus, cari menu “Categories” seperti terlihat pada screenshot dibawah.
    Menu Editor Select Categories
    Didalam menu Categories akan terlihat daftar kategori yang telah anda buat. Jika tidak ada Saya sarankan untuk membuat kategori, silahkan baca disini.
  2. Silahkan pilih Kategori yang ingin Anda tampilkan pada navbar dengan cara memberi tanda centang [ √ ].
  3. Setelah selesai klik tombol [Add to Menu].

Untuk membuat navbar dengan link sendiri;

  1. Masih pada halaman Menus, cari menu “Custom Links” seperti terlihat pada screenshot dibawah.
    Add Custom Link Control
    a. Pada kolom [URL], isikan link yang Anda kehendaki.
    b. Pada menu [Label], tulis judul untuk link yang Anda isi tadi.
  2. Setelah selesai klik tombol [Add to Menu].

Membuat Sub Menu Navbar (dropdown navbar);

  1. Untuk membuat sub menu pada navbar, silahkan geser salah satu item ke samping kanan. Maka item tersebut akan meng-induk pada item diatasnya dan menjadikan item tersebut sub menu. Dan begitu seterusnya.
  2. Dibawah adalah tampilan dari sub menu navbar saat diklik.
    Menu Final Result
  3. Terlihat diatas bahwa menu “Ubuntu – Free OS!” menginduk pada menu “Tech“.

Untuk Menampilkan Navbar Pada Halaman Blog.

Hal terpenting sekaligus final dari membuat navbar adalah menampilkannya pada halaman blog. Dan berikut caranya;
  1. Masih pada halaman Menus, cari menu “Theme Locations” seperti terlihat pada screenshot dibawah.
  2. Pada menu drop down “Primary Navigation” atau “Primary Menu“, pilih nama navbar yang telah Kita buat tadi, yaitu “My Custom Menu“. Jika Anda membuat lebih dari satu nama navbar, nama itu bisa Anda pilih pada menu drop down “Secondary Navigations” atau “Secondary Menu“.
  3. Kemudian klik tombol [Save].
Silahkan cek halaman blog Anda, apakah navbar telah tampil atau belum. Jika berkali-kali Anda gagal menggunakan cara diatas, berarti masalahnya terdapat pada tema yang Anda miliki. Untuk mengatasinya, silahkan ganti tema yang mendukung navbar. Bisa Anda baca disini.
Contoh navbar di blog WordPress.com bisa dilihat disini.

Posting Komentar

Fajar Herianto

{facebook#https://www.facebook.com/fajarcintalia} {twitter#https://twitter.com/HeriantoFajar} {google-plus#https://plus.google.com/u/0/118173459679605761698/posts} {youtube#https://www.youtube.com/user/aplikasiterunik} {instagram#https://www.instagram.com/aplikasiterunik/}

Formulir Kontak

Nama

Email *

Pesan *

Diberdayakan oleh Blogger.
Javascript DisablePlease Enable Javascript To See All Widget