Menambahkan Bidang Kustom ke Item Menu WordPress

Diterbitkan: 2021-03-23

Menu situs web sering diabaikan saat mendesain situs. Ini mungkin karena secara teknis sulit untuk disesuaikan. Ini sekarang telah berubah dengan WordPress 5.4 yang memperkenalkan beberapa kait baru yang memungkinkan Anda menambahkan bidang kustom menu WordPress dengan relatif mudah.

Kait yang dimaksud adalah kait tindakan wp_nav_menu_item_custom_fields dan wp_nav_menu_item_custom_fields_customize_template . Dengan menggunakan ini, Anda sekarang dapat dengan mudah menambahkan bidang khusus Anda sendiri ke item menu di halaman edit menu Admin dan di panel opsi Penyesuai.

Dalam artikel ini kita akan melihat beberapa cara sederhana Anda dapat menggunakan kait wp_nav_menu_item_custom_fields untuk menambahkan bidang khusus Anda sendiri ke item menu serta melihat dua plugin yang juga dapat digunakan untuk menambahkan bidang khusus tanpa harus membuat kode .

Mari kita pergi.

Kait Bidang Kustom Menu WordPress

Kait wp_nav_menu_item_custom_fields khusus untuk layar Menu dan dijelaskan sebagai berikut:

 do_action( 'wp_nav_menu_item_custom_fields', $id, $menu_item, $depth, $args );
  • Bilangan bulat $id adalah ID item menu
  • $menu_item adalah objek data item menu
  • Integer $depth adalah kedalaman item menu
  • $args adalah objek argumen item menu

Kait menyala tepat sebelum tombol pindah dari item menu nav di editor menu dan diperkenalkan di wp-admin/includes/class-walker-nav-menu-edit.php di sekitar baris 242.

Anda dapat mendemonstrasikan ini dalam praktik dengan contoh yang sangat sederhana. Buka file functions.php tema aktif Anda dan tambahkan potongan kode ini:

 function my_menu_item_field() { echo 'A menu item test field'; } add_action( 'wp_nav_menu_item_custom_fields', 'my_menu_item_field' );

Sekarang, jika Anda masuk ke halaman menu edit admin, Anda akan melihat string yang digaungkan di bawah setiap item menu seperti yang ditunjukkan pada gambar di bawah.

Tentu saja, ini tidak memiliki fungsi sama sekali tetapi menunjukkan bagaimana mungkin untuk mengedit menu. Sekarang mari kita coba sesuatu yang lebih berguna dengan menambahkan beberapa fungsi sederhana dalam bentuk bidang khusus.

Tambahkan Bidang Kustom Item Menu WordPress menggunakan Kode

Dalam contoh ini kita akan membuat bidang kustom menu WordPress yang memungkinkan kita untuk memasukkan deskripsi ke dalam item menu apa pun.

Langkah Satu: Menambahkan Output

Untuk memulainya, pertama yang akan kita lakukan adalah membuat fungsi callback yang akan menampilkan field input dimana user admin dapat mengisi deskripsinya. Berikut adalah kode untuk melakukan ini:

 function menu_item_desc( $item_id, $item ) { $menu_item_desc = get_post_meta( $item_id, '_menu_item_desc', true ); ?> <div> <span class="description"><?php _e( "Item Description", 'menu-item-desc' ); ?></span><br /> <input type="hidden" class="nav-menu-id" value="<?php echo $item_id ;?>" /> <div class="logged-input-holder"> <input type="text" name="menu_item_desc[<?php echo $item_id ;?>]" value="<?php echo esc_attr( $menu_item_desc ); ?>" /> </div> </div> <?php } add_action( 'wp_nav_menu_item_custom_fields', 'menu_item_desc', 10, 2 );

Tambahkan kode ini ke file functions.php Anda dan simpan. Sekarang, jika Anda masuk kembali ke area Admin situs web WordPress Anda dan membuka layar Menu, Anda akan melihat bidang Anda ditampilkan. Dalam kasus kami, kami menyebutnya 'Item Description'. Anda tentu saja bebas mengedit kode di atas untuk memberi nama bidang Anda sesuai keinginan Anda. Ingatlah bahwa itu perlu nama yang unik.

Langkah Kedua: Menyimpan Input Anda

Selanjutnya, kita akan memasukkan potongan kode di bawah ini yang akan memperbarui nilai bidang di tabel meta pos database yang berarti input kita akan disimpan.

 function save_menu_item_desc( $menu_id, $menu_item_db_id ) { if ( isset( $_POST['menu_item_desc'][$menu_item_db_id] ) ) { $sanitized_data = sanitize_text_field( $_POST['menu_item_desc'][$menu_item_db_id] ); update_post_meta( $menu_item_db_id, '_menu_item_desc', $sanitized_data ); } else { delete_post_meta( $menu_item_db_id, '_menu_item_desc' ); } } add_action( 'wp_update_nav_menu_item', 'save_menu_item_desc', 10, 2 );

Dengan kode ini disimpan di file functions.php Anda, Anda dapat kembali ke Admin WordPress Anda, membuka item menu dan menambahkan deskripsi ke bidang tersebut. Selanjutnya, buka database phpMyAdmin Anda dan Anda seharusnya dapat melihat entri di tabel database meta pos.

Jika Anda mengubah nilai di Admin Menu, itu harus tercermin dalam database. Demikian juga jika Anda menghapus nilainya, itu akan hilang sama sekali.

Langkah Tiga: Tampilkan Nilai Bidang Menu

Selanjutnya, kami akan menunjukkan bagaimana kami dapat mengambil data bidang menu yang disimpan dan menampilkannya di menu ujung depan dengan menggunakan fungsi get_post_meta dan kait nav_menu_item_title . Tambahkan kode berikut di bawah ini ke file functions.php Anda.

 function show_menu_item_desc( $title, $item ) { if( is_object( $item ) && isset( $item->ID ) ) { $menu_item_desc = get_post_meta( $item->ID, '_menu_item_desc', true ); if ( ! empty( $menu_item_desc ) ) { $title .= '<p class="menu-item-desc">' . $menu_item_desc . '</p>'; } } return $title; } add_filter( 'nav_menu_item_title', 'show_menu_item_desc', 10, 2 );

Kait nav_menu_item_title memfilter judul item menu dan dapat ditemukan di dalam wp-includes/class-walker-nav-menu.php di sekitar baris 225.

Ia menerima 4 parameter, string judul item menu, item menu saat ini, objek argumen wp_nav_menu() , dan integer yang merupakan kedalaman item menu.

Anda sekarang akan melihat deskripsi di bawah judul item menu dan, dengan menggunakan CSS yang sesuai, Anda tentu saja dapat menata ini agar sesuai dengan situs web Anda.

Tambahkan Bidang Kustom Item Menu WordPress menggunakan Plugin

Jika Anda tidak ingin terlibat dengan penulisan kode untuk menambahkan bidang khusus ke menu WordPress Anda, maka kabar baiknya… ada plugin yang dapat melakukan ini untuk Anda.

Bidang Kustom Tingkat Lanjut

Plugin Bidang Kustom Lanjutan yang sangat populer dan serbaguna sekali lagi menunjukkan kekuatannya di sini dengan kemampuan untuk menambahkan bidang khusus ke menu WordPress.

Setelah Anda menginstal dan mengaktifkannya, buka plugin dan kemudian klik tombol 'Tambah Baru' untuk menambahkan bidang Anda. Pilih 'Item Menu' di bawah aturan lokasi. Ikuti instruksi dan perbarui bidang sesuai kebutuhan.

Setelah Anda mempublikasikan bidang, Anda dapat menuju ke menu WordPress Anda dari dalam area Admin untuk melihat bidang baru yang Anda buat. Sangat mudah!

Bidang Kustom Menu WP

Plugin WP Menu Custom Fields adalah plugin yang relatif baru yang, seperti namanya, akan membantu Anda menambahkan bidang khusus ke item menu Anda. Anda dapat menambahkan teks khusus, gambar, kode pendek, atau HTML khusus.

Daripada membuat item menu khusus melalui antarmuka plugin khusus (seperti yang Anda lakukan dengan Bidang Kustom Tingkat Lanjut), WP Bidang Kustom Menu menambahkan opsi yang dapat diedit langsung ke item menu apa pun di area edit menu admin.

Cukup jelas untuk digunakan dan cara mudah yang bagus untuk menambahkan bidang khusus dan konten lainnya ke item menu Anda. Dokumentasi plugin juga menyediakan pengait plugin yang dapat Anda gunakan untuk menyesuaikan lebih lanjut HTML yang dihasilkan setiap fitur.

Kesimpulan

Menambahkan bidang khusus ke menu WordPress bisa sangat berguna dan dapat membantu Anda meningkatkan area situs web Anda yang sering diabaikan ini. Jika Anda seorang pembuat kode yang percaya diri, maka menggunakan pengait baru yang disediakan di WordPress 5.4 akan terbukti relatif mudah, sementara yang bukan pembuat kode dapat memanfaatkan plugin yang tersedia untuk mencapai tugas ini.

Lihat juga

  • Menambahkan Bidang Ke Item Menu WordPress – Plugin Kustom