Gezinme menüsünde simgeler gördüyseniz, bunları WordPress web sitenizde de kullanmayı merak edebilirsiniz. Ancak sorun, kodlama becerilerine ihtiyaç duyduğunuzda ortaya çıkar.


Yeni başlayan biriyseniz, Font Awesome kitaplığındaki herhangi bir simgeyi kullanmak için bir eklenti yükleyebilir ve etkinleştirebilirsiniz. Ancak biraz CSS biliyorsanız, WordPress gezinme menüsü öğelerinize hiçbir zaman resim simgeleri ekleyebilirsiniz.

Soru, cPanel erişimine ihtiyacınız olup olmadığını gösterir. Bu derste, özel CSS eklemeniz gerekiyor. Yönetici alanınızdan varsayılan CSS düzenleyicisini veya özelleştiricideki ek CSS alanını kullanabilirsiniz.

WordPress uzmanlarının çoğu tema düzenleyiciyi güvenlik amacıyla gizlemesine rağmen, isterseniz yerleşik özelleştiriciyi kullanabilirsiniz.

Bu eğitimde, konsepti anlamanız için size bir kod örneği sunacağım, CSS eklemek sizin üzerinizde.

Çünkü herkesin özel CSS eklemek için farklı bir yöntemi vardır.

Simge Görüntülerini Medya Kitaplığınıza Yükleyin

Her şeyden önce, bilgisayarınıza simge görüntülerini indirmelisiniz. Bu görüntüleri WordPress medya kütüphanenize yükleyin.

Görüntüler yerine simgeler kullanmayı merak ediyorsanız, HTTP isteklerini artıran bir üçüncü taraf simge kütüphanesi entegre etmeniz gerekir. Size bir web sitesinin sayfa yükleme süresini etkilemeyen basit bir çözüm sunacağım..

Şimdi adımları izleyin.

Aşama 1:

Adresine git Görünüm>>Menüler geçerli menüyü görebileceğiniz wp-admin alanınızda.

WordPress Gezinme Menüsü Öğelerinize Görüntü Simgeleri Ekleme

Adım 2:

Şimdi, sağ üst köşede yakından görürseniz, "Ekran Seçenekleri" bağlantı. Bir mega açılır menü görebilirsiniz.

WordPress Gezinme Menüsü Öğelerinize Görüntü Simgeleri Ekleme

Altında "Gelişmiş menü özelliklerini göster" başlığı, kontrol etmek için bir kutu görebilirsiniz CSS Sınıfları, kontrol et.

Aşama 3:

Şimdi aşağı kaydırın ve herhangi bir menü öğesini açın. Diyelimki "Ev."

WordPress Gezinme Menüsü Öğelerinize Görüntü Simgeleri Ekleme

Altında doldurulması gereken bir alan görebilirsiniz CSS Sınıfları (isteğe bağlı). Ekleyelim "menuicons" CSS sınıfı olarak. Tıkla Menüyü Kaydet buton.

4. Adım:

Bir simge görüntüsünün görünmesi için biraz CSS’ye ihtiyacınız vardır. Size bir örnek göstereyim.

.menuicons {
arka plan resmi: url (‘http://www.yoursite.com/wp-content/uploads/2018/06/home.png’);
arkaplan tekrarlama: tekrarlama yok;
arka plan konumu: sol;
dolgu sol: 5 piksel;
}

Not: Resim URL’sini medya kitaplığınızdan seçtiğiniz adresle değiştirmeyi unutmayın.

Size nereden kopyalayabileceğinizi göstereyim. Medya kitaplığınıza gidin, görüntülemek istediğiniz simge resmini tıklayın, URL’nin önünde gördüğünüz adresi kopyalayın.

WordPress Gezinme Menüsü Öğelerinize Görüntü Simgeleri Ekleme

Burada, yalnızca bir menü öğesi için bir resim simgesi eklemenizi gösterdim. Her menü öğesi için, o resim simgesinin URL’siyle farklı bir sınıf ve yeni bir CSS kodu seçmelisiniz.

İşte ev simgesi için eklediğim resim simgesinin demosu.

WordPress Gezinme Menüsü Öğelerinize Görüntü Simgeleri Ekleme

Daha önce de tartıştığım gibi, özel CSS eklemenin farklı yolları vardır. CSS’yi ana CSS dosyanızdan başka bir kaynaktan yüklemek istemiyorsanız, düzenlemek için FTP veya cPanel kullanabilirsiniz.

Adresine git Dosya Yöneticisi>> wp-content>> temalar>> Tema Klasörü>> style.css, sağ tıklayın ve düzenle’yi seçin.

Hemen hemen her WordPress barındırma hizmeti cPanel erişimi sunar.

WordPress Gezinme Menüsü Öğelerine Görüntü Simgeleri Ekleme

Birçok WordPress kullanıcısı için, mevcut web sitesinin düzenini değiştirmek korkutucu olabilir, çünkü CSS konusunda uzmanlığı olmayabilir.

Ancak gördüğünüz gibi, bir görüntü simgesini arka plan görüntüsü olarak ayarlamak ve konumunu ayarlamak için yalnızca CSS’nin temel anlayışına ihtiyacınız vardır..

Sonuç

CSS ile uğraşmanın hala zor olabileceğini düşünüyorsanız, bir eklenti kullanmalısınız. Yukarıda gördüğünüz adımları takip etmek zor olmasa da.

Umarım WordPress gezinme menüsü öğelerine resim simgeleri ekleyebilirsin.

Bu en iyi 3 WordPress barındırma hizmetine göz atın:

FastComet

Başlangıç ​​fiyatı:
$ 2.95


Güvenilirlik
9.7


Fiyatlandırma
9.5


Kullanıcı dostu
9.7


Destek
9.7


Özellikleri
9.6

Yorumları oku

FastComet’i ziyaret edin

Hostinger

Başlangıç ​​fiyatı:
$ 0.99


Güvenilirlik
9.3


Fiyatlandırma
9.3


Kullanıcı dostu
9.4


Destek
9.4


Özellikleri
9.2

Yorumları oku

Hostinger’ı ziyaret edin

A2 Hosting

Başlangıç ​​fiyatı:
$ 3,92


Güvenilirlik
9.3


Fiyatlandırma
9.0


Kullanıcı dostu
9.3


Destek
9.3


Özellikleri
9.3

Yorumları oku

A2 Hosting’i ziyaret edin

İlgili Nasıl Yapılır Makaleleri

  • WordPress’te Gezinme Menüsüne Belirli Mesajlar Ekleme
    orta düzey
  • CPanel Kullanarak WordPress Temanıza Yeni Gezinme Menüsü Ekleme
    uzman
  • Daha İyi Bir SEO Puanı için .htaccess Kullanarak Arama URL’si Bilgi Bilgisini Değiştirme
    orta düzey
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me