WordPress Temalarına Özel Navigasyon Menüleri Ekleme

WPBeginner’da, sayısız okuyucunun WordPress sitelerini kullanıcı deneyimini iyileştirmek, markalaşmayı artırmak ve dönüşümleri teşvik etmek için özelleştirmelerine yardımcı olduk. Ve doğru yapıldığında, türünün tek örneği bir navigasyon menüsünün etkileşimi artırmaya ve insanları sitenizde daha uzun süre tutmaya yardımcı olabileceğini gördük.

Sorun şu ki, tüm WordPress temalarında gezinti menüsünü görüntüleyebileceğiniz belirli konumlar vardır, bu nedenle bunu değiştirmek zor olabilir. Bu durum özellikle yeni başlayanlar için geçerlidir çünkü tema dosyalarını değiştirmek hassas bir süreçtir.

Bir blok tema kullanıyorsanız, bunu Tam Site Düzenleyicisi ile yapabilirsiniz. Ancak deneyimlerimize göre, tüm tema türleri için işe yarayacak daha iyi seçenekler var.

Örneğin, gelişmiş özelleştirmeler istiyorsanız SeedProd gibi güçlü bir sayfa oluşturucu kullanabilirsiniz. Ya da özel kod kullanmanın basit bir yolunu arıyorsanız, WPCode açık ara en iyi seçimdir.

Bu makalede, WordPress temanızın herhangi bir alanına nasıl özel bir navigasyon menüsü ekleyeceğinizi göstereceğiz. İhtiyaçlarınıza en uygun öğreticiyi seçebilmeniz için size 3 farklı seçenek sunacağız.

WordPress Temalarına Neden Özel Navigasyon Menüleri Eklemelisiniz?

Navigasyon menüsü, web sitenizin önemli alanlarına işaret eden bağlantıların bir listesidir. Ziyaretçilerin ilginç içerikleri bulmasını kolaylaştırır, bu da sayfa görüntülemelerini artırabilir ve WordPress’te hemen çıkma oranını azaltabilir.

Menünüzün tam konumu WordPress temanıza göre değişecektir. Çoğu temanın çeşitli seçenekleri vardır, böylece farklı menüler oluşturabilir ve bunları farklı konumlarda gösterebilirsiniz.

Mevcut WordPress temanızda menüleri nerede görüntüleyebileceğinizi görmek için Görünüm ” Menüler bölümüne gidin ve ardından ‘Görüntüleme konumu’ bölümüne bir göz atın.

Aşağıdaki görselde Astra WordPress teması tarafından desteklenen konumlar gösterilmektedir.

Bazen, temanızda ‘Görüntüleme konumu’ olarak listelenmeyen bir alanda bir menü göstermek isteyebilirsiniz.

Bunu akılda tutarak, WordPress temanızın herhangi bir alanına nasıl özel bir navigasyon menüsü ekleyeceğinize bir göz atalım. Tercih ettiğiniz yönteme atlamak için aşağıdaki hızlı bağlantıları kullanmanız yeterlidir:

Yöntem 1: Tam Site Düzenleyicisini Kullanma (Yalnızca Blok Tabanlı Temalar)

ThemeIsle Hestia Pro gibi bir blok tema kullanıyorsanız, Tam Site Düzenleme (FSE) ve blok düzenleyiciyi kullanarak özel bir gezinme menüsü ekleyebilirsiniz.

Daha fazla ayrıntı için en iyi WordPress tam site düzenleme temaları yazımıza bakabilirsiniz.

Bu yöntem her temayla çalışmaz ve menünün her bölümünü özelleştirmenize izin vermez. Herhangi bir WordPress temasına tamamen özel bir menü eklemek istiyorsanız, bunun yerine bir sayfa oluşturucu eklentisi kullanmanızı öneririz.

Blok tabanlı bir tema kullanıyorsanız Görünüm “ Düzenleyici bölümüne gidin.

Varsayılan olarak, tam site düzenleyicisi temanızın ana şablonunu gösterir, ancak herhangi bir alana bir gezinme menüsü ekleyebilirsiniz.

Mevcut tüm seçenekleri görmek için ‘Şablonlar’, ‘Desenler’ veya ‘Sayfalar’ seçeneklerinden birini seçmeniz yeterlidir.

Artık özel bir gezinti menüsü eklemek istediğiniz şablona, şablon bölümüne veya sayfaya tıklayabilirsiniz.

WordPress şimdi tasarımın bir önizlemesini gösterecektir. Bu şablonu düzenlemek için küçük kalem simgesine tıklayın.

Bir sonraki adım, menünüzü göstermek istediğiniz alana bir Navigasyon bloğu eklemektir.

Sol üst köşedeki mavi ‘+’ düğmesine tıklayın.

Şimdi, devam edin ve arama çubuğuna ‘Navigasyon’ yazın.

‘Navigasyon’ bloğu göründüğünde, bunu düzeninize sürükleyip bırakmanız yeterlidir.

Ardından, Navigasyon bloğunu seçmek için tıklayın.

Görüntülemek istediğiniz menüyü zaten oluşturduysanız, Navigasyon bloğunu seçmek için tıklayın. Sağ taraftaki menüde, ‘Menü’nün yanındaki üç noktalı simgeye tıklayın.

Daha sonra açılır menüden bir menü seçebilirsiniz.

Diğer bir seçenek de sayfalar, yazılar, özel bağlantılar ve daha fazlasını ekleyerek tam site düzenleyicisi içinde bir menü oluşturmaktır. Yeni menüye öğe eklemek için ‘+’ simgesine tıklamanız yeterlidir.

Bu, herhangi bir gönderi veya sayfa eklediğiniz ve bu bağlantıların yeni bir sekmede açılıp açılmayacağına karar verdiğiniz bir açılır pencere açar.

Ayrıca WordPress menüsüne bir arama çubuğu ekleyebilir, sosyal medya simgeleri ekleyebilir ve daha fazlasını yapabilirsiniz. Açılır pencerede, menüye eklemek istediğiniz bloğu yazmanız ve göründüğünde doğru seçeneği seçmeniz yeterlidir.

Daha sonra mini araç çubuğundaki ve sağ taraftaki menüdeki ayarları kullanarak bu bloğu yapılandırabilirsiniz. Menüye daha fazla öğe eklemek için bu adımları tekrarlamanız yeterlidir.

Menünün nasıl göründüğünden memnun olduğunuzda, ‘Kaydet’ düğmesine tıklamanız yeterlidir.

Siteniz artık yeni şablonu kullanacak ve ziyaretçiler özel navigasyon menünüzle etkileşime girebilecek.

Yöntem 2: Sayfa Oluşturucu Eklentisi Kullanma (Tüm Temalarla Çalışır)

Tam site editörü, blok tabanlı temalara menüler eklemenize olanak tanır. Ancak, herhangi bir WordPress temasına gelişmiş, tamamen özelleştirilebilir bir menü eklemek istiyorsanız, bir sayfa oluşturucu eklentisine ihtiyacınız olacaktır.

SeedProd, navigasyon menünüzün her bölümünü özelleştirmenize olanak tanıyan piyasadaki en iyi WordPress sayfa oluşturucu eklentisidir.

Özel navigasyon menüleri, açılış sayfaları ve çok daha fazlasını oluşturmak için bu aracı kullanma konusunda kapsamlı deneyime sahibiz. Daha fazla ayrıntı için SeedProd incelememizin tamamına göz atın.

Sayfalar söz konusu olduğunda, SeedProd başlangıç noktası olarak kullanabileceğiniz 350’den fazla profesyonelce tasarlanmış şablonla birlikte gelir. Bir şablon seçtikten sonra, SeedProd’un hazır Nav Menu bloğunu kullanarak sitenize özel bir navigasyon menüsü ekleyebilirsiniz.

Öncelikle SeedProd eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Eklentiyi etkinleştirdikten sonra SeedProd sizden lisans anahtarınızı isteyecektir.

Bu bilgiyi SeedProd web sitesindeki hesabınızda bulabilirsiniz. Anahtarı girdikten sonra ‘Anahtarı Doğrula’ butonuna tıklayın.

Bunu yaptıktan sonra, SeedProd ” Açılış Sayfaları ‘na gidin ve ‘Yeni Açılış Sayfası Ekle’ düğmesine tıklayın.

Artık özel sayfanız için bir şablon seçebilirsiniz.

Doğru tasarımı bulmanıza yardımcı olmak için SeedProd’un tüm şablonları, çok yakında ve potansiyel müşteri sıkıştırma kampanyaları gibi farklı kampanya türlerine göre düzenlenmiştir. SeedProd’un şablonlarını 404 sayfanızı geliştirmek için bile kullanabilirsiniz.

Herhangi bir tasarıma daha yakından bakmak için farenizi o şablonun üzerine getirin ve ardından büyüteç simgesine tıklayın.

Kullanmak istediğiniz bir tasarım bulduğunuzda, ‘Bu Şablonu Seç’e tıklayın.

Biz tüm görsellerimizde ‘Kara Cuma Satış Sayfası’ şablonunu kullanıyoruz, ancak siz istediğiniz şablonu kullanabilirsiniz.

Bir şablon seçtikten sonra, bu özel sayfa için bir isim yazın. SeedProd otomatik olarak sayfanın başlığına göre bir URL oluşturacaktır, ancak bu URL’yi istediğiniz herhangi bir şeyle değiştirebilirsiniz.

Örneğin, arama motorlarının sayfanın ne hakkında olduğunu anlamasına yardımcı olmak için alakalı anahtar kelimeler ekleyebilirsiniz. Bu, WordPress SEO ‘nuzu geliştirebilir ve arama motorunun sayfayı tıpkı sizinki gibi içerik arayan kişilere göstermesine yardımcı olabilir.

Bu bilgileri girdikten sonra ‘Kaydet ve Sayfayı Düzenlemeye Başla’ düğmesine tıklayın.

Çoğu şablon, tüm SeedProd sayfa düzenlerinin temel bileşenleri olan bazı blokları zaten içerir.

Bir bloğu özelleştirmek için sayfa düzenleyicisinde seçmek üzere tıklamanız yeterlidir.

Sol taraftaki araç çubuğu artık o blok için tüm ayarları gösterecektir. Örneğin, aşağıdaki resimde bir ‘Başlık’ bloğunun içindeki metni değiştiriyoruz.

Sol taraftaki menüde yer alan ayarları kullanarak metni biçimlendirebilir, hizalamasını değiştirebilir, bağlantılar ekleyebilir ve daha fazlasını yapabilirsiniz.

‘Gelişmiş’ sekmesini seçerseniz, daha da fazla ayara erişebilirsiniz. Örneğin, kutu gölgeleri ve CSS animasyonları ekleyerek bloğun gerçekten öne çıkmasını sağlayabilirsiniz.

Tasarımınıza yeni bloklar eklemek için sol taraftaki menüden herhangi bir bloğu bulup sayfaya sürüklemeniz yeterlidir. Bir bloğu silmek istiyorsanız, o bloğu seçmek için tıklayın ve ardından çöp kutusu simgesini kullanın.

Özel bir navigasyon menüsü oluşturmak istediğimizden, sayfaya bir ‘Nav Menu’ bloğu sürükleyin.

Bu, tek bir varsayılan ‘Hakkında’ öğesi içeren bir gezinme menüsü oluşturur.

Artık SeedProd editöründe yeni bir menü oluşturabilir veya WordPress kontrol panelinde daha önce oluşturduğunuz bir menüyü seçebilirsiniz.

Daha önce oluşturduğunuz bir menüyü göstermek için devam edin ve ‘WordPress Menüsü’ düğmesine tıklayın. Şimdi ‘Menüler’ açılır menüsünü açabilir ve listeden herhangi bir seçeneği seçebilirsiniz.

Bundan sonra, sol taraftaki menüdeki ayarları kullanarak yazı tipi boyutunu, metin hizalamasını ve daha fazlasını değiştirebilirsiniz.

Bunun yerine SeedProd içinde yeni bir menü oluşturmak istiyorsanız, ‘Basit’ düğmesini seçin.

Ardından, SeedProd’un varsayılan olarak oluşturduğu ‘Hakkında’ öğesini genişletmek için tıklayın.

Bu, metni değiştirebileceğiniz ve menü öğesinin bağlanacağı URL’yi ekleyebileceğiniz bazı kontrolleri açar.

Varsayılan olarak, bağlantı ‘dofollow’ olacak ve aynı tarayıcı penceresinde açılacaktır. Bu ayarları ‘URL Bağlantısı’ bölümündeki onay kutularını kullanarak değiştirebilirsiniz.

Aşağıdaki resimde, yeni bir pencerede açılacak bir ‘nofollow’ bağlantısı oluşturuyoruz. Bu konuda daha fazla bilgi için lütfen yeni başlayanlar için nofollow bağlantıları kılavuzumuza bakın.

Menüye daha fazla öğe eklemek için ‘Yeni Öğe Ekle’ düğmesine tıklamanız yeterlidir.

Daha sonra yukarıda açıklanan aynı süreci izleyerek bu öğelerin her birini özelleştirebilirsiniz.

Sol taraftaki menüde yazı tipi boyutunu ve metin hizalamasını değiştiren ayarlar da vardır.

Menüdeki her öğe arasında görünecek bir bölücü bile oluşturabilirsiniz.

Bundan sonra, devam edin ve ‘Gelişmiş’ sekmesine geçin. Burada menünün renklerini, aralıklarını, tipografisini ve diğer gelişmiş seçenekleri değiştirebilirsiniz.

Siz değişiklik yaptıkça canlı önizleme otomatik olarak güncellenir, böylece tasarımınızda neyin iyi göründüğünü görmek için farklı ayarları deneyebilirsiniz.

SeedProd varsayılan olarak mobil ve masaüstü cihazlarda aynı menüyü gösterir. Ancak, mobil cihazlar genellikle masaüstü bilgisayarlara kıyasla çok daha küçük ekranlara sahiptir.

Bunu göz önünde bulundurarak, mobil cihazlarda göstermek için ayrı bir menü oluşturmak isteyebilirsiniz. Örneğin, mobil kullanıcıların yana doğru kaydırma yapmasına gerek kalmaması için dikey bir düzen kullanabilirsiniz. Ayrıca akıllı telefon ve tablet cihazlarda daha az bağlantı göstermek isteyebilirsiniz.

Mobil cihazlar için hazır bir menü oluşturmak için, yukarıda açıklanan aynı süreci izleyerek menüyü tasarlayın. Ardından, ‘Gelişmiş’ sekmesini seçin ve ‘Cihaz Görünürlüğü’ bölümünü genişletmek için tıklayın.

Artık ‘Masaüstünde Gizle’ kaydırıcısını açıp kapatabilirsiniz.

Artık SeedProd bu menüyü sadece mobil kullanıcılara gösterecek.

Özel menünüzün nasıl göründüğünden memnun olduğunuzda, yayınlama zamanı gelmiştir.

‘Kaydet’in yanındaki açılır oka tıklamanız ve ardından ‘Yayınla’yı seçmeniz yeterlidir.

Şimdi, WordPress blogunuzu ziyaret ederseniz, özel gezinme menüsünü çalışırken göreceksiniz.

Yöntem 3: WordPress’te Kod Kullanarak Özel Navigasyon Menüsü Oluşturma (Gelişmiş)

Bir sayfa oluşturucu eklentisi kurmak istemiyorsanız, kod kullanarak özel bir gezinme menüsü ekleyebilirsiniz. Genellikle temanızın functions.php dosyasına özel kod parçacıklarının nasıl ekleneceğine dair talimatlar içeren kılavuzlar bulabilirsiniz.

Ancak, kodunuzdaki küçük bir hata bile bir dizi yaygın WordPress hatasına neden olabileceğinden ve hatta sitenizi tamamen bozabileceğinden bu yöntemi önermiyoruz. Ayrıca WordPress temanızı güncellediğinizde özel kodu kaybedersiniz.

Bu yüzden WPCode kullanmanızı öneriyoruz. Herhangi bir çekirdek WordPress dosyasını düzenlemek zorunda kalmadan WordPress’e özel kod eklemenin en kolay ve en güvenli yoludur.

Yapmanız gereken ilk şey ücretsiz WPCode eklentisini yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için WordPress eklentisi yükleme hakkındaki adım adım kılavuzumuza bakın.

Etkinleştirmenin ardından WordPress panonuzda Kod Parçacıkları “ Parçacık Ekle bölümüne gidin.

Burada, sitenize ekleyebileceğiniz tüm hazır snippet’leri göreceksiniz. Bunlar arasında yorumları tamamen devre dışı bırakmanıza, WordPress’in genellikle desteklemediği dosya türlerini yüklemenize, ek sayfalarını devre dışı bırakmanıza ve çok daha fazlasına olanak tanıyan bir snippet bulunmaktadır.

Kendi snippet’inizi oluşturmak için farenizi ‘Özel Kodunuzu Ekleyin’ seçeneğinin üzerine getirin ve ardından ‘Snippet kullan’ seçeneğine tıklayın.

Başlamak için, özel kod parçacığı için bir başlık girin. Bu, kod parçacığını WordPress panonuzda tanımlamanıza yardımcı olacak herhangi bir şey olabilir.

Bundan sonra, ‘Kod Türü’ açılır menüsünü açın ve ‘PHP Snippet’i seçin.

Bunu yaptıktan sonra, aşağıdaki kod parçacığını kod düzenleyiciye yapıştırmanız yeterlidir:

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

Bu, temanıza ‘Özel Menüm’ adında yeni bir menü konumu ekleyecektir. Farklı bir ad kullanmak için kod parçacığını değiştirmeniz yeterlidir.

Temanıza birden fazla özel gezinti menüsü eklemek istiyorsanız, kod parçacığına fazladan bir satır eklemeniz yeterlidir.

Örneğin, burada temamıza ‘Özel Menüm’ ve ‘Ekstra Menü:’ adında iki yeni menü konumu ekliyoruz.

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'my-custom-menu' => __( 'My Custom Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

Bundan sonra, ‘Ekleme’ seçeneklerine kaydırın. Zaten seçili değilse, WPCode’un snippet’i sitenizin tamamına eklemesi için ‘Otomatik Ekle’ yöntemini seçin.

Bundan sonra, ‘Konum’ açılır menüsünü açın ve ‘Her Yerde Çalıştır’a tıklayın.

Ardından, ekranın üst kısmına kaydırmaya ve ‘Etkin Değil’ geçişine tıklayarak ‘Etkin’ olarak değiştirmeye hazırsınız.

Son olarak, devam edin ve bu snippet’i canlı hale getirmek için ‘Kaydet’e tıklayın.

Bundan sonra, Görünüm ” Menüler bölümüne gidin ve ‘Görüntüleme konumu’ alanına bakın.

Şimdi yeni bir ‘Özel Menüm’ seçeneği görmelisiniz.

Şimdi devam edebilir ve yeni konuma bazı menü öğeleri ekleyebilirsiniz. Daha fazla bilgi için lütfen yeni başlayanlar için navigasyon menülerinin nasıl ekleneceğine ilişkin adım adım kılavuzumuza bakın.

Menünüzden memnun olduğunuzda, bir sonraki adım onu WordPress temanıza eklemektir.

WordPress temanıza özel gezinme menüsü ekleme

Çoğu web sitesi navigasyon menüsünü doğrudan başlık bölümünün altında gösterir. Bu da menünün, site logosu veya başlığıyla birlikte ziyaretçilerin gördüğü ilk şeylerden biri olduğu anlamına gelir.

Temanızın şablon dosyasına bazı kodlar ekleyerek özel gezinme menüsünü herhangi bir konuma ekleyebilirsiniz.

WordPress panonuzda Görünüm ” Tema Dosyası Düzenleyicisi bölümüne gidin.

Sağ taraftaki menüde, menüyü eklemek istediğiniz şablonu seçin. Örneğin, özel navigasyon menüsünü web sitenizin üstbilgisinde göstermek istiyorsanız, genellikle header.php dosyasını seçersiniz.

Doğru şablon dosyasını bulma konusunda yardım almak için lütfen WordPress temanızda hangi dosyaların düzenleneceğini bulma kılavuzumuza bakın.

Dosyayı seçtikten sonra, bir wp_nav_menu işlevi eklemeniz ve özel menünüzün adını belirtmeniz gerekir.

Örneğin, aşağıdaki kod parçacığında, temanın üstbilgisine ‘Özel Menüm’ ekliyoruz:

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

Kodu ekledikten sonra, değişikliklerinizi kaydetmek için ‘Dosyayı Güncelle’ düğmesine tıklayın.

Şimdi, sitenizi ziyaret ederseniz, özel menüyü çalışırken göreceksiniz.

Varsayılan olarak, menünüz düz bir madde işaretli liste olarak görünecektir.

Sitenize özel CSS kodu ekleyerek özel navigasyon menüsünü WordPress temanıza veya şirket markanıza daha iyi uyacak şekilde şekillendirebilirsiniz.

Bunu yapmak için Görünüm ” Özelleştir‘e gidin.

WordPress tema özelleştiricisinde‘Ek CSS’ye tıklayın.

Bu, bazı CSS’leri yazabileceğiniz küçük bir kod düzenleyici açar.

Artık tema şablonunuza eklediğiniz CSS sınıfını kullanarak menünüzü şekillendirebilirsiniz. Örneğimizde bu sınıf .custom_menu_class‘tır.

Aşağıdaki kodda, kenar boşlukları ve dolgu ekliyoruz, metin rengini siyah olarak ayarlıyoruz ve menü öğelerini yatay bir düzende düzenliyoruz:

div.custom-menu-class ul {
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
	display:inline-block;
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline-block;
} 

div.custom-menu-class a {
    color:#000;
}

WordPress özelleştirici otomatik olarak güncellenecektir.

Şimdi menünün yeni stille nasıl görüneceğini gösterecektir.

Menünün nasıl göründüğünden memnunsanız, değişikliklerinizi canlı hale getirmek için ‘Yayınla’ya tıklayın.

Daha fazla bilgi için lütfen WordPress gezinti menülerinin nasıl şekillendirileceğine ilişkin kılavuzumuza bakın.

Uzman Kılavuzları: WordPress Navigasyon Menüleriyle Daha Fazlasını Yapın

WordPress ile her türlü yararlı ve ilgi çekici menüyü oluşturabilirsiniz. Bunu akılda tutarak, navigasyon menülerinizden daha da fazlasını elde etmenize yardımcı olacak bazı uzman kılavuzlarını burada bulabilirsiniz:

• WordPress’te Gezinti Menülerine Resim Simgeleri Ekleme
• WordPress’te Menülere Koşullu Mantık Nasıl Eklenir (Adım Adım)
• WordPress Temalarınıza Menü Açıklamaları Nasıl Eklenir?
• WordPress’te Tam Ekran Duyarlı Menü Nasıl Eklenir
• WordPress Sitenize Mega Menü Nasıl Eklenir (Adım Adım)

Bu nihai kılavuzun WordPress’te özel bir gezinme menüsünün nasıl ekleneceğini öğrenmenize yardımcı olduğunu umuyoruz. WordPress başlık menünüze nasıl düğme ekleyeceğiniz veya WordPress‘ te bir menü öğesini nasıl vurgulayacağınız hakkındaki kılavuzlarımızı da görmek isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.