Eklentileri Kullanmadan WordPress'te Özel Gezinme Menüsü Oluşturun

Hangi WordPress temasını kullanırsanız kullanın, neredeyse kesinlikle menünüzü görüntüleyebileceğiniz en az bir menü konumu sağlayacaktır (normalde web sitenizin başlığında). Menüler, yönetici alanının içinden kolayca oluşturulabilir ve bu önceden ayarlanmış konumlara hızlı bir şekilde eklenebilir. Ancak web sitenizde başka bir yerde görüntülemek için başka bir menüye ihtiyacınız olursa ne yaparsınız? Bu eğitimde, bir eklenti kullanmak zorunda kalmadan seçtiğiniz bir konumda görüntülenebilen kendi gezinme menünüzü nasıl oluşturabileceğinize bakacağız.

Haydi gidelim!

Yeni Özel Menü Konumunuzu Kaydedin

Yapmamız gereken ilk şey, yeni özel menünüzün konumunu kaydetmek. Bunu yapmak için, seçtiğiniz metin düzenleyicinizle (Sublime gibi) aktif temanızın functions.php dosyasını açın ve aşağıdaki kodu ekleyin:

 function my_custom_menu() { register_nav_menu('my-custom-menu',__( 'My Custom Menu' )); } add_action( 'init', 'my_custom_menu' );

Bu kod parçasında, bir my_custom_menu() geri çağırma işlevi eklemek için my_custom_menu() add_action() kancasını kullandık. Bu, my_custom_menu() işlevinin, init eylemi her çağrıldığında yürütülen varsayılan çekirdek işlevlerle birlikte yürütüleceği anlamına gelir. “Özel Menüm” dizesi, yönetici sayfasında göreceğiniz okunabilir sürümdür.

Fonksiyonun içinde, ana fonksiyon register_nav_menu, temamız için bir navigasyon menüsü konumu kaydetmek için kullanılır. Birden fazla menüyü kaydetmek istemeniz durumunda register_nav_menus() işlevini kullanabilir ve aşağıdaki gibi bir dizi içindeki menü konumlarını tanımlayabilirsiniz:

 function my_custom_menu() { register_nav_menus( array( 'my-custom-menu' => _( 'My Custom Menu' ), 'my-custom-menu-2' =>_('My Second Custom Menu') ) ); } add_action( 'init', 'my_custom_menu' );

Sonuçları onaylamak için Görünüm > Menüler altındaki yönetici alanınıza gidin. Özel menü konumunuzun Menü Ayarlarına dahil edildiğini fark edeceksiniz.

Not: Bu noktada bu konumu seçersek, menü ön uçta hiçbir şey göstermez.

Özel Menümüz Nasıl Görüntülenir

Yeni menü konumunun, temamızda zaten mevcut olan “Masaüstü Yatay Menüsü”nün altında yer alacak ikincil bir yatay menü için kullanılmasını istediğimizi varsayalım.

Bunu başarmak için, temanın şablonuna menünün görüntülenmesini istediğimiz yere bazı kodlar ekleyeceğiz. Bu örnekte, Twenty Twenty temasını kullanıyoruz ve menümüzü görüntülemek için header.php dosyasını düzenliyoruz. Bu dosyayı temanın klasörünün altında bulacaksınız.

Editörünüzle header.php dosyasını açın ve bu öğeyi 33. satır civarında kodda bulun.

 <header class="header-footer-group" role="banner">

Bu bölümün hemen altına yeni özel menü konumumuzu görüntülemek için kodumuzu koyacağız: 'özel menüm'.

 <header class="header-footer-group" role="banner"> <?php wp_nav_menu( array( 'theme_location' => 'my-custom-menu' ) ); ?>

theme_location değeri, daha önce yapıştırdığımız function.php kodunda menünüz için verdiğiniz adla aynı olmalıdır. Bizim durumumuzda: 'özel menüm'.

Şimdi bunun işe yarayıp yaramadığını görmek için bir test menüsü oluşturalım. Bunu yapmak için Görünüm > Menüler'e gidin ve yeni bir menü oluşturmaya başlayın.

Menüye “İkincil Menü” başlığını verin, bir konum için “Özel Menüm”ü seçin ve ardından “Menü Oluştur” düğmesine basın.

Son olarak menüye bazı öğeler ekleyin (örneğin Menü öğesi 1, Menü öğesi 2, Menü öğesi 3) ve ardından menüyü kaydedin.

Şimdi ön uçta ne olduğunu görelim.

Yeni menümüzü göstermeyi başardık ama oldukça dağınık değil mi?

Kaynak kodumuzu görüntülersek, wp_nav_menu() işlevinin bu HTML kod parçasını oluşturduğunu fark ederiz.

 <div class="menu-secondary-menu-container"> <ul class="menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-378"><a href="#">Menu item 1</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-381"><a href="#">Menu item 2</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-382"><a href="#">Menu item 3</a></li> </ul> </div>

Yani kodda anlatılan sınıfları menümüzü güzelleştirmek için kullanabiliriz. Bunu yapmak için biraz CSS kullanacağız. style.css dosyasını bulun (bu normalde header.php dosyasıyla aynı konumdadır) ve ardından bu kodu eklemek için düzenleyicinizle açın:

 ul#menu-secondary-menu { text-align: right; padding: 10px 30px; } ul#menu-secondary-menu li { list-style: none; display: inline-block; padding: 1px; } ul#menu-secondary-menu li:hover { border: 1px solid #c00202; padding: 0; border-radius: 3px; } ul#menu-secondary-menu li a { text-decoration: none; padding: 5px; font-size: 14px; }

Sonuç, demo web sitemizin stiline uygun olarak şimdi çok daha düzgün ve çok daha fazla olacaktır.

Ek Menü Özelleştirme

WordPress'in menüleri görüntülemek için sağladığı wp_nav_menu() işlevi, onu daha fazla özelleştirmenize olanak tanıyan bir dizi seçenekle birlikte gelir.

' tema_konumu '

Yukarıda açıkladığımız gibi bu parametre, function.php içindeki register_nav_menus() işlevine iletilen anahtarlara karşılık gelir.

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu' ) );

'menü_sınıfı'

Menü için kendi sınıfınızı belirlemenizi sağlayan ' menu_class ' seçeneği bulunmaktadır.

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'menu_class' => 'my-custom-menu' ) );

Fark etmiş olabileceğiniz gibi, sınıf başka bir sınıfın yerini almaz, bunun yerine ul öğesine eklenir.

'menü_kimliği'

Class seçeneğinin aksine menu_id seçeneği mevcut menü kimliğinin yerini alır. <ul> öğesi için oluşturulan HTML, bunun gibi bir şey olacaktır.

 <ul class="menu">

Bu seçenek kullanılmadığında, kimlik, birden çok örnek kullanıldığında artırılacak olan menü bilgisi olacaktır.

'konteyner'

Bu parametre, menüyü çevreleyen öğenin türünü tanımlar. Varsayılan 'div'dir. Örneğin bu kodu kullanırsanız:

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container' => 'nav', ) );

bu sonucu alacaksınız:

'container_class'

Bu, menü ana öğesine uygulanan bir sınıftır:

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container_class' => 'my-custom-menu-wrapper', ) );

Ayrıca 'önce' ve 'sonra' parametrelerini kullanarak her menü öğesi bağlantısından önce veya sonra içerik ekleyebilirsiniz. Bu, başa bir tire veya simge eklemek veya menü öğelerini bir yayılma etiketine sarmak istiyorsanız çok kullanışlıdır. Bunu çalışırken görmek için aşağıdaki örneği kendiniz deneyebilirsiniz:

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<span class="menulink">', 'after' => '</span>', ) );

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '-', ) );

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '-', ) );

Menü öğelerine simgeler de ekleyebilirsiniz. Örneğin, kendi simge kitaplığını dahil etmek için Font Awesome eklentisini yüklemeyi deneyin ve menü öğelerine harika bir yazı tipi simgesi uygulamak için 'önce' menü seçeneğini kullanın.

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<i class="fas fa-caret-right"></i>', ) );

Her simgenin kodunu eklentinin simge listesinde bulabilirsiniz.

Yürüteç Parametresi

Son olarak, yürüteç parametresinin menüleri özelleştirmeye nasıl yardımcı olduğuna dair bir örnek sağlayacağız. WordPress yürüteç sınıfının ne olduğunu bilmiyorsanız, muhtemelen aşağıdakiler pek bir anlam ifade etmeyecektir. Önce 'WordPress Walker Sınıfını Tanımak' bölümünü okumanızı öneririz.

 wp_nav_menu( array( 'walker' => new Walker_Custom_Menu ) );

Walker sınıfını göstermek için menümüze bir “Alt öğe” ekleyeceğiz.

WordPress'in sağladığı varsayılan Walker Class'ı geçersiz kılacağız. Bu, wp-includes/class-walker-nav-menu.php dosyasında bulunur. Bunu başarmak için function.php dosyanıza gidin ve aşağıdaki kodu ekleyin:

 if ( !class_exists('My_Nav_Menu_Walker') ) { class My_Nav_Menu_Walker extends Walker { var $tree_type = array( 'post_type', 'taxonomy', 'custom' ); var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' ); function start_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "\n$indent"; $output .= "<i class=\"dropdown icon\"></i>\n"; $output .= "<div class=\"menu\">\n"; } function end_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "$indent</div>\n"; } function start_el(&$output, $item, $depth, $args) { $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $classes = in_array( 'current-menu-item', $classes ) ? array( 'current-menu-item' ) : array(); $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); $class_names = strlen( trim( $class_names ) ) > 0 ? ' class="' . esc_attr( $class_names ) . '"' : ''; $id = apply_filters( 'nav_menu_item_id', '', $item, $args ); $id = strlen( $id ) ? '' : ''; $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 . $id . $value . $class_names . '>'; $item_output .= '<div class="item">'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= '</div>'; $item_output .= "</a>\n"; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } }

Şimdi headers.php dosyanızda menü kodunuzu bununla değiştirin (sonuçları karşılaştırmak için her iki menü sürümünü de bilerek çıkaracağız):

 wp_nav_menu(); // Default 'walker' => new Walker_Nav_Menu() wp_nav_menu( array( 'walker' => new My_Nav_Menu_Walker() ) );

Bu kodu orijinal Walker_Nav_Menu Sınıfı ile karşılaştırdığınızda, $tree_type ve $db_fields dokunulmadığını ancak geri kalanların değiştirildiğini fark edeceksiniz. Acele etmeyin ve aynı menünün bu iki versiyonunda hem kod hem de HTML çıktılarını karşılaştırın ve My_Nav_Menu_Walker Class ile oynayarak kendinizi denemeye çalışın.

Çözüm

Web sitelerindeki menüler açıkça oldukça önemlidir! Menülerin yerleşimi ve çıktısı üzerinde tam kontrole sahip olmak, bir tema geliştiricisi olarak yeteneklerinizi genişletir ve eklentilere güvenmek zorunda kalmadan web siteleri tasarlarken bir dizi heyecan verici yeni olasılıklar açar; bu her zaman harika olan bir şeydir.