Cara Menata Menu Navigasi WordPress

Cara Menata Menu Navigasi WordPress

Apakah kamu ingin menata menu navigasi situs WordPress seperti mengubah warna atau tampilannya? Jika iya, sekarang berada di halaman yang tepat.

Tema WordPress di buat oleh developer agar bisa menangani seluruh tampilan tema bahkan untuk menu navigasi. Tetapi kamu juga dapat dengan mudah menyesuikannya sendiri menggunakan CSS untuk memenuhi keinginan kamu.

Pada artikel ini, kami akan menunjukkan cara menata menu navigasi di situs WordPress.

Nantinya kami akan menunjukkan dua metode yang berbeda. Metode pertama sangat mudah karena kami menggunakan bantuan plugin sehingga tidak memerlukan kode apa pun. Dan metode kedua kami akan menggunakan kode CSS untuk menyesuaikan tampilan menu.

Metode 1: Mengubah Tampilan Menu Navigasi WordPress Menggunakan Plugin

Semua tema WordPress menggunakan CSS untuk menata menu navigasi. Banyak pemula yang tidak nyaman dengan mengedit file tema atau menulis kode CSS sendiri.

Saat itulah plugin styling WordPress sangat berguna. Hal ini sangat membantu karena pengguna tidak perlu mengedit file tema atau menulis kode apa pun.

Pertama yang harus kamu lakukan adalah menginstal dan mengaktifkan plugin CSS Hero. Untuk detail lebih lanjut, lihat panduan kami tentang cara install plugin WordPress.

CSS Hero adalah plugin WordPress premium yang memungkinkan pengguna untuk mendesain tema WordPress tanpa menggunakan kode sama sekali.

Setelah plugin di aktivasi, kamu perlu mengklik tombol Customize with CSS Hero di toolbar admin WordPress.

Customize With CSS Hero

CSS Hero menawarkan editor WYSIWYG (What you see is what you get). Kemudian kamu akan di arahkan ke tampilan website tetapi dengan beberapa menu di sebelah kiri yang dapat kamu gunakan untuk menyesuaikan tampilan situs.

Menu samping CSS Hero

Sekarang kamu bisa memilih bagian mana yang akan di edit dan CSS Hero akan menyorotnya dengan menunjukkan batas di sekitarnya. Saat kamu mengarahkan mouse ke menu navigasi, itu akan menunjukkan kepada kamu bagian item yang dapat di edit.

Class Primary Header

Pada gambar di atas, ketika kami mengarahkan mouse ke wadah menu navigasi itu akan menampilkan class CSS yang di gunakan. Ketika kami mengkliknya, class CSS tersebut akan muncul juga di atas menu sebelah kiri dari CSS Hero.

Karena kami memilih wadah dari menu navigasi, jadi kami akan mengubah warna background pada menu tersebut.

Pilih Background CSS Hero

Caranya, kamu tinggal memilih Background pada menu samping kiri CSS Hero. Atau, jika ingin kamu dapat melakukan perubahan lainnya seperti teks, border, margin, padding, dll.

Sekarang kamu bisa memilih warna yang di inginkan, dan akan melihat perubahannya langsung di pratinjau tema.

Pratinjau langsung dari perubahan CSS

Setelah kamu puas dengan perubahannya, klik tombol Save & Publish di bagian kiri bawah untuk penyimpan perubahan.

Hal yang sangat menguntungkan menggunakan metode ini adalah kamu dapat dengan mudah membatalkan perubahan apa pun yang sudah di buat. CSS Hero menyimpan riwayat lengkap semua perubahan, dan kamu dapat mengembalikan di antara perubahan tersebut.

Metode 2: Ubah Tampilan Menu Navigasi Situs WordPress Secara Manual

Metode ini mengharuskan kamu untuk menambahkan custom CSS secara manual, sangat di sarankan untuk pengguna yang sudah terbiasa dengan kode.

Menu navigasi WordPress di tampilkan dalam daftar yang tidak berurutan.

Biasanya jika kamu menggunakan tag menu default, maka itu akan menampilkan daftar tanpa class CSS yang terkait dengannya.

Nantinya unordered list ini akan memiliki nama class “menu” dengan setiap daftar item memiliki class CSS sendiri.

Hal ini akan berhasil jika kamu memiliki satu lokasi menu. Namun, kebanyakan tema saat ini memiliki beberapa menu navigasi di tempat yang berbeda. Sehingga menggunakan class CSS default dapat menyebabkan konflik dengan menu di lokasi lain.

Inilah sebabnya mengapa kamu perlu mendefinisikan class CSS dan lokasi menunya juga. Kemungkinan tema WordPress kamu sudah melakukannya dengan menambahkan menu navigasi menggunakan kode seperti ini.

Kode di atas akan memberi tahu WordPress tempat tema menampilkan menu utama. Kode tersebut juga menambahkan class CSS primary-menu ke menu navigasi.

Sekarang kamu dapat menata menu navigasi menggunakan struktur CSS ini.

Kamu perlu mengganti #header dengan kontainer class CSS yang di gunakan oleh menu navigasi.

Struktur ini akan membantu kamu sepenuhnya mengubah tampilan menu navigasi situs.

Namun, ada class CSS lain yang di hasilkan WordPress secara otomatis di tambahkan ke setiap menu dan item menu. Class ini memungkinkan kamu untuk menyesuaikan menu navigasi lebih lanjut.

WordPress juga memungkinkan kamu untuk menambahkan custom class CSS sendiri ke item menu individual.

Kamu dapat menggunakan fitur ini untuk menata item menu, seperti menambahkan ikon gambar atau hanya mengubah warna untuk menyorot item menu.

Caranya, buka halaman Appearance > Menus di dashboard admin WordPress dan klik tombol Screen Options di sudut kanan atas.

Tampilan screen options menu

Setelah memberi centang, kamu akan melihat bahwa bidang tambahan akan muncul ketika mengedit setiap item menu individual.

Tambahkan class css menu individual

Sekarang kamu dapat menggunakan class CSS ini di stylesheet untuk menambahkan custom CSS. Ini hanya akan mempengaruhi menu item dengan class CSS yang kamu tambahkan.

Contoh Menu Navigasi Styling di WordPress

Tema WordPress yang berbeda dapat menggunakan opsi styling yang berbeda, class CSS, dan bahkan JavaScript untuk membuat menu navigasi. Hal ini akan memberi kamu banyak pilihan untuk mengubah tampilan dan menyesuaikan menu navigasi untuk memenuhi kebutuhan kamu sendiri.

Kamu bisa menggunakan alat inspeksi di web browser untuk menemukan class CSS mana yang harus di ubah.

Pada dasarnya kamu hanya perlu mengarahkan kursor ke elemen yang ingin di ubah, kemudian klik kanan lalu pilih Inspect dari menu yang muncul.

Inspect di google chrome

Sekarang mari kita lihat beberapa contoh yang dapat kamu lakukan untuk mengubah tampilan menu navigasi di situs WordPress.

1. Mengubah Warna Font di Menu Navigasi WordPress

Berikut adalah contoh custom CSS yang dapat kamu gunakan untuk mengubah warna font di menu navigasi.

Pada kode di atas, .ast-main-header-wrap adalah class CSS yang membungkus unordered list menu navigasi situs, terkadang ini juga menggunakan ID yang di awali dengan tanda #. Maka dari itu kamu perlu menggunakan alat inspeksi untuk mengetahui class CSS yang di gunakan oleh tema.

Warna menu navigasi berubah orange

2. Cara Mengubah Background Menu Navigasi

Pertama kamu harus mengetahui ID atau class CSS yang di gunakan oleh tema untuk wadah menu navigasi.

Setelah ketemu, kamu dapat menggunakan custom CSS berikut untuk mengubah warna background menu navigasi.

Berikut adalah tampilan di website demo kami.

Ubah warna background menu navigasi

3. Cara Mengubah Warna Background Menu Tunggal

Kamu mungkin pernah melihat website yang menggunakan warna background berbeda untuk tautan penting di menu navigasi mereka. Tautan ini bisa berupa tombol login, signup, kontak, atau buy. Dengan menggunakan warna yang berbeda, itu bisa membuat tautan menjadi lebih terlihat.

Untuk melakukan ini, kami akan menambahkan custom class CSS ke item menu yang ingin kami tampilkan dengan warna background yang berbeda.

Buka Appearance > Menus dan klik tombol Screen Options di sudut kanan atas. Nantinya akan muncul menu popup, sekarang kamu hanya perlu mencentang pada “CSS Classes”.

Tampilan screen options menu

Setelah itu, kamu bisa menutup Screen Options tersebut dan menggulir ke bawah pada item menu. Kemudian klik item yang ingin di ubah untuk memperluasnya. Sekarang kamu akan melihat opsi baru untuk menambahkan custom class CSS.

Class contact us

Kemudian kamu dapat menggunakan class CSS ini untuk menata item menu tertentu secara berbeda.

Ubah background contact us

Di atas adalah beberapa hal yang dapat kamu lakukan ketika sudah mengetahui ID atau class CSS yang di gunakan oleh tema pada menu navigasi. Kamu bahkan bisa melakukan perubahan lebih dari itu seperti menambahkan efek hover, membuat sticky floating, dan membuatnya transparant.

Kami harap artikel ini membantu kamu mempelajari cara menata dan mengubah tampilan menu navigasi situs WordPress.

Semoga panduan di atas bermanfaat. Jika kamu memiliki pertanyaan tinggalkan pada kolom komentar di bawah.

28 Likes

Ingin berkontribusi?


Sekarang kamu sebagai pembaca juga bisa berkontribusi pada website ini dengan cara mengirimkan tulisan yang kamu buat, sebagai imbalan kamu akan mendapatkan reward sejumlah uang.


Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *