İyi biçimlendirilmiş bir menü büyük bir fark yaratabilir. Sitenizin genel görünümünü iyileştirebilir, ziyaretçilerin aradıklarını bulmalarını kolaylaştırabilir ve hatta belirli sayfalara tıklamalarını teşvik edebilir.
WPBeginner olarak, menüleri stilize etmenin her türlü yaratıcı yolunu gördük. Yıllar boyunca kendi gezinme menüsü stilimizle de defalarca denemeler yaptık. Bu nedenle, farklı durumlar için en iyi sonucu verenleri paylaşmak istiyoruz.
Bu makalede, WordPress gezinme menünüzü 5 farklı şekilde nasıl stilize edeceğinizi göstereceğiz.
WordPress Gezinme Menünüzü Neden Stillemelisiniz?
WordPress gezinme menünüz, ziyaretçileri en önemli sayfalara yönlendiren web sitenizin yol haritasıdır. Çoğu web sitesinin üst kısmında görünür, bu da dikkat çekmek ve kullanıcıların içeriğinizi nasıl keşfettiğini etkilemek için harika bir yerdir.
Gezinme menünüzü stilize etmek, sadece güzel görünmesini sağlamaktan daha fazlasıdır. Web sitenizin kullanıcı deneyimini önemli ölçüde iyileştirebilir ve dolayısıyla arama motoru optimizasyonunuzu (SEO) artırabilir.
Menü tasarımınızın kullanımı zorsa, ziyaretçiler aradıklarını bulmakta zorlanabilir ve hayal kırıklığına uğrayarak ayrılabilir. Öte yandan, net ve görsel olarak çekici bir menü, farklı bölümlere tıklamalarını ve sitenizde daha fazla zaman geçirmelerini teşvik edebilir.
Sonuç olarak, site sayfa görüntülemelerinizi artırabilir ve hemen çıkma oranını azaltabilirsiniz.
Bu kılavuz, WordPress temanıza ve rahatlık seviyenize bağlı olarak gezinme menünüzü stilize etmek için farklı yöntemleri açıklayacaktır. Bu eğiticide gezinmek ve sizin için en iyi çalışan yöntemi bulmak için aşağıdaki hızlı bağlantıları kullanabilirsiniz:
- Yöntem 1: Tam Site Düzenleyici (Blok Temalar) ile Navigasyon Menünüzü Özelleştirin
- Yöntem 2: Tema Özelleştirici ile Gezinme Menünüzü Özelleştirin (Klasik Temalar)
- Yöntem 3: Sayfa Oluşturucu Eklentisiyle Gezinme Menünüzü Özelleştirin (Önerilir)
- Yöntem 4: Gezinme Menünüzü Görsel CSS Düzenleyici ile Özelleştirin (Daha Özelleştirilebilir)
- Method 5: Customize Your Navigation Menu With Code (Advanced)
Yöntem 1: Tam Site Düzenleyici (Blok Temalar) ile Navigasyon Menünüzü Özelleştirin
Eğer bir blok tema kullanıyorsanız ve site navigasyon menünüzü Tam Site Düzenleyici ile biçimlendirmek istiyorsanız, bu yöntem tam size göre.
Öncelikle, WordPress kontrol panelinize gidin ve Görünüm » Düzenleyici'ye gidin.
Burada, blok temanızın farklı bölümlerini özelleştirmek için seçenekler göreceksiniz.
Devam edin ve 'Navigasyon'a tıklayın.
Sonraki sayfada, kurşun kalem 'Düzenle' simgesine tıklayın.
Bu, Gezinme bloğunuzu düzenleyebileceğiniz blok düzenleyiciyi açacaktır.
Blok düzenleyiciye girdikten sonra, WordPress web sitenizin sayfalarını gezinme menüsü öğeleri olarak görüntüleyen 'Sayfa Listesi' bloğuna tıklayın.
Ardından, ‘Düzenle’ye tıklayın.
Şimdi bir açılır pencere görünecek ve Sayfa Listesi bloğunu düzenleyebileceğinizi belirtecektir. Bloğa yeni menü öğeleri ekleyebilir, kaldırabilir, yeniden sıralayabilir ve düzenleyebilirsiniz.
Devam etmek için 'Düzenle'ye tıklayın.
Gezinme menüsü için blok düzenleyici, bir sayfayı veya gönderiyi düzenlerken olduğu gibi çalışır. özel bağlantılar, bir harekete geçirici mesaj düğmesi, bir arama formu, bir site logosu ve daha birçok menü öğesi eklemekten çekinmeyin.
Tam Site Düzenleyicisi ile menüleri yönetme hakkında daha derinlemesine bilgi edinmek isterseniz, Tam Site Düzenleme rehberimizdeki gezinme menünüzü nasıl düzenleyeceğiniz bölümüne göz atın. Bu bölüm ayrıca alt menüler oluşturmaktan da bahseder.
Şimdi stil vermeye başlayalım. Başlamak için herhangi bir bloğa tıklayın.
Bloğa bağlı olarak araç çubuğu bazı özelleştirme seçenekleri sunabilir. Örneğin, bir Sayfa Bağlantısı seçerseniz, onu kalın, italik, üstü çizili yapabilir ve gerekirse yeniden sıralayabilirsiniz.
Bu araçları kullanarak tek bir menü öğesini diğerlerinden ayırabilirsiniz.
Sağdaki ayarlar panelinde, 'Blok' sekmesine geçin ve altında 'Stiller' sekmesine gidin.
Burada, bloğunuzun rengini, tipografisini, boyutlarını, kenarlıklarını ve gölgelerini özelleştirebilirsiniz.
Bloklar varsayılan Stil ayarları eğilimindedir. Örneğin, bir Sayfa Bağlantısını düzenliyorsanız, yalnızca 'Yazı Tipi Boyutu' ve 'Genişlik' gibi seçenekleri görebilirsiniz.
Ama endişelenmeyin. Yazı tipi ailesi ve harf aralığı gibi daha fazla özelleştirme olanağını etkinleştirmek için bu seçeneklerin yanındaki üç noktalı menüye tıklamanız yeterlidir.
Benzer şekilde, gezinme menünüzde bir Düğme bloğunuz varsa, üzerine tıklamak stilini, metnini, arka plan rengini, tipografisini, boyutlarını, kenarlığını ve hatta gölgesini özelleştirme seçeneklerini ortaya çıkaracaktır.
Daha fazla bilgi için bir harekete geçirici mesaj düğmesi ekleme kılavuzumuzu okuyabilirsiniz.
Gezinme menünüzün arka plan rengini değiştirmek istiyorsanız, bunu temanızın üst bilgi şablonunu düzenleyerek yapmanız gerekecektir.
Açmak için, üstteki 'Navigation' yazan komut arama alanına tıklayın. Ardından 'Header' yazın ve Enter tuşuna basın.
Şimdi, Liste Görünümünü açın ve Grup'u seçin.
Bu grup, başlığınızın site başlığını ve gezinme menüsünü içerir.
Ardından, Blok ayarları kenar çubuğundaki 'Stiller' sekmesini açın ve Renk bölümündeki 'Arka Plan'ı tıklayın.
After that, just choose a background color for your header template.
Gezinme menünüzün stiline alıştığınızda, 'Kaydet' düğmesine tıklamanız yeterlidir; yeni menünüz ve üst bilginiz WordPress blogunuzda veya sitenizde yayında olacaktır.
Demo sitemizdeki gezinme menümüz şöyle görünüyor:
Yapacağınız stil seçimlerinin, temanızın genel stil seçeneklerine bağlı olacağını unutmayın.
Temanızın genel stillerini özelleştirmek istiyorsanız, sağ üst köşedeki 'Stiller' düğmesine tıklamanız gerekir.
Buradan, tüm web sitesi için tipografiyi, renkleri ve düzeni değiştirebilirsiniz.
Not: Burada yaptığınız değişikliklerin yalnızca gezinme menünüzü değil, temanızın diğer bölümlerini de etkileyeceğini unutmayın.
Daha fazla bilgi için, Tam Site Düzenleme kılavuzundaki web sitenizin küresel stillerini nasıl değiştireceğiniz bölümüne göz atın.
Yöntem 2: Tema Özelleştirici ile Gezinme Menünüzü Özelleştirin (Klasik Temalar)
Bu yöntem, yerleşik Tema Özelleştirici'yi kullanarak gezinme menülerini stilize etmek isteyen klasik WordPress temalarına sahip kullanıcılar içindir.
Önceki yöntemle olduğu gibi, menü öğelerini yönetmek yerine menünün görünümünü stilize etmeye odaklanacağız.
Klasik temalarda menülerin nasıl oluşturulacağını ve yönetileceğini öğrenmek isterseniz, WordPress'e gezinme menüsü ekleme hakkındaki rehberimize göz atın. Özel Düzenleyici ile menü oluşturmayı, bunları farklı menü konumlarına atamayı ve menüleri widget olarak eklemeyi kapsar.
Tema Özelleştirici'yi kullanmak için WordPress kontrol panelinize gidin ve Görünüm » Özelleştir yolunu izleyin. Ardından, aktif temanızın yanındaki 'Özelleştir' düğmesine tıklayın.
Burada, kullandığınız temaya bağlı olarak temanızın çeşitli yönlerini özelleştirmek için seçenekler göreceksiniz. Çoğu durumda, WordPress temalarında bir 'Menüler' seçeneği bulunur, ancak üçüncü taraf geliştiriciler de başka ayarlar ekleyebilir.
Örneğin, Sydney teması, menü özelleştirmesi için özel bir Başlık Oluşturucuya sahiptir. Özel menü ayarları ekleyip eklemediklerini görmek için temanızın belgelerine başvurduğunuzdan emin olun.
Temanızda bu tür özelleştirme seçenekleri yoksa endişelenmeyin. Menüyü özel CSS kullanarak kolayca stilize edebiliriz.
İlk olarak, 'Menüler' bölümüne tıklayın.
Sonraki sayfada, dişli çark 'Ayarlar' simgesine tıklayın ve ardından 'CSS Sınıfları'nı seçin.
Bu, her menü öğesine benzersiz bir CSS sınıfı atamanıza olanak tanır ve daha sonra bunları ayrı ayrı stilize etmenizi sağlar.
Next, scroll down the panel.
Ardından, birincil menünüzü açın.
Şimdi yapmak istediğiniz, değiştirmek istediğiniz menü öğesini bulup genişletmek için tıklamaktır.
Özel bir CSS sınıfı eklemek için yeni bir seçenek göreceksiniz. Aşağıdaki örnekte, İletişim Sayfamıza yalnızca contact-us CSS sınıfını ekliyoruz.
Menü öğelerinize CSS sınıfları atadıktan sonra, Tema Özelleştirici'deki ana menüye geri dönün.
Ardından, 'Ek CSS'ye tıklayın.
Buraya, gezinme menünüzü biçimlendirmek için özel CSS kodu ekleyebilirsiniz.
Bazı örneklere göz atalım ve CSS sınıflarını ve onaltılık renk kodunu değiştirmekten çekinmeyin:
Menü Öğesinin Arka Plan Rengini Değiştirin
Aşağıdaki kod parçacığı, contact-us CSS sınıfına sahip menü öğesinin arka plan rengini yeşil (#E3FFA8) olarak değiştirir ve yuvarlak köşeler ekler (kenarlık-yarıçapı: 5px):
.contact-us {
background-color: #E3FFA8;
border-radius: 5px;
}
Varsayılan Menü Bağlantı Rengini Değiştir
Bu kod parçacığı, birincil menü listesindeki (#primary-menu-li a) tüm menü bağlantılarının rengini kırmızıya (#ff0000) değiştirir:
.primary-menu li a {
color: #ff0000;
}
Temanızın birincil menüsü için CSS sınıfının bizimkinden farklı görünebileceğini unutmayın.
Temanızın CSS sınıfı birincil menüsünün ne olduğunu görmek için, gezinme menüsü alanınız etrafında inceleme aracını kullanabilirsiniz.
Ardından, 'menu' veya 'navigation-menu' yazan bir HTML kodu arayın. Yanında onu tanımlayan bir CSS sınıfı olmalı.
Menü Öğelerine Vurgu Efektleri Ekleme
Bu kod parçacığı, birincil menü listesindeki (#primary-menu li) tüm menü öğelerini hedefler ve bir fareyle üzerine gelme efekti ekler:
.primary-menu li a:hover {
background-color: #a6e4a5;
color: #666;
border-radius: 5px;
}
When a user hovers over the menu item, the background color changes to a light green (#a6e4a5), the text color changes to a dark grey (#666), and rounded corners are added (border-radius: 5px).
WordPress'te Şeffaf Navigasyon Menüleri Oluşturun
Bu CSS kod parçacığı, gezinme menünüzü şeffaf hale getirebilir:
#site-navigation {
background-color:transparent;
}
Bu efekti kullanmak, web sitenize temiz, modern bir his vermek için arka plan resmi ile harmanlayacaktır.
Daha fazla ilham için aşağıdaki kılavuzlarımıza göz atabilirsiniz:
- WordPress Menü Öğelerine İlk ve Son CSS Sınıfı Nasıl Eklenir
- WordPress'te Bir Menü Öğe Nasıl Vurgulanır
Unutmayın, bunlar yalnızca başlamanız için birkaç örnektir. Bu yöntemleri kullanmak istiyor ancak Ek CSS bölümünü bulamıyorsanız, eksik tema özelleştirici sorununu nasıl çözeceğinize dair rehberimize göz atın.
Yöntem 3: Sayfa Oluşturucu Eklentisiyle Gezinme Menünüzü Özelleştirin (Önerilir)
Bu yöntem, gezinme menüsünün görünümü üzerinde daha fazla kontrol isteyen ancak yine de başlangıç dostu bir deneyim tercih edenler için mükemmeldir. Ayrıca, web sitenizin erken aşamalarındaysanız ve henüz yayınlamadıysanız harika bir seçenektir.
Bir sayfa oluşturucu eklentisi, kod yazmaya gerek kalmadan sürükle ve bırak işlevselliğini kullanarak web sitenizin düzenini görsel olarak tasarlamanıza olanak tanır. Bu, onu tamamen yeni başlayanlar için ideal kılar.
Bu bölümde, sayfa oluşturucu eklentimiz olarak SeedProd'u kullanacağız. SeedProd, kullanıcı dostu bir arayüz sunar ve gezinme menünüzü öne çıkarmak için ek bloklar ve özellikler içerir.
Not: SeedProd Pro kullanacağız, çünkü tema oluşturucu özelliği yalnızca Pro sürümünde mevcuttur. Ancak, SeedProd'un nasıl olduğunu keşfetmek için ücretsiz sürümünü kullanmaktan çekinmeyin.
Adım 1: SeedProd'u Yükleyin ve Etkinleştirin
Öncelikle, WordPress web sitenize SeedProd eklentisini kurun ve etkinleştirin. Daha fazla bilgi için WordPress eklentisinin nasıl kurulacağına dair rehberimizi okuyabilirsiniz.
Etkinleştirildikten sonra, WordPress kontrol panelinizden SeedProd » Ayarlar'a gidin. Ardından, SeedProd lisans anahtarınızı girin ve 'Anahtarı doğrula' düğmesine tıklayın.
Adım 2: Bir SeedProd Tema Şablon Kiti Seçin
Şimdi, SeedProd » Tema Oluşturucu. bölümüne gidin. Burası, sıfırdan özel bir WordPress teması oluşturabileceğiniz yerdir.
Önceden tasarlanmış şablonlardan oluşan bir galeriye göz atmak için ‘Tema Şablon Kitleri’ düğmesine tıklayın.
For this tutorial, we’ll be using the Smile Craft Medical Website Theme. However, feel free to choose any template that suits your business.
Web sitenizin stiline hangisinin uyduğunu görmek için büyüteç simgesine tıklayarak bu tema şablon kitlerini önizleyebilirsiniz.
Once you’ve found a theme template you like, click the orange checkmark icon to import the template parts.
SeedProd artık başlık, altbilgi, ana sayfa gibi temel web sitesi bölümlerini oluşturacaktır. Bunların hepsi sürükle ve bırak oluşturucu kullanılarak görsel olarak düzenlenebilir.
Adım 3: Menü Tasarımını Özelleştirin
Tema şablonu yüklendikten sonra Tema Oluşturucu sayfasına döneceksiniz.
SeedProd tema şablonunda, gezinme menüsü başlık şablonu bölümünde bulunur.
Başlık şablonunuzu düzenlemek için, üzerine gelin ve 'Tasarımı Düzenle' bağlantısına tıklayın. Bu, şablonu sürükle-bırak düzenleyicisinde açacaktır.
Şimdi, Nav Menü bloğundan (bu sizin gezinme menünüzdür) ve temaya bağlı olarak diğer bloklardan oluşan bir başlık bölümü göreceksiniz.
Menüyü düzenlemek için Gezinme Menüsü bloğuna tıklayın. Sol kenar çubuğu daha sonra size blok ayarlarının bir listesini gösterecektir.
Varsayılan olarak SeedProd, kullandığınız tema şablonuna dayalı bir menü oluşturmak için 'Basit' menüyü kullanır. Ancak, standart WordPress menü düzenleyicisini (Görünüm » Menüler) kullanarak zaten oluşturduğunuz önceden var olan bir menüyü kullanmak için 'WordPress Menüsü' seçeneğini de kullanabilirsiniz.
İkisi arasındaki farkı inceleyelim. Basit yöntem, sayfa oluşturucu arayüzünde doğrudan bağlantı eklemenize, düzenlemenize ve kaldırmanıza olanak tanır.
Yeni bir menü öğesi oluşturmak için '+ Yeni Öğe Ekle' düğmesine tıklayın.
Buraya metin etiketini ve bağlantı URL'sini girebilirsiniz.
Ardından, bağlantıyı yeni bir pencerede açmayı seçin ve (gerekirse) bir nofollow özniteliği ekleyin. Şöyle:
Bir öğenin yanındaki üç çizgi düğmesine tıklayıp yukarı veya aşağı sürükleyerek menü öğelerini yeniden düzenleyebilirsiniz.
Bir menü öğesini silmek için üzerine gelin ve yanındaki çöp kutusu simgesine tıklayın.
Bu seçeneğin dezavantajı, açılır menüler oluşturamamasıdır. Bu yüzden 'Basit' olarak adlandırılır.
Öte yandan, 'WordPress Menüsü' seçeneği, menü öğelerini doğrudan SeedProd düzenleyicisinden yönetmenize izin vermez. Bunu menü düzenleyicisinde yapmanız gerekir.
İyi haber şu ki, önceden var olan menünüz bir açılır menü ise, onu bu yöntemle görüntüleyebilirsiniz.
Hangi yöntemi seçerseniz seçin, menü öğeleri arasındaki yazı tipi boyutunu ve aralığı özelleştirebilir, bir metin ayırıcı ekleyebilir veya hizalamayı ayarlayabilirsiniz.
'Gelişmiş' sekmesi daha da fazla özelleştirme seçeneği sunar.
Liste düzenini yataydan dikeye değiştirebilir, tipografiyi ayarlayabilir, metin ve vurgu renklerini değiştirebilir ve hatta metin gölgeleri ekleyebilirsiniz.
Aşağı kaydırarak, masaüstü, tablet ve mobil cihazlar için dolgu ve kenar boşluklarını kontrol edebilirsiniz.
Bu sayede menünüz her ekran boyutunda gezinmesi kolay olur.
Menünüzün öne çıkmasını ister misiniz?
SeedProd, daha ilgi çekici bir kullanıcı deneyimi için animasyonlar eklemenize olanak tanır. Daha fazla bilgi için WordPress'e CSS animasyonlarının nasıl ekleneceğine dair adım adım kılavuzumuzu okuyabilirsiniz.
Gezinme çubuğunuza yeni bir eylem çağrısı düğmesi eklemek istiyorsanız, SeedProd'un Düğme bloğunu kullanabilirsiniz.
Sol kenar çubuğundaki blok bulucuyu açın ve sol kenar çubuğundaki Düğme bloğunu bulun.
Ardından, bloğu başlığınıza istediğiniz yere sürükleyin.
Tamamlandığında, düğmenin harekete geçirici mesajını, bağlantısını, stilini ve diğer ayarlarını özelleştirmeniz yeterlidir.
Ayrıca, kullanıcı aşağı kaydırdıkça sayfanın üstünde kalan yapışkan bir menü oluşturabilirsiniz. Bu şekilde, farklı bir sayfaya gitmek istediklerinde her seferinde yukarı gitmek zorunda kalmazlar.
Bunu yapmak için, bölümün üzerine gelip mor bir çizgi görünene kadar bekleyin, ardından dişli ‘Ayarlar’ simgesine tıklayın.
Şimdi ‘Gelişmiş’ sekmesine geçin.
Ardından, ‘Konum’ menüsüne aşağı kaydırın.
Burada, ‘Yapışkan’ı seçin.
Bundan sonra, üst kaydırmaya sıfır ve yüksek bir z-index numarası (999 gibi) ekleyin. Bu, üst bilginin her zaman sayfanın hemen üzerinde görünmesini sağlamak içindir.
Özelleştirilmiş gezinme menünüzden memnun kaldığınızda, 'Kaydet' düğmesine tıklayın.
Adım 4: Özel WordPress Temanızı Yayınlayın
Bu aşamada, yeni özel WordPress temanızı kullanmaya hazırsınız. Etkinleştirmek için ‘Tema Oluşturucu’ sayfasına geri dönün ve ‘SeedProd Temasını Etkinleştir’ düğmesini açın.
Şimdi yapmanız gereken tek şey web sitenizi görüntülemek ve yeni özel gezinme menünüzü kontrol etmektir.
Demo sitemizdeki gezinme menümüz şöyle görünüyor:
Yöntem 4: Gezinme Menünüzü Görsel CSS Düzenleyici ile Özelleştirin (Daha Özelleştirilebilir)
Bu yöntem, yerleşik WordPress özelliklerinden daha fazla özelleştirme seçeneği sunar, ancak bir sayfa oluşturucu eklentisi kullanmak kadar esnek değildir. Bununla birlikte, temanızı tamamen değiştirmeden gezinme menünüze bazı tasarım değişiklikleri yapmak istiyorsanız harika bir çözümdür.
Bu yöntem, stil seçenekleri olmayan klasik temaları kullanan ancak Yöntem 2'deki CSS düzenlemesiyle rahat olmayanlar için de iyi bir alternatiftir.
Burada, CSS Hero adlı premium bir WordPress görsel CSS düzenleyici eklentisini kullanma konusunda size rehberlik edeceğiz. Herhangi bir kod yazmadan web sitenizi görsel olarak tasarlamanıza olanak tanır. HTML veya CSS bilgisi gerekmez.
Not: Özellikleri hakkında daha fazla bilgi edinmek için CSS Hero incelememize göz atın. WPBeginner kullanıcıları ayrıca CSS Hero'da özel kupon kodumuzla %34'e varan indirimden yararlanabilirler.
Öncelikle, CSS Hero eklentisini WordPress'e kurun. Daha fazla bilgi için WordPress eklentisinin nasıl kurulacağına dair rehberimizi okuyabilirsiniz.
CSS Hero eklentisini etkinleştirdikten sonra, WordPress yönetici araç çubuğunuzda 'CSS Hero' adlı yeni bir düğme göreceksiniz. Görsel düzenleyiciyi başlatmak için bu düğmeye tıklayın.
CSS Hero, WYSIWYG arayüzünü kullanır. Düğmeye tıklamak, web sitenizi ekranınızın sol tarafındaki CSS Hero bölmesiyle birlikte açacaktır.
Gezinme menünüzü düzenlemek için fareyi üzerine getirebilirsiniz. CSS Hero daha sonra onu bir kenarlıkla vurgulayacaktır. Menüyü özelleştirmeye başlamak için vurgulanan alana tıklayın.
CSS Hero, arka plan, tipografi, kenarlıklar, boşluklar, listeler ve hatta ek efektler dahil olmak üzere gezinme menüsü kapsayıcınızın çeşitli yönlerini düzenlemenize olanak tanır.
Örneğin, menü arka plan rengini değiştirmek istediğinizi varsayalım. 'Arka Plan'a tıklamak, yeni bir renk, gradyan veya resim seçebileceğiniz kullanıcı dostu bir arayüz açacaktır.
Değişiklikler yaptıkça, sağdaki web sitesi önizlemesinde canlı olarak yansıtıldığını göreceksiniz.
Veya, menü öğelerinizi daha dikkat çekici hale getirmek için onlara bir kutu gölgesi ekleyebilirsiniz.
Bunu yapmak için 'Ekstra' sekmesine gidin.
Ardından, ‘Gölge Oluştur’a tıklayın.
Burada gölge ayarlarını düzenleyebileceksiniz.
Şimdi, gölgenin nasıl göründüğüyle oynayabilirsiniz.
Gölgenin yönünü, bulanıklık ve yayılma kalitesini ve konumunu sürükleyip bırakmaktan çekinmeyin.
CSS Hero'nun arayüzü ile istediğiniz her şeyi değiştirebilir, bu sayede siteniz için en iyi sonucu verecek şeyleri denemek için deneyler yapabilirsiniz.
Profesyonel İpucu: Bireysel menü öğelerinize CSS sınıfları eklemek için 2. Yöntem'deki adımları izlediyseniz, gezinme menünüzün görünümü üzerinde daha ayrıntılı kontrol için bu özel menü öğelerini hedeflemek ve özelleştirmek için CSS Hero'yu da kullanabilirsiniz.
Özelleştirilmiş menünüzden memnun kaldığınızda, değişikliklerinizi kaydetmek için 'Kaydet' düğmesine tıklayın.
CSS Hero ile neler yapabileceğinizi öğrenmek için bu kılavuzları okuyabilirsiniz:
- WordPress Logonuzun Boyutunu Nasıl Değiştirirsiniz (Herhangi Bir Tema ile Çalışır)
- WordPress'e Görüntü Üzerine Gelme Efektleri Nasıl Eklenir (Adım Adım)
Yöntem 5: Gezinme Menünüzü Kodla Özelleştirin (Gelişmiş)
Bu yöntem, kodla rahat olan kullanıcılar için daha uygundur. Ayrıca temanız varsayılan olarak bir tane içermiyorsa özel bir menü oluşturmanıza da olanak tanır.
Özel kod parçacıkları eklemek ilk başta göz korkutucu görünebilir, çünkü functions.php ve header.php gibi tema dosyalarını düzenlemeyi içerir. Ancak, bunu kolaylaştırmanın yolları vardır.
WPCode adlı bir eklenti kullanmanızı öneririz. Bu, temel dosyaları değiştirmeden özel kodu WordPress sitenize eklemenin güvenli ve kullanıcı dostu bir yolunu sunar.
WordPress temalarında özel bir gezinme menüsü ekleme kılavuzumuz, WPCode ile bir menü oluşturma adımlarında size yol gösterebilir.
Menüyü oluşturduktan sonra bu eğitimleri inceleyebilirsiniz.
- WordPress'te Gezinme Menüleriyle Resim Simgeleri Nasıl Eklenir
- WordPress Başlık Menünüze Düğme Nasıl Eklenir
- WordPress'te Yapışkan Kayar Gezinme Menüsü Nasıl Oluşturulur
Her biri, menüyü WPCode kullanarak özelleştirmek için bir yöntem içerir.
WordPress Gezinme Menüsünü Özelleştirmek İçin Nihai Kılavuzlar
WordPress gezinme menünüzü stilize etmenin temellerini keşfettiğinize göre, menünüzü bir sonraki seviyeye taşımak için okuyabileceğiniz bazı ek kılavuzlar şunlardır:
- WordPress Sitenize Mega Menü Ekleme. Mega menüler, alt kategorileri eklemenize olanak tanıyarak geniş web sitesi içeriğini düzenlemenin kullanıcı dostu bir yolunu sunar.
- Mobil Hazır Duyarlı Bir WordPress Menüsü Nasıl Oluşturulur. Bu kılavuz, farklı ekran boyutlarına uyum sağlayan duyarlı bir menü oluşturma konusunda size yol gösterecektir.
- WordPress'te Tam Ekran Duyarlı Menü Nasıl Eklenir. Bu eğitim, etkinleştirildiğinde tüm ekranı kaplayan ve cesur bir gezinme deneyimi sunan tam ekran bir menünün nasıl uygulanacağını öğretecektir.
- WordPress Temalarına Kaydırmalı Panel Menü Ekleme. Kaydırmalı panel menüler, ana gezinmeyi kullanıcının kaydırana veya ortaya çıkarmak için bir düğmeye tıklayana kadar gizleyen, yerden tasarruf sağlayan bir çözümdür.
- WordPress'te Dikey Gezinme Menüsü Oluşturma. Dikey gezinme menüleri, web sitenizin kenar çubuğunda veya diğer dikey alanlarda çok sayıda menü öğesini sergilemek için harika bir yol olabilir.
- WordPress Menülerine Sosyal Medya Simgeleri Nasıl Eklenir. Ziyaretçilerin sizinle bağlantı kurmasını kolaylaştırmak için sosyal medya simgelerini doğrudan gezinme menünüze entegre edin.
- WordPress'te Katlanabilir Bir Kenar Çubuğu Menüsü Nasıl Oluşturulur. Çok sayıda sayfanız mı var? Kenar çubuğunuza katlanabilir bir menü ekleyerek kullanıcıların web sitenizde gezinmesini kolaylaştırın.
Umarım bu makale, WordPress gezinme menülerini nasıl stilize edeceğinizi öğrenmenize yardımcı olmuştur. Ayrıca WordPress tasarım öğeleri hakkındaki nihai rehberimize ve WordPress'te özel sayfa oluşturma hakkındaki başlangıç rehberimize de göz atmak 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.
Sydney Peason
The “Menu” option has disappeared under my “Appearance” menu option > is there another way to see the container CSS of my menu and options?
Teşekkürler!
WPBeginner Desteği
Görünüm menüsü olmayan bir blok tema kullanıyorsanız, CSS kapsayıcı bilgilerini görmek için Öğeyi Denetle'yi kullanabilirsiniz. Öğeyi Denetle'yi kullanma konusundaki kılavuzumuzu aşağıda görebilirsiniz:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Yönetici
Kristyna
Merhaba, lütfen tavsiyeye ihtiyacım var:
Bir menü öğemin rengini değiştirmek için CSS eklemeyi başardım. Ancak, aşağı kaydırdığımda, sabit birincil navigasyon menüm benimle birlikte geliyor ve o tek öğenin değişen rengi orijinal haline dönüyor – O tek öğenin yeni rengini aşağı kaydırırken bile nasıl koruyabilirim?
Teşekkürler!
WPBeginner Desteği
Tema, aşağı kaydırırken menüyü değiştirebilir. İncele öğesini kullanırsanız, CSS'nizi eklemek için aşağı kaydırılmış durumdayken menü öğesini seçebilmelisiniz. Aşağıda göz atabileceğiniz incele öğesini kullanma kılavuzumuz var:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Yönetici
Venkat Vavilala
Merhaba,
Menü yazı tipi boyutunu artırmak istiyorum. Bunu nasıl yapabilirim?
Varsayılan ise, nasıl özelleştirebilirim?
Lütfen menü yazı tipi boyutunu artırmak için kolay bir yöntem gösterin
WPBeginner Desteği
Bu makaledeki hangi yöntemi kullanmayı planladığınıza bağlı olacaktır. Örneğin, CSS yöntemini kullanırsanız, 2. yöntemin örnekleri altındakiyle aynı şekilde öğeyi inceleyin ve yazı tipi boyutunu değiştirin.
Yönetici
Budi Santoso
Hello Admin.
How the Orange ribbon navigation menu in this site was made?
Thanks
WPBeginner Desteği
To understand that you would want to take a look at our guide on using inspect element here: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Yönetici
maria
Bu sitenin menüsünü nasıl oluşturdunuz?
tema dosyalarını düzenlemek zorunda kaldınız mı?
teşekkürler
WPBeginner Desteği
Our theme was one we custom created
Yönetici
Trish
WooCommerce sitemin mağaza sayfasında, yatay olarak, satılan tüm ürün kategorilerini içeren bir menü oluşturmak istiyorum. Bunu nasıl yapabilirim, lütfen? Şimdiden yardımlarınız için hepinize teşekkür ederim.
WPBeginner Desteği
Temaınızın o konumda bir menüsü varsa, normal bir menüyü şu adresi kullanarak kurabilirsiniz:
https://www.wpbeginner.com/beginners-guide/how-to-add-navigation-menu-in-wordpress-beginners-guide/
Then, you can use conditional logic to only have it appear on your shop page using our article here: https://www.wpbeginner.com/plugins/how-to-add-conditional-logic-to-menus-in-wordpress/
Yönetici
Kushal Sonwane
Yapılacak büyük bir görev olmasına rağmen, bu makaleyi okuduktan sonra gezinme menülerini özelleştirmek çok kolay.
WPBeginner Desteği
You’re welcome
Yönetici
Lisa
Bunu yapmaya çok yeniyim ve WP'de Oceanwp temasını kullanarak bir site oluşturuyorum. Menüden CCS'ye tıklayarak önerdiğiniz gibi yaptım. Açılır menümdeki oku kaldırmaya çalışıyorum ve denediğim hiçbir şey onu kaldırmıyor.
Herhangi bir yardım için şimdiden teşekkürler.
WPBeginner Desteği
Merhaba Lisa,
Tema yazarlarıyla iletişime geçmek isteyebilirsiniz, bu konuda size yardımcı olabilirler.
Yönetici
Anirudhya
Bayım, hangi temayı kullanıyorsunuz. WordPress'te eğitim amaçlı basit bir düzene sahip bir blog başlatmak istiyorum.
WPBeginner Desteği
Merhaba Anirudhya,
WPBeginner için özel olarak yapılmış özel bir tema kullanıyoruz.
Yönetici
Bobby
Merhaba, HTML kodu ile nasıl olur?
İç içe geçmiş menülere bir başlık eklemek istiyorum. Ama nereye veya nasıl koyacağımı bilmiyorum.
Daniela
Merhaba,
Yalnızca satış sayfam için eklediğim menünün görünümünü değiştirmek istiyorum. Yüksekliği değiştirmek ve bir logo eklemek istiyorum.
Profesyonel değilim ve menüde bir şeylerin değişip değişmediğini görmek için bazı şeyler denedim, ancak değişmiyor. Deneydiklerim şunlar:
#Salespage-menu {
background:#2194af;
height:40px;
}
Yolumda bana yardım edebilir misiniz?
Çabalarınız için çok teşekkür ederim!
Eugene
Merhaba Millet,
Nav menümle ilgili bir sorunum var, lütfen biraz yardım alırsam çok sevinirim... Birincil menünün kendisi mükemmel görünüyor, sorun, üsttekiyle yaklaşık 100 piksel veya daha fazla büyük bir boşlukla aşağı açılan alt menüyle ilgili.
Alt menüye gitmeye çalıştığımda görünümden kayboluyor.
Menüyü doğrudan üst menünün altına taşıyarak açık ve tıklanabilir kalmasını sağlamak için aklıma gelen her şeyi denedim ancak şu ana kadar başaramadım.
Bu, Point Teması için kullanılan Özel CSS'dir:
#logo { margin: 0; } .site-branding { padding: 0; }
.post-info { display: none; }
#navigation ul li a { min-height: 22px; padding: 5px 10px 5px 10px; }
.post-date { display: none; }
Teşekkürler ve Saygılar.
WPBeginner Desteği
Merhaba Eugene,
Bunun neden olabileceği konusunda emin değiliz. Tema CSS'nize ve düzeninize ve hangi sınıfları kullandıklarına bağlıdır. Bu özel CSS'yi deneyebilirsiniz:
.primary-navigation li ul { margin:0px; padding:0px; }1-click Use in WordPress
Yönetici
Eugene
Üzülerek söylüyorum, bu da işe yaramadı...
Denemen için teşekkürler, yeni bir tema gerekiyor gibi görünüyor.
Saygılarımla.
Amirul Farhan
Merhaba.
Is the plugin works even though with the theme purchased have its own menu design?
Thanks
Rida
bootstrap kullanmak istiyorsanız, header.php dosyanıza tek satırlık basit bir kodla kendi css sınıflarınızı eklersiniz.
'primary', 'container' => 'div', 'container_class' => 'collapse navbar-collapse', 'menu_class' => 'nav navbar-nav pull-right', 'menu_id' => 'primary-menu' ) ); ?>
Dhany
Yaşasın..başka bir EKLENTİ EKLENTİLERİ nasıl kullanacağınızı bu kadar çok paylaşıyorsunuz, tam olarak wordpress kullanmıyorsunuz…harika iş
WPBeginner Desteği
Merhaba Dhany,
Geri bildirim için teşekkürler. WPBeginner'da hedef kitlemiz çoğunlukla başlangıç seviyesindeki kullanıcılardır. Çoğu CSS, HTML, PHP vb. hakkında bilgi sahibi değildir. Eklentiler, web sitelerini bozmadan işleri halletmelerini kolaylaştırır.
Yönetici
Andrew
Dude…it says ‘beginner’ in the URL.
Ayrıca… ortada manuel bir seçenek sundular.
Malin
Merhaba! Baskerville temasını kullanan sitemdeki menüyle ilgili acilen yardıma ihtiyacım var. Son güncellemeyle menü tamamen çıldırdı! Lütfen YARDIM EDİN!
Malin
Raymond
Bu, bir bootstrap temasındaki stillerimi WordPress'te nasıl çalıştıracağımı anlamaya çalışırken bana çok yardımcı oldu. Teşekkür ederim
Samseen
Güzel Yazı,
Ancak, listedeki belirli bir öğeyi nasıl hedefleyebilirim. Şu anda bir çözüm buldum, ancak o belirli menü öğesini hedeflemek isteyeceğim.
Örneğin, o belirli öğenin menüsü için farklı bir arka plan rengi olmasını istiyorum. Bu nasıl yapılabilir?
Marko
Chrome, Firefox'ta öğeyi incele aracı.
benjamin
Merhaba arkadaşlar, kodlamada yeniyim, lütfen gerçek yardıma ihtiyacım var. Bir WordPress sitem var ve sitemin teması Baskerville, bu tema yalnızca bir menüyü destekliyor, meraklı sayfalarıma gezinme menüleri oluşturmaya çalışıyorum, lütfen bunun için bir kod varsa lütfen nereye yerleştirebilirim, lütfen bir yanıt alırsam çok minnettar olurum teşekkürler.
Arsh Dznr
WordPress'te CSS menümü kaçırıyorum ama menü açılır menüleri görünmüyor lütfen yardım edin
çok teşekkürler
umanga
betiklerinizi function.php'ye doğru şekilde eklediniz mi?
Andika Amri
Hello wpbeginner, nice tuts!
Vantage temasını kullanıyorum, menülerimden birine zaten özel bir sınıf ekledim = ".menu-about", ancak stylesheet.css'de stil verdiğimde hiç uygulanmıyor, herhangi bir öneriniz var mı?
thanks!
shaon
Yirmi On İki temasını kullanıyorum. Menümü farklı renklerle zaten değiştirdim. Ancak başlıkta gezinme menüsünün konumunu taşıyamıyorum, başlığın taban çizgisinden altta çok fazla boşluk var. Başlığın altına değmesini istiyorum.
Niveditha
Merhaba,
WordPress codex'i kullanarak başlıkta bir ana menü ve bir altbilgi menüsü oluşturdum. Şimdi iki menüm sayfamda dikey olarak duruyor. Yatay menüler için nasıl kodlarım?
Lütfen yardım edin, bu gerçekten acil!
Şimdiden teşekkürler
WPBeginner Desteği
Bunun için CSS kullanmanız gerekir. Varsayılan temalardaki kodu inceleyin, en iyi örnek yirmi on üç veya yirmi on iki temaları olacaktır.
Yönetici
Judy
Tüm bu sınıfların aslında neyi değiştirdiğine dair bir infografik için ölürüm. Şöyle ki:
.current-page-ancestor
.current-menu-parent
.current_menu_parent
.current-page-parent
.current_page_parent
.current-menu-ancestor
ve .current-menu-parent ile .current_menu_parent gibi tireler/alt çizgiler arasındaki fark nedir
Sana anlatırsan senin için bir tane yapacağım!
Teşekkür ederim…
Tarmizi Achmad
bilgi için teşekkürler…
Yogesh Kumar
Selam, çok önemli bir şey sormak istiyorum
Sitenizin üstteki gezinme çubuğunda, Blog bağlantısı için imlecimizi üzerine getirdiğimizde 8 bağlantı gösteren çubuk gibi... Şimdi benim sitem de aynı stilde gösteriyor ama ben bunları öyle bir şekilde görüntülenmesini istiyorum ki, üzerine faremi getirdiğimde 8 bağlantı yan yana, yani 4-4... Lütfen beyefendi, buna çok ihtiyacım var... Lütfen en kısa zamanda cevap verin...
Yayın Kadrosu
Genellikle menüler sıralanmamış liste (ul) olarak düzenlenir. Alt gezinme veya açılır menüleriniz olduğunda, bunlar liste öğesinin içinde kendi sıralanmamış listeleridir. Bu nedenle, değiştireceğiniz örnek bir CSS sınıfı şuna benzer olacaktır:
ul.menu li ul{width: 220px;}
ul.menu li li{float: left; width: 100px;}
Bu bölümde, her ikinci seviye liste öğesinin tam bir genişliğe sahip olmasını ve sola kaydırılmasını sağlayacağız.
Yönetici
Jim
Harika bir makale, teşekkürler.
O CSS sınıfı özelliğinden hiç haberim yoktu, en azından şimdi biliyorum.
Bu bana gerçekten fayda sağlayacak.
Teşekkürler.
Nilamkumar Patel
This is very helpful. Prior to this, I had understanding that we can’t add custom classes in wordpress from admin and I always used to do it in functions.php, but this is awsome. These people are rockers. And many thanks to Sayed for this helpful post
wiseroner
great tutorial!! but how do i do something as simple as change the font size? what do i enter in to change the font size? thank you!
wpbeginner
@wiseroner css dosyanızdaki ana menü sınıfına sadece font-size ekleyemezsiniz.
wpbeginner
@mriulian Yukarıdaki eğitime bakın… mevcut sayfalar için sınıflar zaten tanımlanmış durumda…
Üstbilgi kodunda, menü kapsayıcı kimliğini ve kapsayıcı sınıfını tanımlamanız gerekir… makaleyi söylediği gibi takip edin, çalışacaktır.
mriulian
Sadece daha net olmak için, kodum bu:
// sayfa fonksiyonunda
if (function_exists(‘register_nav_menus’)) { register_nav_menus( array( ‘mainNav’ ) ); }
// başlık sayfasında
‘main_nav_menu’)); ?>
// css dosyasında
.current{ background-color: #0188AA; color: #fff; text-decoration: none; }
Bu sınıfı navigasyonuma nasıl uygulayabilirim? (statik bir html sayfasında çok kolay ama wordpress'te görünüşe göre oldukça karmaşık).
Şimdiden teşekkürler
mriulian
Bunu yaptım ama işe yaramadı. Menümü functions sayfasında kaydettim ve ardından ana navigasyonum olarak header sayfasından çağırdım. Şimdi, mevcut sayfaya uygulanacak .current sınıfım stil sayfamda var ama bunu nasıl yapacağım belli değil. Bir öneriyle yardımcı olabilir misiniz?
wpbeginner
WordPress gezinme menülerinin çalışma şekli, hangi sayfanın mevcut olduğunu otomatik olarak bilecektir.
iirimina
Ekran seçenekleri panelindeki css sınıflarından bahsettiğiniz için teşekkürler. Navigasyonumla ilgili sorunum, belirli bir sayfaya geldiğinizde her menü öğesinin belirli bir arka plan rengi alması için nav menüsünü nasıl stilize edeceğim. Stil sayfanızda .current_page_item{} gibi bir sınıf oluşturmaktan bahsediyorsunuz. Ancak bu sınıfı header.php'ye nasıl uygulayabilirim?
Rick
Menü adlarına simge ekleme konusunda daha ayrıntılı bilgiye nereden ulaşabilirim. Burada özetlediğiniz şeylerin çoğunu yapmak için iyi bir CSS kılavuzu nedir?
Teşekkürler
Yayın Kadrosu
CSS-Tricks iyi bir forum, ancak CSS öğrenmek için muhtemelen CSS for Beginner kitaplarına bakmalısınız. Çünkü tek yaptığınız bir arka plan resmi eklemek.
Yönetici
Francisco
Hello. I absolutely loved this post and found it very useful, particularly the option to set individual CSS classes, so many thanks for this information.
What I was wondering is if it would be possible to dynamically assign CSS classes from the php wp_nav_menu function call to certain types of elements, for instance, to parent menu items only. That way, you wouldn’t have to manually add that class in the Menu Screen every time a new type element (in the example, a new parent item) is created.
Any thoughts on that would be greatly appreciated,
Yayın Kadrosu
Evet, bunun için Menu Class parametresini kullanırsınız.
Yönetici
Francisco
Aklımdan geçen de buydu. Onayladığın ve bana geri döndüğün için teşekkürler.
Sağ ol!
Jayesh
güzel makale.
wp_nav_menu() çıktısını değiştirmek istiyorum.
wp_nav_menu() tarafından oluşturulan HTML'yi beğenmiyorum.
Menü için kendi güzel HTML'im var.
Bu yüzden wp_nav_menu() tarafından oluşturulan HTML yapısını değiştirmek istedim.
bu mümkün mü ?
Lütfen en kısa sürede bilgi verin.
Yayın Kadrosu
Kendi div'lerinizi vb. ekleyebilirsiniz, ancak her zaman liste çıktısı olacaktır. İstediğiniz gibi stil verebilirsiniz.
Yönetici
chunky
Thank you! Now I can stop pulling my hair out! Bookmarked this and will tell others!
Kalid
Merhaba, eğitim için teşekkürler. Temanızda kullanılan gezinme menüsüne sahip olmam için bana rehberlik etmeniz harika olurdu. Sizinki gibi bir açılır menü istiyorum. Teşekkürler!
Yayın Kadrosu
WordPress varsayılan gezinme menüsü, açılır menülere sahip olmanıza olanak tanır. Ana öğenin biraz sağına sürüklemeniz yeterlidir ve mümkündür. Genesis gibi bir çerçeve kullanıyorsanız, zaten Fancy Drop down seçeneği mevcuttur, bu nedenle onu seçebilirsiniz. Veya bunu yapmak için SuperFish gibi jQuery tekniklerini kullanabilirsiniz. Gelecekte bir öğretici ekleyebiliriz.
Yönetici
tuba
çok güzel makale, wordpress projem için bana yardımcı oldu, teşekkürler!
GrimCris
Harika bir makale. WordPress Menülerindeki CSS sınıflarını bilmiyordum. Çok teşekkür ederim!
Keith Davis
Wordpress'i biliyorsunuz.
This is not an easy tutorial but well explained and certainly adds to my understanding.
Diğerlerini eğittiğiniz için minnettarım.
Rick
Kanka! Harika! Menüler için CSS seçeneği olduğunu bilmiyordum! Süper!
Adam W. Warner
Harika bir yazı, süper bilgilendirici! Menüler için ekran seçeneklerini de fark etmemiştim.
Eli
İlk php wp_nav_menu kodunu nereye yerleştirmeniz gerektiğinden emin değilim. Fonksiyonlar dosyasına mı yoksa başlığa mı yoksa...?
Tony
CSS Sınıfları menü öğesi hakkında bilgim yoktu! Bunu belirttiğiniz için teşekkürler.
Yayın Kadrosu
You are welcome
Yönetici
Steve Meisner
Ben de! Tam olarak ihtiyacım olan şeydi. Hepinizi ve Wordpress geliştirme ekibini Tanrı korusun!
Pieter
Respect for pointing out the css styles! I always used the css attribute to style a list item, but these styles are definitely more handy. You just earned yourself another feed subscriber!
Regards from Belgium.
Yayın Kadrosu
Yardımcı olabildiğimize sevindim Pieter.
Yönetici