WordPress Menüye İkon Nasıl Eklenir ?

WordPress içerik yönetim sistemi ile oluşturmuş olduğumuz internet sitemize yenilikler ekleme sitemizi düzenli olarak ziyaret etmeye başlayan kullanıcıların hoşuna gidecektir. Düzenli olarak ziyaret etmeye başlayan kullanıcılar gibi yeni gelen ziyaretçilerinde aklında kalıcı ve güzel bir site izlenimi yaratmakta bir bakıma onları sürekli ziyaretçi haline getirebilmek için önemli bir hal alıyor. Yapacağımız bari değişiklikler ise WordPress menüye icon ekleme olacaktır.

 

Tasarıma bakıldığı zaman küçük bir değişiklik gibi görünse de değişimleri küçük küçük şeyler ile başlatmak son derece önemli bir konudur. WordPress’in özünde bulunan bu özelliği kullanarak dilediğiniz kategori, bağlantı ve sayfalara menüde görünen şekilde icon ekleyebilirsiniz.

 

 

WordPress Menüye İcon Nasıl Eklenir ?

Arama motorlarında her ne kadar WordPress menüye logo ekleme olarak yazılsa bile asıl yapacağımız iş ekleyeceğimiz iconun CSS kodunu bulmak olacaktır. WordPress içerik yönetim sistemine entegre edeceğiniz hiç bir ek eklentiye ihtiyacımız olmayacaktır. Ekte vermiş olduğum internet sitesinde işimize yarayabilecek bütün iconların CSS kodlarına ulaşabiliriz.

 

http://fontawesome.io/icons/

 

Yukarıda ki vermiş olduğum bağlantıya tıkladığınızda işinize yarayacak olan ve içerisinden eklemek isteyeceğiniz ikonları seçip kodlarını görebilirsiniz. Kodlarını gördükten sonrasında ise asıl sorun WordPress içerik yönetim sisteminde menüye eklemek olacaktır. WordPress menüye icon eklemek için :

 

  • WordPress admin paneline giriniz.
  • Sol tarafta yer alan menülerden “Görünüm” başlığı altından “Menüler” butonuna tıklayın.

 

Bu sayede artık istediğimiz ikonun kodunu kopyaladıktan sonrasında her hangi bir menüde ki bağlantıya yapıştırabiliriz.  Hangi menüde ki bir bağlantıya eklemek istiyor iseniz üzerinize tıkladığınızda “CSS sınıfları” adlı bir alan olması gerekecektir. Eğer tıkladığınızda öyle bir alan karşınıza çıkmıyor ise ve bu alanı açmak için ise yapacaklarımız :

 

  • Menüler ekranında dururken ekranın en üstünde sağ tarafa bakın.
  • Sağ üst tarafta “Ekran Tercihleri” adlı butona tıklayınız.
  • Aşağıya doğru kayarak bir alan açılacaktır.
  • Burada “CSS sınıfları” yazan yerin yanına tik atmanız gerekecektir.

 

Artık hangi menüde ki hangi kategoriye ikon eklemek istiyor iseniz CSS sınıflarını etkinleştirmiş bulunduk. Hangi bağlantıya ikon eklemek istiyor iseniz artık o bağlantıya ikon ayarlamak için üzerine tıklayın.

 

  • Ekte vermiş olduğum internet sitesinde hoşunuza giden ikonun kodunu kopyalayın.
  • Kopyaladığınız kod örnek olarak “fa-home” şeklinde olacaktır.
  • Kopyaladığınız bu kodu menüde ki “CSS sınıfları” yerine yapıştırın.
  • Ardından kopyaladığınız kodun başına “fa” ekleyerek son halinin “fa fa-home” şeklinde olmasını sağlayın.

 

Daha sonra denemek için menüyü kaydedin. İnternet sitenizin ana sayfasına girdiğinizde değişiklik yaptığınız menünün yanında ikon görünüyor ise artık işlemi burada bırakabilirsiniz ve diğer menülere bu yöntem sayesinde ikon ekleyebilirsiniz. Eğer ikon eklemeye çalıştığımız menüde değişiklik olmadı ise sizler için WordPress menülere icon ekleme işlemi sizin için bitmemiş demektir.

 

Bu işlem ile menülere ikon ekleme işleminde başarılı olamadığımızda yapmamız gereken işlemlerden bir tanesi de sol tarafta yer alan Özel Bağlantılar seçeneğini kullanmak olacaktır. Menüde bütün her şeye ikon atayabilmek için ise yapmamız gereken tek şey oluşturulan menüde ki kategorileri bile Özel Bağlantılar ile menüye eklemek olacaktır.

 

  • Menüler alanında sol tarafta yer alan “Özel Bağlantılar” butonuna tıklayınız.
  • Aşağı doğru açılan pencereden eklemek istediğiniz bağlantı adresini ve ismini giriniz.
  • İsmini girmeden öncesinde ise ekte belirtmiş olduğum sitede ki ikonun sayfasında ki örnek olarak
    <i class="fa fa-home" aria-hidden="true"></i>
    

    ile başlayan kodu kopyalayın.

  • WordPress içerik yönetim sisteminde menü alanına döndüğünüzde Özel Bağlantı ile menü eklemek için url ve “Bağlantı metni” sorduğu yere bu kodu yapıştırın.
  • Ardından yapıştırdığınız koddan aria-hidden="true" kısmını silin.
  • </i> Kısmından sonrasında ise o bağlantının ismini girebilirsiniz.

 

 

WordPress eklentisiz icon ekleme işlemi aslına bakılırsa bu kadar basittir. CSS sınıflarını ile ikon eklemeyi temamız desteklemiyor ise Özel bağlantılar sayesinde menüde görünecek istediğiniz kategori, sayfa, yazıya ikon ekleyebilirsiniz.


] }

“WordPress Menüye İkon Nasıl Eklenir ?” üzerine 13 yorum

  1. Yeni bir site açmayı planlıyorum. Menü kategorilerinin yanında ikon olmasını istiyordum faydalı bir yazı olmuş. Sadece fontawesome ile olan iconları mı koyabiliyoruz peki?

    Cevapla

Yorum yapın