Apakah Anda ingin menyesuaikan menu navigasi WordPress Anda untuk mengubah warna atau tampilannya? Milikmu tema WordPress mengelola tampilan menu navigasi di situs Anda. Anda dapat dengan mudah menyesuaikannya menggunakan CSS untuk memenuhi kebutuhan Anda. Dalam tutorial ini, kami akan menunjukkan cara menata menu navigasi blog WordPress Anda.

to-the-style-to-menu de navigasi de wordpress

Metode 1: Cara menata menu WordPress Anda dengan sebuah plugin

Anda tema WordPress menggunakan CSS untuk gaya navigasi Anda. Banyak pemula tidak nyaman mengedit CSS Tema WordPress. Jadi saat itulah sebuah plugin untuk menata menu berguna, karena itu menyelamatkan Anda dari mengedit file tema atau menulis kode.

Pertama, yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin " CSS pahlawan ". Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami tentang cara menginstal a WordPress Plugin.

Pahlawan CSS adalah WordPress Plugin premium yang memungkinkan Anda mendesain sendiri tema WordPress tanpa menulis satu baris kode pun (Tidak ada HTML atau CSS diperlukan).

Setelah mengaktifkan plugin, Anda akan diarahkan ke halaman di mana Anda perlu memberikan lisensi Anda. Cukup ikuti petunjuk di layar, dan Anda akan dibawa ke situs Anda hanya dengan beberapa klik.

Sekarang Anda harus mengklik tombol pahlawan CSS Di toolbar WordPress Anda.

css-pahlawan-menu-wordpress

CSS Hero menawarkan editor WYSIWYG (apa yang Anda lihat adalah apa yang Anda dapatkan "Apa yang Anda Lihat Adalah Yang Anda Dapatkan"). Mengklik tombol ini akan membawa Anda ke situs web Anda dengan toolbar mengambang CSS Hero di sebelah kanan.

bar alat-css-pahlawan

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

Gerakkan mouse Anda ke menu navigasi Anda dan CSS Hero akan menyorotnya dengan menampilkan batas-batasnya. Ketika Anda mengklik pada menu navigasi yang disorot, itu akan menunjukkan kepada Anda berbagai item yang dapat Anda edit.

Sesuaikan-a-menu-dengan-css-pahlawan

Pada gambar di atas, Anda dapat melihat item menu, menu navigasi, dan wadah menu navigasi, dll.

Misalkan kita ingin mengubah warna teks semua item pada menu navigasi. Dalam hal ini, kita akan memilih menu navigasi yang menyentuh seluruh menu.

CSS Hero sekarang akan menunjukkan kepada Anda berbagai properti yang dapat Anda ubah seperti teks, warna latar belakang, batas, margin, padding, dll.

css-properti-pahlawan

Anda dapat mengklik properti yang ingin Anda edit. CSS Hero akan memberi Anda antarmuka sederhana di mana Anda dapat melakukan perubahan.

mengedit-a-properti-css-dengan-css-pahlawan

Pada tangkapan layar di atas, kami memilih teks, dan itu menunjukkan kepada kami antarmuka yang bagus untuk memilih font, mengubah warna teks, ukuran, dan properti lainnya.

Saat Anda melakukan perubahan, Anda akan memiliki pratinjau langsung dari hasil akhir.

PREVIEW-to-live-css-pahlawan

Setelah Anda puas dengan perubahannya, klik tombol "Simpan" di " pahlawan CSS Untuk menyimpan perubahan Anda.

Bagian terbaik dari metode ini adalah Anda dapat dengan mudah membatalkan perubahan yang Anda buat. Pahlawan CSS menyimpan riwayat lengkap dari semua perubahan Anda, dan Anda bisa datang dan pergi di antara perubahan ini.

Metode dua: Cara mengubah gaya menu navigasi Anda secara manual

Metode ini mengharuskan Anda untuk mengedit file tema WordPress Anda. Anda sebaiknya hanya menggunakannya jika Anda seorang pengembang dan memiliki pengetahuan tentang pembuatan tema WordPress.

Cara terbaik untuk melakukannya adalah dengan menyesuaikan tema WordPress Anda dengan membuat tema anak. Jika Anda hanya mengubah CSS, maka saya mengundang Anda untuk membaca tutorial kami di cara menambahkan kode CSS khusus di WordPress.

Menu navigasi WordPress ditampilkan dalam daftar yang tidak diurutkan (daftar berpoin).

Jika Anda menggunakan tag php berikut, itu akan menampilkan daftar tanpa kelas CSS yang terkait dengannya.


Daftar berpoin Anda akan memiliki "menu" dari nama kelas dengan setiap item daftar memiliki kelas CSS sendiri.

Ini bisa berfungsi jika Anda memiliki satu lokasi menu. Namun, sebagian besar tema memiliki beberapa tempat untuk menampilkan menu navigasi.

Hanya menggunakan kelas CSS default dapat menyebabkan konflik dengan menu di tempat lain.

Inilah alasan mengapa Anda perlu mendefinisikan kelas CSS dan lokasi menu. Kemungkinan tema WordPress Anda sudah melakukan ini dengan menambahkan menu navigasi menggunakan kode seperti ini:

'primary', 'menu_class' => 'primary-menu',)); ?>

Kode ini memberi tahu WordPress bahwa ini adalah tempat tema menampilkan menu utama. Itu juga menambahkan kelas CSS " menu utama Di menu navigasi.

Sekarang Anda menemukan gaya menu navigasi Anda menggunakan struktur CSS.

#header menu .primary {} // class wadah #header .primary menu ul {} // kelas kontainer pertama daftar unordered #header menu .primary ul ul {} // daftar unordered dalam daftar unordered #header .primary -menu li {} // Setiap item navigasi #header .primary menu li {} // Setiap item navigasi # header li anchor menu .primary ul {} // daftar unordered jika ada drop down item #header .primary -menu li li {} // Setiap drop down item navigasi # header li menu li .primary telah {} // Setiap lembar anchor bawah item navigasi

Ganti #header dengan kelas penampung atau " ID Digunakan oleh tema WordPress Anda.

Struktur ini akan membantu Anda sepenuhnya mengubah tampilan menu navigasi Anda.

Itu saja untuk tutorial ini. Saya harap ini akan memungkinkan Anda untuk menyesuaikan menu blog WordPress Anda. Jangan ragu untuk membagikannya dengan teman Anda di jejaring sosial favorit Anda.