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.
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.
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.
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.
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.
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.
|
1 |
<?php wp_nav_menu(); ?> |
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.
|
1 2 3 4 5 6 |
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'primary-menu', ) ); ?> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// container class #header .primary-menu{} // container class first unordered list #header .primary-menu ul {} //unordered list within an unordered list #header .primary-menu ul ul {} // each navigation item #header .primary-menu li {} // each navigation item anchor #header .primary-menu li a {} // unordered list if there is drop down items #header .primary-menu li ul {} // each drop down navigation item #header .primary-menu li li {} // each drap down navigation item anchor #header .primary-menu li li a {} |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// Class for Current Page .current_page_item{} // Class for Current Category .current-cat{} // Class for any other current Menu Item .current-menu-item{} // Class for a Category .menu-item-type-taxonomy{} // Class for Post types .menu-item-type-post_type{} // Class for any custom links .menu-item-type-custom{} // Class for the home Link .menu-item-home{} |
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.
Setelah memberi centang, kamu akan melihat bahwa bidang tambahan akan muncul ketika mengedit setiap item 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.
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.
|
1 2 3 |
.ast-main-header-wrap li.menu-item a { color:#F3950D; } |
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.
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.
|
1 2 3 |
.ast-main-header-wrap { background-color:#000; } |
Berikut adalah tampilan di website demo kami.
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”.
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.
Kemudian kamu dapat menggunakan class CSS ini untuk menata item menu tertentu secara berbeda.
|
1 2 3 4 |
.contact-us { background-color: #ff0099; border-radius:5px; } |
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.
