WordPress menü sistemi, menü öğelerine açıklamalar ekleyebileceğiniz yerleşik bir özelliğe sahiptir. Ancak, bu özellik varsayılan olarak gizlidir. Etkinleştirildiğinde bile, bazı kodlar eklenmeden görüntülenmeleri desteklenmez. Çoğu tema, menü öğesi açıklamaları düşünülerek tasarlanmamıştır. Bu makalede, WordPress'te menü açıklamalarını nasıl etkinleştireceğinizi ve WordPress temalarınıza menü açıklamalarını nasıl ekleyeceğinizi göstereceğiz.
Not: Bu eğitim, HTML, CSS ve WordPress tema geliştirme konusunda yeterli bilgiye sahip olmanızı gerektirir.
Menü Açıklamaları Ne Zaman ve Neden Eklemek İstersiniz?
Bazı kullanıcılar, menü açıklaması eklemenin SEO'ya yardımcı olacağını düşünüyor. Ancak, bunları kullanmak istemenizin ana nedeninin sitenizde daha iyi bir kullanıcı deneyimi sunmak olduğunu düşünüyoruz.
Açıklamalar, ziyaretçilere bir menü öğesine tıkladıklarında ne bulacaklarını anlatmak için kullanılabilir. İlgi çekici bir açıklama, daha fazla kullanıcının menülere tıklamasını sağlayacaktır.
Adım 1: Menü Açıklamalarını Açın
Görünüm » Menüler'e gidin. Sayfanın sağ üst köşesindeki Ekran Seçenekleri düğmesine tıklayın. Açıklamalar kutusunu işaretleyin.
Bu, menü öğelerinizde açıklamalar alanını etkinleştirecektir. Şöyle ki:
Now you can add menu descriptions to items in your WordPress menu. However, these descriptions will not yet appear in your themes. To display menu descriptions we will have to add some code.
Adım 2: Walker sınıfını ekleyin:
Walker sınıfı WordPress'teki mevcut sınıfı genişletir. Temel olarak menü öğesi açıklamalarını görüntülemek için bir kod satırı ekler. Bu kodu temanızın functions.php dosyasına ekleyin.
class Menu_With_Description extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth, $args) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = ' class="' . esc_attr( $class_names ) . '"';
$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
Adım 3. wp_nav_menu'de Walker'ı Etkinleştirme
WordPress temaları menüleri görüntülemek için wp_nav_menu() fonksiyonunu kullanır. Ayrıca yeni başlayanlar için WordPress Temalarına Özel Gezinme Menüleri Nasıl Eklenir konusunda bir eğitim yayınladık. Çoğu WordPress teması menüleri header.php şablonuna ekler. Ancak, temanızın menüleri görüntülemek için başka bir şablon dosyası kullanmış olması mümkündür.
Şimdi yapmamız gereken, temanızda (büyük olasılıkla header.php'de) wp_nav_menu() fonksiyonunu bulmak ve şu şekilde değiştirmektir.
<?php $walker = new Menu_With_Description; ?> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>
İlk satırda, daha önce functions.php dosyasında tanımladığımız walker sınıfını kullanması için $walker değişkenini ayarlıyoruz. İkinci kod satırında, mevcut wp_nav_menu argümanlarımıza eklememiz gereken tek ek argüman 'walker' => $walker'dır.
Adım 4. Açıklamaları Biçimlendirme
Daha önce eklediğimiz walker sınıfı, öğe açıklamalarını şu kod satırında görüntüler:
$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
Yukarıdaki kod, menü öğesine bir `
` etiketi ekleyerek satır sonu ekler ve ardından açıklamalarınızı `sub` sınıfına sahip bir span içine alır. Şöyle ki:
<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.example.com/about/">About<br /><span class="sub">Who are we?</span></a></li>
Açıklamalarınızın sitenizde nasıl görüneceğini değiştirmek için temanızın stil sayfasına CSS ekleyebilirsiniz. Bunu Twenty Twelve üzerinde test ettik ve bu CSS'yi kullandık.
.menu-item {
border-left: 1px solid #ccc;
}
span.sub {
font-style:italic;
font-size:small;
}
Bu makaleyi faydalı bulacağınızı ve temanızda menü açıklamalarıyla harika görünen menüler oluşturmanıza yardımcı olacağını umuyoruz. Sorularınız mı var? Aşağıdaki yorumlarda bırakın.
Ek Kaynaklar
WordPress Navigasyon Menüleri Nasıl Stil Verilir
Belirli WordPress Menülerine Özel Öğe Ekleme
Bill Erickson’ın Açıklamalı Menüler Sınıfı
Matthew Blaxton
In PHP 8.0 and higher this with throw a critical error.
Bu satırı bulmanız gerekiyor:
function start_el( $output, $item, $depth, $args ) {
Changing that line to the following should make the error disappear:
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
WPBeginner Desteği
PHP 8 kullananlar için bunu paylaştığınız için teşekkür ederiz.
Yönetici
Norman
Merhaba,
Açıklamayı da tıklanabilir hale nasıl getirebilirim?
WPBeginner Desteği
We cover that in step 4
Yönetici
kayvan A.Gilani
WordPress Temalarımda Menü Açıklamaları Eklemek İçin, bu blogun 1. ve 2. adımlarını yaptım ancak 3. adımdan sonra ilerleyemedim ve toplam değişikliği gerçekleştiremedim.
WPBeginner Desteği
If you cannot find the function in your theme, we would recommend reaching out to your specific theme’s support and they should be able to assist.
Yönetici
yiannis
Merhaba,
Max Mega Menu'da ürün kategorisi açıklamasını nasıl devre dışı bırakabilirim?
Zaten Mega Menu > Genel Ayarlar'a gittim ve Menü Öğesi Açıklamaları'nı devre dışı olarak ayarladım ancak sorun devam ediyor.
WPBeginner Desteği
You would want to reach out to the plugin’s support and they would be able to assist with the setting not working correctly
Yönetici
Sergio
Çok teşekkür ederim!
WPBeginner Desteği
You’re welcome
Yönetici
Lanka
Çok teşekkür ederim, beni kurtardın
JKLYN
Thanks. Saved my time.
dan
Bu WP_Bootstrap_Navwalker ile çalışabilir mi?
denediğimde sitemi bozuyor….
kalpana
Çok teşekkürler... benim için çok faydalıydı... günümü kurtardınız
Steven
mobil düzende açıklamayı nasıl kapatırım?
Anzani Zahrani
Hello.. Please Help..
How to add title category, not using title category description ?
Ido Schacham
Tamamen yardımcı oldu, teşekkürler!
Rahman
Harika İpucu ama menü açıklamasında html etiketlerini desteklemiyor. Bunu bilen var mı?
Teşekkürler
Iryna
Merhaba Millet,
Açıklamada html etiketlerine izin vermenin bir yolu var mı?
remove_filter(‘nav_menu_description’, ‘strip_tags’);
bu benim için çalışmıyor.
Damien Carbery
@Iryna: Kodunu bir yere, örneğin pastebin.com'a yapıştırabilir misin?
remove_filter()'ı çağırdığın yer, çalışıp çalışmayacağını belirleyecektir – add_filter() çağrısından sonra çağrılmalıdır.
wp_nav_menu() çağrısından hemen önce çağırmak işe yarayabilir.
Max
Açıklamanın köprülü olmaması için bir yol var mı?
Ashok
teşekkürler... işe yaradı. ancak menü açıklamasında html etiketlerini desteklemiyor.
igorasas
Zaten takmaya hazır olabilir mi? Bu hack "Twenty Twelve Sürüm: 1.5" temasıyla nasıl çalışacak?
? Ve tıpkı wpml eklentisi gibi mi?
Guy
Thanks for the tip
Phong
Teşekkür ederim, bu gerçekten hızlı resmi almak için kopyala yapıştır yapmak çok yardımcı oldu.
Chad
Selam, walker sınıfını functions.php'ye ekledim ancak genesis temasında wp_nav_menu'yu bulamıyorum. Neyi kaçırıyorum? Ne yapacağımı hiç bilmiyorum!?!
Ksenia
Çok iyi açıklıyorsunuz – ayrıntılı ve net. 1 dakika ve menü öğeleri açıklamaları iyi. Teşekkürler!
Mary Anne
Bu eğitim için çok teşekkür ederim. Bana tavsiye edildi ve istediğim değişiklikleri yapmak için mükemmel bir şekilde işe yaradı. Ancak, bu değişiklikleri yaparken, açılır alt öğe menülerimi kaybettim. Kod değişikliğinde bunu neyin etkilediği hakkında bir fikriniz var mı?
Zamanınız ve öğretici için teşekkürler
WPBeginner Desteği
Bu bir CSS sorunu gibi görünüyor, daha spesifik olamadığımız için üzgünüz. Hata ayıklamak için Google Chrome'un geliştirici araçlarını kullanmayı deneyin.
Yönetici
Paul Renault
I have implemented the menu descriptions and it worked great. Now my client is asking for a line break within one of the descriptions. I have tried putting a carriage return and inserting a tag into the description field through the admin. It doesn’t appear in the front end. WP removes these edits. Is there a way to remedy this?
WPBeginner Desteği
Müşteriniz sadece boşluk istiyorsa, bunun için CSS kullanabilirsiniz.
Yönetici
Paul Renault
Müşteri bir satır sonu istiyor. Açıklamaya bir
etiketi eklemenin bir yolu var mı? Şu anda bir tane koyarsam kaldırılıyor.
Barry
Great tutorial guys, just want to know how to implement this on a custom menu displayed using the Custom Menu widget?
Oryan Consulting
Teşekkürler! Yıllardır WordPress üzerinde çalışıyorum ve bunu daha önce hiç duymamıştım. Çalıştığım sitede çok gereksiz oldukları için açıklamaları kaldırmak istiyordum. Nereden geldiklerini her yerde aradım.
Oh joy!
sambassador
works!
ancak php 5.4 için start_el fonksiyonunun wp walker argümanlarını eşleştirmeniz gerekecek:
function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 )
ve $item'ı $object ile değiştirin.
Steve Covello
You Rock!! Worked perfectly.
Kevin Gilbert
Mükemmel. Bu, bir sitede işimi bitirmem gereken şeydi. CSS ile bazı sorunlar yaşadım ama sonunda çözdüm ve çalıştırdım. Harika makaleler için teşekkürler.
Jon
Mükemmel ipucu. Tamamen işe yaradı!
Jedediah White
Bu benim için mükemmel çalıştı. Sınıf fonksiyonu da mükemmel. Çok teşekkürler!
Pankaj
Aynı şeyi yaratmam gerekiyordu ve tamamen kaybolmuştum.
Bu işi halletmek için bazı aptalca şeyler yapmayı planlıyordum.
Tanrı'ya şükür bu gönderiyi buldum ve zamandan ve stresten kurtuldum!
Bu siteyi çok seviyorum, çok şey öğrendim.
Burada en kolay şeyleri gösterdiğiniz için çok teşekkür ederim.
Pankaj
Span etiketi alt menülerde de görünüyor.
Orada görünmüyor ama çok garip görünmesine neden olan o kadar yer kaplıyor.
bunun için bir çözüm var mı??
DiTesco
Bu gerçekten harika bir eğitim ve bunun Thesis 1.8.5'te işe yarayıp yaramayacağını merak ediyordum. Eğer yaramazsa, bir tane sağlayabilirseniz harika olur. Kesinlikle bunu yaymanıza yardımcı olacağım. Beğendim!
svet
I followed your tutorial and added description to my menu. Thanks! However, when I am in mobile mode menu converts into dropdown menu and menu title and description are connected. For example, if my menu item is “about” and description “more about me”, the mobile version shows “aboutmore about me”. Is there a way to fix this?
David
Aynı sorunu yaşadım. Yaptığım şey şu.
Bunu değiştirdim:
$description = ! empty( $item->description ) ? ‘<span>’.esc_attr( $item->description ).'</span>’ : ”;
Buna:
$description = ! empty( $item->description ) ? '
'.esc_attr( $item->description ).'' : '';
En iyi çözüm olduğundan emin değilim ama benim için işe yaradı.
Garrett Hyder
Teşekkürler beyler, SVET ve DAVID'in mobil menü ile yaptıklarına rastladım.
Kod, değişikliğimi değiştirdi, benimki sadece tire ayırıcı ile bir span eklemekti ve masaüstü sorgumda gereksiz olduğu için onu bastırdım.
$item_output .= ‘ – ‘;
Yalnızca Masaüstü Sorgumda span'ı display none olarak ayarlayın;
@media only screen and (min-width: 740px) {
header #submenu li span.dash { display:none; }
Umarım yardımcı olur, sorunumu güzelce çözdü.
Nicola
Great post – very clear, exactly what I needed and worked perfectly. Thank you!
Samedi Amba
Harika eğitim için teşekkürler. Ana adımları iyi yaptım, görebileceğiniz gibi
http://ueab.ac.ke/demo/index
Ana Menü Etiketi ile açıklama arasındaki boşluğu nasıl azaltabilirim? Yardımınız için minnettarım.
Yayın Kadrosu
Temanızın .menu a sınıfının satır yüksekliği ile ilgilidir. Bunu azaltırsanız, boşluk kendiliğinden azalacaktır.
Yönetici
Chris Rouse
Harika bir yazı. Daha önce bunu araştırmaya çalıştım ama bulduğum önceki talimatlar bu kadar kolay takip edilemiyordu. functions.php kodunu ekleyebildim, kullandığım tema için farklı olan ancak anlaşılır olan walker sınıfımı başlık dosyamda nasıl değiştireceğimi anladım ve yaklaşık 15 dakika içinde işleri yoluna koydum.
Eklemek isteyebileceğiniz bir nokta, :last-child özelliğini kullanarak son menü öğesinde sağ kenarlığı nasıl dahil edeceğinizdir.
.menu-item:last-child { border-right: 1px solid #ccc; }
Damien Carbery
Walker_Nav_Menu'yu genişletmek yerine, bir filtre sağlansaydı güzel (ve daha kolay) olurdu, örneğin:
Çekirdek kod şöyle olsaydı:
$item_output .= apply_filters( ‘walker_nav_menu_description’, $item->description);
O zaman özel filtre fonksiyonu sadece şunu içerecektir:
return "" . $description . " ";
Cathy Earle
Harika bilgiler… sitelerime eklemeye başlayacağım. Teşekkür ederim!