WordPress Temanıza Kolayca Simge Yazı Tipleri Ekleme

Simge yazı tipleri WordPress tasarım araç setimizdeki en etkili araçlardan biridir ve sizin de olabilirler.

Sadece göz alıcı olmaktan çok daha fazlasıdırlar – yeniden boyutlandırılabilirler, web yazı tipleri gibi hızlı yüklenirler ve geleneksel resim simgeleri gibi web sitenizi yavaşlatmazlar. Ayrıca, tam olarak istediğiniz görünümü elde etmek için CSS kullanarak onları şekillendirebilirsiniz.

WordPress’e simge yazı tipleri eklemek için iki güvenilir yöntem keşfettik ve bu makale size nasıl yapılacağını gösterecek.

Simge Yazı Tipleri Nedir ve Neden Kullanmalısınız?

Simge yazı tipleri harf ve rakamlar yerine semboller veya küçük resimler içerir.

Bu simge yazı tiplerini birçok farklı şekilde kullanabilirsiniz. Örneğin, bunları alışveriş sepetinizde, indirme düğmelerinde, özellik kutularında, hediye yarışmalarında ve hatta WordPress gezinme menülerinde kullanabilirsiniz.

Aslında WordPress, yönetici alanında yazı tipi simgeleri kullanır.

Çoğu ziyaretçi yaygın olarak kullanılan bir simgenin ne anlama geldiğini hemen anlayacaktır, böylece sitenizde gezinmeyi kolaylaştırabilirler. Ayrıca, çoğu insan hangi dili konuşursa konuşsun ortak simge yazı tiplerini anlayacağından, çok dilli bir web sitesi oluşturmanıza da yardımcı olabilirler.

Görüntü tabanlı simgelerle karşılaştırıldığında, yazı tipi simgeleri çok daha hızlı yüklenir, böylece WordPress hızını ve performansını artırabilirler.

Ücretsiz olarak kullanabileceğiniz birkaç açık kaynaklı simge yazı tipi seti vardır, ancak bu kılavuzda en popüler açık kaynaklı simge seti olduğu için Font Awesome ‘ı kullanacağız.

Bununla birlikte, WordPress temanıza simge yazı tiplerini nasıl kolayca ekleyebileceğinize bakalım. Doğrudan kullanmak istediğiniz yönteme geçmek için hızlı bağlantıları kullanmanız yeterlidir:

Yöntem 1. WordPress Eklentisi Kullanarak Simge Yazı Tipleri Ekleme (Ücretsiz ve Kolay)

WordPress’e özel simge yazı tipleri eklemenin en kolay yolu Font Awesome eklentisini kullanmaktır.

Bu eklenti, WordPress tema dosyalarınızı değiştirmeden sayfalarınızda ve yazılarınızda ücretsiz simge yazı tiplerini kullanmanıza olanak tanır. Ayrıca eklentiyi her güncellediğinizde yeni Font Awesome simgelerini otomatik olarak alırsınız.

Yapmanız gereken ilk şey Font Awesome’ı WordPress’e eklemek. Daha fazla ayrıntı için WordPress eklentisinin nasıl yükleneceğine ilişkin adım adım kılavuzumuza bakın.

Etkinleştirmenin ardından, herhangi bir kısa kod bloğuna bir Font Awesome simgesi ekleyebilirsiniz. Simge yazı tipini göstermek istediğiniz sayfayı veya yazıyı açmanız ve ardından ‘+’ simgesine tıklamanız yeterlidir.

Artık ‘Kısa kod’ için arama yapabilir ve karşınıza çıktığında doğru bloğu seçebilirsiniz.

Bunu yaptıktan sonra, aşağıdaki kısa kodu kullanarak herhangi bir Font Awesome simgesi ekleyebilirsiniz:

[icon name="rocket"]

“Roket” yerine göstermek istediğiniz simgenin adını yazmanız yeterlidir. Adı almak için Font Awesome kütüphanesine gidin ve kullanmak istediğiniz simgeye tıklayın.

Görüntülenen açılır pencerede, devam edin ve simgeye tıklayın.

Font Awesome artık adı otomatik olarak panonuza kopyalayacaktır.

Bunu yaptıktan sonra, adı kısa koda yapıştırmanız yeterlidir. Simge yazı tipini canlı hale getirmek için artık ‘Yayınla’ veya ‘Güncelle’ye tıklayabilirsiniz.

Bazen bir metin bloğu içinde bir simge yazı tipi göstermek isteyebilirsiniz. Örneğin, bir marka adından sonra bir ‘telif hakkı’ simgesi görüntülemeniz gerekebilir.

Bunu yapmak için kısa kodu herhangi bir Paragraf bloğunun içine yapıştırmanız yeterlidir.

Ardından, metin blokları için seçenekleri nasıl özelleştirdiğinize benzer şekilde, simgeyi özelleştirmek için sağ taraftaki menüdeki ayarları kullanabilirsiniz. Örneğin, WordPress’te metin rengini, yazı tipi boyutunu ve arka plan rengini değiştirebilirsiniz.

WordPress kısa kodu bir Font Awesome simgesine dönüştürecek ve metninizin yanında gösterecektir.

Başka bir seçenek de kısa kodu widget’a hazır herhangi bir alana eklemektir.

Örneğin, sitenizin kenar çubuğuna veya benzer bir bölüme bir Kısa Kod bloğu ekleyebilirsiniz.

Daha fazla bilgi için lütfen WordPress kenar çubuğu widget’larınızda kısa kodların nasıl kullanılacağına ilişkin kılavuzumuza bakın.

Hatta ikon kısa kodunu sütunlara ekleyebilir ve güzel özellik kutuları oluşturabilirsiniz.

Ayrıntılı talimatlar için WordPress’te simgeli özellik kutularının nasıl ekleneceğine ilişkin kılavuzumuza bakın.

Birçok web sitesi, ziyaretçilerin yollarını bulmalarına yardımcı olmak için menülerinde simge yazı tipleri kullanır. Simge eklemek için yeni bir menü oluşturun ya da WordPress kontrol panelinde mevcut bir menüyü açın.

Adım adım talimatlar için WordPress’te gezinme menüsü eklemeye ilişkin başlangıç kılavuzumuza göz atın.

Görünüm “ Menüler sayfasında, ‘Ekran Seçenekleri’ne tıklayın ve ardından ‘CSS Sınıfları’nın yanındaki kutuyu işaretleyin.

Bunu yaptıktan sonra, simgeyi göstermek istediğiniz menü öğesini genişletmek için tıklamanız yeterlidir.

Şimdi yeni bir ‘CSS Sınıfları’ alanı görmelisiniz.

Bir simgenin CSS sınıfını almak için Font Awesome web sitesinde simge yazı tipini bulup tıklamanız yeterlidir. İsterseniz, farklı ayarlara tıklayarak simgenin stilini değiştirebilirsiniz.

Açılır pencerede bir HTML kod parçacığı göreceksiniz. CSS sınıfı basitçe tırnak işaretleri arasındaki metindir. Örneğin, aşağıdaki görüntüde CSS sınıfı fa-solid fa-address-book şeklindedir.

Tırnak içindeki metni kopyalayıp WordPress kontrol paneline geri dönmeniz yeterlidir.

Şimdi metni ‘CSS Sınıfları’ alanına yapıştırabilirsiniz.

Daha fazla simge yazı tipi eklemek için yukarıda açıklanan aynı işlemi uygulamanız yeterlidir.

Menünün nasıl ayarlandığından memnun olduğunuzda, ‘Kaydet’e tıklayın. Şimdi, WordPress web sitenizi ziyaret ederseniz, güncellenmiş gezinme menüsünü göreceksiniz.

Yöntem 2. SeedProd ile Simge Yazı Tiplerini Kullanma (Daha Özelleştirilebilir)

Yazı tipi simgelerini sitenizin herhangi bir yerinde kullanma özgürlüğü istiyorsanız, bir sayfa oluşturucu eklentisi kullanmanızı öneririz.

SeedProd piyasadaki en iyi sürükle-bırak WordPress sayfa oluşturucusudur ve 1400’den fazla Font Awesome ikonuna sahiptir. Ayrıca sürükle ve bırak yöntemini kullanarak herhangi bir sayfaya ekleyebileceğiniz hazır bir Simge bloğuna sahiptir.

SeedProd ile istediğiniz web sitesi tasarımına uygun özel bir WordPress teması da oluşturabilirsiniz.

Yapmanız gereken ilk şey eklentiyi yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için WordPress eklentisi yükleme hakkındaki başlangıç kılavuzumuza bakın.

Etkinleştirmenin ardından SeedProd ” Ayarlar bölümüne gidin ve lisans anahtarınızı girin.

Bu bilgiyi SeedProd web sitesindeki hesabınızda bulabilirsiniz. Lisans anahtarını girdikten sonra, devam edin ve ‘Anahtarı Doğrula’ düğmesine tıklayın.

Ardından, SeedProd ” Sayfalar ‘ı ziyaret etmeniz ve ‘Yeni Açılış Sayfası Ekle’ düğmesine tıklamanız gerekir.

Şimdi, sayfanız için temel olarak kullanmak üzere bir şablon seçebilirsiniz. SeedProd, WordPress blogunuzun veya web sitenizin ihtiyaçlarına göre özelleştirebileceğiniz 350 ‘den fazla profesyonelce tasarlanmış şablona sahiptir.

Örneğin, kullanıcıların ilgisini canlı tutmak için viral bir bekleme listesi açılış sayfası, bir sıkıştırma sayfası ve hatta özel bir 404 hata sayfası oluşturabilirsiniz.

Bir şablon seçmek için farenizi üzerine getirin ve ardından ‘Onay İşareti’ simgesine tıklayın.

Dijital ürün satışı için mükemmel olduğu için tüm görsellerimizde ‘E-kitap Satış Sayfası’ şablonunu kullanıyoruz. Ancak siz istediğiniz tasarımı kullanabilirsiniz.

Ardından, devam edin ve ö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 herhangi bir şeyle değiştirebilirsiniz.

Girdiğiniz bilgilerden memnun olduğunuzda, ‘Kaydet ve Sayfayı Düzenlemeye Başla’ düğmesine tıklayın.

Ardından, şablonu özelleştirebileceğiniz SeedProd sürükle ve bırak sayfa oluşturucusuna yönlendirileceksiniz.

SeedProd editörü, sağda tasarımınızın canlı bir önizlemesini ve solda bazı blok ayarlarını gösterir.

Sol taraftaki menüde ayrıca tasarımınıza sürükleyebileceğiniz bloklar bulunur.

Düğmeler ve resimler gibi standart blokları sürükleyip bırakabilir veya iletişim formu, geri sayım, sosyal medya paylaşım düğmeleri ve daha fazlası gibi gelişmiş blokları kullanabilirsiniz.

Herhangi bir bloğu özelleştirmek için, düzeninizde seçmek üzere tıklamanız yeterlidir.

Sol taraftaki menü artık o bloğu özelleştirmek için kullanabileceğiniz tüm ayarları gösterecektir. Örneğin, genellikle arka plan renklerini değiştirebilir, arka plan resimleri ekleyebilir veya markanıza daha iyi uyması için renk düzenini ve yazı tiplerini değiştirebilirsiniz.

Sayfaya bir simge yazı tipi eklemek için sol sütunda ‘Simge’ bloğunu bulmanız ve ardından düzeninize sürüklemeniz yeterlidir.

SeedProd varsayılan olarak bir ‘ok’ simgesi gösterecektir.

Bunun yerine farklı bir Font Awesome simgesi göstermek için Simge bloğunu seçmek üzere tıklamanız yeterlidir.

Sol taraftaki menüde, farenizi simgenin üzerine getirin ve göründüğünde ‘Simge Kitaplığı’ düğmesine tıklayın.

Şimdi aralarından seçim yapabileceğiniz tüm farklı Font Awesome simgelerini göreceksiniz.

Kullanmak istediğiniz yazı tipi simgesini bulup tıklamanız yeterlidir.

SeedProd şimdi simgeyi düzeninize ekleyecektir.

Bir simge seçtikten sonra, sol taraftaki menüde bulunan ayarları kullanarak simgenin hizalamasını, rengini ve boyutunu değiştirebilirsiniz.

Sol taraftaki menüde yer alan ‘Bağlantı’ alanına yazarak yazı tipi simgesine bir bağlantı da ekleyebilirsiniz.

Bir başka seçenek de SeedProd’un hazır Simge Kutusunu kullanmaktır.

Bu, bazı metinleri yazmanıza ve ardından yanında bir yazı tipi simgesi göstermenize olanak tanır, bu da onu özellik kutuları için mükemmel bir seçim haline getirir.

Sol taraftaki menüde Simge Kutusunu bulun ve düzeninize sürükleyin.

Daha sonra bloğu seçmek için tıklayabilir ve yukarıda açıklanan aynı işlemi izleyerek simgeyi değiştirebilirsiniz.

Bundan sonra, başlık ve gövde metnini yazabilirsiniz.

Ayrıca ‘Gelişmiş’ sekmesini seçerek bloğun dolgusunu ve kenar boşluğunu değiştirebilir, CSS animasyonları ekleyebilir ve daha fazlasını yapabilirsiniz.

Daha fazla blok ekleyerek ve sol taraftaki menüde bu blokları özelleştirerek sayfa üzerinde çalışmaya devam edebilirsiniz.

Sayfanın görünümünden memnun olduğunuzda ‘Kaydet’ düğmesine tıklayın. Daha sonra bu sayfayı canlı hale getirmek için ‘Yayınla’yı seçebilirsiniz.

Alternatif: SVG Simgeleri Kullanın

WordPress’e simge görselleri eklemenin bir başka yolu da SVG simgeleri kullanmaktır. Ölçeklenebilir vektör formatının kısaltması olan bu format, vektör grafikleri için yaygın olarak kullanılan bir görüntü formatıdır.

Birçok kişi simgelerine birden fazla renk eklemek istediklerinde simge yazı tipleri yerine SVG vektör simgelerini kullanır. Bu dosyaların aynı zamanda daha SEO dostu olduğu ve yüklenmek için diğer resim simgelerine göre daha az sunucu isteği gerektirdiği bilinmektedir.

SVG hakkında daha fazla bilgi edinmek istiyorsanız, WordPress’te SVG görüntü dosyalarının nasıl ekleneceğine ilişkin adım adım kılavuzumuza göz atabilirsiniz.

Umarız bu eğitim WordPress temanıza simge yazı tiplerini nasıl ekleyeceğinizi öğrenmenize yardımcı olmuştur. Ayrıca en iyi WordPress tema oluşturucuları ve WordPress temanızdaki yazı tiplerini nasıl değiştireceğiniz hakkındaki rehberimizi de inceleyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.