WordPress Menü düzenine ekstra içerik eklemek

WordPress Menü düzenine ekstra içerik eklemek

WordPress 3.0 ile yeni bir terim girmişti hayatımıza. Düzenlenebilir bu menüleri temamıza ekleyip özgürce kullanabiliyorduk. Hatta bunun hakkında yazı bile yazmıştım bundan 4 sene önce. WordPress menü düzeni temalara ve diğer tüm sisteme güzel bir eklenti olmuştu. Artık istediğimiz gibi harket edebiliyorduk menü konusunda. CMS olmak konusunda ilerleme kaydetmişti WordPress.

Şimdi size anlatacağım olay ile birlikte benim de son menü sisteminde uyguladığım (bkz. şu tweet) ve mobil kullanıcıları rahatlatan menü sistemine geçişimde güzel bir yeri olan bir fonksiyon. WordPress menü sistemine dışarıdak logo, form ya da ne isterseniz onu eklemenizi sağlayan bu fonksiyonu her yerde kullanabilir, herhangi bir menünüze uygulayabilirsiniz. Öncelikle temanızda menü desteğinin olması gerekmekte, onu da en başından hatırlatıp, bu konu hakkında “WordPress menü desteği ne yaaa” diyen arkadaşları aydınlatayım.

WordPress Menü desteği eklemek

WordPress Temanızın functions.php dosyası içine ekleyeceğiniz ufak bir kod ile ekstra bir menü alanı (konumu) açmanız mümkün. Aşağıdaki kod ile bunu yapaibliyorsunuz. Eğer temanızda menüğ desteği yoksa -ki 3.0 sonrası gelen tüm temalarda bu destek bulunmakta- aşağıdaki kodu kullanın. Aşağıdaki kodu eklediğinizda deneme_menu takma adlı, Deneme Ana Menü adında bir menü alanına (konumuna) sahip olacaksınız.

register_nav_menus( array('deneme_menu' =>'Deneme Ana Menü'));

Bu kodu kullandığınızda WordPress sistemi otomatik olarak sisteminize menü konumu kaydını yapar. Ekstra olarak tema desteği açmanıza gerek kalmayacaktır. Bu mmenü alanına bir menü atamak ve düzenlemek için Görünüm -> Menüler yolunu izlemeniz ve yeni bir menü oluşturarak bu alana atamanız yeterli olacaktır.

Menünüzü oluştrudunuz ise ona bir isim verin ve düzenlemesini yapın. Verdiğiniz adı lütfen unutmayın. Çünkü kullanacağız. wp_nav_menu() fonksiyonu ile bu menüyü şimdi isteidğiniz yerde çağırabiliriz. En basitinden şöyle olacaktır.

<?php
//Menünüzün adını benimmenuadim olarak belirlediğiniz varsayıyorum
wp_nav_menu(
	array(
		'theme_location' => 'deneme_menu',
		'menu'=> 'benimmenuadim',
		'sort_column' => 'menu_order' 
		)
	); 
?>

Bu kodu çağırdığınızda menünüz oluşacak ve istediğiniz alanda görünecektir. Tabii CSS vb desteği yok ise biraz garip durabilir.

WordPress Menü sistemine müdahale eden kod

İşte biz bu menüye müdahale edeceğiz. Yani benimmenuadim olarak belirlediğiniz menünüze ekstra bir alan, içerik, form vb ekleyeceğiz. Aşağıdaki fonksiyon bunu bize sağlıyor. Menüye bir filtre yardımıyla ekstra alanlar ekliyoruz. Aşağıdaki örnekte bir adet logo ve bir adet arama formu ekleyeceğiz. Bunları menüden önce ekleyeceğiz. Yani en azından ben öyle yaptım. Ama bunu menünün sonuna nasıl eklyeceğimizi gösteren ilgili fonksiyonu da hemen altında bulacaksınız.

Aşağıda belirtilen kod temanızın ve sisteminizin en önemli dosyası olan functions.php dosyasına müdahale gerektirmektedir. Bu dosya wp-content/themes/temanızınadı/ klasöründe bulunmaktadır. Dosyaya müdahale etmeden lütfen yedek alınız.

Temanızda bulunan functions.php dosyasını açarak aşağıdaki kodu ekleyin. Menünüzün adını değiştirmeyi unutmayın. benimmenuadim alanını değiştireceksiniz. Yanına yazdım ben.

<?php

// Menümüzün önüne logo, form vb şeyler ekleyelim.
function yeni_menu_icerikleri_ekle($items) {
    $ekstra_icerik = '<li><img src="'.get_bloginfo('template_directory').'/temanızdaki-logonuzun-yolunu-ekleyin.jpg" alt="'.get_bloginfo('name').'"></li>';
    $ekstra_icerik .= '<li><form class="ssearchbar" method="get" id="searchbar" action="'.get_bloginfo('url').'"><input type="text" class="form-control" name="s" value="" placeholder="Ara Bakalım :)" x-webkit-speech="x-webkit-speech" speech lang="tr-TR" onwebkitspeechchange="this.form.submit();" id="search" ></form></li>';
    $items = $ekstra_icerik . $items;
    return $items;
}
//wp_nav_menu_benimmenuadim_items alanındaki "benimmenuadim" ibaresini sizin kendi menünüzün adıyla değiştirmeyi unutmayın.
add_filter( 'wp_nav_menu_benimmenuadim_items', 'yeni_menu_icerikleri_ekle' ); 

?>

Yukarıdaki kod menünün önüne içerik ekler. Sonuna eklemek için aşağıdaki fonksiyonu kullanabilirsiniz.

<?php

// Menümüzün sonuna logo, form vb şeyler ekleyelim.
function yeni_menu_icerikleri_ekle($items) {
    $ekstra_icerik = '<li><img src="'.get_bloginfo('template_directory').'/temanızdaki-logonuzun-yolunu-ekleyin.jpg" alt="'.get_bloginfo('name').'"></li>';
    $ekstra_icerik .= '<li><form class="ssearchbar" method="get" id="searchbar" action="'.get_bloginfo('url').'"><input type="text" class="form-control" style="width:150px" name="s" value="" placeholder="Ara Bakalım :)" x-webkit-speech="x-webkit-speech" speech lang="tr-TR" onwebkitspeechchange="this.form.submit();" id="search" ></form></li>';
    $items .= $ekstra_icerik;
    return $items;
}
//wp_nav_menu_benimmenuadim_items alanındaki "benimmenuadim" ibaresini sizin kendi menünüzün adıyla değiştirmeyi unutmayın.
add_filter( 'wp_nav_menu_benimmenuadim_items', 'yeni_menu_icerikleri_ekle' ); 

?>

Bunun dışında; “Eee, şeyy, ben arasına ekleyecektim” diyen arkadaşlar için de şunu söyleyeyim. Bi’ araştırayım, size dönerim ben :) Siz yine de bu isteklerinizi yorum alanı yoluyla ya da iletişim sayfasından bana iletebilirsiniz.

Mobil görünümdeki menü alanı örneğim ise şöyle;
wpadami_menu_ozel_alan
Selametle