WordPress, oldukça güçlü bir menü sistemine sahiptir. Yönetim panelinde, dilediğiniz kadar yeni menü oluşturabilir, içeriklerinizi, kategori/sınıflandırma arşivlerinizi, ürünlerinizi, dilediğiniz URL bağlantılarını… kolayca bu menülere ekleyebilir, oluşturduğunuz menüleri, sürükle-bırak yöntemi ile düzenleyebilirsiniz.

WordPress temalarında, menüler, Yönetim paneli : Görünüm->Menüler sayfasından oluşturulur ve yönetilir. Yönetim panelinde oluşturduğunuz bir menüyü, temaya çekebilmek için, önce, bu menüyü kaydedebileceğiniz bir lokasyon yani adres oluşturmalısınız ve oluşturduğunuz menüyü, bu lokasyona kaydetmelisiniz, sonra da bu lokasyonu kullanarak, menüyü şablon dosyanıza çekmelisiniz. Aşağıda bu adımlar, detaylarıyla anlatılmıştır.

Detaylara geçmeden önce, buraya kadar anlattıklarımız ile ilgili olarak, aklımıza şöyle bir soru gelebilir: Yönetim panelinde oluşturduğumuz her menüye zaten bir ad veriyoruz ve her menünün bir ID değeri de oluyor. Bir menüyü, bu kimlik bilgileri yardımı ile, lokasyon kullanmaya filan gerek kalmadan, doğrudan niye çekmiyoruz?

Cevap: WordPress, yönetim panelinde oluşturduğunuz bir menüyü, o menünün adını veya id değerini kullanarak doğrudan temaya çekmenize izin verir. Birazdan bahsedeceğimiz fonksiyonlar bu görevi de yapar. Fakat lokasyon kullanmanın şöyle bir faydası vardır: Bir lokasyona kaydedilmiş bir menüyü siler ya da değiştirirseniz lokasyon bundan etkilenmez ve aynı lokasyona yeni bir menü kaydettiğinizde temanız bu defa, bu yeni menüyü çekecektir. Fakat, temanıza, lokasyonu değil de, doğrudan bir menüyü çağırırsanız, ya ömür boyu aynı menüyü kullanmak zorunda kalırsınız ya da menünüzü sildiğinizde veya başkası ile değiştirdiğinizde, şablon dosyalarınıza gidip, kodlarınızı yeni menüye göre tekrar düzenlemeniz gerekecektir. Daha da önemlisi, temanızı dağıtmayı düşünüyorsanız, emin olun, temanızı kullanacak kişilerin menü isimleri veya ID değerleri sizinkinden farklı olacaktır ve kullanıcılarınızın hepsinin gerekli düzenlemeleri yapabilecek kadar kod bilgisi olmayacaktır. Bunları düşününce, siz de taktir edersiniz ki, menüleri isimleri ile değil de, lokasyon kullanarak çağırmak daha işlevsel bir yoldur. Çünkü, bir lokasyonu temanıza eklediğinizde, o lokasyonda, o anda, hangi menü kayıtlı ise o gelir.

Menüler İçin Lokasyon Oluşturma

Bir WordPress menüsü oluşturmak, yönetim panelinden yapılan bir işlemdir. Bu dersteki bütün çabamız, yönetim panelinde oluşturduğumuz menüleri temaya çekebilmek içindir. Bunu başarmanın ilk adımı, menülere bir lokasyon, oluşturmaktır. Lokasyonları, menüleri park ettiğimiz yerler gibi düşünebilirsiniz. (Temamıza, bir menü çağırırken bu park yerlerinden çağıracağız ve park yerine hangi menü park etmişse o gelecektir.)

Menü lokasyonuna, “theme_location” denir ve bu lokasyonu oluşturmak için, register_nav_menus( $theme_locations = array() ) fonksiyonu kullanılır. Bu fonksiyon, menü lokasyonları oluşturmaya yarayan bir parametreye sahiptir. Bu parametre bir dizidir ve bu diziye, lokasyonun kimlik değeri ve görünen adı girilir. Bu fonksiyon ile birden çok lokasyon kaydı yapılabilir.

Aşağıda, “Ana Menü” ve “Sosyal Medya Hesapları” adında iki lokasyon kaydı yapılarak bu fonksiyonun kullanımı gösterilmiştir:

function ilktemam_menuler() {
  register_nav_menus(
    array(
      'ana-menu' => __( 'Ana Menu', 'textdomain' ),
      'sosyal-medya-menusu' => __( 'Sosyal Medya Hesapları', 'textdomain' )
     )
   );
 }

 // burada 'after_setup_theme' kancası da kullanılabilir
 add_action( 'init', 'ilktemam_menuler' );

Görüldüğü gibi, “Ana Menu” adındaki lokasyonun kimlik değerini “ana-menu“, “Sosyal Medya Hesapları” adındaki lokasyonun kimlik değerini ise, “sosyal-medya-menusu” olarak belirledik. Burada oluşturduğunuz kimlik değerleri, bu lokasyonları, şablon dosyalarına eklemek için gerekecektir.

Yukarıdaki kodları functions.php dosyasına ekleyerek, iki tane menü lokasyonu kaydetmiş olduk. Kaydettiğimiz lokasyonlar, yönetim panelinin, Görünüm->Menüler sayfasında şu şeklide yer alır:

Resimde görüldüğü gibi, WordPress, kaydettiğimiz iki lokasyonu da tanımış ve kullanıma sunmuştur. Artık, dilediğimiz menüyü bu lokasyonlara park edebiliriz.

Yönetim panelinde oluşturduğumuz bir menüyü, Ana Menü yazan kutucuğu işaretleyerek kaydedersek, bu menü, Ana Menü lokasyonuna kaydedilmiş olur, yani bu lokasyona park etmiş olur.

Resimde görüldüğü gibi, Ana Menu lokasyonuna, adı “Deneme Menüsü” olan bir menü kaydedilmiştir. Deneme Menüsü‘nü, temaya çekebilmek için, Ana Menu lokasyonunu bir şablon dosyasına eklememiz yeterlidir.

Temaya Menü Çekme (Menü Ekleme)

Temaya menü çekmek demek, temaya bir lokasyon eklemek demektir. Lokasyonu eklediğimizde, bu lokasyona kaydedilen menü de otomatik olarak gelecektir. Lokasyona başka bir menü kaydetmeye karar verirsek bu defa o menü gelecektir.

Temaya bir lokasyon kaydetmek için, uygun bir şablon dosyası kullanırız. Şablon dosyalarına lokasyon eklemek için kullanılan fonksiyon şudur:

wp_nav_menu( $argumanlar = array() )

Ana menüler genellikle, header.php dosyalarına çağırılır. Biraz önce kaydettiğimiz iki lokasyondan biri olan, Ana Menu‘yü, header.php dosyasına eklemek için, bu fonksiyonu şu şekilde kullanabiliriz:

wp_nav_menu( array( 'theme_location' => 'ana-menu' ) );

Hatırlarsak, kaydederken, Ana Menu‘nün lokasyon kimliğini ana-menu olarak ayarlamıştık. Yukarıdaki fonksiyonda kullandığımız, ana-menu argümanı işte budur.

Temamıza eklediğimiz menü, nasıl görünüyor bir bakalım:

Hiç de hayalinizdeki gibi bir menü olmadığını tahmin edebiliyorum. Bu menüyü, şatafatlı bir ana menü haline getirmek için, CSS yeteneğimizi konuşturabiliriz. Çıktısı ne kadar basit görünse de, HTML yapısı, CSS için oldukça müsaittir.

Yukarıdaki, basit görünümlü menü için, wp_nav_menu( array( 'theme_location' => 'ana-menu' ) ) fonksiyonunun ürettiği HTML yapısı şöyledir:

<div class="menu-deneme-menusu-container">
	<ul id="menu-deneme-menusu" class="menu">
		<li id="menu-item-1972" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-1972">
			<a href="http://localhost/benimsitem/">Anasayfa</a>
		</li>
		<li id="menu-item-1971" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-1971">
			<a href="http://localhost/benimsitem/blog-2/">Blog</a>
		</li>
		<li id="menu-item-1970" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1970">
			<a href="http://localhost/benimsitem/hakkimizda/">Hakkımızda</a>
		</li>
		<li id="menu-item-1969" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1969">
			<a href="http://localhost/benimsitem/ust-sayfa/">Üst sayfa</a>
			<ul class="sub-menu">
				<li id="menu-item-1968" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1968">
					<a href="http://localhost/benimsitem/alt-sayfa/">Alt sayfa</a>
				</li>
			</ul>
		</li>
	</ul>
</div>

WordPress, işini hafife almamış ve bize, menüde, dilediğimiz gibi CSS kullanabilmek için yeterince id ve class argümanı vermiş.

Peki bu HTML yapısına, bazı dokunuşlar yapabilir miyiz?

Evet. wp_nav_menu( $argumanlar = array() ) fonksiyonunun argümanları ile, temamıza eklediğimiz menülerin HTML yapılarına bazı müdahalelerde bulunabiliyoruz. Şimdi, bu fonksiyonun argümanlarını daha yakından inceleyelim.

Wp_nav_menu Fonksiyonunun Parmetresi

Wp_nav_menu( $argumanlar = arra() ) fonksiyonu, dizi türünde ve bir tane parametre almaktadır. Bu parametrenin argümanları, varsayılan değerleri ile birlikte şöyledir:

$argumanlar= array(
        'menu'            => '',
        'container'       => 'div',
        'container_class' => '',
        'container_id'    => '',
        'menu_class'      => 'menu',
        'menu_id'         => '',
        'echo'            => true,
        'fallback_cb'     => 'wp_page_menu',
        'before'          => '',
        'after'           => '',
        'link_before'     => '',
        'link_after'      => '',
        'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
        'item_spacing'    => 'preserve',
        'depth'           => 0,
        'walker'          => '',
        'theme_location'  => '',
    );

Argümanları daha yakından tanıyalım:

‘menu’

Yönetim panelinde, Menüler sayfasında, oluşturduğunuz her bir menünün ID değeri, adı ve link adı vardır. Bunlar, oluşturduğunuz menülerin kimlik bilgileridir. Menüler sayfasında, bir menüyü düzenlerken, adres çubuğuna bakarsanız, aşağıdakine benzer bir yapı görürsünüz:

https://sitecenneti.com/wp-admin/nav-menus.php?action=edit&menu=179

Bu URL ifadesindeki 179 sayısı, düzenlenen menünün ID değeridir. Bu, argümana, bu ID değerini verirsek, lokasyonda bir menü bulunmadığı zaman, bu menü gösterilecektir. Yani bu menüyü, yedeklemiş oluruz. Bu argüman, menünün ID değerini aldığı gibi, adını ve link adını da kabul eder.

‘menu_class’

Bu fonksiyonun oluşturduğu HTML yapısındaki ul elemanı için atanan CSS sınıfıdır. Yukarıda verdiğimiz HTML yapısında da görüldüğü gibi, varsayılan değeri 'menu' dür:

<ul id="menu-deneme-menusu" class="menu">

‘menu_id’

Bu fonksiyonun oluşturduğu HTML yapısındaki ul elemanı için atanan id değeridir. Bu argümanı boş bırakırsak, yukarıda verdiğimiz HTML yapısında da görüldüğü gibi, varsayılan olarak menu-{menunun-link-adi} şeklinde bir id değeri oluşturur:

<ul id="menu-deneme-menusu" class="menu">

‘container’

Fonksiyonun, menü için oluşturduğu temel ul elemanını saran HTML elemanıdır. Varsayılan değeri div dir:

<div class="menu-deneme-menusu-container">
	<ul id="menu-deneme-menusu" class="menu">
	....
	</ul>
</div>

‘container_class’

Menüyü saran 'container' elemanı için atanacak CSS sınıfıdır. Varsayılan değeri 'menu-{menünün-link-adı}-container' şeklindedir. Yukarıda, HTML yapısını verdiğimizi menünün, link adı 'deneme-menusu' idi. Buna göre, bu fonksiyon, menüyü saran HTML elemanında, varsayılan olarak şu CSS sınıfını üretmiştir:

<div class="menu-deneme-menusu-container">

‘container_id’

Menüyü saran HTML elamanının, yani 'container' argümanına atadığımız elemanının id değeridir. Varsayılan değeri boştur.

‘fallback_cb’

Bir nevi yer tutucu menüdür, bir menü atanmadığında görünür. Bu argümana, dilediğiniz bir fonksiyon adı girersiniz. Daha sonra, bu fonksiyonu, içerisinde, kötü zamanlar için kullanılmasını istediğiniz bir menü ile birlikte oluşturursunuz. WordPress, bu lokasyonda göstermek için herhangi bir menü bulamadığı zaman, oluşturduğunuz bu menüyü gösterir.

Bu argümanın varsayılan değeri, aşağıdaki fonksiyondur:

wp_page_menu()

Bu fonksiyon, temanıza kaydedilmiş “sayfa” tipindeki içeriklerden bir menü oluşturur.

‘before’

Menüdeki her bir linkin önüne yazılacak yazı veya HTML elemanıdır. Bu argümana girdiğiniz değer, menünün HTML yapısına şöyle monte edilir:

<li id="...>
   {before argümanına verilen değer buraya}
   <a href="http...>Anasayfa</a>
</li>

Örnek olarak bu argümana '<span>Deneme</span>' yazalım:

<?php wp_nav_menu( array( 
	'theme_location' => 'ana-menu',
	'before'	 => '<span>Deneme</span>',
	) );
?>

Ve menümüzün çıktısına bir bakalım:

‘after’

Menüdeki her bir linkin sonuna yazılacak yazı veya HTML elemanıdır. Bu argümana girdiğiniz değer, menünün HTML yapısına şöyle monte edilir:

<li id="...>
   <a href="http...>Anasayfa</a>
   {after argümanına verilen değer buraya}
</li>

‘link_before’

Menüdeki her bir link tekstinin önüne yazılacak yazı veya HTML elemanıdır. Bu argümana gireceğiniz değer, link ile birlikte tıklanabilir olacaktır. Bu değer, menünün HTML yapısına şöyle monte edilir:

<li id="...>
   <a href="http...>{link_before argümanına verilen değer buraya}Anasayfa</a>
</li>

‘link_after’

Menüdeki her bir link tekstinin sonuna yazılacak yazı veya HTML elemanıdır. Bu argümana gireceğiniz değer, link ile birlikte tıklanabilir olacaktır. Bu değer, menünün HTML yapısına şöyle monte edilir:

<li id="...>
   <a href="http...>Anasayfa{link_before argümanına verilen değer buraya}</a>
</li>

‘echo’

true/false değerini alır. Fonksiyonun menü için ürettiği HTML yapısının ekrana basılacağını ya da döndürüleceğini belirler. Varsayılan değeri true‘dur, yani ekrana bastırır.

‘depth’

Derinlik demektir, menünün alt menü derinliğini ifade eden saydır. Yönetim panelinde, menü oluştururken, sürükle/bırak yöntemi ile, menü elemanlarına ait alt menüler de oluştururuz. Sağ tarafa sürüklenerek oluşturulan alt menüler, bir derinlik oluşturur. Aşağıda derinliği 2 olan ('depth'= 2) bir menü örneği görüyorsunuz:

Bu argüman, kaç basamağa kadar alt menü oluşturulacağını belirler. Varsayılan değeri 0 dır. Yani sınırlama yoktur.

Bu argümana verdiğiniz değer, bu lokasyondaki menüyü düzenlerken, sizi kısıtlamaz. Yönetim panelinde, dilediğiniz derinliğe inebilirsiniz. Fakat, temanızda, menünün derinliği, bu argümana verdiğiniz değer kadar gösterilir, daha derinde kalan menü elemanlarınız gösterilmez. Bu yüzden, bu lokasyon için oluşturduğunuz menü, bu argümandan daha derin olmamalıdır.

‘walker’

Bu argüman, bu fonksiyonun ürettiği menünün, kısa yoldan, yakışıklı olmasını sağlayan argümandır.

Bu argümana değer atamak için, bir WordPress nesnesi olan, Walker_Nav_Menu sınıfının uzantısı olan bir Class oluşturursunuz, daha doğrusu Google’dan hazır bir tane bulup tema dosyalarınıza eklersiniz. Daha sonra, bu uzantının bir örneğini bu argümana atarsınız. Böylece, menünüz, derinliği ve diğer özellikleri ile güzel bir görüntüye kavuşur.

Ben, bu argümanı genellikle, menüye, Bootstrap kütüphanesini uygulamak için kullanırım. Buraya tıklayarak, siz de Bootstrap 4 kütüphanesini, WordPress menülerinizde kullanabilirsiniz.

‘theme_location’

Yukarıda; iki tane menü kaydetmiştik. Menü kaydederken kullandığımız fonksiyonu hatırlayalım:

  register_nav_menus(
    array(
      'ana-menu' => __( 'Ana Menü', 'textdomain' ),
      'sosyal-medya-menusu' => __( 'Sosyal Medya Hesapları', 'textdomain' )
     )
   );

Bu fonksiyonda, iki tane menü kaydı yapılmıştır. Birinin theme_location değeri ana-menu, diğerinin ise sosyal-medya-menusu olarak ayarlanmıştır.

Bu parametreye, şablon dosyamızda, register_nav_menus fonksiyonu ile kaydettiğimiz menülerden, hangisini kullanmak istiyorsak, onun lokasyon kimliğini yani theme_location değerini atıyoruz.

Bu parametreyi boş bırakırsanız, WordPress şablon dosyanıza menü getirmek için, şu adımları takip eder:

• 'menu' argümanındaki menüyü kullanır.
• 'menu' argümanı da boşsa, boş olmayan ilk menüyü kullanır.
• O da yoksa, 'fallback_cb' argümanındaki menüyü kullanır.
• O da yoksa, boş bırakır.

‘items_wrap’

Menü linklerinizi saran HTML elemanının yapısıdır. printf() fonksiyonu ile yer tutucu değerler içerir. Varsayılan değeri şöyledir:

'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>'

‘item_spacing’

Menü için üretilen HTML yapısında boşlukları korumak ya da kaldırmak için kullanılan argümandır. İki değer alır:

• ‘preserve‘ – Boşlukları korur
• ‘discard‘ – Boşlukları kaldırır.

Bu argümanın varsayılan değeri, 'preserve' olarak ayarlıdır.

Menü Elemanlarına Atanan CSS Sınıfları

Temanıza, wp_nav_menu() fonksiyonu ile bir menü eklediğinizde, bu fonksiyon, menünüz için bir HTML yapısı oluşturur. Bu HTML yapısında, asıl menü elemanları, <li>menü elemanı</li> elemanının içinde bulunur. wp_nav_menu fonksiyonu, marifetini bu <li> elemanında oluşturduğu id değerleri ve CSS sınıfları ile gösterir. Aşağıda, bu fonksiyonun, bir menü elemanını sarmak için oluşturduğu, örnek bir <li> yapısı verilmiştir:

<li id="menu-item-1972" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-1972">Menü elemanı</li>

Şimdi, wp_nav_menu() fonksiyonunun bütün diğer marifetlerine bakalım ve hangi menü elemanına, hangi CSS sınıflarını oluşturuyor görelim:

Aşağıdaki CSS sınıfları, menü elemanının götürdüğü içerik tipi ve sınıflandırma yöntemi ile yakından ilgilidir. Bu yüzden, burada bahsedilecek sınıfları daha iyi anlamak için, İçerik Tipleri (Post Types) ve Kategoriler – Etiketler – Özel Sınıflandırmalar adlı derslerimize göz atmak isteyebilirsiniz.

.menu-item

Bu sınıf, bütün bütün menü elemanlarında oluşturulur.

.menu-item-has-children

Alt menüsü olan menü elemanlarına atanır.

.menu-item-object-{içerik-tipi}

Her menü elemanına atanır. Bu sınıfın adının sonu, menü elemanının hangi içerik tipine veya sınıflandırma yöntemine ait olduğunu gösterir.

.menu-item-object-category

Bir kategoriye ait bir menü elemanı ise bu sınıf atanır.

.menu-item-object-tag

Bir etikete ait bir menü elemanı ise bu sınıf atanır.

.menu-item-object-page

Sayfa tipinde bir içeriğe ait bir menü elemanı ise bu sınıf atanır.

.menu-item-object-{özel_tip}

Sonradan eklenmiş (özel) bir içerik ya da sınıflandırma yöntemine ait bir menü elemanı ise, bu CSS sınıfı atanır. Sınıf adındaki {özel_tip} değişkeni yerine, eklenen içerik tipi ya da sınıflandırma yönteminin link adı gelir.

.menu-item-type-{tip}

Bu CSS sınıfı her menü elemanına atanır. Sınıfın isminin sonundaki {tip} değişkeni yerine, menü elemanına göre ya post_type ya da taxonomy kelimeleri atanır.

.menu-item-type-post_type

Tipi bir sayfa ya da yazı olan bir içeriğe ait bir menü elemanına bu sınıf atanır.

.menu-item-type-taxonomy

Kategori, etiket veya başka bir sınıflandırma yöntemine ait bir menü elemanına bu sınıf atanır.

.current-menu-item

Ekrandaki sayfaya ait olan, yani en son tıklanan menü elemanına atanan sınıftır.

.current-menu-parent

En son tıklanan menü elemanın üst menüsüne atanan sınıftır.

.current-{object}-parent

En son tıklanan ve {object} değişkeni ile gösterilen içerik tipindeki veya sınıflandırma yöntemindeki menünün, üst menüsüne atanan sınıftır.

.current-{tip}-parent

En son tıklanan ve {tip} değişkeni ile gösterilen içerik tipindeki menünün, üst menüsüne atanan sınıftır.

.menu-item-home

Sitenin ana sayfası için kullanılan menü elemanına atanan sınıftır.