WordPress simgesi yazı tipini doğru şekilde nasıl kullanılır (daha iyi performans)
İlk günlerde, simge mevcuttur, ancak WordPress’e verimli bir şekilde uygulanması biraz daha zordur. Sprite ile ilgili bazı sorunların üstesinden gelebilirsiniz, ancak bu her zaman iyi bir yol değildir ve retina ekranı ortaya çıkmaya başladığında, sorun büyür (kelimenin tam anlamıyla).
Ücretsiz demoyu deneyin
Bu sorunun en yaygın çözümlerinden biri simge yazı tiplerini kullanmaktır. Simge bir web yazı tipi veya vektördür, böylece sınırsız olarak dağıtabilirsiniz ve birçok simge bir dosyada yerleştirilebilir, böylece isteklerinizin sayısını önemli ölçüde azaltabilir. Bu, hayal edebileceğiniz neredeyse tüm simgeleri kullanmanızı sağlar. Bununla birlikte, bununla birlikte birkaç performans hususu da vardır.
Bu makalede size WordPress Icon yazı tiplerini kullanmanın, hangi yöntemin siteniz için en iyisi olabileceğini göstereceğiz.
Bulunan yazı tipi simgeleri
Nasıl hızlı ve kolay kullanılır simge yazı tipleri
Simge yazı tipleriyle dikkate alınması gereken performans sorunları
Yerel yazı tipi simgesi ana bilgisayar (sadece size ihtiyacınız var)
Simge yazı tipi erişilebilirliği korkuları
Yazı tipi simgeleri nerede bulabilirsiniz, şimdi WordPress siteniz için yazı tipi simgeleri bulmak için birçok iyi yer var. Sadece Google’a “yazı tipi simgesi” yazın size bazı iyi sonuçlar verecektir. En popüler ve yaygın olarak kullanılanlardan biri Font Awesome. Bunu yazarken, profesyonel sürümlerinde 1.400+ ücretsiz ikon ve 4.500+ simge var. Bu, arayüzler, sosyal, oklar ve diğer birçok simge türünden hemen hemen her şey için simgeler içerir.
İnanılmaz simge yazı tipi
İşte kontrol edilecek bazıları:
Icomoon, 5.500’den fazla ücretsiz vektör simgesi ve 4.000+ premium simge ile bir başka popüler hizmettir. Aslında, Font Icon Maker’larını aşağıda daha da kullanacağız. Fontello, yazı tipi simgeleri bulmanıza ve yapmanıza yardımcı olan bir başka harika hizmettir.
Süper hafif bir simge seti arıyorsanız, baytize kontrol ettiğinizden emin olun. 9 kb ölçen 84 simgenin tamamı azalır (SVGZ’de 2 KB veya GZIP).
Yalnızca SVG simgesini manuel olarak kullanmak istiyorsanız, Iconfinder’dan daha iyi olan Iconmonstr veya Premium kütüphaneden daha iyi bir ücretsiz kütüphane bulamazsınız.
İlk WordPress yazı tipi simgesini kullanmanın hızlı ve kolay yolu, WordPress yazı tipi simgesini kullanmanın bazı hızlı ve kolay yollarına dalacağız. Adil uyarı, tüm bunlar performans açısından en iyisi değildir. Bunun için en iyi yönteme atlamanızı öneririz.
Seçenek 1 – WordPress eklentisini kullanın WordPress yazı tipi simgesini başlatmak ve çalıştırmak için en hızlı yol üçüncü taraflı bir eklenti kullanmaktır. Ücretsiz harika entegrasyon eklentisi eklentisi en son Font Awesome 5 Icon Kütüphanesi içerir. Yükledikten ve etkinleştirdikten sonra, gerekli olan bir simge eklemek için yalnızca basit bir kısa koddur. Şimdi bir WordPress simgeleri bile var! Oldukça havalı. İkon kitaplığını kullanmanın ve ayarlamanın ek yolları için Font Font Awesome 5’in temel kullanımının grafiğini görebilirsiniz. Örneğin, aşağıda Gutenberg kısa kod bloğuna WordPress yazı tipi harika simgesini ekliyoruz ve üç kat daha büyük hale getirmek için FA-3X ekliyoruz.
[Fawesome IClass = “Fab Fa-Wordress FA-3X”]
Gutenberg’de muhteşem kısa kod yazı tipi
İşte kontrol edilecek bazıları:
Icomoon, 5.500’den fazla ücretsiz vektör simgesi ve 4.000+ premium simge ile bir başka popüler hizmettir. Aslında, Font Icon Maker’larını aşağıda daha da kullanacağız. Fontello, yazı tipi simgeleri bulmanıza ve yapmanıza yardımcı olan bir başka harika hizmettir.
Süper hafif bir simge seti arıyorsanız, baytize kontrol ettiğinizden emin olun. 9 kb ölçen 84 simgenin tamamı azalır (SVGZ’de 2 KB veya GZIP).
Yalnızca SVG simgesini manuel olarak kullanmak istiyorsanız, Iconfinder’dan daha iyi olan Iconmonstr veya Premium kütüphaneden daha iyi bir ücretsiz kütüphane bulamazsınız.
İlk WordPress yazı tipi simgesini kullanmanın hızlı ve kolay yolu, WordPress yazı tipi simgesini kullanmanın bazı hızlı ve kolay yollarına dalacağız. Adil uyarı, tüm bunlar performans açısından en iyisi değildir. Bunun için en iyi yönteme atlamanızı öneririz.
Seçenek 1 – WordPress eklentisini kullanın WordPress yazı tipi simgesini başlatmak ve çalıştırmak için en hızlı yol üçüncü taraflı bir eklenti kullanmaktır. Ücretsiz harika entegrasyon eklentisi eklentisi en son Font Awesome 5 Icon Kütüphanesi içerir. Yükledikten ve etkinleştirdikten sonra, gerekli olan bir simge eklemek için yalnızca basit bir kısa koddur. Şimdi bir WordPress simgeleri bile var! Oldukça havalı. İkon kitaplığını kullanmanın ve ayarlamanın ek yolları için Font Font Awesome 5’in temel kullanımının grafiğini görebilirsiniz. Örneğin, aşağıda Gutenberg kısa kod bloğuna WordPress yazı tipi harika simgesini ekliyoruz ve üç kat daha büyük hale getirmek için FA-3X ekliyoruz.
[Fawesome IClass = “Fab Fa-Wordress FA-3X”]
Gutenberg’de muhteşem kısa kod yazı tipi
İşte ön taraftaki görünüm. Yeterince kolay değil mi? Aktif bir harika yazı tipi simgesi var ve sadece birkaç dakika içinde sitemizde çalıştırıyoruz.
Kullanımı kolay bir çok kısa kod istiyorsanız, Ultimate Shortcode eklentisini de görmek isteyebilirsiniz. Kullanabileceğiniz premium bir eklenti simgesi var. Yukarıdakiler, müşterilerinizin yayınlara veya sayfalara simgeler eklemesine izin vermek istiyorsanız iyi bir çözümdür, ancak bu öğeleri temalarınızda veya eklentilerinizde kullanmak istiyorsanız, bunları kendileri yapmak en iyisidir (aşağıda daha fazla dalış yapacaktır).
Kullanımı kolay bir çok kısa kod istiyorsanız, Ultimate Shortcode eklentisini de görmek isteyebilirsiniz. Kullanabileceğiniz premium bir eklenti simgesi var. Yukarıdakiler, müşterilerinizin yayınlara veya sayfalara simgeler eklemesine izin vermek istiyorsanız iyi bir çözümdür, ancak bu öğeleri temalarınızda veya eklentilerinizde kullanmak istiyorsanız, bunları kendileri yapmak en iyisidir (aşağıda daha fazla dalış yapacaktır).
Seçenek 2 – Varsayılan gösterge tablosunu kullanın Dashicons, WordPress arka uçta kullandığından varsayılan olarak dahil edilen bir yazı tipi simgesi kümesidir. Ön uçta sıralamanız gerekir, ancak ihtiyacınız olan tek şey komut dosyasının adıdır, dosya WordPress için kullanılabilir. Fonksiyonunuza aşağıdakileri ekleyebilirsiniz. Bu, temanızdaki hasar riskini en aza indirir ve tema güncellemesi sırasında değişim de kalacaktır. İşlev my_theme_styles () {wp_enqueue_style (‘dashicons’); } Ardından Dashicons web sitesine gidebilir, simgeyi seçebilir ve simgeyi görüntülemek için ihtiyacınız olan kodu verecek “HTML Kopyala” bağlantısını tıklayabilirsiniz. Çok fazla seçenekleri yok, ama yine de iyi ve çok hafif çalışıyorlar.
Örneğin, aşağıda HTML Gutenberg bloğuna bir gösterge paneli simgesi ekliyoruz.
HTML Block Gutenberg’de Gösterge Tablosu
İşte ön taraftaki görünüm.
Örneğin, aşağıda HTML Gutenberg bloğuna bir gösterge paneli simgesi ekliyoruz.
HTML Block Gutenberg’de Gösterge Tablosu
İşte ön taraftaki görünüm.
WordPress 5.0Dashicons’daki dashicon örnekleri serin bir kısa kodu yoktur, ancak simginizin boyutunu CSS ile ayarlayabilirsiniz. Aşağıda, başlıktan hemen önce bir simge eklemenin bir örneği verilmiştir.
harika başlığım
Seçenek 3, harici olarak gönderilen yazı tipi simgesine manuel olarak link-harici olarak gönderilen simge yazı tipine manuel olarak bağlantı kurmaktır. Temel olarak, eklentinin sahne arkasındaki seçenek 1’de yaptığı şeydir.
Müthiş yazı tipi için kodu başlangıç sayfalarından alabilir ve ardından aşağıdaki adımları izleyebilirsiniz. Tüm yazı tiplerini sizin için ücretsiz CDN’de barındırıyorlar. Bu şöyle görünecek: Adım 1 Kodu ‘ye kopyala, WordPress sitesindeki Font’u harika kullanmak istediğiniz her şablon veya sayfaya. Header.php dosyanızı veya daha iyisini düzenleyebilirsiniz, başlığınıza kod ekleyeceğiniz konusunda basit öğreticimizi izleyin.
Adım 2 Daha sonra simgeyi HTML’nize koymaya başlayabilirsiniz. Doğru simgeyi bulun ve sayfanıza nasıl ekleyeceğinizi öğrenin. Yazı tipi simgeleri kullanılarak dikkate alınması gereken performans sorunları, sitenize yazı tipi simgeleri eklemek için yukarıdaki yollardan birini kullanmakla ilgili yanlış bir şey olmasa da, teknik olarak yöntem en iyi yol değildir. Neden? Niye? Her şey performans sorunlarına yol açar. Tüm ilk simgelere ihtiyacınız olmayabilir, yazı tipi simgeleri için bir eklenti kullandığınızda veya harici simge yazı tipi kitaplığında bağlantılar kullandığınızda, kütüphane boyunca tüm simgeleri içerecektir. Sitenizde yalnızca 20 veya daha fazla simge kullanıyorsanız, bu çok daha iyi bir şekilde ele alınabilir. Gerçekten tüm bu simgelere ihtiyacınız var mı? Muhtemelen değil. WordPress sitenizdeki her şeyi yüklemeyin. Örneğin tweet için tıklayın, sitemize harika 5 yazı tipi kitaplığını ekliyoruz ve CSS dosyası küçük olmasına rağmen, yazı tipi dosyasının kendisi 108 KB’dir. Bu çok büyük görünmese de, sadece kullandığımız HTML yazı tipini seçtiğimizde dosyanın ne kadar küçük olduğunu daha fazla göreceksiniz.
Büyük yazı tipi olağanüstü kütüphane
Bir CDN’den yükleme genellikle ikinci daha hızlıdır, farklı bir CDN komut dosyasını yüklemede yanlış bir şey yoktur. Ancak, bir CDN’den yükleme seçeneğiniz varsa, bu genellikle daha hızlıdır. Neden? Niye? Çünkü HTTP/2 tek bağlantısını kullanabilir ve ek DNS arayışını azaltabilir. Ana CDN’nizin iyi olduğundan emin olun!
Yukarıda belirtilen performans nedenleri için yerel yazı tipi simgesi ana bilgisayar (sadece size ihtiyacınız), yazı tiplerinizi yerel olarak barındırarak ve sadece ihtiyacınız olanı kullanarak size rehberlik edeceğiz.Yerel olarak kastettiğimiz şey, onu kendi WordPress ana sunucunuzdan veya kendi CDN’nizden dahil etmektir.Sadece ihtiyacınız olan simge yazı tipini seçerek, bu dosya boyutlarını 100 kb’den birkaç kilobayt’a indirebilir, oldukça pratik!
Daha iyi: Çeşitli yazı tiplerinden simgeleri bile karıştırabilir ve eşleştirebilirsiniz. Temel Bilgiler-yazı tipi simgeleri kullanarak çalışır, web sunucunuzda yazı tipi dosyalarını (Woff, Woff 2, vb.) Barındırmayı içerir, ardından yazı tipinin yüzünü yüklemek için CSS kullanın, ardından doğru yere simgeler eklemek için bazı işaretlemeler yapın. Siteniz bir dosya yükleyecek olsa da, bazı tarayıcılar farklı formatlar kullandığından, her yazı tipi için bir dizi dosya formatınız olacaktır. Font Awesome, EOT, SVG, TTF, WOFF, WOFF 2 ve OTF dahil olmak üzere 6 farklı dosya formatına sahiptir. Ancak, tarayıcı desteğinize dayanarak, aslında sadece Woff veya Woff 2’ye ihtiyacınız var. İpucu: Woff, tüm modern tarayıcılardan%93+ ile desteklenir. Bununla birlikte, Woff 2 daha fazla sıkıştırılır, ancak tüm modern tarayıcılardan sadece%83+ ile desteklenir. Birini veya diğerini veya her ikisini birden seçmenizi öneririz. Tarayıcı, istemciye gönderilecek kodunuza göre belirlenir. İlk göreviniz, istediğiniz tek simgeyi seçmek için bir araç kullanmaktır. Daha sonra bu dosyaları proje dizininize bir yere, genellikle yazı tipi dizininde ekleyebilirsiniz. Ardından, projenize CSS yazı tipi harika dosyasını ekler ve sıradan bir eski bağlantı öğesi kullanarak web sitenize eklersiniz. css dosyasını da sıralayabilir veya küçükse bir satır kullanabilirsiniz. Bültenler için kaydolabilirsiniz
Büyük yazı tipi olağanüstü kütüphane
Bir CDN’den yükleme genellikle ikinci daha hızlıdır, farklı bir CDN komut dosyasını yüklemede yanlış bir şey yoktur. Ancak, bir CDN’den yükleme seçeneğiniz varsa, bu genellikle daha hızlıdır. Neden? Niye? Çünkü HTTP/2 tek bağlantısını kullanabilir ve ek DNS arayışını azaltabilir. Ana CDN’nizin iyi olduğundan emin olun!
Yukarıda belirtilen performans nedenleri için yerel yazı tipi simgesi ana bilgisayar (sadece size ihtiyacınız), yazı tiplerinizi yerel olarak barındırarak ve sadece ihtiyacınız olanı kullanarak size rehberlik edeceğiz.Yerel olarak kastettiğimiz şey, onu kendi WordPress ana sunucunuzdan veya kendi CDN’nizden dahil etmektir.Sadece ihtiyacınız olan simge yazı tipini seçerek, bu dosya boyutlarını 100 kb’den birkaç kilobayt’a indirebilir, oldukça pratik!
Daha iyi: Çeşitli yazı tiplerinden simgeleri bile karıştırabilir ve eşleştirebilirsiniz. Temel Bilgiler-yazı tipi simgeleri kullanarak çalışır, web sunucunuzda yazı tipi dosyalarını (Woff, Woff 2, vb.) Barındırmayı içerir, ardından yazı tipinin yüzünü yüklemek için CSS kullanın, ardından doğru yere simgeler eklemek için bazı işaretlemeler yapın. Siteniz bir dosya yükleyecek olsa da, bazı tarayıcılar farklı formatlar kullandığından, her yazı tipi için bir dizi dosya formatınız olacaktır. Font Awesome, EOT, SVG, TTF, WOFF, WOFF 2 ve OTF dahil olmak üzere 6 farklı dosya formatına sahiptir. Ancak, tarayıcı desteğinize dayanarak, aslında sadece Woff veya Woff 2’ye ihtiyacınız var. İpucu: Woff, tüm modern tarayıcılardan%93+ ile desteklenir. Bununla birlikte, Woff 2 daha fazla sıkıştırılır, ancak tüm modern tarayıcılardan sadece%83+ ile desteklenir. Birini veya diğerini veya her ikisini birden seçmenizi öneririz. Tarayıcı, istemciye gönderilecek kodunuza göre belirlenir. İlk göreviniz, istediğiniz tek simgeyi seçmek için bir araç kullanmaktır. Daha sonra bu dosyaları proje dizininize bir yere, genellikle yazı tipi dizininde ekleyebilirsiniz. Ardından, projenize CSS yazı tipi harika dosyasını ekler ve sıradan bir eski bağlantı öğesi kullanarak web sitenize eklersiniz. css dosyasını da sıralayabilir veya küçükse bir satır kullanabilirsiniz. Bültenler için kaydolabilirsiniz
Trafiğimizi%1000’den fazla nasıl artırdığımızı bilmek ister misiniz? Haftalık bültenimizi içerideki WordPress insanlar hakkında ipuçlarıyla alan 20.000’den fazla insana katılın!
Şimdi abone olun CSS dosyasını görürseniz, arka planda neler olduğunu görebilirsiniz. Yazı tipi dosyaları yüklenir, sınıfı olan temel öğeler .FA tanımlanır (diğerleri ile birlikte) ve son olarak, adlandırılan her simge tanımlanır (örneğin: .FA kitap). Dikkat etmeniz gereken tek şey yazı tipi dosyanızın yoludur. Varsayılan olarak, geçerli CSS dosyasının bir klasörü olan yazı tipi dizini olacak olan …/yazı tiplerinden yayınlanır. Bunu kendi dizin yapınıza uyacak şekilde değiştirmeniz gerekebilir. Artık nasıl çalıştığı hakkında daha iyi bir fikriniz olduğuna göre, adım adım yaparak size rehberlik etmek için sizi ekleyeceğiz. Bu örnekte, E-Niaga üretim sitesini kullanıyoruz. İlk Adım 1, hangi yazı tipi simge kitaplığını kullanmak istediğinizi belirlemelisiniz. Bu makalenin başında sevdiğimiz bazılarını paylaştık. Bu örnekte, müthiş yazı tipini Icomoon yazı tipi jeneratörü ile birlikte kullanacağız. Icomoon’dan bir Woff 2 dosyası istiyorsanız, premium kütüphanelerine erişmek için bir zaman maliyeti 9,00 $ ödemeniz gerekir. Manuel olarak ücretsiz istediğiniz harika yazı tipi simgesini indirebilirsiniz, ancak Woff veya Woff 2 dosyalarını manuel olarak düzenlemek için Fontforge gibi araçları kullanmanız gerekir. Hepimiz kolayız, bu yüzden bir jeneratör kullanıyoruz. Adım 2 IComoon jeneratörünü açın. Müthiş yazı tipi kitaplığında “Eklendi” yi tıkladık.
Harika icomoon yazı tipi kütüphanesi
Adım 3 Sonra, WordPress sitenizde kullanmak istediğiniz simgeyi seçmek istersiniz. Zaten harika yazı tipini kullanıyorsanız ve yalnızca yerel olarak barındırılan sürüme geçin, kısa bir liste yapın ve kütüphaneden seçin. Serin yazı tipi simgesini seçin
Şimdi abone olun CSS dosyasını görürseniz, arka planda neler olduğunu görebilirsiniz. Yazı tipi dosyaları yüklenir, sınıfı olan temel öğeler .FA tanımlanır (diğerleri ile birlikte) ve son olarak, adlandırılan her simge tanımlanır (örneğin: .FA kitap). Dikkat etmeniz gereken tek şey yazı tipi dosyanızın yoludur. Varsayılan olarak, geçerli CSS dosyasının bir klasörü olan yazı tipi dizini olacak olan …/yazı tiplerinden yayınlanır. Bunu kendi dizin yapınıza uyacak şekilde değiştirmeniz gerekebilir. Artık nasıl çalıştığı hakkında daha iyi bir fikriniz olduğuna göre, adım adım yaparak size rehberlik etmek için sizi ekleyeceğiz. Bu örnekte, E-Niaga üretim sitesini kullanıyoruz. İlk Adım 1, hangi yazı tipi simge kitaplığını kullanmak istediğinizi belirlemelisiniz. Bu makalenin başında sevdiğimiz bazılarını paylaştık. Bu örnekte, müthiş yazı tipini Icomoon yazı tipi jeneratörü ile birlikte kullanacağız. Icomoon’dan bir Woff 2 dosyası istiyorsanız, premium kütüphanelerine erişmek için bir zaman maliyeti 9,00 $ ödemeniz gerekir. Manuel olarak ücretsiz istediğiniz harika yazı tipi simgesini indirebilirsiniz, ancak Woff veya Woff 2 dosyalarını manuel olarak düzenlemek için Fontforge gibi araçları kullanmanız gerekir. Hepimiz kolayız, bu yüzden bir jeneratör kullanıyoruz. Adım 2 IComoon jeneratörünü açın. Müthiş yazı tipi kitaplığında “Eklendi” yi tıkladık.
Harika icomoon yazı tipi kütüphanesi
Adım 3 Sonra, WordPress sitenizde kullanmak istediğiniz simgeyi seçmek istersiniz. Zaten harika yazı tipini kullanıyorsanız ve yalnızca yerel olarak barındırılan sürüme geçin, kısa bir liste yapın ve kütüphaneden seçin. Serin yazı tipi simgesini seçin
Bu örnekte, kolay dijital indirmeleri çalıştıran bir WordPress E-Niaga sitesi olan Pepfatts.io için bir simge seçtik. Adım 4 Tüm simgelerinizi seçtikten sonra, alttan “Yazı Tipi” yi seçin. Bu site için nihayet 20 simgeye ihtiyacımız var.
Icomoon’un İhracatından İnanılmaz Simge Yazı Tipi
Sonunda böyle görünen bir dosya ile karşılaşacaksınız. İhtiyacınız olan önemli şey style.css dosyası ve yazı tipi dosyasıdır (Woff, Woff 2).
Yazı tipi yazı tipi simgesi
Adım 5 Ardından, sitenize yüklemeden/kopyalamanızdan önce Style.css adresinden bir arama ve değiştirme yapmanız önerilir. Aşağıdakiler orijinal görünümdür.
Kesinti ve WordPress problemi ile kavga mı ediyorsunuz? Kinsta, zamanınızı korumak için tasarlanmış bir barındırma çözümüdür! Özelliklerimizi görün
Kesinti ve WordPress problemi ile kavga mı ediyorsunuz? Kinsta, zamanınızı korumak için tasarlanmış bir barındırma çözümüdür! Özelliklerimizi görün
İcomoon css dosyası
Müthiş yazı tipini kullananlarınız için, bu sadece sınıfı harika yazı tipine değiştirmeyi kolaylaştırır, bu şekilde WordPress sitenizde kodlanmış bir şey varsa, simgeyi otomatik olarak kullanmaya başlayacaktır. Yani “simge” arıyor musunuz ve tüm görünümünü “FA” ile değiştiriyorsunuz. Sublime gibi metin editörleriyle hızlı arama yapabilmeniz ve değiştirebilmelisiniz.
Müthiş yazı tipini kullananlarınız için, bu sadece sınıfı harika yazı tipine değiştirmeyi kolaylaştırır, bu şekilde WordPress sitenizde kodlanmış bir şey varsa, simgeyi otomatik olarak kullanmaya başlayacaktır. Yani “simge” arıyor musunuz ve tüm görünümünü “FA” ile değiştiriyorsunuz. Sublime gibi metin editörleriyle hızlı arama yapabilmeniz ve değiştirebilmelisiniz.
Yüce Bul ve Değişim
Bu [class^= “simge-“], [sınıf*= “simge-“] ‘nin [sınıf^= “fa-“], [class*= “fa-“] ile değiştirir. Ayrıca her simgeyi de geliştirir, bu nedenle .icon- ile başlamak yerine, şimdi .fa- ile başlıyorlar. Ayrıca, 7. adımda yazı tipi dosyalarınıza göre kaynak URL’yi değiştirmeniz gerekebilir. URL’yi CDN’nize değiştirmelisiniz. Adım 6 Ardından, sitenize CSS eklemeniz gerekir. Yapabileceğiniz birkaç yol var. Seçenekler 1 CSS sayısı çok küçük olduğundan, tüm CSS dosyalarını kopyalayabilir ve bunları WordPress ayarlarına ekleyebilirsiniz. Bunu asla büyük dosyalar için yapmayın, ancak bu nispeten az sayıda CSS. Bu, sitenize bir çizgi yükleyeceği anlamına gelir. Seçenekler 2 Stil sayfanıza WordPress sitesi başlığınıza yerleştirerek manuel olarak bağlantı kurabilirsiniz. İpucu: Daha hızlı performans için kendi CDN’nize bağlantı. Seçenek 3 WordPress’te CSS dosyalarını da sıralayabilirsiniz. İşlem manuel yöntemle çok benzer. Fonksiyon.php dosyasına aşağıdakileri ekleyin veya ücretsiz kod görüntüleri eklentisi kullanın. Dizini nereye yüklediğinize göre değiştirmeniz gerekebilir. İşlev my_theme_styles () {wp_enqueue_style (‘fontawesome’, get_template_directory_uri (). ‘/Css/style.css’); } Add_action (‘wp_enqueue_scripts’, ‘my_theme_styles’); Adım 7 Şimdi sitenize CSS ekledikten sonra, yazı tipi dosyaları yükleme zamanı. Yazı tiplerini her yere koyabilirsiniz, “Yazı Tipi” adlı bir klasör
Bu [class^= “simge-“], [sınıf*= “simge-“] ‘nin [sınıf^= “fa-“], [class*= “fa-“] ile değiştirir. Ayrıca her simgeyi de geliştirir, bu nedenle .icon- ile başlamak yerine, şimdi .fa- ile başlıyorlar. Ayrıca, 7. adımda yazı tipi dosyalarınıza göre kaynak URL’yi değiştirmeniz gerekebilir. URL’yi CDN’nize değiştirmelisiniz. Adım 6 Ardından, sitenize CSS eklemeniz gerekir. Yapabileceğiniz birkaç yol var. Seçenekler 1 CSS sayısı çok küçük olduğundan, tüm CSS dosyalarını kopyalayabilir ve bunları WordPress ayarlarına ekleyebilirsiniz. Bunu asla büyük dosyalar için yapmayın, ancak bu nispeten az sayıda CSS. Bu, sitenize bir çizgi yükleyeceği anlamına gelir. Seçenekler 2 Stil sayfanıza WordPress sitesi başlığınıza yerleştirerek manuel olarak bağlantı kurabilirsiniz. İpucu: Daha hızlı performans için kendi CDN’nize bağlantı. Seçenek 3 WordPress’te CSS dosyalarını da sıralayabilirsiniz. İşlem manuel yöntemle çok benzer. Fonksiyon.php dosyasına aşağıdakileri ekleyin veya ücretsiz kod görüntüleri eklentisi kullanın. Dizini nereye yüklediğinize göre değiştirmeniz gerekebilir. İşlev my_theme_styles () {wp_enqueue_style (‘fontawesome’, get_template_directory_uri (). ‘/Css/style.css’); } Add_action (‘wp_enqueue_scripts’, ‘my_theme_styles’); Adım 7 Şimdi sitenize CSS ekledikten sonra, yazı tipi dosyaları yükleme zamanı. Yazı tiplerini her yere koyabilirsiniz, “Yazı Tipi” adlı bir klasör
İç / halkın doğrudan iyi. Unutmayın, style.css dosyanızdaki kaynak klasör uygun olmalıdır. Yazı tipi yazı tipi yazı tipi SFTP
Adım 8 Şimdi WordPress sitenizde erişilebilen CSS ve yazı tipi dosyaları olmalıdır. Ardından, sitenize bazı işaretlemeler ekleyebilirsiniz. Bu sadece bir dişli simgesi eklemenin bir örneğidir. doğrudan bu çalışandan perfmatters.io’da bir örnek görebilirsiniz. Sadece ben değil, herhangi bir öğeyi kullanabileceğinizi unutmayın. Özel sınıfınıza CSS eklemenin yanı sıra normal açıklık öğeleri de kullanabilirsiniz.
Perfmatters’da muhteşem örnek yazı tipi
Adım 8 Şimdi WordPress sitenizde erişilebilen CSS ve yazı tipi dosyaları olmalıdır. Ardından, sitenize bazı işaretlemeler ekleyebilirsiniz. Bu sadece bir dişli simgesi eklemenin bir örneğidir. doğrudan bu çalışandan perfmatters.io’da bir örnek görebilirsiniz. Sadece ben değil, herhangi bir öğeyi kullanabileceğinizi unutmayın. Özel sınıfınıza CSS eklemenin yanı sıra normal açıklık öğeleri de kullanabilirsiniz.
Perfmatters’da muhteşem örnek yazı tipi
Asıl fark, boyut farkını gördüğünüz zamandır. Unutmayın, harika yazı tipinin harici kütüphanesine bağlandığımızda, yazı tipi dosyasının toplam boyutu 108 kb idi. Yazı tipi jeneratörünü kullandıktan ve yalnızca site için ihtiyacımız olan harika yazı tipi simgesini seçtikten sonra, yazı tipi dosyası 2,6 kb’ye düşer. Yazı tipi dosyalarımız boyut olarak%97,59’a düşürüldü!
Woff 2 yazı tipi dosya boyutu şaşırtıcı
Woff 2 yazı tipi dosya boyutu şaşırtıcı
Sadece bu değil, şimdi CDN’mizden de yayınlandı, yani Fontawesome.com’a ek DNS araması olmadığı anlamına geliyor. Bir yazı tipi jeneratörü kullanarak yazı tipi dosya boyutumuzu% 97,59 oranında azaltıyoruz. Tweetiniz için tıklayın SVG simgesiyle aynı yaklaşımı da kullanabilirsiniz, biraz farklı. Yazı tipi simgesinin erişilebilirliği Endişeleri Yazı tipi simgelerinin zayıf yönlerinden biri korkunç erişilebilirliğidir. Ekran okuyucuları, Unicode veya karakterin kendisini okuyabilir, hatta daha da kötüsü. Bu, en sevdiğiniz menü öğelerini gördüğünüzde kör insanların “favori sarı yıldızları” duymasına neden olacaktır – ideal değil. Yazı tipi yüklenmezse ne olacağını da düşünmelisiniz. İdeal olarak, yüklenmediğinde ve bir sorun varsa kritik simge metinle değiştirilir. Erişilebilirlik sorununun üstesinden gelmek oldukça kolaydır, ekran okuyucularına öğelerimizi elden çıkarmaları gerektiğini göstermek için ARIA-Hidden = “True” parametrelerini ve değerlerini kullanın.
