Halo! Seperti biasa, ada banyak hal yang terjadi dalam hidup saya, sehingga sangat sulit menemukan waktu untuk menulis blog. Kemarin kami membeli tiket ke Sri Lanka dan akan segera berangkat selama 4 bulan, datang dan berkunjung! Dan sekarang saya sedang mencari gaun pengantin terindah :))
Hari ini kita akan membahas cara membuat menu di WordPress, serta menambahkan blok ini di area khusus template.
Kami akan mempelajari cara menyesuaikan menu dan mengeditnya sesuai kebijaksanaan Anda.

Mengedit dan menyesuaikan menu di WordPress

Pertama, mari kita lihat fungsionalitas yang tersedia bagi kita di panel admin blog. Dalam templat baru yang kompatibel dengan versi terbaru WordPress, tampilan menunya cukup sederhana dan pengaturannya tidak terlalu sulit.

Setelah kita membuat tema anak yang dapat dimodifikasi tanpa mempengaruhi tema utama, kita akan menambahkan fungsi berikut ke file function.phpnya.

register_nav_menus(array("menu tambahan" => __("Menu Tambahan", "Nama Tema Anda")));

Jika Anda tidak membuat tema anak, tambahkan tema tersebut ke file fungsi utama tema Anda.

Fungsi ini memungkinkan kita untuk menambahkan menu tambahan WordPress ke dalam template kita dan akan membuat area lain untuk itu.

Setelah menambahkan, buka panel admin di “Kelola area”:

Area topik tambahan akan muncul dengan nama yang kita atur di fungsinya.

Klik “Gunakan menu baru” jika kita ingin mengubah bagian untuk area tambahan, atau pilih “Beranda”. Lalu masuk daerah baru bagian yang sama akan ditampilkan seperti di Menu Utama.

Dalam kasus kami, kami membuat menu baru bernama Tambahan:

Pilih area tema “Menu Tambahan” untuknya.

Tapi sekarang kita perlu menghubungkan area ini ke blok template. Misalnya kita perlu membuat menu tambahan di bawah header situs WordPress. Buka file header.php atau salin ke tema anak. Setelah tag body tambahkan yang berikut ini:

Mari kita lihat hasilnya:

Kami memiliki menu tambahan di atas header. Sekarang kita perlu mengatur gaya untuk itu, menyelaraskan item menjadi satu garis dan menurunkan blok di bawah header.

Kami membuat perubahan berikut pada file style.css:

warna latar belakang : #000 ;

/* warna latar belakang */ posisi : relatif ;

)

#additionalmenu nav ( lebar: 940px; /*container width */ margin: 0 auto; ) #additionalmenu li ( display: inline; padding: 10px; /* padding */ margin: 20px 0; ) #additionalmenu ( lebar: 100% ; atas: 420px; /* Jarak dari tepi atas */ warna latar: #000;

Mari kita lihat apa yang terjadi:

Tampilan menu yang kami buat masih jauh dari kata ideal, namun dengan perawatan yang tepat Anda bisa mewujudkannya menjadi bentuk yang sesuai dengan blog Anda.

Widget dan plugin untuk menambahkan menu di WordPress Saya mengundang Anda untuk menonton video tentang membuat menu di WordPress: Artikel tersebut menyebutkan widget Menu Kustom. Mari kita lihat lebih detail.

Ayo pergi"

Penampilan

"-"Widget", cari widget "Menu Kustom" dan seret ke area yang tersedia untuk tema Anda dan sesuai untuk blog:

Dalam kasus kami, blok menu telah ditambahkan ke sidebar. Untuk itu, kami memilih bagian dari blok Tambahan yang kami buat.

Oleh karena itu, di panel samping sebelah kanan kami akan menampilkan blok berikut:

Selain widget standar yang ada di dalam tema, ada juga banyak plugin tambahan yang dirancang untuk membuat berbagai jenis menu: vertikal, horizontal, drop-down, dll.

Mari kita lihat prinsip pengoperasiannya menggunakan sebuah contoh.

Setelah menginstal JQuery Slick Menu Widget, buka "Appearance" - "Widgets".

Yang baru yang kami pasang akan muncul di antara daftar widget yang tersedia. Pindahkan ke area yang dapat diakses, dalam kasus kami sidebar:

Mari perluas pengaturannya:

Pilih nama menu (bagian yang kita buat), Tab Teks - nama blok yang akan ditampilkan di situs, lokasi penempatan (pilih Kiri - di sebelah kiri), Offset - offset dari tepi atas di piksel, Kecepatan Animasi - kecepatan animasi (Cepat). Anda dapat memilih Menu Tutup Otomatis untuk menghilangkan blok secara otomatis. Dan pilih warna blok. Klik simpan dan lihat hasilnya:

Menu geser telah muncul di sisi kiri header. Saat Anda mengklik tab, tampilan bagian akan muncul:

Jika ditekan lagi, blok tersebut akan hilang lagi.

Ini hanyalah salah satu cara untuk menginstal, mengedit, dan menampilkan menu di WordPress.

Pilih cara yang paling cocok dan nyaman untuk membuat menu untuk blog WordPress Anda. Semoga beruntung!

Baru-baru ini, fitur seperti Mega Menu adalah domain eksklusif plugin dan tema premium. Namun hari ini, saya akan mempersembahkan kepada Anda, para pembaca yang budiman, dua plugin gratis yang memungkinkan Anda dengan cepat, mudah dan, tentu saja, sepenuhnya gratis, membuat menu navigasi yang kuat di situs web Anda, yang tidak kalah dengan yang berbayar. rekan-rekan.

Apa sih Mega Menu ini? Ya, sama saja, menu navigasi biasa yang mungkin pernah Anda temui dan kustomisasi lebih dari satu kali. Hanya saja, berbeda dengan fungsi standar, ada juga fitur tambahan untuk mengonfigurasi dan menampilkan elemen individual. Misalnya, menambahkan tidak hanya submenu vertikal, tetapi juga horizontal, menambahkan ikon dan gambar individual ke menu, pengaturan terperinci tampilan untuk semua item menu, dll. Semua ini ada di plugin kami yang dipertimbangkan hari ini.

Peluang bagus lainnya untuk menambahkan menu navigasi super keren ke situs Anda dengan plugin adalah Mega Menu oleh WooRockets.com. Instalasi dan aktivasi plugin adalah standar.

Plugin ini agak lebih sulit dipelajari, tetapi juga menawarkan lebih banyak kemungkinan dibandingkan pesaing yang dijelaskan di atas. Di sini, membuat menu sangat mirip dengan membuat halaman di Visual Composer standar.

Pergi ke bagian tersebut Menu besar WR di panel admin Anda dan klik Tambahkan Baru. Kita sampai ke sana lembaran baru untuk membuat menu baru. Mereka yang sudah pernah berurusan dengan komposer Drag & Drop akan langsung betah. Proses pembuatan menu tidak jauh berbeda dengan pembuatan halaman.

Pertama pastikan bahwa di bagian atas menu - Lokasi Menunya persis seperti yang Anda butuhkan. Atau klik Lokasi Rumah Tangga untuk memilih menu.

Klik - Tambahkan Elemen dan pilih di jendela pop-up jenis konten yang ingin Anda tambahkan ke menu. Di kiri atas, Anda dapat memilih dari opsi standar yang ditawarkan atau menambahkan widget WordPress.

Jika perlu, tambahkan baris yang dibagi menjadi kuantitas yang dibutuhkan kolom. Di sebelah kiri terdapat tab untuk menyeret item menu ke atas atau ke bawah, dan di sebelah kanan terdapat tab tempat Anda dapat mengaktifkan pengeditan atau penghapusan. Jangan lupa untuk menekan tombol biasa di sebelah kanan - Menerbitkan atau - Memperbarui untuk melestarikan hasil jerih payahnya.

Secara umum, teks, gambar, dan, jika diinginkan, widget apa pun dapat dengan mudah ditempatkan di menu baru Anda. Tampilan menu dapat diubah dengan mengklik tombol Penataan gaya atau masukkan tabel Anda di sebelahnya menggunakan tombol CSS khusus.

Singkatnya, suatu hal yang sangat fungsional. Bukan tanpa alasan penulis, selain plugin ini, juga memiliki: formulir kontak dan, tentu saja, komposer, yang tampaknya menjadi dasar dari plugin menu mega. Anda dapat melihat demo yang berfungsi dengan segala kemegahannya di sini.

Plugin hebat dan kuat yang dengannya Anda dapat membuat menu impian Anda secara praktis. Satu-satunya hal yang dapat sedikit menggelapkan kegembiraan pengguna adalah masalah kompatibilitas dengan tema yang berbeda. Sayangnya, sejauh yang saya ingat, masalah ini terkadang muncul pada plugin premium. Saya menguji kedua plugin pada tema standar dan tidak melihat adanya masalah atau bug. Saya berharap hal yang sama untuk Anda, teman-teman!

Waktu membaca: 8 menit. Diterbitkan 01.11.2016

Halo! Kami terus menganalisis yang paling menarik dan paling banyak plugin yang berguna untuk situs WordPress! Hari ini Anda akan belajar tentang plugin yang sangat berguna yang memungkinkan Anda membuat menu dropdown horizontal. Anda dapat memasukkan widget, teks, editor, foto, video, formulir, kode html apa pun ke dalam menu drop-down.

Anda akan dapat sepenuhnya menyesuaikan tampilan menu dan menyesuaikan menu drop-down. Anda dapat menambahkan hingga 8 kolom delapan kolom ke menu drop-down horizontal. Anda dapat menonaktifkan menu tarik-turun untuk perangkat seluler. Plugin yang sangat fleksibel, Anda dapat membuat menu Super!

Anda dapat menginstal plugin Super langsung dari panel admin WordPress. Masuk ke halaman: Plugins – Add New, masukkan nama plugin pada form pencarian, tekan Enter, install dan aktifkan plugin.

Pengaturan Umum .

– Klik Perilaku Peristiwa, perilaku klik. Di sini Anda memiliki dua opsi untuk dipilih:

• Klik pertama akan membuka sub menu, klik kedua akan menutup sub menu, klik pertama membuka submenu, klik kedua menutup submenu;
• Klik pertama akan membuka sub menu, klik kedua akan mengikuti link, klik pertama membuka submenu, klik kedua membuka link.
• Biarkan seperti default, jangan ubah apa pun.

– Perilaku Menu Seluler, perilaku di menu seluler,

• Standar – Sub menu yang terbuka akan tetap terbuka hingga ditutup oleh pengguna, Standar - submenu yang terbuka akan tetap terbuka hingga pengguna menutupnya.
• Accordion – Sub menu yang terbuka akan otomatis tertutup ketika sub menu lainnya dibuka Akordeon – submenu yang terbuka akan tertutup secara otomatis ketika submenu lain terbuka.

– Keluaran CSS Biarkan default, tidak ada yang perlu diubah di sini.

– Deskripsi Item Menu, mengaktifkan atau menonaktifkan deskripsi untuk item menu.

– Contoh Menu Aktif Beberapa tema akan menampilkan lokasi menu beberapa kali pada halaman yang sama. Misalnya, tema Anda mungkin menampilkan lokasi menu setelah menu utama, lalu menampilkannya lagi untuk menu seluler. Opsi ini dapat digunakan untuk memastikan bahwa Max Mega Menu hanya berlaku pada salah satu contoh ini.

– .

Tema Menu .

– Pilih tema yang akan diedit, Ini adalah menu yang akan Anda edit. Anda dapat membuat dan memilih menu yang berbeda.

– Judul Tema, judul tema menu, biarkan default.

– Anak panah, Anda dapat memilih panah yang muncul di item menu drop-down.

– Tinggi Garis, garis ketinggian.

– Indeks Z, indikator Indeks Z dapat dibiarkan pada default.

– Bayangan, Anda dapat menyesuaikan bayangan menu.

– transisi hover, aktifkan transisi saat mengarahkan kursor ke item menu.

– Setel Ulang Gaya Widget, nonaktifkan gaya widget Menu Mega.

Bilah Menu .

– Tinggi Menu, tinggi menu.

– Latar Belakang Menu, warna latar belakang menu.

– Lapisan Menu pelapis menu.

– Radius Batas Menu, radius batas menu.

– Item Menu Sejajarkan, lokasi item menu.

– Latar Belakang Butir Menu, warna latar belakang item menu.

– Latar Belakang Item Menu (Arahkan), warna latar belakang item menu saat diarahkan.

– Spasi Item Menu, interval item menu.

– huruf, parameter font, warna, ukuran, lokasi, keluarga, dll.

– Font (Arahkan) arahkan opsi font.

– Bantalan Item Menu, pelapis item menu.

– Perbatasan Item Menu, opsi batas item menu.

– Batas Item Menu (Arahkan), Opsi batas item menu saat diarahkan.

– Radius Perbatasan Item Menu, parameter radius batas item menu.

– Pembagi Item Menu, pemisah menu.

– Sorot Item Saat Ini, sorot item menu saat ini.

Menu Besar .

– Latar Belakang Panel, warna latar belakang menu tarik-turun.

– Lebar Panel Lebar jendela menu tarik-turun.

– Bantalan Panel, kain pelapis.

– Batas Panel, warna dan ukuran batas.

– Radius Batas Panel, radius perbatasan.

– Bantalan Barang, bantalan item menu di menu tarik-turun.

Widget .

– Font Judul, opsi font judul widget di menu drop-down.

– Bantalan Judul bantalan tajuk.

– Margin Pos bantalan dari batas header widget.

– Batas Tajuk, parameter batas perbatasan.

– Font Konten, font di konten widget.

Item Menu Tingkat Kedua .

– huruf, font item menu tingkat kedua.

–Font (Arahkan) arahkan font.

– Latar Belakang (Arahkan), warna latar belakang saat mengarahkan kursor.

– Lapisan, kain pelapis.

– Batas, lekukan

– berbatasan, tepi jalan, perbatasan.

Item Menu Tingkat Ketiga . Pengaturan yang sama, hanya untuk item menu tingkat ketiga.

Menu Terbang .

– Latar Belakang Menu, warna latar belakang menu drop-down tingkat kedua atau ketiga.

– Lebar Menu lebar menu.

– Lapisan Menu kain pelapis.

– Batas Menu, berbatasan.

– Radius Batas Menu, radius perbatasan.

– Latar Belakang Barang, warna latar item menu.

– Latar Belakang Item (Arahkan), warna latar belakang item saat diarahkan.

– Tinggi Barang, tinggi item menu.

– Bantalan Barang barang pelapis.

– Huruf Barang, font teks dalam item menu.

– Font Item (Arahkan), arahkan font.

– Pembagi Barang pemisah elemen.

Menu seluler .

– Beralih Desainer Bar, Ini menunjukkan tampilan menu di perangkat seluler.

– Titik Istirahat Responsif, lebar untuk membuka menu seluler.

– Alihkan Latar Belakang Bilah, warna latar belakang tombol buka menu seluler.

– Nonaktifkan Beralih Seluler, Anda dapat mematikan sakelar menu.

– Alihkan Tinggi Bilah, ketinggian sakelar menu seluler.

– Kolom Menu Mega, berapa banyak kolom yang ada di menu tarik-turun di situs seluler.

– Latar Belakang Menu, warna latar belakang menu seluler.

– Tinggi Item Menu, tinggi item menu.

Gaya Kustom. Di sini Anda dapat menambahkan gaya CSS Anda sendiri untuk menu.

– Simpan perubahan Anda.

Lokasi Menu .

– di sini Anda dapat membuat area menu yang kemudian dapat Anda tambahkan menu. Untuk membuat area menu, klik tombol – Tambahkan lokasi menu lain.

Daerah menu Anda dapat menambahkan ke situs menggunakan kode pendek atau kode php.

Di halaman: Tampilan – Menu – Manajemen kawasan, Anda akan dapat menambahkan menu untuk area tersebut.

Peralatan .

– Cache Di sini Anda dapat menghapus cache CSS, tidak perlu, cache secara otomatis dihapus setiap kali menu disimpan.

– Data Pengaya hapus semua data plugin yang disimpan di database WordPress. Hanya jika pluginnya dihapus!

– Ekspor Tema, Anda dapat mengekspor tema menu mega dalam format JSON atau PHP.

– Impor Tema, Anda dapat mengimpor tema menu mega.

– Memungkinkan Centang kotak di sini untuk mengaktifkan menu mega.

– Peristiwa, Di sini Anda dapat memilih bagaimana menu drop-down akan terbuka.

– memengaruhi Anda dapat memilih efek dari menu drop-down.

– Tema, tema menu bawaan.

Setelah menyalakan menu mega, di setiap widget halaman, ketika diarahkan, akan muncul tombol - Mega Menu. Klik tombol ini untuk mengonfigurasi menu drop-down untuk item menu ini.

Berikutnya, sebuah jendela akan terbuka. Di kanan atas, klik bidang lebar untuk memilih widget dan menambahkannya ke menu. Di kanan atas Anda dapat memilih berapa banyak kolom yang ada di menu drop-down. Widget dapat didistribusikan ke seluruh panel drop-down; Anda dapat menentukan bagian mana yang akan ditempati widget, misalnya 1/2 atau 1/3. Klik panah kanan dan kiri untuk menunjukkan bagian mana yang akan ditempati widget.

Untuk membuka dan mengkonfigurasi widget, tambahkan konten apa pun ke dalamnya, dll., di sisi kanan widget, klik ikon kunci. Siapkan widget dan simpan.

– Sembunyikan Teks, sembunyikan teks dari item menu.

– Sembunyikan Panah, sembunyikan panah.

– Sembunyikan item di Ponsel, sembunyikan item menu di perangkat seluler.

– Sembunyikan item di Desktop, sembunyikan item menu di komputer.

– item menu Sejajarkan, lokasi item menu.

– Sub Menu Rata lokasi menu tingkat kedua.

– Sembunyikan sub menu di Ponsel, sembunyikan menu tingkat kedua di perangkat seluler.

– Simpan perubahan.

Semuanya sudah siap! Simpan menu, buka situsnya dan nikmati hasilnya!

Perhatian! Setelah mengaktifkan Mega Menu, gaya menu default Anda akan berubah total. Anda perlu menyesuaikan gaya menu di tab Pengaturan “Tema Menu”.

Masih ada pertanyaan? Tulis komentar! Semoga beruntung!

Sejauh yang saya pahami, istilah menu mega di WordPress berarti blok besar yang sangat fungsional dengan banyak elemen berbeda: daftar, gambar, teks, bilah geser, dll. Pasti Anda pernah bertemu dengan orang-orang seperti itu. Suatu hari nanti saya akan menerbitkan koleksi lengkap tentang topik ini, tetapi hari ini kita akan berbicara tentang solusi yang sangat spesifik - plugin Max Mega Menu. Saya memilihnya karena saya sudah mengujinya, sering kali masuk dalam daftar, ditambah lagi ia memiliki salah satu versi gratis (Lite) yang paling cerdas dan terus berkembang.

Segera setelah menginstal Max Mega Menu di WordPress, navigasi standar Anda akan diubah menjadi mekanisme yang lebih kuat dan fungsional dengan kemampuan untuk menambahkan berbagai jenis widget, editor yang nyaman, dan banyak lagi. pengaturan tambahan. Unduh plugin dari sini atau cari melalui admin WP.

Saat ini, versi sistem minimum yang diperlukan adalah 3.8, versi terbaru saat ini adalah 4.8.3. Ada sekitar 100 ribu unduhan. Saya suka bahwa selama 2 bulan terakhir, hampir 70 dari 89 bug berbeda telah diperbaiki, yang menunjukkan aktivitas baik dari pengembang.

Fungsi utama dan fitur Max Mega Menu

• Beberapa lokasi penempatan didukung, yang masing-masing lokasi Anda dapat memilih parameternya sendiri;
• Pekerjaan mudah dengan elemen navigasi melalui Drag&Drop.
• Tambahan.
• Ada editor tema yang nyaman.
• Menambahkan widget apa pun: gambar, teks, daftar, dll.
• Kondisi pemicu: saat mengarahkan kursor, klik.
• Efek tampilan submenu: keberangkatan, penampilan/memudar, dll.
• Berbagai opsi tambahan seperti menyembunyikan teks/link atau mematikan versi seluler. Poin terakhir akan membantu menyederhanakan pembuatan file .
• Penyelarasan untuk item menu.

Untuk memahami betapa keren dan nyamannya semua ini, saya menyarankan Anda untuk menonton saja video berikut:

Selain itu, para pengembang dapat membanggakan pendekatan yang sangat tepat dan tepat dalam menciptakan solusi mereka. WordPress Max Mega Menu adalah produk yang sangat berkualitas tinggi, berikut beberapa konfirmasinya:

• semua desain diatur menggunakan satu berkas CSS, di mana properti penting yang “terkenal” tidak digunakan sama sekali;
• Dukungan Retina, kemampuan beradaptasi, pemicuan pada ponsel cerdas dan tablet (diuji di hampir semua browser desktop dan seluler yang ada);
• kode bersih, skrip JS ketika di-gzip akan menempati kurang dari 2Kb;
• dukungan untuk berbagai filter/kait;
• dokumentasi terperinci + tidak seperti banyak plugin lainnya, jaga agar forum tetap hidup.

Menyiapkan dan bekerja dengan Max Mega Menu

Segera setelah instalasi, bagian dengan nama yang sama akan muncul di panel admin. Di “Pengaturan Dasar” Anda dapat menyesuaikan beberapa opsi mengenai perilaku submenu, perangkat seluler, dll. “Tema” terlihat jauh lebih menarik.

Ada 6 tab di sini dengan fitur berbeda:

• Dasar - pilih jenis panah, bayangan, tinggi garis, dll.
• Bilah menu - desain blok utama: latar belakang, indentasi, font, arahkan kursor.
• Menu Mega - gaya dan Pengaturan besar Menu.
• Drop-down adalah sekumpulan gaya yang mirip dengan yang lain.
• Menu Seluler - memicu ukuran layar dan opsi menu seluler lainnya.
• Desain khusus - tambahkan gaya CSS Anda sendiri.

Setelah parameter dasar diatur, buka bagian admin WP "Tampilan" - "Menu".

Anda harus memilih menu yang ingin Anda gunakan, dan kemudian dalam pengaturannya, centang kotak “Diaktifkan”. Anda dapat mengaktifkan Max Mega Menu di WordPress hanya jika menu tersebut memiliki area tampilan yang ditentukan dalam template (header, footer, sidebar, dll.). Ada juga parameter untuk efek dan peristiwa pemicu.

Untuk membuka editor modul, arahkan kursor ke salah satu item hierarki dan klik tombol “Mega Menu” yang muncul. Jendela pop-up akan menampilkan alat terkait, yang mungkin pernah Anda lihat dalam video presentasi plugin di atas.

Di sini Anda dapat, pertama-tama, menentukan jumlah kolom, dan juga menambahkan widget apa pun. Selain itu, ukuran setiap elemen dapat diubah. Anda hanya dapat memilih widget di tingkat navigasi pertama (utama). Jika Anda mengklik tombol “Mega Menu” di seberang elemen lain, maka hanya untuk mengatur ikon dan berbagai properti:

Menyembunyikan teks/tautan, menyelaraskan dan menonaktifkan di desktop/seluler adalah serangkaian fungsi yang sangat berguna. Opsi tersebut dapat diatur di setiap item menu. Jangan lupa untuk menyimpan perubahan Anda.

Max Mega Menu Pro dan Kesimpulan

Secara umum, selain repositori, pengembangan ini juga memiliki website tersendiri. Ada deskripsi semua kemampuan modul, dokumentasi dan demo kecilnya disajikan, dan ada juga tautan ke dukungan teknis dan unduhan. Biaya lanjutan Versi maksimal Mega Menu Pro, pada prinsipnya, tidak terlalu mahal - untuk situs 1/5/99, Anda akan dikenakan biaya masing-masing $23 / $35 / $99 dolar. Ini termasuk pembaruan dan dukungan sepanjang tahun. Jika Anda seorang developer, maka dengan mengambil Lisensi Bisnis Pro dan menginstal plugin di 5 situs, Anda akan mendapatkan total biaya solusi = 7 dolar!

Apa yang termasuk dalam Max Mega Menu Pro:

• Integrasi Google Font, FontAwesome, dan ikon khusus dalam pengaturan.
• Mendukung menu vertikal dan akordeon.
• Logo umum di navigasi + blok pencarian.
• Gaya item individual.
• Dukungan WooCommerce dan EDD.
• Kemungkinan penyesuaian.
• Pencarian, ikon/logo dan HTML untuk elemen seluler.
• Pembaruan otomatis dan dukungan prioritas.

Untuk situs klasik biasa, yang biasa saja sudah cukup versi gratis Max Mega Menu di WordPress, yang fungsinya sangat bagus. Berbagai pengaturan ada banyak hal di sini. Saya juga menyukai pengembang yang mendukung kreasi mereka, memperbaiki bug saat ini dengan relatif cepat dan menjaga kebersihan/kebenaran kode. Memang butuh waktu untuk saling mengenal, tapi itu sepadan. Untuk memudahkan memahami cara kerja plugin, tonton video dan baca dokumentasinya.

Modul Mega Menu di WordPress mana yang Anda gunakan dan mengapa? Sudahkah Anda menggunakan solusi ini, apa yang dapat Anda tambahkan tentangnya?

Diketahui secara luas bahwa WordPress 3.0 menambahkan dukungan untuk menu khusus (custom menu). Masalahnya, menurut saya, sangat nyaman dan berguna. Sebenarnya dari sinilah artikel ini berasal.

Kenyamanannya adalah Anda kini dapat membuat dan mengkonfigurasi menu langsung dari panel admin, menambahkan link dengan mengklik kotak centang dan mengubah urutan link hanya dengan drag dan drop. Anda dapat menambahkan link ke halaman, kategori, dan postingan individual ke menu. Anda dapat membuat menu multi-level, dan Anda juga dapat menambahkan tautan sembarang Anda sendiri ke menu, yang tidak diketahui oleh WordPress. Secara umum, kebebasan penuh untuk bertindak.

Namun, agar “kebebasan” tersebut tersedia, Anda perlu, katakanlah, dengan sedikit gerakan mouse, untuk mengonfigurasi tampilan menu khusus dalam template.

Akan sangat nyaman menggunakan menu seperti itu jika Anda menggunakan fitur multisitus WordPress, karena Anda dapat mengatur menu berbeda untuk situs berbeda, dan menggunakan templat yang sama untuk situs tersebut.

Catatan: menu berfungsi melalui taksonomi WordPress (nav_menu), dan tautan arbitrer (eksternal) ditulis ke tabel database posting utama. Pendekatan ini lebih fleksibel dan dinamis, namun memerlukan pembuatan menu yang konstan.

Register_nav_menus(array("top" => "Menu atas", //Nama lokasi menu di template "bawah" => "Menu bawah" //Nama lokasi menu lainnya di template));

Sekarang kita telah mendaftarkan 2 menu dengan pengenal "atas" dan "bawah" dengan nama yang sesuai. Pengidentifikasi diperlukan untuk digunakan dalam tema untuk menunjukkan tempat di mana, melalui fungsi keluaran wp_nav_menu(), menu yang dibuat di panel admin akan ditampilkan. Kita akan melihat nama lokasi yang terdaftar di panel admin ketika kita masuk ke bagian Appearance -> Menu.

Setelah menu didaftarkan, buka panel admin dan buat menu Anda (di dalam contoh ini 2 menu):

Tetapkan nama menu (menu dalam template dapat ditampilkan dengan nama yang ditentukan menggunakan fungsi wp_nav_menu()

Membuat item menu. Kami menggunakan blok kiri: tautan halaman, kategori

1. Kita pilih dimana menunya akan ditempatkan, karena kita mendaftarkan 2 menu, kita akan memiliki 2 pilihan: “Menu atas” dan “Menu bawah”.

Dukungan untuk menu khusus di WordPress diaktifkan untuk setiap tema secara terpisah, dengan baris ini di file fungsi.php add_theme_support("menus"); Namun baris ini tidak diperlukan jika kita sedang mendaftarkan suatu menu. Dalam hal ini, dukungan akan diaktifkan secara otomatis.

Menampilkan menu khusus menggunakan fungsi wp_nav_menu

Menu sudah didaftarkan dan dibuat, yang tersisa hanyalah menambahkannya ke template. Hal ini dilakukan oleh fungsi wp_nav_menu(), yang dapat mengambil parameter berikut:

Wp_nav_menu(array("menu" => "", // (string) Nama menu yang ditampilkan (ditentukan di admin saat membuat menu, diutamakan // di atas lokasi yang ditentukan theme_location - jika ditentukan, parameter theme_location diabaikan) "container" => " div", // (string) Menu container.ul wrapper. Menentukan tag container (secara default di tag div) "container_class" => "", // (string) kelas dari wadah (tag div) "container_id" => "" , // (string) id wadah (tag div) "menu_class" => "menu", // (string) kelas menu itu sendiri (tag ul) "menu_id" => "", // (string) id dari menu itu sendiri ( tag ul) "echo" => true, // (boolean) Menampilkan atau mengembalikan untuk diproses "fallback_cb" => "wp_page_menu", // (string) Fungsi (fallback) yang digunakan jika menu tidak ada (tidak bisa mendapatkan ) "before" => "", // (string) Teks sebelumnya setiap tautan "setelah" => "", // (string) Teks setelahnya setiap link "link_before" => "", // (string) Teks sebelum jangkar (teks) dari tautan "link_after" => "", // (string) Teks setelah jangkar (teks) dari tautan "kedalaman " => 0, / / ​​(integer) Kedalaman bersarang (0 - tidak terbatas, 2 - menu dua tingkat) "walker" => "", // (objek) Kelas yang mengumpulkan menu. Default: new Walker_Nav_Menu "theme_location" => "" // (string) Lokasi menu di template. (menunjukkan kunci yang digunakan untuk mendaftarkan menu dalam fungsi register_nav_menus)));

Dalam contoh ini, Anda perlu memasukkan kira-kira (tergantung pada parameter yang Anda perlukan) 2 kode berikut ke dalam template:

#1. Menampilkan menu berdasarkan lokasi

Menu teratas. Kami memasukkannya ke dalam header template (header.php), di mana menu atas akan ditampilkan:

"menu", "theme_location"=>"atas", "setelah"=>" /")); ?>

Akan menampilkan menu yang dibuat di panel admin, dilampirkan ke lokasi "Menu Teratas" dengan struktur serupa:

Menu bawah. Kami memasukkannya ke footer template (footer.php), di mana menu bawah akan ditampilkan:

Menampilkan menu yang dibuat di panel admin, dilampirkan ke lokasi "Menu Bawah". Strukturnya akan sama dengan yang pertama.

Harap dicatat bahwa pada opsi pertama, parameter dilewatkan melalui array. Yang kedua, melalui sebuah garis. Kedua opsi tersebut benar. Hal ini biasa terjadi pada Fitur WordPress- parameter dapat diteruskan baik sebagai array atau sebagai string (string kemudian dikonversi ke array).

#2 Tampilkan menu berdasarkan nama

Untuk menampilkan menu berdasarkan namanya, Anda dapat menggunakan argumen "menu". Nama ditunjukkan seperti yang ditentukan saat membuat menu di panel admin. Dalam contoh kita (lihat gambar) “Menu Utama”. Argumen menu memiliki prioritas lebih tinggi daripada theme_location , artinya jika kita menampilkan berdasarkan nama, parameter theme_location akan diabaikan.

Anda dapat menentukan ID menu, bukan namanya. Jadi, jika nama menunya diubah, kodenya akan tetap berfungsi. ID menu dapat dilihat di URL saat mengedit menu:

Catatan

Mari kita hapus pembungkus Div

Anda mungkin memperhatikan bahwa menu sering kali “dibungkus” dengan tag div yang tidak perlu. Itu dapat dihapus dengan menentukan parameter kosong "container"=>"" dalam argumen ke fungsi wp_nav_menu().

Mengubah pengaturan default

Untuk menghindari terus-menerus menentukan parameter yang sama untuk menu yang disisipkan, menu tersebut dapat diganti di function.php. Ini dilakukan melalui filter wp_nav_menu_args:

Register_nav_menus(array("top" => "Menu atas", "bawah" => "Menu bawah")); add_filter("wp_nav_menu_args", "my_wp_nav_menu_args"); fungsi my_wp_nav_menu_args($args="")( $args["container"] = ""; return $args; )

Dengan analogi, Anda dapat membuat argumen default Anda sendiri: $args["argument"] = "value" .

Memeriksa apakah menu sudah terdaftar

WordPress juga memiliki fungsi kondisi: has_nav_menu("top") - memeriksa apakah lokasi menu atas telah terdaftar. Jika menu tidak ditentukan, maka fungsi wp_nav_menu() akan berfungsi seperti wp_list_pages() , tetapi div “wrapper” akan tetap ada, meskipun kami menghapusnya dari argumen. Anda dapat mengatasi masalah ini seperti ini:

If (has_nav_menu("top"))( wp_nav_menu(array("container" => "", "theme_location" => "top", "menu_class" => "menu")); ) else ( echo "

"; wp_list_pages(array("kedalaman" => 1, "title_li" => "")); echo "