Cara Menyesuaikan Menu WordPress

Cara Menyesuaikan Menu WordPress – Tema yang Anda pilih untuk mewakili situs web Anda sering kali memiliki kontrol di penyesuai WordPress yang memungkinkan Anda mendesain menu utama dan header sesuai keinginan Anda. Namun terkadang kontrol ini tidak menyediakan semua yang Anda butuhkan untuk benar-benar membuat menu Anda menonjol.

Berikut adalah beberapa tips dan trik yang dapat diterapkan untuk membuat menu utama Anda terlihat luar biasa.

Menampilkan menu Anda dalam format dropdown tradisional adalah fitur bawaan WordPress. Hampir setiap tema akan sesuai dengan fitur tarik-turun, memungkinkan Anda memberi pengguna akhir Anda sistem navigasi yang mudah dipahami yang membantu mereka menemukan apa yang mereka cari dengan cepat.

Cara Menyesuaikan Menu WordPress

Di backend WordPress di bawah Appearance > Menus, Anda dapat menambahkan halaman yang dipilih dari kiri ke menu utama Anda di sebelah kanan. Agar halaman yang dipilih ditampilkan dalam dropdown di bawah halaman lain yang dipilih, cukup pindahkan halaman itu dengan menyeret dan menjatuhkannya sedikit ke kanan di bawah item yang dipilih.

Anda dapat membuat dropdown Anda lebih dalam dengan menambahkan item lain di bawah dropdown pertama, membuat indentasi item ini juga, untuk meningkatkan hierarki. Contoh di atas akan terlihat seperti ini di situs langsung:

Mengarahkan kursor ke Sumberdaya turun ke set item menu berikutnya, dan mengarahkan kursor ke item pertama menampilkan set item berikutnya di sebelah kiri.

**Catatan: Tampilan dropdown Anda bergantung pada tema.**

Menambahkan Ikon Font Keren ke menu Anda mudah dilakukan dan membuat menu Anda menonjol!

Pertama, unduh dan aktifkan Kode pendek di Menu plugin di pengelola plugin Anda.

Kemudian unduh dan aktifkan Font Mengagumkan pengaya.

Sekarang saatnya untuk mencari ikon yang ingin Anda tampilkan di menu Anda. Pergi ke Font Situs web yang luar biasa dan cari ikon yang sesuai.

Klik pada ikon yang Anda suka dan catat nama ikon ini. Sekarang, kembali ke pengaturan menu Anda, tambahkan kode pendek ikon dari plugin Font Awesome ke label navigasi untuk item menu apa pun.

Anda dapat menambahkan kode pendek sebelum atau sesudah nama item menu. Ganti kode di bawah ini dengan nama halaman dan nama ikon Anda.

[icon name=”your-icon-name-here”] About

Jangan lupa untuk menyimpan!

Menu lengket menempel di bagian atas halaman saat pengguna akhir menggulir. Hal ini membuat navigasi di ujung jari pengguna. Banyak tema akan menyediakan header lengket sebagai opsi, tetapi jika opsi itu tidak tersedia, Anda dapat membuat menu Anda lengket dengan beberapa CSS khusus.

Di dasbor Anda, buka Appearance > Customize. Klik “CSS tambahan” dan tambahkan kode berikut:

#main-menu 
   z-index:199;
   margin:0 auto;
   border-bottom:1px solid #000000;
   width:100%;
   position:fixed;
   top:0;
   left:0;
   right:0;

Ganti #main-menu dengan kelas CSS dari menu navigasi Anda yang akan berbeda tergantung pada tema Anda. Anda dapat menemukan kelas dengan mengarahkan kursor ke menu Anda dan mengklik kanan pada “Periksa”.

Jika Anda lebih suka tidak berurusan dengan CSS, Anda cukup menginstal plugin Menu Lengket Saya untuk opsi plug-and-play yang mudah untuk membuat menu lengket.

Contoh paling umum dari hal ini adalah menampilkan tab Masuk dan/atau Gabung Sekarang di menu untuk pengguna yang tidak masuk, dan tab Keluar untuk pengguna yang masuk sementara tab Masuk atau Gabung Sekarang disembunyikan untuk pengguna yang masuk. -di pengguna.

Di Manajer Plugin dasbor, unduh dan aktifkan Menu Pengguna – Visibilitas Menu Nav.

Kembali ke pengaturan menu Anda, Anda dapat membuat Tombol Masuk, Bergabung Sekarang, dan Keluar. Anda mungkin memiliki halaman terpisah untuk login pengguna dan untuk bergabung. Untuk Tombol Keluar, buat item menu menggunakan pilihan “Tautan Khusus”.

Tautan logout WordPress universal untuk ditambahkan adalah:

http://yourdomain.com/wp-login.php?action=logout

Pastikan Anda menggunakan nama domain dan versi http yang benar (http vs https).

Setelah tab ini dibuat, Anda dapat menyembunyikan atau menampilkannya berdasarkan status pengguna. Di bawah “Siapa yang Dapat Melihat Tautan Ini?”, pilih Pengguna yang Masuk atau Keluar.

Situs keanggotaan dapat menyembunyikan atau menampilkan item menu berdasarkan peran pengguna untuk opsi visibilitas lebih lanjut.

Tambahkan Efek Arahkan kursor

Efek hover dapat mengubah teks tab item menu atau warna latar belakang – atau keduanya! Yang perlu Anda lakukan adalah menambahkan beberapa custom css di Appearance > Customize > Custom CSS. Berikut ini contohnya:

#main-menu  li.menu-item a:hover    background-color:#ffe6f2;   color:#cc0066;   border-radius:5px;   border: 1px solid #cc0066;   padding-top: 20px;   padding-bottom: 20px;   padding-right: 10px;   padding-left: 10px;   Margin-bottom: 10px; 

Ganti #main-menu dengan kelas CSS dari menu navigasi Anda yang akan berbeda tergantung pada tema Anda. Anda dapat menemukan kelas dengan mengarahkan kursor ke menu Anda dan mengklik kanan pada “Periksa”.

Contoh di atas akan menghasilkan efek hover ini saat mengarahkan kursor ke tab Portofolio.

Anda dapat dengan mudah membuat CSS khusus untuk satu item menu dengan menetapkan item menu tersebut sebagai kelas CSS. Dalam pengaturan menu, klik Opsi Layar di kanan atas layar.

Centang kotak untuk Kelas CSS yang tidak dicentang secara default. Kemudian simpan pengaturan menu.

Sekarang akan ada kotak teks baru di bawah setiap item menu. Di sini, Anda dapat menetapkan kelas CSS yang berbeda untuk setiap item menu. Dalam contoh ini, kami menambahkan kelas “menu layanan” ke item menu “Layanan”.

Sekarang Anda dapat menambahkan CSS khusus Anda ke bagian Appearance > Customize > Custom CSS. Saya dapat menggunakan CSS yang sama di atas menggunakan kelas ini.

**Catatan: Anda tidak perlu menambahkan li.menu-item sebagai pengenal karena Anda telah menetapkan kelas individual.**

.services_menu a:hover 
  background-color:#ffe6f2;
  color:#cc0066;
  border-radius:5px;
  border: 1px solid #cc0066;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 10px;
  padding-left: 10px;
  Margin-bottom: 10px;

Ini menghasilkan hasil yang sama seperti di atas, tetapi hanya untuk item menu ini.

Kesimpulan

Kami harap Anda menikmati kompilasi tips dan trik unik ini untuk menyesuaikan menu WordPress Anda. Sudahkah Anda mencoba beberapa ide ini? Apakah Anda memiliki trik favorit lain yang ingin Anda terapkan? Beri tahu kami di komentar di bawah!

Leave a Comment