Daha iyi bir yazı tipi ile WordPress’e yazı tipi simgesi ekleyin
İnsanlar, tıpkı paylaştığınız yazılı içerikle ilgilendikleri gibi, WordPress web sitesinin görsel yönleriyle doğal olarak ilgilenmektedir. Aslında, internet pazarlamacısı Jeff Bullas’a göre, görüntüleri olan makaleler, görüntüleri olmayan makalelerden% 94 daha fazla ekran alıyor. Bana sorarsanız bu sayfa ekranında büyük bir artış. Ve tam olarak ne yapmak için? İçeriğiniz boyunca makalelerle eşleşen bazı yüksek kaliteli görüntüler ekleyin. Peki web sitenizde ekran görüntüleri ve stok fotoğrafçılığından daha ileri giden resimler ne olacak? Sadece dikkat çeken değil, aynı zamanda yararlı işlevleri olan görüntüler ne olacak?
Evet, ikonlardan bahsettim. Bilirsiniz, sosyal paylaşım amaçları için tüm web sitelerine dağılmış, işletme sahipleriyle iletişim kurma ve bilgi indirme birkaç isim için bulundu. Sitede yakalanan fikirler ziyaretçiler sadece web sitesindeki görüntü simgeleriyle değil, aynı zamanda onlarla etkileşime girme eğiliminde olduğundan, dünyanın dört bir yanındaki insanlar bunları web sitelerine eklemeye başlar. Bununla birlikte, teknolojik gelişmelerle birlikte, her zamanki gibi, geleneksel görüntü simgeleri web siteleri için görüntü çözümleri olarak sallanmaya başladı. Bunun nedeni, çok fazla dosya ağırlığı eklemeleri, iyi ölçeklenmediği ve en kötüsü – çok fazla HTTP isteği gerektirmesidir – hücresel dostu değildirler.
Ancak bir çözüm var: simge yazı tipi. Bugün, WordPress sitenizde kullanılarak hangi yazı tipi simgelerinin ve avantajlarının elde edildiğini tartışacağım. Ayrıca, popüler bir daha iyi yazı tipi harika eklentisi kullanarak WordPress sitenize nasıl simge yazı tipleri ekleyeceğinizi göstereceğim. Son olarak, ek bir bonus olarak, web sitenize yüksek çözünürlük, ölçeklenebilir ve hücresel dostu simgeler eklemek için birçok seçeneğiniz olması için Better Font Awesome için birkaç alternatif sunacağım. Haydi başlayalım. Simge yazı tipi nedir ve neden kullanın? Tam simge yazı tipi, sesin ne olduğu gibidir – tüm simgelerden oluşan yazı tipleri. Aslında, simge yazı tipi, yalnızca karakterleri veya sembolleri görüntüleyen bir yazı tipi olarak tanımlanabilir, geleneksel metin yazı tiplerine dahil olan harfleri ve sayıları yok sayar. Yazı tipi simgeleri, genellikle eylemleri teşvik eden görüntülerdir – aslında görüntüler değildir.
Yazı tipi simgeleri birçok farklı fikri temsil etmek için kullanılabilir. Neden simge yazı tipleri kullanıyorsunuz? Görüntü simgesi geçmişte birçok web sitesi sahibi için iyi çalıştı. Ancak, internet dünyasında navigasyon, kullanım ve tasarım kuralları geliştirildiğinden, yazı tipi simgeleri web sitelerinde etkileşimli görüntüler görüntülemek için daha iyi bir çözüm haline gelmiştir.
Yazı tipi simgelerinin daha iyi bir seçim olmasının güçlü nedenlerinden bazıları:
Kolayca ölçeklendirin ve kaliteyi kaybetmeyin
Renk ve gölge açısından ayarlanabilir
Sprite CSS görüntüleri gibi% 100 duyarlı çalışma ama metin gibi şık olabilir
Kullanımı kolay
Şeffaf nakavt desteği
Çapraz tarayıcı dostu
Opaklığı, rotasyonu ve diğerlerini ayarlayın
Daha küçük dosya boyutu
Web sitenizin hızını veya performansını feda etmeyin
Gördüğünüz gibi, görüntü simgesinin aksine web sitenizde yazı tipi simgeleri kullanmak istemenizin birkaç nedeni vardır. Daha iyi bir yazı tipi kullanarak Sitenizdeki yazı tipi simgesini yükleyen Olağanüstü Daha İyi Harika Yazı Tipi, harika yazı tipinin en son sürümünü WordPress projenize otomatik olarak entegre etmenizi sağlayan ücretsiz bir WordPress eklentisidir. Ayrıca, eşlik eden CSS, kısa kod ve Tinymce simgesi kısa kod üreticisi ile donatılmıştır.
Bu eklenti, web sitesi sahipleri için çeşitli yararlı özellikler sunar:
En son sürümden rutin güncelleme
Kısa kodu değiştirmeden Font Awesome sürümü arasında geçiş yapma yeteneği
Kısa kodları dahil olmak üzere diğer popüler yazı tipi eklentileri için destek
Süper hızlı jsdelivr cdn’den ilginç
Adım 1: Better Font’un Kurulumu ve Etkinleştirilmesi Harika, diğer eklentilerde yaptığınız gibi WordPress kontrol panelinizden Better Font Awesome eklentisini başlatmak, yüklemek ve etkinleştirmek için harika. İlk olarak, Eklentiler> Yeni Ekle’ye gidin ve “Better Font Awesome” u arayın.
Web sitenize yüklenecek daha iyi bir havalı yazı tipi bulun.
Ardından, Şimdi Yükle’yi seçin ve ardından Etkinleştir’i tıklayın. Etkinleştirildikten sonra, eklenti, WordPress kontrol panelinizdeki Ayarlar menüsünün altına “Better Font Awesome” bağlantısını ekler.
Daha iyi yazı tipi harika etiketli yeni menü öğesine dikkat edin.
Adım 2: Eklenti ayarlarını yapılandırın Better Font Awesome eklentisini yapılandırmak için, ayarların altındaki daha iyi yazı tipi harika menü öğesine tıklayarak başlayın. Bunu yaptıktan sonra, buna benzer bir ekran göreceksiniz: Eklenti ayarlarını yapılandırın. Burada aşağıdakileri yapabilirsiniz:
Sürüm: Kullanmak istediğiniz daha iyi yazı tipi harika sürümü seçin. Azaltılmış bir CSS: Azaltılmış CSS sürümünü kullanmak istiyorsanız bu kutuyu işaretleyin.
Mevcut harika yazı tipini kaldırın: Eklentiler ve diğer temalar tarafından eklenen CSS harika yazı tipini ve kısa kodu silmeye çalışmak için bu kutuyu seçin.
Yönetici Bildirimini Gizle: Bir yangın ve CDN hatası oluştuğunda görünen varsayılan yönetici uyarısını gizleyin.
Daha iyi yazı tipi harika seçeneğinin minimum miktarına ek olarak, web sitenize nasıl ikonlar ekleyebileceğinizi açıklayan küçük bir kullanımın bir kısmı vardır.
Doğrudan web sitenize simge yazı tiplerini nasıl ekleyeceğinizi öğrenin.
Adım 3: Web sitenize simgeler ekleyin Web sitenize daha iyi yazı tipi, kısa kod, html veya tinymce aracılığıyla daha iyi yazı tipi kullanarak simgeler eklemenin üç kolay yolu vardır. #1. Kısa bir kod kullanarak web sitenize simgeler eklemek için bir kısa kod kullanarak simgeler ekleyin, kullanılabilecek mevcut simgelerin tüm listesini görmek için önce harika yazı tipi web sitesini açın. Burada istediğiniz simgeyi bulabilirsiniz. Örneğin, bir “e -posta” simgesi istiyorsanız, anahtar kelimeyi arayın ve tıklayarak kullanmak istediğiniz simgeyi seçin.
Awesome Font web sitesinde istediğiniz simgeyi bulun. Eklemek istediğiniz simgeyi tıkladıktan sonra, bir simge görüntüsü, çeşitli boyutlar ve küçük bir blok kodu gösteren bir ekran göreceksiniz: simgenin adına, çeşitli boyutlara ve kısa kodlara dikkat edin.
Kod bloğunu kopyalayın ve Metin Düzenleyicisi sekmesini kullanarak web sitenizdeki herhangi bir yere yapıştırın. Web sitenizin arkasında böyle görünecek olan budur: Kısa kodunuzu metin düzenleyicisine girin.
Sonunda, sitenizi tıkladıklarında siteye gelen ziyaretçilerin göreceği şey budur: Web sitenizin önünde simgeler görüntülenecektir.
#2. HTML kullanarak simgeler ekleyin Kullanım bölümünde gösterildiği gibi, web sitenize simgeler eklemek için HTML kullanma seçeneğiniz vardır. Ancak, eklenti geliştiricileri HTML kullanmanın sürümün belirli bir önekini gerektirdiği konusunda uyarır. Bu yüzden size kısa bir kod kullanmanızı tavsiye ediyorlar. Ancak, HTML kullanmak istiyorsanız, Font Awesome burada bazı yararlı bilgiler var. #3. Bu tinymce kullanarak simgeler ekleyin, web sitenize simgeler eklemenin en kolay yolu olabilir. Görsel düzenleyici modundayken, simgeyi ekleyin. Oradan, mevcut simge seçeneklerinde gezin veya filtre işlevini kullanarak sonuçlarınızı daraltın.
Doğrudan yayınınıza veya sayfanıza bir simge eklemek için bir Tinymce kısa kod üreticisi kullanın. İstediğiniz simgeyi bulduktan sonra, üzerine tıklayın. Kısa Kod Üreticileri Gönderi veya sayfanıza gereken bilgileri otomatik olarak girer.
Sitenizin simgesini nasıl ayarlayacağınızı öğrenmek istiyorsanız, harika yazı tipi örneğine bakın. Daha iyi harika yazı tipi kullanan ek yazı tipi simgesi seçenekleri, web sitenize yazı tipi simgeleri eklemenin tek yolu değildir. Ve vaat edildiği gibi, sizinle en iyi alternatiflerden bazılarını paylaşacağım. Başlamak için, ücretsiz ve premium yazı tipi simgesi setlerini bulmak için en iyi yerlerden bazılarına bakalım. Bu kaynakla, özel bir yazı tipi simgesi oluşturabilir, özel ve benzersiz simge görüntülerini kullanabilir ve hatta simgeleri doğrudan web sitenize aktarmanıza yardımcı olacak araçlara erişebilirsiniz. Fontello. Web sitenizde net, ölçeklenebilir ve çapraz tarayıcı dostu kullanmak için ücretsiz değişiklik vektör görüntüsünü bir web yazı tipiyle değiştirin. Buna ek olarak, rengi, boyutu, gölgeyi ve diğerlerini değiştirmek için CSS kullanarak ayarlayın.
Modern Piktogram. WordPress web siteniz gibi çeşitli arabirimler için nesnelerinin ve simgelerinin 260+ fotoğrafından herhangi birini kullanın. Bu premium hizmet, bireysel SVG’nin satın alınmasına izin verir. Icomoon. Bu çevrimiçi hizmet, keskin ve mükemmel piksel yazı tipleri yapmanızı sağlar. Ayrıca, görüntü simgesini bir simge yazı tipine dönüştürmek için özel bir simge yazı tipi yapıcı kullanabilirsiniz. 5000 ücretsiz simge ve açık kaynak ve 4000’den fazla premium simge özel bir simge paketine yerleştirilir, buradan seçim yapabileceğiniz görüntü dezavantajları yoktur.
Ardından, WordPress web sitenizde kullanılabilecek bazı ek yazı tipi eklentilerine bakalım.
WP SVG simgesi
WP SVG simgeleri, 490’dan fazla simgeyle birlikte gelen bir WordPress simgesi eklentisidir. Ayrıca, özel Icomoo Icon Pack Font İthalatçısı ile 10’a kadar kendi özel simgelerinizi oluşturabilir ve yükleyebilirsiniz. Bu eklenti ile, en son kısa kod özelliklerini kullanarak bir kod satırı yazmadan simgeyi yayınınıza, sayfalarınıza ve yanlara kolayca ekleyebilirsiniz. WP SVG simgesiyle ilgileniyor mu? Detaylar
genel
Genericon’d, Basic HTML veya kısa kodlar kullanılarak yayın ve widget’ınızı kullanarak web sitenize tema veya işlevinize yerleştirilebilen 3 set simge – Genericons Neue, Social Logolar ve Genericons – içerir. Ayrıca, her simgenin boyutunu CSS, kısa kod veya boyut özniteliği üzerinden ayarlayabilirsiniz. Blogunuza veya web sitenize ortak bir görünür simge eklemek için mükemmeldir, sevmek veya takip etmek için bir sosyal logo veya yazı tipleri olarak görüntülenen simgeler, Genericon’d harika bir ikon çözümüdür. Genericon’d ile ilgileniyor musunuz?
Detaylar
Simge listesi Güçlü, ancak basit eklenti listesi simgeleri, web sitenizdeki standart listede kullanılmak üzere web sitesi sahiplerine widget’lar sağlayın. Site ziyaretçilerinin işiniz hakkında bilgi bilebilmesi için şirketinizin sosyal medya iletişim bilgilerini ve platform bilgilerini uygun simgelerle tamamlayın. İkonlar listesiyle ilgileniyor musunuz?
Detaylar
WordPress için Akıllı Simge WordPress için Akıllı Simge, tek tıklamalı düğmeli yayınlarda, sayfalarda ve özel yayınlarda kullanılmak üzere 519 şaşırtıcı simge yazı tipi sunar. Kullanımı kolay bir arayüz, özel kısa kod veya varsayılan ve hatta CDN’den yazı tiplerini yükleme seçenekleriyle görünür. Buna ek olarak, akıllı simgeler dostça 4K ekrandır, herhangi bir API düzenleyicisiyle çalışır ve hatta RADIUS değişiklikleri ve ek ayarlamalar için gölgeler gibi CSS efektlerini destekler. WordPress için akıllı simgelerle ilgileniyor mu? Detaylar
Son zihin, WordPress sitenizdeki yazı tipi simgeleri kullanır, sadece hız veya performansdan ödün vermeden güzel bir görüntü eklemekle kalmaz, aynı zamanda sitenize daha fazla kullanıcı etkileşimini teşvik eden işlev seviyesini de ekler. Yazı tipi simgelerinin ölçülmesi kolay, ayarlanmış ve en iyi yazı tipi simgeleri, sitenize, web sitenize eriştikleri her yerden, en iyi izleme deneyimi olan ziyaretçilere verir. Better Font Awesome gibi bir eklenti çözümü kullanmak, web sitenize simge yazı tipleri eklemenin en kolay yollarından biridir. Bunun nedeni, yazı tipi eklentisinde çok az veya hiç yapılandırma gerekmediği ve genellikle işin çoğunu sizin için yapın, böylece geniş bir HTML koduyla uğraşmanıza gerek yok. Web sitesi sayfalarınızın görünümünü artırmak, içerik etkileşimlerini artırmak ve yapmak istediğiniz şeyi açıkça ileten çekici bir web sitesi sitesine ziyaret etmek istiyorsanız, web sitenize simge yazı tipleri eklemeyi daha iyi yazı tipi veya olduğum diğer seçenekleri kullanarak düşünmeyi düşünün seninle paylaştı.
Web sitenizde hiç yazı tipi simgeleri kullandınız mı?Daha iyisi, hiç daha iyi bir yazı tipi harika veya alternatif yazı tipi eklentisi kullandınız mı?Aşağıdaki yorumlarda her şeyi duymaktan mutlu olacağım! Etiket: yazı tipi