WordPress Menü Öğelerine Özel Alanlar Ekleme

Yayınlanan: 2021-03-23

Bir siteyi tasarlarken bir web sitesinin menüsü genellikle ihmal edilir. Bunun nedeni, geleneksel olarak özelleştirmenin teknik olarak zor olması olabilir. Bu, WordPress menüsüne özel alanları nispeten kolay bir şekilde eklemenize izin verecek bazı yeni kancalar sunan WordPress 5.4 ile değişti.

Söz konusu kancalar, wp_nav_menu_item_custom_fields ve wp_nav_menu_item_custom_fields_customize_template eylem kancalarıdır. Bunları kullanarak artık hem Yönetici menüsü düzenleme sayfasındaki hem de Özelleştirici seçenekleri panelindeki menü öğelerine kendi özel alanlarınızı kolayca ekleyebilirsiniz.

Bu makalede, menü öğelerine kendi özel alanlarınızı eklemek için wp_nav_menu_item_custom_fields kancasını kullanmanın bazı basit yollarına bakacağız ve ayrıca kod yazmak zorunda kalmadan özel alanlar eklemek için kullanılabilecek iki eklentiye göz atacağız. .

Haydi gidelim.

WordPress Menüsü Özel Alan Kancası

wp_nav_menu_item_custom_fields kancası, Menü ekranına özeldir ve aşağıda açıklanmıştır:

 do_action( 'wp_nav_menu_item_custom_fields', $id, $menu_item, $depth, $args );
  • $id tamsayı, menü öğesi kimliğidir
  • $menu_item nesnesi, menü öğesi veri nesnesidir
  • $depth tamsayı, menü öğesinin derinliğidir.
  • $args , menü öğesi argümanlarının nesnesidir.

Kanca, menü düzenleyicideki bir gezinme menüsü öğesinin hareket düğmelerinden hemen önce tetiklenir ve 242 satırı civarında wp-admin/includes/class-walker-nav-menu-edit.php dosyasında tanıtılır.

Bunu pratikte çok basit bir örnekle gösterebilirsiniz. Aktif temanızın functions.php dosyasını açın ve şu kod parçasını ekleyin:

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

Şimdi, menü düzenleme yönetici sayfasına giderseniz, aşağıdaki ekran görüntüsünde gösterildiği gibi her menü öğesinin altında yankılanan dizeyi göreceksiniz.

Tabii ki, bunun hiçbir işlevi yoktur, ancak menüyü düzenlemenin nasıl mümkün olduğunu gösterir. Şimdi özel alan biçiminde bazı basit işlevler ekleyerek daha kullanışlı bir şey deneyelim.

Kod kullanarak bir WordPress Menü Öğesi Özel Alanı Ekleme

Bu örnekte, herhangi bir menü öğesine açıklama eklememize izin veren bir WordPress menüsü özel alanı oluşturacağız.

Birinci Adım: Çıktıyı Ekleme

Başlamak için ilk yapacağımız şey, yönetici kullanıcının açıklamayı doldurabileceği giriş alanını gösterecek olan geri arama işlevini oluşturmaktır. İşte bunu yapmak için kod:

 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 );

Bu kodu functions.php dosyanıza ekleyin ve kaydedin. Şimdi, WordPress web sitenizin Yönetici alanına tekrar giriş yaparsanız ve Menüler ekranını açarsanız, alanınızın görüntülendiğini görmelisiniz. Bizim durumumuzda buna 'Öğe Açıklaması' adını verdik. Elbette, alanınızı uygun gördüğünüz şekilde adlandırmak için yukarıdaki kodu düzenlemekte özgürsünüz. Sadece benzersiz bir isim olması gerektiğini unutmayın.

İkinci Adım: Girişinizi Kaydetme

Ardından, girişimizin kaydedileceği anlamına gelen veritabanı sonrası meta tablosundaki alan değerini güncelleyecek olan kod parçasını aşağıya ekleyeceğiz.

 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 );

functions.php dosyanıza kaydedilen bu kodla, WordPress Yöneticinize geri dönebilir, bir menü öğesi açabilir ve alana bir açıklama ekleyebilirsiniz. Ardından, phpMyAdmin veritabanınıza gidin ve girişi meta veritabanı sonrası tablosunda görebilmeniz gerekir.

Menü yöneticisindeki değeri değiştirirseniz, bunun veritabanına yansıtılması gerekir. Aynı şekilde, değeri silerseniz, tamamen kaybolması gerekir.

Üçüncü Adım: Menü Alanı Değerini Göster

Ardından, get_post_meta işlevini ve nav_menu_item_title kancasını kullanarak kaydedilmiş menü alanları verilerimizi nasıl alabileceğimizi ve ön uç menüde nasıl gösterebileceğimizi göstereceğiz. Aşağıdaki kodu functions.php dosyanıza ekleyin.

 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 );

nav_menu_item_title kancası bir menü öğesinin başlığını filtreler ve wp-includes/class-walker-nav-menu.php dosyasının içinde 225 satırı civarında bulunabilir.

4 parametreyi, menü öğesinin başlık dizesini, geçerli menü öğesini, wp_nav_menu() argümanlarının bir nesnesini ve menü öğesinin derinliği olan bir tamsayıyı kabul eder.

Şimdi menü öğesi başlığının altında açıklamayı görmelisiniz ve uygun CSS'yi kullanarak elbette bunu web sitenize uyacak şekilde biçimlendirebilirsiniz.

Eklenti Kullanarak WordPress Menü Öğesi Özel Alanı Ekleme

WordPress menünüze özel bir alan eklemek için kod yazmakla uğraşmak istemiyorsanız, o zaman iyi haber… Bunu sizin için yapabilecek eklentiler var.

Gelişmiş Özel Alanlar

Son derece popüler ve her zaman çok yönlü Gelişmiş Özel Alanlar eklentisi, WordPress menüsüne özel alanlar ekleme yeteneği ile buradaki gücünü bir kez daha gösteriyor.

Yükleyip etkinleştirdikten sonra, eklentiyi açın ve ardından alanlarınızı eklemek için 'Yeni Ekle' düğmesine tıklayın. Konum kuralları altında 'Menü Öğesi'ni seçin. Talimatları izleyin ve alanları gerektiği gibi güncelleyin.

Alanı yayınladıktan sonra, oluşturduğunuz yeni alanı görmek için Yönetici alanından WordPress menünüze gidebilirsiniz. Çok kolay!

WP Menüsü Özel Alanları

WP Menu Custom Fields eklentisi, adından da anlaşılacağı gibi, menü öğelerinize özel alanlar eklemenize yardımcı olacak nispeten yeni bir eklentidir. Özel bir metin, resim, kısa kod veya özel bir HTML ekleyebilirsiniz.

Özel bir eklenti arayüzü aracılığıyla özel menü öğeleri oluşturmak yerine (Gelişmiş Özel Alanlarda yaptığınız gibi), WP Menüsü Özel Alanları bunun yerine doğrudan yönetici menüsü düzenleme alanındaki herhangi bir menü öğesine düzenlenebilir seçenekler ekler.

Kullanımı oldukça açıklayıcıdır ve menü öğelerinize özel alanlar ve diğer içerikler eklemenin güzel ve kolay bir yoludur. Eklenti belgeleri ayrıca, her bir özelliğin oluşturduğu HTML'yi daha fazla özelleştirmek için kullanabileceğiniz eklenti kancalarını da sağlar.

Çözüm

WordPress menülerine özel alanlar eklemek gerçekten faydalı olabilir ve web sitenizin bu genellikle ihmal edilen alanını geliştirmenize yardımcı olabilir. Kendinden emin bir kodlayıcıysanız, WordPress 5.4'te sağlanan yeni kancaları kullanmanın nispeten kolay olduğu kanıtlanırken, kodlayıcı olmayanlar bu görevi gerçekleştirmek için eklentilerin çoğunu kullanabilir.

Ayrıca bakınız

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