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:
Artık WordPress menünüzdeki öğelere menü açıklamaları ekleyebilirsiniz. Ancak bu açıklamalar henüz temanızda görünmeyecektir. Menü açıklamalarını görüntülemek için bazı kodlar eklememiz gerekecek.
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ında Özel Gezinme Menüleri Ekleme hakkında bir öğretici 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
Matthew Blaxton
PHP 8.0 ve üst sürümlerinde bu kritik bir hataya neden olacaktır.
Bu satırı bulmanız gerekiyor:
function start_el( $output, $item, $depth, $args ) {
Bu satırı aşağıdaki gibi değiştirmek hatayı ortadan kaldırmalıdır:
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
Fonksiyonu temanızda bulamazsanız, temanızın özel desteğiyle iletişime geçmenizi öneririz ve onlar size yardımcı olabilirler.
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
Eklentinin desteğiyle iletişime geçmek isteyeceksiniz ve ayarın doğru çalışmaması konusunda size yardımcı olabilirler.
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
Teşekkürler. Zamanımdan tasarruf ettirdiniz.
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
Merhaba.. Lütfen Yardım..
Kategori başlığı ekleme, kategori başlığı açıklaması kullanmadan nasıl yapılır?
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
İpucu için teşekkürler
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
Menü açıklamalarını uyguladım ve harika çalıştı. Şimdi müşterim açıklamalardan birinin içine satır başı eklememi istiyor. Yönetici panelinden bir satır başı koymayı ve açıklama alanına bir etiket eklemeyi denedim. Ön yüzde görünmüyor. WP bu düzenlemeleri kaldırıyor. Bunu gidermenin bir yolu var mı?
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
Harika bir öğretici olmuş arkadaşlar, sadece Özel Menü widget'ı kullanılarak görüntülenen özel bir menüye bunu nasıl uygulayacağımı bilmek istiyorum?
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 neşe!
sambassador
çalışıyor!
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
Harikasın!! Mükemmel çalıştı.
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
Öğreticini takip ettim ve menüme açıklama ekledim. Teşekkürler! Ancak, mobil moddayken menü açılır menüye dönüşüyor ve menü başlığı ile açıklama birbirine bağlanıyor. Örneğin, menü öğem "hakkında" ve açıklama "benim hakkımda daha fazla" ise, mobil sürüm "hakkımdabenim hakkımda daha fazla" gösteriyor. Bunu düzeltebilir miyim?
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
Harika gönderi – çok net, tam da ihtiyacım olan şeydi ve mükemmel çalıştı. Teşekkür ederim!
Samedi Amba
Harika öğretici 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!