WordPress Menüleri Nasıl Özelleştirilir

Web sitenizi temsil etmek için seçtiğiniz tema, genellikle ana menüyü ve başlığı beğeninize göre tasarlamanıza olanak tanıyan WordPress özelleştiricisinde kontrollere sahiptir. Ancak bazen bu kontroller, menünüzü gerçekten öne çıkarmak için ihtiyacınız olan her şeyi sağlamaz.

Ana menünüzün harika görünmesini sağlamak için uygulayabileceğiniz bazı bağımsız ipuçları ve püf noktaları.

Açılır Menüyle Hiyerarşiyi Görüntüle

Menünüzü geleneksel bir açılır biçimde görüntülemek, WordPress'te yerleşik bir özelliktir. Hemen hemen her tema, açılır menü özelliğiyle uyumlu olacak ve son kullanıcılarınıza aradıklarını hızlı bir şekilde bulmalarına yardımcı olan, anlaşılması kolay bir navigasyon sistemi sağlamanıza olanak tanıyacak.

WordPress'in arka ucunda Görünüm > Menüler altında, soldan seçilen sayfaları sağdaki ana menünüze ekleyebilirsiniz. Seçili sayfaların başka bir seçili sayfanın altındaki açılır menüde gösterilmesini sağlamak için, o sayfayı seçili öğenin altında hafifçe sağa sürükleyip bırakarak taşımanız yeterlidir.

Hiyerarşiyi artırmak için ilk açılır listenin altına başka bir öğe ekleyerek, bu öğeyi de girintileyerek açılır listenizi daha da derinleştirebilirsiniz. Yukarıdaki örnek canlı sitede şöyle görünür:

Kaynakların üzerine gelindiğinde sonraki menü öğeleri kümesine inilir ve ilk öğenin üzerine gelindiğinde soldaki bir sonraki öğe kümesi görüntülenir.

**Not: Açılır menünüzün nasıl görüntüleneceği temaya bağlıdır.**

Menünüze Simgeler Ekleyin

Menünüze Font Müthiş simgeleri eklemek kolaydır ve menünüzü öne çıkarır!

İlk olarak, eklenti yöneticinizdeki Menülerdeki Kısa Kod eklentisini indirin ve etkinleştirin.

Ardından Font Awesome eklentisini indirin ve etkinleştirin.

Şimdi menünüzde görünmesini istediğiniz simgeleri arama zamanı. Font Awesome web sitesine gidin ve uygun bir simge arayın.

Beğendiğiniz simgeye tıklayın ve bu simgenin adını not edin. Şimdi, menü ayarlarınıza döndüğünüzde, herhangi bir menü öğesinin gezinme etiketine Font Awesome eklentisinden simge kısa kodunu ekleyin.

Kısa kodu menü öğesi adından önce veya sonra ekleyebilirsiniz. Aşağıdaki kodu sayfa adınızla ve simge adınızla değiştirin.

[icon name=”simgenizin-adınız-burası”] Hakkında

Kaydetmeyi unutmayın!

Menünüzü Yapışkan Yapın

Son kullanıcı kaydırdıkça sayfaların üst kısmına yapışkan bir menü yapışır. Bu, navigasyonu kullanıcının parmaklarının ucunda tutar. Birçok tema, bir seçenek olarak yapışkan bir başlık sağlayacaktır, ancak bu seçeneğin mevcut olmaması durumunda, menünüzü bazı özel CSS ile yapışkan hale getirebilirsiniz.

Kontrol panelinizde Görünüm > Özelleştir'e gidin. “Ek CSS”ye tıklayın ve aşağıdaki kodu ekleyin:

 #main-menu { z-index:199; margin:0 auto; border-bottom:1px solid #000000; width:100%; position:fixed; top:0; left:0; right:0; }

#main-menüyü, temanıza bağlı olarak değişecek olan gezinme menünüzün CSS sınıfıyla değiştirin. Menünüzün üzerine gelip "İncele"ye sağ tıklayarak sınıfı bulabilirsiniz.

CSS ile uğraşmak istemiyorsanız, yapışkan bir menü oluşturmak için kolay, tak ve çalıştır seçeneği için My Sticky Menu eklentisini yükleyebilirsiniz.

Kullanıcıya Göre Menü Öğelerini Göster/Gizle

Bunun en yaygın örneği, oturum açmamış kullanıcılar için menüde bir Oturum Aç ve/veya Şimdi Katıl sekmesini ve oturum açmış kullanıcılar için bir Oturumu Kapat sekmesini gösterirken, oturum açmış kullanıcılar için herhangi bir Oturum Aç veya Şimdi Katıl sekmeleri gizlidir. -kullanıcıda.

Panonun Eklenti Yöneticisinde, Kullanıcı Menüleri – Gezinme Menüsü Görünürlüğü'nü indirin ve etkinleştirin.

Menü ayarlarınıza geri dönerek Giriş, Şimdi Katıl ve Çıkış Butonlarınızı oluşturabilirsiniz. Kullanıcı girişi ve katılım için ayrı bir sayfanız olabilir. Bir Çıkış Düğmesi için, “Özel Bağlantılar” seçimini kullanarak bir menü öğesi oluşturun.

Eklenecek evrensel WordPress çıkış bağlantısı:

 http://yourdomain.com/wp-login.php?action=logout

Alan adınızı ve doğru http sürümünü (http vs https) kullandığınızdan emin olun.

Bu sekmeleri oluşturduktan sonra, bunları kullanıcının durumuna göre gizleyebilir veya gösterebilirsiniz. “Bu Bağlantıyı Kimler Görebilir?” altında, Oturum Açmış veya Oturumu Kapatmış bir Kullanıcı seçin.

Üyelik siteleri, daha fazla görünürlük seçeneği için kullanıcı rolüne göre menü öğelerini gizleyebilir veya gösterebilir.

Hover Efektleri Ekle

Fareyle üzerine gelme efekti, menü öğesi sekme metnini veya arka plan rengini veya her ikisini de değiştirebilir! Tek yapmanız gereken Görünüm > Özelleştir > Özel CSS'ye bazı özel css eklemek. İşte bir örnek:

 #main-menu li.menu-item a:hover { background-color:#ffe6f2; color:#cc0066; border-radius:5px; border: 1px solid #cc0066; padding-top: 20px; padding-bottom: 20px; padding-right: 10px; padding-left: 10px; Margin-bottom: 10px; }

#main-menüyü, temanıza bağlı olarak değişecek olan gezinme menünüzün CSS sınıfıyla değiştirin. Menünüzün üzerine gelip "İncele"ye sağ tıklayarak sınıfı bulabilirsiniz.

Yukarıdaki örnek, Portföy sekmesinin üzerine gelindiğinde bu vurgulu efekti üretecektir.

Tek Bir Menü Öğesini Özelleştirme

Bu menü öğesine bir CSS sınıfı atayarak tek bir menü öğesi için kolayca özel CSS oluşturabilirsiniz. Menü ayarlarında, ekranın sağ üst köşesindeki Ekran Seçenekleri'ne tıklayın.

Varsayılan olarak işaretlenmemiş olan CSS Sınıfları kutusunu işaretleyin. Ardından menü ayarlarını kaydedin.

Artık her menü öğesinin altında yeni bir metin kutusu olacak. Burada, her menü öğesi için farklı bir CSS sınıfı atayabilirsiniz. Bu örnekte, “Hizmetler” menü maddesine “hizmetler-menü” sınıfını ekledik.

Artık Görünüm > Özelleştir > Özel CSS bölümüne özel CSS'nizi ekleyebilirsiniz. Bu sınıfı kullanarak yukarıdaki aynı CSS'yi kullanabilirim.

**Not: Zaten ayrı bir sınıf atadığınız için li.menu-item'i tanımlayıcı olarak eklemeniz gerekmez.**

 .services_menu a:hover { background-color:#ffe6f2; color:#cc0066; border-radius:5px; border: 1px solid #cc0066; padding-top: 20px; padding-bottom: 20px; padding-right: 10px; padding-left: 10px; Margin-bottom: 10px; }

Bu, yukarıdakiyle aynı sonucu verir, ancak yalnızca bu menü öğesi için.

Son düşünceler

WordPress menünüzü özelleştirmek için bu benzersiz ipuçları ve püf noktaları derlemesini beğeneceğinizi umuyoruz. Bu fikirlerden bazılarını denediniz mi? Kullanmayı sevdiğiniz başka favori numaralarınız var mı? Aşağıdaki yorumlarda bize bildirin!