WordPress Temalarına Özel Gezinme Menüleri Nasıl Eklenir

WPBeginner'da, kullanıcı deneyimini iyileştirmek, markalaşmayı güçlendirmek ve dönüşümleri artırmak için sayısız okuyucunun WordPress sitelerini özelleştirmelerine yardımcı olduk. Ve doğru yapıldığında, eşsiz bir navigasyon menüsünün etkileşimi artırmaya ve insanların sitenizde daha uzun süre kalmasına yardımcı olabileceğini gördük.

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

When you’re using a block theme, you can do this with the Full Site Editor. But, in our experience, there are better options that will work for all types of themes.

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

Bu makalede, WordPress temanızın herhangi bir alanına özel bir gezinme menüsü eklemeyi göstereceğiz. İhtiyaçlarınıza uygun öğreticiyi seçebilmeniz için 3 farklı seçeneği adım adım anlatacağız.

WordPress Temalarına Özel Gezinme Menüleri Neden Eklenir?

Gezinme menüsü, web sitenizin önemli alanlarına işaret eden bağlantıların bir listesidir. Ziyaretçilerin ilginç içerikleri bulmaları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 bağlı olarak değişecektir. Çoğu temanın birkaç seçeneği vardır, bu nedenle farklı menüler oluşturabilir ve bunları farklı konumlarda gösterebilirsiniz.

Mevcut WordPress temanızda menüleri nereye yerleştirebileceğ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 bakın.

Aşağıdaki resim, Astra WordPress teması tarafından desteklenen konumları göstermektedir.

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 özel bir gezinme menüsü eklemeye nasıl bakacağımıza 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)
• Yöntem 2: Sayfa Oluşturucu Eklentisi Kullanma (Tüm Temalarla Çalışır)
• Method 3: Create a Custom Navigation Menu in WordPress Using Code (Advanced)

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

If you are using a block theme such as ThemeIsle Hestia Pro, then you can add a custom navigation menu using Full Site Editing (FSE) and the block editor.

Daha fazla ayrıntı için, en iyi WordPress tam site düzenleme temaları hakkındaki makalemizi görebilirsiniz.

Bu yöntem her tema ile ç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çeneğini belirleyin.

Özel bir gezinme menüsü eklemek istediğiniz şablon, şablon parçası veya sayfaya şimdi tıklayabilirsiniz.

WordPress şimdi tasarımın ö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 Gezinme bloğu eklemektir.

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

Şimdi, arama çubuğuna 'Gezinme' yazın.

'Gezinme' bloğu göründüğünde, onu düzeninize sürükleyip bırakmanız yeterlidir.

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

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

Ardından açılır menüden bir menü seçebilirsiniz.

Tam site düzenleyicisinde sayfalar, gönderiler, özel bağlantılar ve daha fazlasını ekleyerek bir menü oluşturmak başka bir seçenektir. Yeni menüye öğe eklemek için '+' simgesine tıklamanız yeterlidir.

Bu, herhangi bir gönderiyi veya sayfayı 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çılan pencerede, menüye eklemek istediğiniz bloğu yazın ve göründüğünde doğru seçeneği belirleyin.

Mini araç çubuğundaki ve sağdaki 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 görünümünden memnun kaldığınızda, 'Kaydet' düğmesine tıklamanız yeterlidir.

Siteniz artık yeni şablonu kullanacak ve ziyaretçiler özel gezinme menünüzle etkileşim kurabilecektir.

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

Tam site düzenleyicisi, blok tabanlı temalara menü 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.

Bu aracı, özel gezinme menüleri, açılış sayfaları ve çok daha fazlasını oluşturmak için kapsamlı bir şekilde kullanma deneyimine sahibiz. Daha fazla ayrıntı için tam SeedProd incelememize göz atın.

Sayfalar söz konusu olduğunda, SeedProd, başlangıç noktanız olarak kullanabileceğiniz 350'den fazla profesyonelce tasarlanmış şablonla birlikte gelir. Bir şablon seçtikten sonra, SeedProd'un hazır Nav Menü bloğunu kullanarak sitenize özel bir gezinme 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 dair 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' düğmesine 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ı, yakında ve potansiyel müşteri toplama kampanyaları gibi farklı kampanya türlerine göre düzenlenmiştir. SeedProd'un şablonlarını 404 sayfanızı iyileştirmek için bile kullanabilirsiniz.

Herhangi bir tasarıma daha yakından bakmak için, fare imlecini 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.

Tüm görsellerimizde 'Kara Cuma Satış Sayfası' şablonunu kullanıyoruz, ancak istediğiniz herhangi bir şablonu kullanabilirsiniz.

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

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

Bu bilgileri girdikten sonra, 'Sayfayı Kaydet ve 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çermektedir.

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

Sol taraftaki araç çubuğu şimdi 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 menüdeki 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 fazla ayara erişebilirsiniz. Örneğin, gölge kutuları ve CSS animasyonları ekleyerek bloğu gerçekten öne çıkarabilirsiniz.

Tasarımınıza yeni bloklar eklemek için, sol menüdeki herhangi bir bloğu bulun ve sayfaya sürükleyin. 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 gezinme menüsü oluşturmak istediğimiz için, sayfaya bir ‘Nav Menu’ bloğu sürükleyin.

Bu, tek bir varsayılan 'Hakkımızda' öğesiyle bir gezinme menüsü oluşturur.

Artık SeedProd düzenleyicisinde yeni bir menü oluşturabilir veya WordPress kontrol panelinde zaten oluşturduğunuz bir menüyü seçebilirsiniz.

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

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

Yeni bir menü oluşturmak istiyorsanız, bunun yerine SeedProd'da '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' olacaktır 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 konu hakkında daha fazla bilgi için lütfen nofollow bağlantıları hakkında başlangıç rehberimize bakın.

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

Ardından, bu öğelerin her birini yukarıda açıklanan aynı işlemi izleyerek özelleştirebilirsiniz.

Sol taraftaki menüde ayrıca yazı tipi boyutunu ve metin hizalamasını değiştiren ayarlar bulunur.

Hatta menüdeki her öğenin arasına gelecek bir ayırıcı bile oluşturabilirsiniz.

Bundan sonra, ‘Gelişmiş’ sekmesine geçin. Burada menünün renklerini, boşluklarını, tipografisini ve diğer gelişmiş seçeneklerini değiştirebilirsiniz.

Değişiklikler 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.

Varsayılan olarak SeedProd, mobil ve masaüstü cihazlarda aynı menüyü gösterir. Ancak, mobil cihazların genellikle masaüstü bilgisayarlara kıyasla çok daha küçük ekranları vardır.

Bunu akılda tutarak, mobil cihazlarda göstermek için ayrı bir menü oluşturmak isteyebilirsiniz. Örneğin, mobil kullanıcıların yan yana 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 hazır bir menü oluşturmak için, menüyü yukarıda açıklanan aynı süreci izleyerek 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.

Şimdi, SeedProd bu menüyü yalnızca mobil kullanıcılara gösterecek.

Özel menünüzün görünümünden memnun kaldığınızda, yayınlama zamanı gelmiş demektir.

‘Kaydet’ yanındaki açılır oku tıklayın ve ardından ‘Yayınla’yı seçin.

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

Yöntem 3: Kod Kullanarak WordPress'te Özel Bir Gezinme 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ı ekleme talimatlarını içeren kılavuzlar bulursunuz.

Ancak, bu yöntemi önermiyoruz, çünkü kodunuzdaki küçük bir hata bile yaygın WordPress hatalarına veya sitenizin tamamen bozulmasına neden olabilir. Ayrıca WordPress temanızı güncellediğinizde özel kodunuzu kaybedersiniz.

Bu yüzden WPCode kullanmanızı öneririz. WordPress'in herhangi bir çekirdek dosyasını düzenlemeden ö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, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra, WordPress kontrol panelinizde Kod Parçacıkları » Parçacık Ekle bölümüne gidin.

Burada, sitenize ekleyebileceğiniz tüm hazır parçacıkları göreceksiniz.  Bunlar arasında yorumları tamamen devre dışı bırakmanıza, WordPress'in normalde desteklemediği dosya türlerini yüklemenize, ek sayfa bağlantılarını devre dışı bırakmanıza ve çok daha fazlasına olanak tanıyan bir parçacık bulunmaktadır.

Kendi kod parçacığınızı oluşturmak için, ‘Özel Kod Ekleyin (Yeni Kod Parçacığı)’ üzerine fareyle gelin ve ardından ‘+ Özel Kod Parçacığı Ekle’ düğmesine tıklayın.

Ardından, ekranda görünen seçenekler listesinden bir kod türü seçmeniz gerekir. Bu eğitim için kod türü olarak ‘PHP Snippet’i seçin.

Şimdi Özel Kod Parçacığı Oluştur sayfasına yönlendirileceksiniz.

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

Bunu yaptıktan sonra, aşağıdaki kod parçası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çasını değiştirmeniz yeterlidir.

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

Örneğin, burada temamıza ‘My Custom Menu’ ve ‘Extra Menu:’ 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 gidin. Henüz seçili değilse, WPCode'un kod parçasını sitenizin tamamına eklemesi için ‘Otomatik Ekle’ yöntemini seçin.

Ardından, 'Konum' açılır menüsünü açın ve 'Her Yerde Çalıştır'ı tıklayın.

Şimdi, ekranın üstüne kaymaya ve 'Etkin Değil' kaydırıcısına tıklayarak onu 'Etkin' olarak değiştirmeye hazırsınız.

Son olarak, bu kod parçasını yayına almak için ‘Kaydet’e tıklayın.

Ardından, Görünüm » Menüler'e gidin ve 'Görüntüleme konumu' alanına bakın.

Artık yeni bir 'Özel Menüm' seçeneği görmelisiniz.

Artık yeni konuma bazı menü öğeleri ekleyebilirsiniz. Daha fazla bilgi için, yeni başlayanlar için gezinme menülerinin nasıl ekleneceği hakkındaki adım adım kılavuzumuza bakın.

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

Özel gezinme menüsünü WordPress temanıza ekleme

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

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

WordPress kontrol panelinizde Görünüm » Tema Dosya Düzenleyici'ye gidin.

In the right-hand menu, choose the template where you want to add the menu. For example, if you want to show the custom navigation menu in your website’s header, then you’ll typically select the header.php file.

Doğru şablon dosyasını bulma konusunda yardım 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 fonksiyonu eklemeniz ve özel menünüzün adını belirtmeniz gerekecektir.

Örneğin, aşağıdaki kod parçacığında, temanın başlığına 'Ö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.

Özel gezinme menüsünü, WordPress temanıza veya şirketinizin markasına daha iyi uyacak şekilde stilize etmek için sitenize özel CSS kodu ekleyebilirsiniz.

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 kodları yazabileceğiniz küçük bir kod düzenleyicisi açar.

Artık tema şablonunuza eklediğiniz CSS sınıfını kullanarak menünüzü biçimlendirebilirsiniz. Örneğimizde bu .custom_menu_class.

Aşağıdaki kodda, kenar boşlukları ve dolgu ekliyor, metin rengini siyaha ayarlıyor 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ştiricisi otomatik olarak güncellenecektir.

It will now show how the menu will look with the new style.

Menünün görünümü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 gezinme menülerine nasıl stil verileceği hakkındaki kılavuzumuza bakın.

Uzman Rehberleri: WordPress Gezinme Menüleri ile Daha Fazlasını Yapın

WordPress ile her türlü kullanışlı ve ilgi çekici menü oluşturabilirsiniz. Bunu akılda tutarak, gezinme menülerinizden daha fazla verim almanıza yardımcı olacak bazı uzman rehberleri aşağıdadır:

• WordPress'te Gezinme Menüleriyle Resim Simgeleri Nasıl Eklenir
• WordPress'te Menülere Koşullu Mantık Nasıl Eklenir (Adım Adım)
• WordPress Temalarınızda Menü Açıklamaları Nasıl Eklenir
• WordPress'e Tam Ekran Duyarlı Menü Nasıl Eklenir
• WordPress Sitenize Mega Menü Nasıl Eklenir (Adım Adım)

Bu kapsamlı rehberin, WordPress'te özel bir gezinme menüsü eklemeyi öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca WordPress üst menünüze bir düğme ekleme veya WordPress'te bir menü öğesini vurgulama hakkındaki rehberlerimize de bakmak isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.