WordPress Menü Öğelerine Alan Ekleme – Özel Eklenti

Yayınlanan: 2021-05-19

Önceki bir makalede, WordPress 5.4'te tanıtılan wp_nav_menu_item_custom_fields eylem kancasını kullanarak kendi özel alanınızı menü öğelerine nasıl ekleyebileceğinizi inceledik. Bunu başarmak için iki yol detaylandırdık; functions.php bazı özel kodlar ekleyerek veya bir WordPress eklentisi kullanarak.

Bu yazımızda aynı alanı yeniden oluşturacağız ama bu sefer sıfırdan kendi eklentimizi oluşturarak yapacağız.

Başlayalım.

Eklenti Oluşturma

Bir WordPress eklentisi oluşturmanın temel ayrıntılarına girmeyeceğiz, çünkü bu, 'İlk WordPress Eklentinizi Nasıl Oluşturursunuz' adlı ayrıntılı makalemizde ele alınmıştır. Adım Adım Kılavuz'. wp-content/plugin/ klasörü altında eklenti klasörümüzü oluşturmaya geçeceğiz. Daha sonra özel eklenti klasörümüzü “menu-item-field-creator” olarak adlandıracağız ve bunun içinde menu-item-field-creator.php adında bir dosya oluşturacağız.

Bundan sonra bu dosyayı favori metin düzenleyicimiz ile açacağız ve aşağıdaki kodu ekleyeceğiz. Bu kod, eklentiyi WordPress çekirdeğine tanıtma etkisine sahiptir.

 <?php /* Plugin Name: Menu Item Field Creator Description: My custom plugin to create menu item fields */

Sizin de fark edebileceğiniz gibi, eklenti adını ve açıklamasını yönetici eklentisi alanında görüntülenmesini istediğimiz şekilde tanımladık. Bu örnek için başka bir başlık alanı tanımlamayacağız.

Bu adımlar tamamlandıktan sonra, Yönetici alanındaki Eklentiler bölümümüze gidelim ve eklentinin doğru gösterilip gösterilmediğini kontrol edelim.

Ardından, ana sınıfımızı ve bazı fonksiyonları oluşturacak ilk fonksiyonel kodumuzu ekleyeceğiz.

Basit Yol

Bu eklentiyi çalıştırmanın en basit yolu, önceki yazımızda yazdığımız kodu eklentinin ana PHP dosyasına eklemektir, böylece nihai içerik şöyle görünür:

 <?php /* Plugin Name: Menu Item Field Creator Description: My custom plugin to create menu item fields */ /** * Add the field. */ function pr_menu_item_sub( $item_id, $item ) { $menu_item_sub = get_post_meta( $item_id, '_menu_item_sub', true ); ?> <div> <span class="subtitle"><?php _e( 'Subtitle', 'menu-item-sub' ); ?></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_sub[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $menu_item_sub ); ?>" /> </div> </div> <?php } add_action( 'wp_nav_menu_item_custom_fields', 'pr_menu_item_sub', 10, 2 ); /** * Save input. */ function save_menu_item_sub( $menu_id, $menu_item_db_id ) { if ( isset( $_POST['menu_item_sub'][ $menu_item_db_id ] ) ) { $sanitized_data = sanitize_text_field( $_POST['menu_item_sub'][ $menu_item_db_id ] ); update_post_meta( $menu_item_db_id, '_menu_item_sub', $sanitized_data ); } else { delete_post_meta( $menu_item_db_id, '_menu_item_sub' ); } } add_action( 'wp_update_nav_menu_item', 'save_menu_item_sub', 10, 2 ); /** * Show the Menu Field Value. */ function show_menu_item_sub( $title, $item ) { if ( is_object( $item ) && isset( $item->ID ) ) { $menu_item_sub = get_post_meta( $item->ID, '_menu_item_sub', true ); if ( ! empty( $menu_item_sub ) ) { $title .= '<p class="menu-item-sub">' . $menu_item_sub . '</p>'; } } return $title; } add_filter( 'nav_menu_item_title', 'show_menu_item_sub', 10, 2 );

Bu noktada, eklentiyi etkinleştirirseniz, bunun gayet iyi çalıştığını görmelisiniz. Ancak farklı bir kodlama stili kullanarak aynı sonuçları elde etmenin bir yolu vardır.

Nesne Yönelimli Programlamayı Kullanma

Aynı sonuçları ilgili makalemizde açıkladığımız gibi daha Nesne Yönelimli bir yaklaşımla elde etmek için lütfen aşağıdaki talimatları izleyin.

Başlamak için, eklentinizin ana PHP dosyasının içeriğini başlık yorumu dışında boşaltın ve şu satırları ekleyin:

 class MyCP_Menu_Item_Field_Creator { } $mycp_menu_item_field_creator = new MyCP_Menu_Item_Field_Creator();

Şimdiye kadar bu kodla yaptığımız şey, tüm işlevselliği içerecek MyCP_Menu_Item_Field_Creator sarmalayıcı sınıfını tanımlamaktır. Son olarak, bir nesneyi somutlaştırıyoruz.

Tanımladığınız ana sınıf adının global olarak erişilebilir olacağını ve bu nedenle benzersiz olduğundan ve başka bir eklenti veya temanın aynı adı kullanma ihtimalinin bulunmadığından emin olmanız gerektiğini hatırlamak çok önemlidir. Bu nedenle yukarıda kullandığımız MyCP_ gibi özel bir önek kullanmanız önerilir.

Sınıfın içinde şimdi bazı işlevler ekleyeceğiz. Eklenti ana PHP dosyamızın son içeriği şöyle görünecek:

 <?php /* Plugin Name: Menu Item Field Creator Description: My custom plugin to create menu item fields */ class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_action( 'nav_menu_item_title', array( $this, 'show_menu_item_sub' ), 10, 2 ); } public function menu_item_sub( $item_id, $item ) { $menu_item_sub = get_post_meta( $item_id, '_menu_item_sub', true ); ?> <div> <span class="subtitle"><?php _e( 'Subtitle', 'menu-item-sub' ); ?></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_sub[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $menu_item_sub ); ?>" /> </div> </div> <?php } public function save_menu_item_sub( $menu_id, $menu_item_db_id ) { if ( isset( $_POST['menu_item_sub'][ $menu_item_db_id ] ) ) { $sanitized_data = sanitize_text_field( $_POST['menu_item_sub'][ $menu_item_db_id ] ); update_post_meta( $menu_item_db_id, '_menu_item_sub', $sanitized_data ); } else { delete_post_meta( $menu_item_db_id, '_menu_item_sub' ); } } public function show_menu_item_sub( $title, $item ) { if ( is_object( $item ) && isset( $item->ID ) ) { $menu_item_sub = get_post_meta( $item->ID, '_menu_item_sub', true ); if ( ! empty( $menu_item_sub ) ) { $title .= '<p class="menu-item-sub">' . $menu_item_sub . '</p>'; } } return $title; } } $mycp_menu_item_field_creator = new MyCP_Menu_Item_Field_Creator();

Artık bunun yerine bir sınıf önekimiz olduğundan, yöntemlerin adlarından önekleri kaldırdık.

__construct işlevinde kullandığımız kancaları, çalıştıracak geri çağırma işlevleriyle birlikte tanımladık. Daha sonra, yönetici kullanıcının öğe alt başlığını doldurabileceği giriş alanını görüntüleyen menu_item_sub geri arama işlevini tanıttık.

Bundan sonra save_menu_item_sub yöntemi ile girdiyi kaydediyoruz ve son olarak show_menu_item_sub callback ile varsa ön uç menüde değerleri gösteriyoruz.

Walker'ı genişletmek

Yukarıdaki örnekte, menü ağacı verilerinin HTML çıktısını değiştirmeden menü öğesi başlığının içine özel menü alanını dahil ettik. Peki ya altyazı alanını başlık öğesi bağlantısının dışına <div> öğesi gibi ayrı bir HTML öğesi olarak eklemek istersek?

Walker sınıfıyla bir kez daha çalışmamız gereken yer burasıdır. 'WordPress Walker Sınıfını Tanımak' makalemizde gördüğümüz gibi, Walker'ı genişleterek ağaç benzeri bir verinin yapısını özelleştirebilirsiniz. Bu durumda bu menü olacaktır.

Bu, elbette, yalnızca özel alanımızın ön uç görüntüsüyle ilgili kodumuzu değiştirmemiz gerektiği anlamına gelir. Şimdi gidip tüm kodu bununla değiştirelim:

 <?php /* Plugin Name: Menu Item Field Creator Description: My custom plugin to create menu item fields */ class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); } public function menu_item_sub( $item_id, $item ) { $menu_item_sub = get_post_meta( $item_id, '_menu_item_sub', true ); ?> <div> <span class="subtitle"><?php _e( 'Subtitle', 'menu-item-sub' ); ?></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_sub[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $menu_item_sub ); ?>" /> </div> </div> <?php } public function save_menu_item_sub( $menu_id, $menu_item_db_id ) { if ( isset( $_POST['menu_item_sub'][ $menu_item_db_id ] ) ) { $sanitized_data = sanitize_text_field( $_POST['menu_item_sub'][ $menu_item_db_id ] ); update_post_meta( $menu_item_db_id, '_menu_item_sub', $sanitized_data ); } else { delete_post_meta( $menu_item_db_id, '_menu_item_sub' ); } } public function menu_item_sub_custom_walker( $args ) { if ( class_exists( 'My_Custom_Nav_Walker' ) ) { $args['walker'] = new My_Custom_Nav_Walker(); } else { echo 'DOES NOT EXIST'; } return $args; } } $mycp_menu_item_field_creator = new MyCP_Menu_Item_Field_Creator(); if ( ! class_exists( 'My_Custom_Nav_Walker' ) ) { class My_Custom_Nav_Walker extends Walker_Nav_Menu { public function start_el( &$output, $item, $depth=0, $args=[], $id=0 ) { $menu_item_sub = get_post_meta( $item->ID, '_menu_item_sub', true ); $output .= '<li class="' . implode( ' ', $item->classes ) . '">'; if ( $item->url && $item->url != '#' ) { $output .= '<a href="' . $item->url . '">'; } else { $output .= '<span>'; } $output .= $item->title; if ( $item->url && $item->url != '#' ) { $output .= '</a>'; } else { $output .= '</span>'; } if ( ! empty( $menu_item_sub ) ) { $output .= '<div class="menu-item-sub">' . $menu_item_sub . '</div>'; } } } }

show_menu_item_sub yöntemini sildiğimizi ve ön uç menü öğesi yapısıyla farklı çalıştığımızı fark etmiş olabilirsiniz. Özel Walker sınıfımızı My_Custom_Nav_Walker ana sınıfımızın dışında tanıttık ve menu_item_sub_custom_walker yöntemimiz aracılığıyla 'walker' argümanının varsayılan değerini My_Custom_Nav_Walker olarak değiştirdik. Bu şekilde özel Walker'ımızda sağladığımız menü HTML çıktısı ön uçumuza uygulanacaktır.

Sonuçları kontrol edelim.

Gördüğümüz gibi, bu sefer açıklamamız istediğimiz gibi menü öğesi bağlantısının hrefinin dışına yerleştirildi.

daha ileri götürmek

Bu konuyu tamamlamadan önce, "Altyazı" örneğini, yapması ve anlaması basit olduğu için bilerek kullandığımızı belirtmekte fayda var.

Kendinizi zorlamak istiyorsanız, denemek için kendi senaryolarınızı oluşturmanızı öneririz. Örneğin, Yönetici kullanıcının hangi kullanıcı rolünün menü öğesini görüntülemesine izin verildiğini tanımlamasına izin verecek farklı bir çıktı oluşturmayı deneyin.

Başlangıç ipucu olarak, size çıktıyı sağlayacağız. Geçerli çıktı yöntemini değiştirin (aşağıda gösterilmiştir)

 function menu_item_sub( $item_id, $item ) { $menu_item_sub = get_post_meta( $item_id, '_menu_item_sub', true ); ?> <div> <span class="subtitle"><?php _e( 'Subtitle', 'menu-item-sub' ); ?></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_sub[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $menu_item_sub ); ?>" /> </div> </div> <?php }

Bununla birlikte:

 function PREFIX_Menu_Item_Roles() { global $wp_roles; $display_roles = apply_filters( 'nav_menu_roles', $wp_roles->role_names ); if ( ! $display_roles ) return; ?> <p class="field-nav_menu_logged_in_out nav_menu_logged_in_out nav_menu_logged_in_out-thin"> <fieldset> <legend><?php _e( 'Display Mode', 'nav-menu-roles' ); ?></legend> <label for="edit-menu-item-role_logged_in"> <input type="radio" class="edit-menu-item-logged_in_out" value="in" name="menu-item-role_logged_in" /> <?php _e( 'Logged In Users', 'nav-menu-roles' ); ?><br/> </label> <label for="edit-menu-item-role_logged_out"> <input type="radio" class="edit-menu-item-logged_in_out" value="out" name="menu-item-role_logged_out" /> <?php _e( 'Logged Out Users', 'nav-menu-roles' ); ?><br/> </label> <label for="edit-menu-item-role_everyone"> <input type="radio" class="edit-menu-item-logged_in_out" value="" name="menu-item-role_everyone" /> <?php _e( 'Everyone', 'nav-menu-roles' ); ?><br/> </label> </fieldset> </p> <?php }

Şimdi, doğru kancaları kullanarak mevcut/kaydedilmiş değeri görüntüleyen bir yöntemle birlikte değişiklikleri kaydeden bir yöntem oluşturmaya çalışın.

Çözüm

Bunu yapmak için kullanabileceğiniz araçlardan haberdar olana kadar bir WordPress menüsünü özelleştirmek sinir bozucu olabilir. Umarız bu makale size tam olarak nelerin başarılabileceği ve bunun gibi görevleri uygulamak için nasıl gidebileceğiniz konusunda bazı bilgiler vermiştir.

Ayrıca bakınız

WordPress Menü Öğelerine Özel Alanlar Ekleme