Baca Juga :  Belajar Membuat Website Menggunakan Wordpress Part 1

Cara Membuat Style Menu Navigasi WordPress

2 1,928

Apakah kamu ingin menata menu navigasi WordPress kamu untuk mengubah warna atau penampilan mereka? Sementara tema WordPress kamu menangani tampilan menu navigasi kamu, Kamu dapat dengan mudah menyesuaikannya menggunakan CSS untuk memenuhi kebutuhan kamu. Pada artikel ini, kami akan menunjukkan cara menu navigasi WordPress di situs kamu.

Kami akan menunjukkan dua metode yang berbeda. Metode pertama adalah untuk pemula karena menggunakan plugin dan tidak memerlukan pengetahuan kode. Metode kedua adalah untuk pengguna DIY menengah yang lebih suka menggunakan kode CSS daripada plugin.

Metode 1: Styling WordPress Navigation Menus Menggunakan Plugin

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

Saat itulah plugin styling WordPress sangat berguna. Ini menghemat kamu dari mengedit file tema atau menulis kode apapun.

Pertama yang perlu kamu lakukan adalah menginstal dan mengaktifkan plugin CSS Hero. Untuk lebih jelasnya, lihat panduan langkah demi langkah tentang cara memasang plugin WordPress.

CSS Hero adalah plugin WordPress premium yang memungkinkan kamu mendesain tema WordPress kamu sendiri tanpa menulis satu baris kode (Tanpa HTML atau CSS diperlukan). Lihat review CSS Hero kami untuk mempelajari lebih lanjut.

Setelah aktivasi, kamu akan diarahkan untuk mendapatkan CSS Hero License Key kamu. Cukup ikuti petunjuk di layar, dan kamu akan diarahkan kembali ke situs kamu dalam beberapa klik.

Selanjutnya, kamu perlu mengklik tombol Hero CSS di toolbar admin WordPress kamu.

CSS Hero menawarkan editor WYSIWYG (Apa yang kamu lihat adalah apa yang kamu dapatkan). Mengklik tombol akan membawa kamu ke situs web kamu dengan toolbar CSS Hero yang mengambang yang terlihat di layar.

Kamu perlu mengklik ikon biru di bagian atas untuk mulai mengedit.

Setelah kamu mengklik ikon biru, bawalah mouse ke menu navigasi kamu , dan CSS Hero akan menyorotinya dengan menunjukkan batas di sekitarnya. Saat kamu mengeklik menu navigasi yang disorot, ini akan menunjukkan item yang dapat kamu edit.

Pada gambar di atas, itu menunjukkan kepada kita wadah menu navigasi atas. Mari kita asumsikan kita ingin mengubah warna latar belakang menu navigasi kita. Dalam hal ini, kita akan memilih navigasi atas yang mempengaruhi keseluruhan menu kita.

CSS Hero sekarang akan menampilkan berbagai properti yang dapat kamu edit seperti teks, latar belakang, perbatasan, margin, padding, dll.

Kamu bisa mengklik properti yang ingin kamu ubah. CSS Hero akan menunjukkan antarmuka sederhana di mana kamu dapat membuat perubahan kamu.

Pada gambar di atas, kami memilih latar belakang, dan ini menunjukkan antarmuka yang bagus untuk memilih warna latar belakang, gradien, gambar, dan banyak lagi.

Saat kamu membuat perubahan, kamu akan dapat melihat mereka tinggal di pratinjau tema.

Setelah kamu puas dengan perubahannya, klik tombol simpan di CSS Hero toolbar untuk menyimpan perubahan kamu .

Hal terbaik tentang penggunaan metode ini adalah kamu dapat dengan mudah membatalkan perubahan yang kamu buat. Pahlawan CSS menyimpan riwayat lengkap semua perubahan kamu , dan kamu dapat beralih antara perubahan tersebut.

Metode 2: Menu WordPress Navigasi Secara Manual

Metode ini mengharuskan kamu menambahkan CSS secara manual dan dimaksudkan untuk pengguna perantara.

Menu navigasi WordPress ditampilkan dalam daftar unordered (bulleted list).

Biasanya jika kamu menggunakan tag menu default WordPress, maka akan muncul daftar tanpa kelas CSS yang terkait dengannya.

<?php wp_nav_menu(); ?>

Daftar unordered kamu akan diberi nama kelas ‘menu’ dengan setiap item daftar yang memiliki kelas CSS-nya sendiri.

Ini mungkin bekerja jika kamu hanya memiliki satu lokasi menu. Namun, sebagian besar tema memiliki beberapa lokasi di mana kamu dapat menampilkan menu navigasi.

Hanya menggunakan kelas CSS standar dapat menyebabkan konflik dengan menu di lokasi lain.

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

<?php
 wp_nav_menu( array(
 'theme_location' => 'primary',
 'menu_class' => 'primary-menu',
 ) );
?>

Kode ini memberitahu WordPress bahwa di sinilah tema menampilkan menu utama. Ini juga menambahkan menu utama kelas CSS ke menu navigasi.

Sekarang kamu bisa menata menu navigasi kamu menggunakan struktur CSS ini.

// 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 harus mengganti #header dengan kelas CSS kontainer yang digunakan oleh menu navigasi kamu.

Struktur ini akan membantu kamu benar-benar mengubah tampilan menu navigasi kamu.

Namun, ada kelas CSS yang dihasilkan WordPress lainnya yang ditambahkan secara otomatis ke setiap menu dan item menu. Kelas-kelas ini memungkinkan kamu untuk menyesuaikan menu navigasi kamu lebih jauh lagi.

// 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 menambahkan kelas CSS kustom kamu sendiri ke item menu individual.

kamu dapat menggunakan fitur ini untuk menu item gaya, seperti menambahkan ikon gambar dengan menu kamu atau hanya dengan mengubah warna untuk menyorot item menu.

Head over to Appearance » Menus di admin WordPress kamu dan klik pada tombol Screen Options.

Setelah mencentang kotak itu, kamu akan melihat bidang tambahan ditambahkan saat kamu mengedit setiap item menu individual.

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

Contoh Menu Navigasi Styling di WordPress

Tema WordPress yang berbeda mungkin menggunakan pilihan styling yang berbeda, kelas CSS, dan bahkan JavaScript untuk membuat menu navigasi. Ini memberi kamu banyak pilihan untuk mengubah gaya dan menyesuaikan menu navigasi kamu untuk memenuhi kebutuhan kamu sendiri.

Alat pemeriksaan di browser web kamu akan menjadi teman terbaik kamu saat mengetahui kelas CSS mana yang akan berubah. Jika kamu belum pernah menggunakannya sebelumnya, lihat panduan kami tentang cara menggunakan alat pemeriksaan untuk menyesuaikan tema WordPress.

Pada dasarnya, kamu hanya perlu mengarahkan kursor ke elemen yang ingin kamu modifikasi, klik kanan dan kemudian pilih Inspect tool dari menu browser.

Yang sedang berkata, mari kita lihat beberapa contoh nyata dari styling menu navigasi di WordPress.

1. Bagaimana Mengubah Warna Font di Menu Navigasi WordPress

Berikut adalah contoh CSS khusus yang dapat kamu tambahkan ke tema kamu untuk mengubah warna font menu navigasi.

#top-menu li.menu-item a {
color:#ff0000;
} 

Dalam contoh ini, # top-menu adalah ID yang ditugaskan ke daftar unordered yang menampilkan menu navigasi kita. Kamu perlu menggunakan alat periksa untuk mengetahui ID yang digunakan oleh tema kamu.

Baca Juga :  Semua Properti Border Dalam Satu Deklarasi

2. Bagaimana Mengubah Warna Latar Belakang Menu Navigasi Bar

Pertama, kamu harus mencari tahu ID CSS atau kelas yang digunakan oleh tema kamu untuk menu navigasi seputar penampung.

Setelah itu kamu bisa menggunakan CSS ubahsuaian berikut untuk mengganti warna latar belakang menu navigasi bar.

.navigation-top { 
background-color:#000; 
}

Begini tampilannya di situs demo kami.

3. Bagaimana Mengubah Warna Latar Belakang Item Menu Tunggal

Kamu mungkin telah memperhatikan bahwa banyak situs web menggunakan warna latar belakang yang berbeda untuk tautan terpenting di menu navigasi mereka. Tautan ini bisa berupa tombol login, sign up, contact, atau buy. Dengan memberikan warna yang berbeda, itu membuat link lebih terlihat.

Untuk mencapai hal ini, kita akan menambahkan kelas CSS khusus ke menu item yang kita inginkan sorot dengan warna background yang berbeda.

Head over to Appearance » Menus dan klik pada tombol Screen Options di sudut kanan atas layar. Ini akan memunculkan menu terbang di mana kamu perlu mencentang kotak di samping opsi ‘kelas CSS’.

Setelah itu kamu perlu menggulir ke bawah ke item menu yang ingin kamu ubah dan klik untuk memperluasnya. Kamu akan melihat opsi baru untuk menambahkan kelas CSS khusus kamu.

Sekarang kamu bisa menggunakan kelas CSS ini untuk memberi gaya pada item menu tertentu secara berbeda.

.contact-us { 
background-color: #ff0099;
border-radius:5px;
}

Berikut adalah bagaimana tampilannya di situs uji kami.

4. Menambahkan Efek Hover ke Menu Navigasi WordPress

Apakah kamu ingin item menu kamu berubah warna pada mouse-over? Trik CSS khusus ini membuat menu navigasi kamu terlihat lebih interaktif.
Cukup tambahkan CSS ubahsuaian berikut ke tema kamu.

#top-menu li.menu-item a:hover {
background-color:#fff;
color:#666;
border-radius:5px;
} 

Dalam contoh ini, # top-menu adalah CSS ID yang digunakan oleh tema kamu untuk daftar menu navigasi unordered.

Begini cara ini terlihat di situs pengujian kami.

5. Buat Sticky Floating Navigation Menus di WordPress

Biasanya menu navigasi muncul di bagian atas dan hilang saat pengguna menggulir ke bawah. Menu navigasi mengambang lengket tetap di atas saat pengguna menggulir ke bawah.

Kamu dapat menambahkan kode CSS berikut ke tema kamu untuk membuat menu navigasi kamu lengket.

#top-menu {
 background:#2194af;
 height:60px;
 z-index:170;
 margin:0 auto;
 border-bottom:1px solid #dadada;
 width:100%;
 position:fixed;
 top:0;
 left:0;
 right:0;
 text-align: right;
 padding-right:30px
}

Cukup ganti # top-menu dengan CSS ID pada menu navigasi kamu.

Begini tampilannya di demo kami:

Untuk petunjuk lebih rinci dan metode alternatif, lihat panduan tentang cara membuat menu navigasi mengambang yang lengket di WordPress.

6. Buat Menu Navigasi Transparan di WordPress

Banyak situs menggunakan gambar latar belakang berukuran besar atau fullscreen dengan tombol ajakan bertindak. Menggunakan menu transparan membuat navigasi kamu berbaur dengan gambar. Hal ini membuat pengguna lebih cenderung berfokus pada ajakan bertindak kamu.

Cukup tambahkan contoh CSS berikut ke tema kamu untuk membuat menu navigasi kamu transparan.

#site-navigation { 
background-color:transparent; 
}

Begitulah tampilannya di situs demo kami.

Bergantung pada tema kamu, kamu mungkin perlu menyesuaikan posisi gambar header sehingga mencakup area di belakang menu transparan kamu.

Get real time updates directly on you device, subscribe now.

2 Comments
  1. Meio Rafli says

    bagaimana cara untuk menu ada di bagian bawah diatas tulisan diatas proudly by wordpress

    1. Infokoding says

      Buat tag html nya di footer.php

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.