WordPress Menu Olusturma ve Yonetimi

Bir ziyaretçi sitenize girdiğinde ilk baktığı yerlerden biri navigasyon menüsüdür. Menü, sitenizin haritasıdır; kullanıcının aradığını kaç tıklamada bulacağını, hangi sayfaların önemli olduğunu ve markanızın nasıl organize edildiğini bir bakışta anlatır. İyi kurgulanmış bir menü hem ziyaretçinin sitede daha uzun kalmasını sağlar hem de arama motorlarının içeriğinizi doğru şekilde taramasına yardımcı olur. Kötü kurgulanmış bir menü ise en değerli içeriğinizi görünmez kılar ve dönüşüm oranlarınızı sessizce düşürür.

WordPress, kod yazmadan güçlü menüler kurmanız için "Görünüm > Menüler" adında görsel bir düzenleyici sunar. Bu ekranda sayfalarınızı, yazılarınızı, kategorilerinizi ve dilediğiniz her türlü bağlantıyı sürükle-bırak mantığıyla düzenler, alt menüler oluşturur ve menüyü temanızın farklı bölgelerine (üst menü, alt bilgi, kenar çubuğu gibi) atarsınız. Bu rehberde klasik temalardaki menü ekranından blok temaların Gutenberg tabanlı menü bloğuna kadar tüm süreci, gerçek örneklerle ve uzun vadede işinizi kolaylaştıracak ipuçlarıyla adım adım ele alacağız.

Görünüm > Menüler Ekranını Tanımak#

Klasik (blok olmayan) bir tema kullanıyorsanız menü yönetiminin merkezi WordPress yönetim panelindeki Görünüm > Menüler ekranıdır. Bu ekran iki ana sütundan oluşur. Sol tarafta menüye ekleyebileceğiniz öğelerin bulunduğu kutular vardır: Sayfalar, Yazılar, Özel Bağlantılar ve Kategoriler. Sağ tarafta ise oluşturduğunuz menünün yapısı, yani öğelerin sıralaması ve hiyerarşisi yer alır.

İlk kez giriyorsanız üstteki "yeni bir menü oluşturun" bağlantısına tıklayıp menünüze anlamlı bir isim verin. Bu isim ziyaretçiye görünmez; yalnızca yönetimde menüleri birbirinden ayırmanıza yarar. İyi bir pratik, ismi menünün görevine göre koymaktır: Ana Menü, Alt Bilgi Menüsü, Hesap Menüsü gibi. Bir sitede birden fazla menü olması çok olağandır; header'da geniş bir ana menü, footer'da kısa bir yasal bağlantılar menüsü kullanmak yaygın bir düzendir.

Ekranın sağ üst köşesindeki Ekran Seçenekleri sekmesini açmayı unutmayın. WordPress varsayılan olarak "CSS Sınıfları", "Bağlantı Hedefi" ve "Açıklama" gibi gelişmiş alanları gizler. Bu sekmeyi açıp ilgili kutuları işaretlediğinizde menü öğelerine çok daha fazla müdahale edebilir hale gelirsiniz. Bu ayarları birazdan alt başlıklarda ayrıntılı kullanacağız.

Menü Konumları (Header, Footer ve Tema Bölgeleri)#

WordPress'te bir menü oluşturmak tek başına yeterli değildir; o menüyü temanın hangi bölgesinde göstermek istediğinizi de belirtmeniz gerekir. Temalar, menü yerleştirebileceğiniz noktaları önceden tanımlar ve bunlara menü konumu denir. Tipik bir tema en az bir "birincil menü" (primary / header) konumu tanımlar; birçoğu ayrıca footer, sosyal medya veya mobil için ek konumlar da sunar.

Menü konumunu iki yerden atayabilirsiniz. Birincisi, menü düzenleme ekranının altındaki Menü Ayarları bölümüdür; buradaki "Görüntülenecek konum" kutucuklarından uygun olanı işaretlersiniz. İkincisi ise ekranın üstündeki Konumları Yönet sekmesidir; bu sekme size tüm konumların bir listesini ve her birine hangi menünün atandığını tablo hâlinde gösterir. Çok menülü sitelerde bu tablo görünümü hangi menünün nerede olduğunu takip etmeyi kolaylaştırır.

Aşağıdaki tablo, sık karşılaşılan menü konumlarını ve tipik kullanım amaçlarını özetliyor:

Bir temanın hangi konumları desteklediği tema geliştiricisinin functions.php dosyasında yaptığı tanıma bağlıdır. Kendi çocuk temanızı yönetiyorsanız yeni bir konumu şu şekilde kaydedebilirsiniz:

function cloutr_menu_konumlari() {
    register_nav_menus( array(
        'birincil' => __( 'Ana Menü', 'cloutr' ),
        'footer'   => __( 'Alt Bilgi Menüsü', 'cloutr' ),
    ) );
}
add_action( 'after_setup_theme', 'cloutr_menu_konumlari' );

Bu kod çalıştıktan sonra "Görünüm > Menüler" ekranındaki konum listesinde "Ana Menü" ve "Alt Bilgi Menüsü" seçenekleri belirir. Doğru temayı seçmek menü esnekliğinizi doğrudan etkiler; tema seçerken menü desteğine dikkat etmek isterseniz WordPress tema seçimi rehberimiz konuya ayrıntılı değiniyor.

Menüye Öğe Ekleme (Sayfa, Yazı, Kategori ve Özel Bağlantı)#

Menüyü oluşturduktan sonra sıra içeriğe geldi. Sol sütundaki kutulardan istediğiniz öğeleri seçip "Menüye Ekle" düğmesine basmanız yeterli. Her öğe türünün kendine göre bir kullanım senaryosu vardır ve doğru türü seçmek uzun vadede işinizi kolaylaştırır.

Sayfalar, kurumsal sitelerin ana menüsünün belkemiğidir: Anasayfa, Hakkımızda, Hizmetler, İletişim gibi. Sayfa öğesini menüye eklediğinizde WordPress o sayfanın bağlantısını otomatik yönetir; sayfanın adresini değiştirseniz bile menüdeki bağlantı kırılmaz. Yazılar genellikle menüye tek tek eklenmez, ancak öne çıkarmak istediğiniz belirli bir rehber veya duyuru varsa eklenebilir.

Kategoriler, blog ağırlıklı sitelerde çok işe yarar. Menüye bir kategori eklediğinizde ziyaretçi tıkladığında o kategorideki tüm yazıların listesine ulaşır. Örneğin bir teknoloji blogunda "Sunucu", "Hosting", "Güvenlik" kategorilerini menüye koymak doğal bir bilgi mimarisi oluşturur. Özel Bağlantılar ise en esnek seçenektir; buraya herhangi bir URL ve etiket yazabilirsiniz. Dış bir siteye, PDF dosyasına, mailto: bağlantısına veya panelinizdeki bir sayfaya yönlendirme yapmak için idealdir.

Özel bağlantı kutusunu kullanırken URL alanına tam adresi yazmanız gerekir. Birkaç pratik örnek:

# Dış siteye bağlantı
https://clou.tr/hosting

# Aynı sayfada belirli bir bölüme (anchor) atlama
/hakkimizda#ekibimiz

# E-posta başlatma
mailto:[email protected]

# Telefon araması (mobilde tıklanınca arar)
tel:+902123334455

Bir sitedeki menü öğelerini planlarken hangi sayfaların gerçekten menüde olması gerektiğini düşünün. Menü, sitedeki her sayfayı listeleme yeri değildir; ziyaretçinin en çok ihtiyaç duyduğu 5-7 ana başlığı barındırmalıdır. Daha az kullanılan sayfaları footer menüsüne veya alt menülere taşımak, ana menüyü sade ve okunaklı tutar. Henüz WordPress'i yeni kurduysanız temel yapıyı WordPress kurulumu rehberimizden gözden geçirebilirsiniz.

Sürükleyerek Alt Menü (Dropdown) Oluşturma#

Menülerin en güçlü yanı hiyerarşik yapı kurabilmenizdir. Bir öğeyi diğerinin altında "alt öğe" (child) yaptığınızda, çoğu temada üst öğenin üzerine gelindiğinde açılan bir açılır menü (dropdown) belirir. Bu yapı, ilgili sayfaları mantıklı gruplar altında toplamanızı sağlar; örneğin "Hizmetler" başlığı altında "Web Hosting", "Sunucu Kiralama", "SSL Sertifikası" gibi alt sayfaları listeleyebilirsiniz.

Alt menü oluşturmak sürükle-bırak ile yapılır. Sağ sütundaki menü yapısında bir öğeyi tutup hafifçe sağa doğru kaydırdığınızda, öğenin bir üstündeki öğenin alt öğesi hâline geldiğini görürsünüz; öğe biraz içeriye girintili görünür ve altında "alt öğe" ibaresi belirir. Daha derin seviyeler için (alt öğenin altına bir öğe daha) aynı işlemi bir kez daha sağa kaydırarak tekrarlarsınız. Öğeyi tekrar sola çekerek bir üst seviyeye taşıyabilirsiniz.

Aşağıdaki metin, sürükleme sonrası oluşan tipik bir hiyerarşiyi temsil ediyor:

Anasayfa
Hizmetler
    Web Hosting
    Sunucu Kiralama
        VDS Sunucu
        Sanal Sunucu
    SSL Sertifikası
Blog
    Sunucu Yönetimi
    Güvenlik
İletişim

Burada "Hizmetler" birinci seviye, "Web Hosting" ikinci seviye, "VDS Sunucu" ise üçüncü seviyedir. Çoğu tema iki seviyeyi rahatça gösterir; üçüncü seviye için temanın "mega menü" veya çok seviyeli açılır menü desteği olması gerekir. Derin hiyerarşilerin mobilde kullanım zorluğu yaratabileceğini unutmayın; genellikle iki seviye çoğu site için yeterli ve kullanıcı dostudur.

Bir pratik ipucu: Bazen "Hizmetler" gibi bir üst başlığın kendisinin bir sayfası olmasını istemezsiniz, sadece açılır menüyü tetiklesin istersiniz. Bu durumda üst öğeyi bir özel bağlantı olarak ekleyip URL alanına # yazabilirsiniz. Böylece tıklandığında hiçbir yere gitmez, yalnızca alt menüyü açar. Bazı temalarda bunun için özel bir "başlık" (heading) öğe tipi de bulunur.

Menü Öğesine Açılım ve CSS Sınıfı Ekleme#

Menü öğelerinin görünümünü ve davranışını ince ayarla kontrol etmek isteyebilirsiniz. Bunun için önce ekranın sağ üstündeki Ekran Seçenekleri sekmesinden "CSS Sınıfları", "Bağlantı Hedefi", "Bağlantı İlişkisi (XFN)", "Başlık Özniteliği" ve "Açıklama" kutularını işaretleyin. Bu işaretlerden sonra her menü öğesini açtığınızda ek alanlar görünür hâle gelir.

Bağlantı Hedefi alanı, öğeye tıklandığında yeni sekmede mi yoksa aynı sekmede mi açılacağını belirler. Dış bir siteye giden bağlantılarda "Yeni sekmede aç" seçeneğini işaretlemek, ziyaretçiyi sitenizden koparmadığı için yaygın bir tercihtir. Açıklama alanı bazı temalarda menü öğesinin altında küçük bir açıklama metni gösterir; mega menülerde sıkça kullanılır.

CSS Sınıfları alanı ise en güçlü özelleştirme aracıdır. Buraya yazdığınız sınıf adları menü öğesinin HTML çıktısına eklenir ve siz de temanızın ek CSS bölümünden o sınıfı hedefleyerek öğeyi biçimlendirebilirsiniz. Örneğin "İletişim" öğesini bir buton gibi göstermek isterseniz ona menu-buton sınıfını verip şu CSS'i ekleyebilirsiniz:

.menu-buton a {
    background-color: #06b6d4;
    color: #ffffff !important;
    padding: 8px 18px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.menu-buton a:hover {
    background-color: #0891b2;
}

Benzer şekilde, bir kampanya öğesine menu-vurgu sınıfı verip yanıp sönen bir rozet ekleyebilir, ya da mobilde gizlemek istediğiniz bir öğeye sadece-masaustu sınıfı verip medya sorgusuyla saklayabilirsiniz. CSS'i "Görünüm > Özelleştir > Ek CSS" bölümüne eklemek, tema güncellemelerinde kaybolmaması açısından güvenli bir yoldur. Kapsamlı CSS değişiklikleri planlıyorsanız bir çocuk tema kullanmak en sağlıklı yaklaşımdır.

Aşağıdaki tablo, öğe bazında sık kullanılan alanların işlevini özetliyor:

Blok Temalarda Menü Bloğu ile Çalışmak#

WordPress 5.9 ile gelen ve giderek yaygınlaşan blok temalar (Twenty Twenty-Two ve sonrası gibi), klasik "Görünüm > Menüler" ekranını kullanmaz. Bunun yerine tüm site yapısını Gutenberg blok düzenleyicisiyle kurgulayan Tam Site Düzenleme (Site Editor / Görünüm > Düzenleyici) yaklaşımını benimser. Bu mimaride navigasyon, Gezinme (Navigation) bloğu ile yönetilir.

Blok temada menüyü düzenlemek için "Görünüm > Düzenleyici" bölümüne girip başlık (header) şablon parçasını açar, oradaki Gezinme bloğunu seçersiniz. Blok seçiliyken araç çubuğundan yeni sayfa bağlantıları ekler, mevcut öğeleri sürükleyerek sıralar ve alt menüler oluşturursunuz. Alt menü mantığı burada da geçerlidir; bir bağlantının içine "Alt Menü" (submenu) öğesi ekleyerek açılır yapılar kurarsınız. Öğe eklerken çıkan arama kutusuna sayfa adını yazıp doğrudan seçebilir veya özel bir URL girebilirsiniz.

İki yaklaşım arasındaki temel farklar şu şekilde özetlenebilir:

Blok temada, klasik menü ekranını hâlâ görmek isterseniz "Klasik Menü" bloğunu kullanarak eski menülerinizi içe aktarabilirsiniz; bu, klasik temadan blok temaya geçişte menülerinizi kaybetmemek için pratik bir köprüdür. Genel olarak blok temaların menü yönetimi daha görseldir ancak farklı bir kas hafızası gerektirir. Hangi mimariyi kullandığınızı bilmek, doğru ekranda vakit kaybetmeden çalışmanızı sağlar.

Mobil Menü ve Erişilebilirlik Yönetimi#

Ziyaretçilerin büyük çoğunluğu sitenize telefondan girer, bu yüzden menünün mobilde nasıl davrandığı en az masaüstü kadar önemlidir. Modern temaların neredeyse tamamı, dar ekranlarda ana menüyü otomatik olarak bir hamburger ikonuna (üç çizgi) dönüştürür; ziyaretçi bu ikona dokununca menü açılır. Bu davranış tema tarafından yönetilir ve genellikle "Görünüm > Özelleştir" altında mobil menü rengi, ikon stili gibi ayarlar sunulur.

Mobil deneyimini iyileştirmek için birkaç somut öneri: Ana menüdeki öğe sayısını mümkün olduğunca az tutun, çünkü küçük ekranda uzun listeler yorucudur. Çok seviyeli açılır menüler mobilde dokunmatik olarak zor kullanılır; bu yüzden mobil için sadeleştirilmiş ayrı bir menü tanımlamayı düşünebilirsiniz. Bazı temalar "Mobil Menü" adında ayrı bir konum sunar; bu konuma yalnızca en kritik 4-5 bağlantıyı koyabilirsiniz.

Erişilebilirlik de göz ardı edilmemeli. Menü etiketlerinin açık ve anlaşılır olması, ekran okuyucu kullanan ziyaretçiler için "Başlık Özniteliği" alanının doldurulması ve renk kontrastının yeterli olması önemlidir. WordPress'in menü yapısı varsayılan olarak erişilebilir HTML üretir, ancak eklediğiniz özel CSS ile bunu bozmamaya dikkat edin; örneğin sadece renkle ayrım yaratan (metin ipucu olmayan) menü öğeleri erişilebilirlik açısından sorunludur.

Menü performansı da bir konudur. Çok büyük mega menüler ve ağır CSS/JS bağımlılıkları sayfa yüklenmesini yavaşlatabilir. Sitenizin genel hızını korumak için sağlam bir altyapı üzerinde çalışması da fayda sağlar; WordPress için optimize edilmiş bir ortam düşünüyorsanız WordPress hosting paketleri ya da genel hosting çözümleri hız ve kararlılık açısından iyi bir temel sunar. Menünüzü değiştirmeden önce sitenizin bir yedeğini almak, olası bir hatada geri dönebilmeniz için her zaman iyi bir alışkanlıktır.

Menüleri Kod ile Yönetmek (İleri Düzey)#

Görsel ekran çoğu ihtiyacı karşılasa da, bazen menüyü tema kodunda programatik olarak yönetmek istersiniz. Örneğin çocuk temanızda özel bir bölgeye menü basmak için wp_nav_menu() fonksiyonunu kullanırsınız. Bu fonksiyon, atadığınız menü konumunu alıp HTML olarak çıktılar:

wp_nav_menu( array(
    'theme_location' => 'birincil',
    'container'      => 'nav',
    'container_class'=> 'ana-menu',
    'menu_class'     => 'menu-listesi',
    'depth'          => 2,
    'fallback_cb'    => false,
) );

Buradaki theme_location, register_nav_menus ile tanımladığınız konum anahtarıyla eşleşmelidir. depth parametresi kaç seviye alt menü çıktılanacağını sınırlar; 2 yazmak yalnızca ana öğeler ve bir seviye alt menü gösterir. fallback_cb değerini false yapmak, o konuma henüz bir menü atanmadığında istenmeyen bir varsayılan liste basılmasını engeller.

WordPress veritabanında menüler, wp_terms tablosunda nav_menu taksonomisi olarak, menü öğeleri ise wp_posts tablosunda nav_menu_item yazı tipi olarak saklanır. Doğrudan SQL ile müdahale nadiren gereklidir ve risklidir, ancak bir menünün var olup olmadığını hızlıca kontrol etmek gibi durumlarda faydalı olabilir:

SELECT t.term_id, t.name, tt.count
FROM wp_terms t
JOIN wp_term_taxonomy tt ON t.term_id = tt.term_id
WHERE tt.taxonomy = 'nav_menu';

Bu tür veritabanı işlemlerine girişmeden önce mutlaka tam bir yedek alın. Menü yapısını taşımak, yeni bir siteye kopyalamak veya bir hatayı gidermek gibi senaryolarda site taşıma ve yedekleme süreçlerini titizlikle yürütmek, veri kaybı riskini ortadan kaldırır. Sunucu düzeyinde daha fazla kontrol istiyorsanız yönetimli çözümler yerine bir VDS sunucu üzerinde kendi WordPress ortamınızı kurmak da mümkündür.

Sıkça Sorulan Sorular#

Menümü oluşturdum ama sitede görünmüyor, neden?#

En yaygın sebep menüye bir konum atamamış olmanızdır. WordPress'te bir menü oluşturmak onu otomatik olarak göstermez; menü düzenleme ekranının altındaki "Menü Ayarları" bölümünden veya "Konumları Yönet" sekmesinden menüyü uygun bir tema konumuna (örneğin birincil menü) atamanız gerekir. Ayrıca değişikliklerinizi kaydettiğinizden emin olun ve tarayıcı ya da site önbelleğini temizleyerek tekrar kontrol edin.

Aynı sayfayı hem üst menüde hem alt bilgide gösterebilir miyim?#

Evet, sorun değil. WordPress'te birden fazla menü oluşturabilir ve aynı sayfayı istediğiniz kadar menüye ekleyebilirsiniz. Örneğin "İletişim" sayfasını hem header menüsüne hem de footer menüsüne koyabilirsiniz; bunlar birbirinden bağımsız öğelerdir. Sayfa bağlantısını değiştirmeniz gerektiğinde her iki menüde de otomatik güncellenir, çünkü ikisi de aynı sayfa nesnesine bağlıdır.

Menü öğesini tıklanınca yeni sekmede nasıl açtırırım?#

Bunun için önce ekranın sağ üstündeki "Ekran Seçenekleri" sekmesini açıp "Bağlantı Hedefi" kutusunu işaretlemeniz gerekir. Ardından ilgili menü öğesini genişlettiğinizde "Bağlantıyı yeni sekmede aç" seçeneği görünür hâle gelir; bu kutuyu işaretleyip menüyü kaydettiğinizde öğe artık yeni sekmede açılır. Bu ayar özellikle dış sitelere veya PDF dosyalarına giden bağlantılar için önerilir.

Blok temada Görünüm > Menüler ekranını bulamıyorum, ne yapmalıyım?#

Blok temalar klasik menü ekranını kullanmadığı için o menü kaybolmuş gibi görünür. Bu temalarda navigasyonu "Görünüm > Düzenleyici" bölümünden, başlık şablon parçasındaki Gezinme bloğunu seçerek yönetirsiniz. Eğer eski menü yönetimine alışıksanız ve mutlaka geri istiyorsanız, bir çocuk tema veya eklenti aracılığıyla klasik menü desteğini yeniden etkinleştirebilir ya da klasik bir temaya geçebilirsiniz.

Açılır alt menü çalışmıyor, öğeler alt alta görünüyor?#

Öncelikle öğeleri sürükleyerek gerçekten alt öğe (girintili) yaptığınızdan emin olun; sadece sıralamayı değiştirmek alt menü oluşturmaz, öğeyi bir üstteki öğenin altına doğru sağa kaydırmanız gerekir. İkinci olası sebep, temanızın açılır menüyü desteklememesi veya bir CSS/JavaScript hatasıdır. Farklı bir temayla deneyerek sorunun temadan mı yoksa yapıdan mı kaynaklandığını ayırt edebilir, gerekirse temanın destek belgelerine başvurabilirsiniz.

Kapanış#

WordPress menüleri, göründüğünden çok daha güçlü bir araçtır. Doğru kurgulanmış bir navigasyon, ziyaretçinin aradığını saniyeler içinde bulmasını sağlar, arama motorlarının sitenizi daha iyi anlamasına yardımcı olur ve markanızın profesyonel görünmesine katkıda bulunur. Klasik "Görünüm > Menüler" ekranını ya da blok temaların Gezinme bloğunu kullanın; temel mantık aynıdır: doğru öğeleri seçin, anlamlı bir hiyerarşi kurun ve menüyü uygun bölgeye atayın. Zaman içinde CSS sınıfları, açılır menüler ve mobil optimizasyonuyla menünüzü siteniz büyüdükçe geliştirebilirsiniz.

İyi bir menünün arkasında hızlı ve kararlı bir altyapı olması gerektiğini de unutmayın. Sitenizin WordPress için optimize edilmiş bir ortamda çalışması, menü ister sade ister devasa bir mega menü olsun, sayfalarınızın hızlı açılmasını sağlar. Clou.TR'nin WordPress hosting paketleri, güçlü web hosting altyapısı ve dilerseniz kendi ortamınızı kurabileceğiniz sunucu çözümleri ile projenize sağlam bir temel sunuyoruz. Kurulumdan güvenliğe, SSL sertifikası ile veri güvenliğinden düzenli yedeklemeye kadar tüm ihtiyaçlarınız için ürün sayfalarımızı inceleyebilir, bugün kendi WordPress sitenizin navigasyonunu bir üst seviyeye taşıyabilirsiniz.