İnsanlar doğal olarak bir ürünün görsel görünümüne çekilirler. Site Web WordPress, paylaştığınız yazılı içeriğe ilgi duydukları kadar. Aslında, göre Jeff Bullas ", Resimli makaleler, resimsiz makalelerden% 94 daha fazla görünüme sahip.

Bana sorarsan bu, sayfa görüntülemelerde çok büyük bir artış.

Ve nedeni tam olarak nedir?

İçeriğinizin tamamına yüksek kaliteli, makaleyle ilgili birkaç resim eklemeniz yeterlidir.

Ama ya üzerindeki resimler Site Web ekran görüntüleri ve fotoğrafların ötesine geçen? Peki ya sadece dikkat çekmekle kalmayan, aynı zamanda faydalı bir işleve de hizmet eden görüntüler?

Evet, ikonlardan bahsediyorum. Sosyal medyada paylaşmayı teşvik etmek, işletme sahiplerinin iletişim sayfalarını göstermek için web sitelerinde bulunan küçük resimleri biliyorsunuz kullanım.

Fikir bu siteden alındığı için, ziyaretçi Sadece web sitelerindeki resimlerden etkilenmekle kalmayıp, onlarla etkileşime girmeye meyilliydiler, insanlar onları web sitelerine eklemeye başladı.

Yine de teknoloji ilerledikçe, her zaman olduğu gibi, geleneksel görüntü simgeleri web siteleri için bir görüntü çözümü olarak sarsılmaya başladı. Bunun nedeni, sayfaları çok daha ağır ve dolayısıyla daha yavaş yapmalarıdır, ancak her şeyden önce bu çözüm, mobil cihazlar için her zaman uygun değildir.

Ancak bir çözüm var: icon fontları.

Bugün size simge yazı tiplerinin ne olduğunu ve bunları WordPress sitenizde kullanmanın faydalarını anlatacağım. Ek olarak, popüler eklentiyi kullanarak WordPress sitenize simge yazı tiplerini nasıl ekleyeceğinizi göstereceğim " Daha iyi Yazı Müthiş '.

Öyleyse başlayalım.

Simge yazı tipleri nelerdir ve bunları neden kullanmalısınız?

Simge yazı tipleri tam olarak söyledikleri şeydir: tamamen simgelerin içine yerleştirilmiş yazı tipleri. Aslında, simge yazı tipleri veya " make-ikon "Geleneksel yazı tiplerinin ve metinlerin ilişkilendirildiği harfleri ve sayıları değil, yalnızca karakterleri veya simgeleri görüntüleyen bir yazı tipi olarak tanımlanabilir.

Simge yazı tipleri, sitenizde yaygın olarak kullanılan sembolleri görüntülemek için kullanılır. Örneğin, sosyal medya düğmeleri, alışveriş sepetiniz, indirme düğmeleri ve gezinme düğmeleri, sitenizde küçük, etkileşimli resimler gösteren simge örnekleridir.

Neden simge yazı tiplerini kullanmalı?

Resim simgeleri geçmişte birçok site sahibi için işe yaradı. Ancak gezinme kuralları, kullanılabilirlik ve tasarım geliştikçe simge yazı tipleri, etkileşimli görüntüleri bir ekranda görüntülemek için en iyi çözüm haline geldi. web sitesi.

Simge yazı tiplerinin neden en iyi seçim olduğuna dair bazı ikna edici nedenlere bir göz atalım:

• Kaliteyi kaybetmeden kolayca genişletilebilir
• Renk ve gölge açısından özelleştirilebilir
• 100% duyarlı
• CSS görüntü sprite gibi çalışır, ancak metin gibi davranır
• Kullanıcı dostu
• Uyumlu tarayıcılar
• Opaklığı, dönüşü ve daha fazlasını özelleştirin
• Boyut küçük dosya
• hız veya web sitenizin performansını feda etmeyin

Gördüğünüz gibi, web sitenizde bir resim simgesi yerine bir simge yazı tipi kullanmak isteyebileceğiniz birkaç neden var.

Bir eklenti kullanarak sitenize yazı tipi simgeleri yükleme

Daha İyi Yazı Tipi Harika bir WordPress Plugin Font Awesome'in en son sürümünü WordPress projenize otomatik olarak entegre etmenizi sağlayan ücretsiz bir yazılım. Ayrıca CSS, kısa kodlar ve TinyMCE kısa kod üreteci ile birlikte gelir.

Bu eklenti, site sahipleri için çeşitli faydalı özelliklere sahiptir:

• En son sürümün rutin güncellemesi
• Kısa kodları değiştirmeden Font Awesome sürümleri arasında geçiş yapabilme
• Kısa kodları dahil diğer popüler yazı tipi eklentileri için destek
• JsDelivr CDN tarafından verilir

1 Adımı: Better Font Awesome'i Kurmak ve Etkinleştirmek

Başlamak için, "Better Font Awesome" eklentisini, diğer eklentilerde olduğu gibi WordPress panonuz üzerinden kurun ve etkinleştirin.

Önce, " Eklentiler> Yeni ekle Ve ara " Daha iyi Yazı Müthiş '.

Ardından " Şimdi yükleyin »Ve« üzerine tıklayın etkinleştirmek '.

Etkinleştirildiğinde, eklenti bir bağlantı eklerDaha iyi Yazı MüthişWordPress panonuzun Ayarlar menüsü altında.

Adım 2: Eklenti Ayarlarını Yapılandırma

Eklentiyi yapılandırmak için « Daha iyi Yazı Müthiş ", Menü öğesini tıklayarak başlayın" Daha iyi Yazı Müthiş Ayarlar altında. Bunu yaptıktan sonra, buna benzer bir ekran göreceksiniz:

Burada aşağıdakileri yapabilirsiniz:

• Sürümü: Kullanmak istediğiniz "Better Font Awesome" sürümünü seçin.
• Minyatür CSS Kullan: Küçültülmüş CSS sürümünü kullanmak istiyorsanız bu kutuyu işaretleyin.
• Mevcut baskı yazı tipini silin: Diğer eklentiler ve temalar tarafından eklenen kodlanmış parçacıkları ve kısa kodları kaldırmayı denemek için bu kutuyu seçin.
• Yönetici incelemelerini gizle: API ve CDN hataları oluştuğunda görünen varsayılan yönetici uyarılarını gizleyin.

Minimum miktarda Daha İyi Yazı Tipi Harika seçeneklerine ek olarak, sitenize simgelerin nasıl ekleneceğini açıklayan küçük bir "Kullanım" bölümü vardır.

3. Adım: Web Sitenize Simge Ekleme

Kısa kod, HTML veya TinyMCE aracılığıyla "Daha İyi Yazı Tipi Harika" kullanarak web sitenize simge eklemenin üç kolay yolu vardır.

# 1. Kısa kod kullanarak simge ekleme

Kısa kod kullanarak web sitenize simgeler eklemek için, önce " Müthiş Yazı Kullanılabilecek mevcut simgelerin tam bir listesini görmek için.

Burada istediğiniz simgeyi arayabilirsiniz. Örneğin, bir "e-posta" simgesi istiyorsanız, sadece o anahtar kelimeyi arayın ve üzerine tıklayarak kullanmak istediğiniz simgeyi seçin.

Eklemek istediğiniz simgeye tıkladıktan sonra, simgenin görüntüsünü farklı boyutları ve küçük bir kod bloğu ile gösteren bir ekran göreceksiniz:

Kod bloğunu kopyalayın ve "Metin Düzenleyici" sekmesini kullanarak web sitenizde herhangi bir yere yapıştırın. Editör web sitenizde şöyle görünecek:

Sonunda, işte ne ziyaretçi sitenize eriştiklerinde görecekler:

# 2. HTML kodunu kullanarak simge ekleme

Bölümde gördüğümüz gibi " Kullanım Web sitenize simge eklemek için HTML kodu kullanma seçeneğiniz vardır. Ancak eklenti geliştiricileri, HTML kullanmanın sürüme özel önekler gerektirdiğini dikkate alır.

Bu yüzden bunun yerine kısa kod kullanmanızı tavsiye ediyorlar. Ancak, HTML kodunu kullanmak istiyorsanız Font Awesome, Burada yararlı bilgiler.

# 3. TinyMCE kullanarak simge ekleme

Bu muhtemelen sitenize simge eklemenin en kolay yoludur. "Görsel Düzenleyici" modunda, sadece Ekle simgesine tıklayın. Oradan, mevcut simge seçenekleri arasında gezinin veya arama özelliğini kullanarak sonuçlarınızı daraltın.

İstediğiniz simgeyi bulduğunuzda, üzerine tıklamanız yeterlidir. Kısa kod oluşturucu, gerekli bilgileri otomatik olarak gönderinize veya sayfanıza girer.

Sitenizdeki simgeleri nasıl özelleştireceğinizi öğrenmek istiyorsanız, "örneklerine bakın. Müthiş Yazı '.