WordPress’e manuel veya eklentilerle serin yazı tipi simgeleri nasıl eklenir
Hiç başkalarının WordPress sitelerinde iyi bir simge gördünüz mü? Dikkatinizi çeken ve gördükleriniz için size ek bir bağlam sağlayan şey. Kalemler, hamburger ikonları, böyle şeyler … bilir misiniz, böyle görünen grafikler?
Hiç bir mağarada yaşamadıysanız, şimdi başını salladığınıza bahse girmeye cesaret ediyorum. Popüler hale gelirler çünkü WordPress sitenize karakter ve bağlam eklemenin akıllıca bir yoludur. Yup-sadece eğlence için değil, aslında kullanıcının aşağıda tartışacağım deneyimi için çok gerçek faydaları var.Ardından, avantajlardan sonra, harika yazı tipi simgesini hem manuel hem de bazı pratik eklentilerle WordPress’e nasıl ekleyeceğinizi göstereceğim. Font harika nedir? Font Awesome, popüler ve modern görünümlü simgelerin bir koleksiyonudur. Temel olarak, binlerce farklı simge bir pakette birleştirilir ve daha sonra WordPress sitenize girebilirsiniz. İnanılmaz simge yazı tipleri çok iyidir çünkü kullandığınız sıradan yazı tipleri gibi çalışırlar. Bu onlar:
Tüm tarayıcılarda uyumludur.
Vektör (yani boyutunu kalitesini kaybetmeden istediğiniz kadar değiştirebilirsiniz)
Stil kolay. Temel olarak onlara sıradan bir “yazı tipi” gibi davranabilirsiniz. Bu, rengi gerektiği gibi kolayca değiştirebileceğiniz anlamına gelir.
Büyük bir destek tabanı sayesinde harika yazı tipi simgesini WordPress’e eklemek de kolaydır.
Amazing Fonts gibi simgeleri kullanmanın faydaları nelerdir? İlk başta, harika yazı tipi simgesinin web sitenizi çok havalı gösterdiğini düşündüm. Ama sonra bu hücresel merkezli dünyada web’i nasıl keşfettiğimi düşündüm. Ve bu, Font Awesome gibi simgelerin kullanımını görmemi sağladı. Ve ne biliyorsun? İkonik Kullanıcı Deneyimi Araştırmacısı (!) Nielsen Norman Grubu (NNG) aslında bu sorunu araştırdı. Görünüşe göre, simgeyi web sitesi tasarımınıza koyduğunuzda, sadece havalı görünmesini sağlamakla kalmaz. Ayrıca: Okuyucuların menü seçeneğini tıklamasını kolaylaştırın. Bu, dokunmatik tabanlı cihazlar için çok kullanışlı olsa da, NNG bunun fare bazlı cihazlar için de geçerli olduğunu belirtiyor.
Daha az yer kullanın. Simge, daha az metin kullanmanıza ve bu nedenle menünüzü sıkıştırmanıza olanak tanır.
Okuyucunun menü seçeneğini daha hızlı anlamasına izin verin. Örneğin, “kalem” simgesinin “düzenleme” anlamına geldiğini hepimiz biliyoruz.
Uluslararası web siteniz. Yukarıdaki gibi, kalem simgesinin ne anlama geldiğini bilen sadece İngilizce bir kullanıcı değil.
Ancak bir simge kullandığınızda, her zaman buna eşlik etmek için metin etiketini vermeniz gerektiğini unutmayın. Birçok çalışma, simgenin tek başına okuyucuyu karıştırabileceğini söylüyor. Ancak sayfanızın yapısının bir parçası olarak girdiğinizde, kullanımı artırır ve sayfalarınızı daha estetik yaparlar.
WordPress OK’ye manuel olarak serin bir yazı tipi simgesi nasıl eklenir, böylece harika yazı tipi simgesini eklemek için bir eklenti kullanabilirsiniz. Bu, hala manuel olarak düzenlemeniz gerekse de, kısa bir kod kullanarak WordPress’e koymanıza izin verecektir. Bir sonraki bölümde tartışacağım. Ancak daha pratik bir yaklaşımı tercih edenler için, harika yazı tipi simgesini manuel olarak eklemek aslında çok kolaydır. Temel olarak, tek yapmanız gereken sitenize stil sayfası yazı tipi harika eklemek. Ardından, simgeni CSS kullanarak ekleyebilir ve düzenleyebilirsiniz. İçine girelim … Adım 1: Enqueue Font Functions.php Styles sayfası Font adresinden harika stil sayfası en son güncellenmiş simgelerin bir listesidir. Sitenize iki yoldan biriyle ekleyebilirsiniz:
En son stil sayfasını Font Awesome’dan indirin ve FTP üzerinden sitenize yükleyin.
Bootstrap CDN tarafından gönderilen sürümün bağlantısı (bunu sorunsuz bir şekilde yaptım).
Seçtiğiniz seçenekler ne olursa olsun, aşağıdaki adımlar aynı olacaktır. Değişecek tek şey stil sayfasına gerçek URL’dir. Styles sayfasını indirmek için buraya açın, ardından FTP üzerinden sitenize yükleyin ve dosya yolunu kopyalayın.
Değilse, bu URL’yi stil sayfası CDN harici bootstrap için kullanın: https://maxcdn.bootstrapcdn.com/font-awome/4.7.0/css/font-awome.min.css o zaman, bu kodu eklemeniz gerekir. Dosya işlevi dosyası .php çocuğunuzun temasından (umarım çocuğun temasını kullanırsınız!). Add_action (‘wp_enqueue_scripts’, ‘enqueue_load_fa’); işlev enqueue_load_fa () {wp_enqueue_style (‘load-f’, ‘https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/cs/font-awesome.min.css’); } Styles sayfasını sitenize yüklerseniz, tek yapmanız gereken URL ile CDN bootstrap bağlantısını sitenizde yayınlanan stil sayfasına değiştirmektir.
Bazı insanlar size header.php dosyanızdaki stil sayfasına bağlantıyı girmenizi söylerken, bunu yapma. Yine de işe yarasa da, bunu yapmak için doğru yoldur.
Adım 2: WordPress’e havalı bir yazı tipi simgesi ekleyin Stil sayfası ekledikten sonra, WordPress’teki harika yazı tipi simgesini girmeye hazırsınız. Bu çok basit. Herhangi bir temel simge eklemek için yalnızca bu kod indirimine ihtiyacınız var: İkon adını nerede bulabilirsiniz? Kolay, harika yazı tipi web sitesini ziyaret edin ve keşfedin veya simgeleri arayın:
Simgeyi tıklamak sizi özel bir sayfaya götürecektir. Ardından, aşağı kaydırın ve HTML kodunu bulun: Gönderide bir simge kullanmak istiyorsanız, WordPress düzenleyicisindeki Metin sekmesine eklediğinizden emin olmalısınız. Örneğin, metin sekmesine bu ek:
Bunu Fronnd’da yapın:
Adım 3: Yazı Tipleri Serin simge Yukarıdaki örnekte görebileceğiniz gibi, varsayılan simgenin boyutu çok küçüktür. Çoğu zaman, simgenizin biraz daha büyük olmasını istersiniz. Neyse ki, CSS ile yapmak çok kolay (size bunun bir yazı tipi gibi olduğunu nasıl söylediğimi hatırlayın!). Simgenizi büyütmek için yalnızca simge sınıfına basit bir ek eklemeniz gerekir. Örneğin, üç kat daha büyük kullandığım bir adres defteri simgesi yapmak için, sadece sınıfın sonunda “FA-3X” eklemeniz gerekir: -3x “> ve bu size şunu verir: Ayrıca simgeyi oynayabilirsiniz, ikonları animasyon ve daha fazlasını oynayabilirsiniz. Yapabileceğiniz tüm manipülasyonların tam bir listesi için harika yazı tipi örnek sayfasını kontrol etmelisiniz. Manuel olarak bir şey yapmak istemiyorsanız, WordPress’e bir eklenti ile serin bir yazı tipi simgesi nasıl eklenir, Better Font Awesome adlı bir eklenti de kullanabilirsiniz. Dürüst olmak gerekirse, manuel olarak daha fazla şey yapmanın çok zaman kazandıracağını sanmıyorum. Ancak bu size WordPress editöründe iyi bir kısa kod üreticisi verir. Bu ücretsiz bir eklentidir, böylece doğrudan WordPress kontrol panelinizden yükleyebilir ve etkinleştirebilirsiniz: Etkinleştirdikten sonra yapılandırılacak çok şey yok. Kısa kod üreticisinin WordPress düzenleyicisine yeni bir simge eklediğini göreceksiniz. Sadece tıklayın, filtre simgeniz ve istediğiniz seçenekleri girin:Simgenizi düzenlemek için, yukarıdaki manuel örnek için gösterdiğim sınıfı kullanmalısınız. Örneğin, 3x daha büyük bir simge yapmak için bu sınıfı kısa koda eklemeniz gerekir: İkonunuzu hala manuel olarak düzenlemeniz gerektiği gerçeği, manuel seçenekten çok daha iyi bir eklenti bulamıyorum. Menü öğesine serin bir yazı tipi simgesi ekleyin, harika yazı tipi simgesini gerçek WordPress menü öğesine eklemek istiyorsanız, harika 4 menü yazı tipi adlı başka bir eklenti daha var. Etkinleştirdikten sonra, müthiş yazı tipi simgesini menü öğenize yalnızca CSS sınıflarında (isteğe bağlı) harika yazı tipi adını girerek ekleyebilirsiniz: diğer tüm seçeneklerle aynı, boyutu artırmak için aynı stil seçeneğini kullanabilirsiniz. simgenin, onu veya başkalarını canlandırın. CSS sınıfı kutusunu hemen görmüyorsanız, ekran seçeneğini açmanız ve etkinleştirmeniz gerekebilir:
Tüm WordPress’e harika yazı tipi simgesini ekleyin Sitenizin estetiğini artırmanın ve kullanıcılarınızın gezinmesini kolaylaştırmanın iyi bir yoludur. Benim kişisel tercihim, çocuğunuzun temasından function.php dosyasındaki stil sayfasını bekleyerek Font Awesome eklemektir. Ancak bununla uğraşmak istemiyorsanız, verdiğim iki eklenti seçeneği de başlamayı kolaylaştırır. WordPress sitenizdeki yazı tiplerini artırmak için birkaç yol daha istiyorsanız, Google Font ve WordPress için kılavuzumuzu da görmenizi öneririm. Ve harika yazı tipi stili üzerinde çalışmanın küçük bir yolunu anlamak için CSS hakkında daha fazla bilgi edinmek istiyorsanız bunu okuyun.
