WordPress Simge Yazı Tiplerini Web Sitenize Nasıl Gömebilirsiniz?

WordPress simgeleri nelerdir ve neden bunları kullanmalısınız?

WordPress simgeleri, herhangi bir sayı veya harf içermeyen, ancak hemen hemen her şeyi temsil eden çeşitli sembol türlerini içeren bir dizi piktogramdır. Bu piktogramlar, herhangi bir web sitesinin duyarlı bir web tasarımına sahip olması için çok önemlidir.

Bu simgelerin büyük dosya boyutları yoktur ve bunları web sitenize kolayca ekleyebilirsiniz. Simgeleri web sitenize göre özelleştirmek veya yeniden tasarlamak isterseniz, bunu CSS aracılığıyla yapabilirsiniz. Bunları herhangi bir sınırlama olmaksızın ölçeklendirebilirsiniz ve bunun üzerine, tek bir dosyada istediğiniz kadar simge saklayabilirsiniz.

Resim tabanlı simgeler, yazı tipi tabanlı simgelere kıyasla oldukça ağırdır ve potansiyel olarak web sitenizin performansını düşürebilir. Bu nedenle, daha iyi web sitesi performansı ve optimizasyonu için yazı tipi simgeleri, görüntü simgelerinden çok daha üstündür ve artık yaygın olarak kullanılmaktadır.

Ancak, bu yazının sonraki bölümünde bahsedeceğimiz başka performans değerlendirmeleri de var.

Ancak şimdilik, WordPress simgelerine nerede sahip olabileceğinizi ve bunları WordPress sitenizde kullanmanın birden çok yolunu görelim.

WordPress Simgelerini VEYA Simge Yazı Tiplerini Nereden Alınır?

İnternette binlerce ücretsiz ve ücretli WordPress ikon yazı tipi mevcuttur. Tek yapmanız gereken arama motorlarına “ WordPress ikon yazı tipi ” yazmanız ve sonuçta simge web sitelerinin bir listesi olacaktır.

WordPress'i kurduğunuzda, onunla birlikte bir dizi Ücretsiz WordPress yazı tipi ikonuna (Dashicons) sahip olacaksınız. Bu WordPress simge yazı tipleri genellikle WordPress yönetici alanlarında kullanılır.

Bunun dışında, birçok simge yazı tipini kolayca indirebileceğiniz başka Ücretsiz kaynaklar da var. Onlardan bazıları:

Bazı WordPress simgeleri Ücretsiz Kaynaklar

1. WordPress simgesi Yazı Tipi Harika
2. Google'dan malzeme simgeleri
3. Ico yazı tipi
4. simge

Ancak bu yazıda, popülerliği, mevcut açık kaynak, ücretsiz ve daha yüksek kullanıcı tabanı nedeniyle WordPress simgesi Font Awesome'i ele alacağız. Şu anda 2000'den fazla ücretsiz simge yazı tipi sağlıyor ve profesyonel sürümü seçerseniz daha fazlasını (16000+ simge) keşfedebilirsiniz.

Ve bu yazıda, web sitenizi çeşitli şekillerde tasarlamak için WordPress simgelerini nasıl kullanabileceğinizi öğreneceksiniz. Böylece web sitenizdeki simgeleri kullanmanın en iyi yolunu konfor bölgenizde seçebilirsiniz.

Web Sitenizde WordPress Simge Yazı Tiplerini Nasıl Kullanırsınız?

Bununla birlikte, web sitenize simge yazı tipleri eklemek için farklı yöntemler mevcuttur. Ancak öğreticimize önce en kolay yöntemlerle başlıyoruz. Ve kendiniz için en iyi ve kolay yöntemi seçebilirsiniz.

WordPress Simgeleri Eklentisini Kullanarak WordPress Simge Yazı Tipleri Ekleme

Web sitesine WordPress simgeleri eklemenin en iyi ve en kolay yollarından biri, bir WordPress eklentisi kullanmaktır. Bu yöntem, bir web sitesi tasarlamanın öğrenme aşamasında olan ve çok sınırlı türde simge kullanmak zorunda olan yeni başlayanlar için en uygun yöntemdir.

Tema dosyalarında düzenleme yapmanıza gerek yok ve web sitenizin herhangi bir alanında simgeleri kullanmakta özgürsünüz. Tek yapmanız gereken Font Awesome WordPress simge eklentisini yüklemek ve artık hazırsınız.

Font Awesome eklentisini yüklemek için WordPress Kontrol Panelinizde oturum açın, eklentiler > Add new seçeneğine gidin ve arama çubuğuna Font Awesome yazın.

Eklenti göründüğünde, yukarıdaki resimde gösterildiği gibi “ install l” düğmesine ve ardından “ Activate ” seçeneğine tıklayın. Başarılı, kurulum ve aktivasyondan sonra, harika yazı tipi eklentisi, kurulu temanız için tam destek sağlayacaktır ve aşağıdakiler gibi basit kısa kodları kullanarak web sitenizin herhangi bir sayfasını veya gönderisini kolayca düzenleyebilir veya özelleştirebilirsiniz:

Kısa kodu sayfanın veya gönderinin herhangi bir yerine yapıştırmanız yeterlidir; arka uçta bu şekilde görünür.

Şimdi, gönderiyi yayınladığınızda veya önizlemesini yaptığınızda, ön uçta nasıl görüneceği aşağıdadır.

Benzer şekilde, Font harika ücretsiz simge listelerinden kodu kopyalayarak doğrudan istediğiniz kadar WordPress simgesi ekleyebilirsiniz.

WordPress Simgeleri Dashicons Ekleme (WordPress Varsayılan Dahili Simgeleri)

WordPress ayrıca popüler olarak Dashicons olarak bilinen simge yazı tiplerini de sağlar. Bu simge yazı tipleri varsayılan olarak mevcuttur, WordPress bunları arka uçta kullanır. Ancak onu ön uca getirmek için, bir WordPress dosyasında zaten mevcut olan komut dosyasının adına sahip olmanız gerekir.

Dashicons'u kullanmak için function.php dosyanıza bir kod parçacığı ekleyebilir veya kod parçacıkları adlı bir WordPress eklentisi kullanabilirsiniz. Ancak, function.php dosyanızı düzenleme riskini almamanızı, bunun yerine WordPress eklentisini kullanmanızı şiddetle tavsiye ederiz. Çünkü ufak bir hata bile temanızı bozabilir ve web sitenizin tamamına zarar verebilir.

Eklentiyi kurduktan sonra, WordPress dashicons sayfasını ziyaret edebilir ve web sitenizde görüntülemek istediğiniz simgeyi seçebilirsiniz. HTML'yi Kopyala bağlantısını tıklayın ve bu kodu web sitenizde simgeyi görüntülemek istediğiniz herhangi bir yere yapıştırın.

Bu kodu örnek olarak alalım ve nasıl çalıştığını görelim. Herhangi bir gönderiyi açın, daha önce tire simgeleri sayfasından kopyaladığımız HTML kodunu yapıştırdığımız bir test gönderisi söyleyin.

Şimdi önizleme düğmesine tıkladığınızda, aşağıdaki resimde gösterildiği gibi simgeyi görebileceksiniz:

WordPress Sayfa Oluşturucuları Kullanarak WordPress Simge Yazı Tipleri Ekleme

WordPress sayfa oluşturucu eklentilerinin çoğu, yerleşik wordpress simge yazı tipleriyle birlikte gelir. Bunun yardımıyla web sitenizdeki simgeleri kolayca kullanabilirsiniz.

eleman

En popüler ve yaygın olarak kullanılan sayfa oluşturuculardan biri. Elementor ile çok sayıda özelleştirme seçeneğiniz vardır ve ayrıca web siteniz için çok çeşitli simge yazı tipleri sağlar.

Sürükle ve bırak özelliği o kadar kullanışlıdır ki, listeden herhangi bir simgeyi kolayca sürükleyip web sitenizin istediğiniz alanlarına doğrudan bırakabilirsiniz. Özelleştirme için kod parçacıkları veya gerekli CSS eklemenize gerek yok.

Buna ek olarak, Oxygen veya yerleşik simgeler tesisine sahip Beaver Builder gibi kullanabileceğiniz diğer popüler inşaatçılar da vardır.

Kod Parçacıklarını Kullanarak WordPress Simge Yazı Tiplerini Manuel Olarak Ekleme

Manuel yöntem, yeni başlayanlar veya web sitelerine wordpress ikon yazı tipleri eklemek için teknik veya uzun yolu takip etmek istemeyenler için değildir. Bu yöntem, geliştiriciler veya web tasarımcıları için oldukça verimlidir, çünkü hiçbir eklentide bulamayacağınız çok sayıda esneklik ve özelleştirme seçeneği sunar.

Mevcut tüm manuel yöntemleri inceleyelim.

1. Cdn Sunucularından Simge Kitaplığı Getiren Simge Kodlarını Göm

Simgeleri wordpress sitenize yerleştirmenin en kolay manuel yöntemlerinden biri. Tek yapmanız gereken Font Awesome web sitesine gitmek ve bir yerleştirme kodu almak için e-posta adresinizi vermek.

E-posta kutunuzu kontrol edin, Font harika tarafından gönderilen bir kod parçası bulacaksınız. Bu kodu kopyalayın ve WordPress kontrol panelinize > Tema Düzenleyicinize taşıyın ve WordPress temanızın header.php dosyasının </head> etiketinin hemen önüne yapıştırın.

Font Awesome tarafından sağlanan kodu ne yerleştirirseniz ekleyin, kitaplığı doğrudan Font Awesome CDN sunucularından alır.

Not: Şüphesiz, bu yöntem çok kolay görünüyor, ancak aynı zamanda bazı sorunları tetikleyebilecek diğer eklentilerle uyumluluk konusunda bazı endişeleri var.

Bu nedenle, bu çakışmayı önlemek için javascript'i WordPress'e düzgün bir şekilde yüklerseniz daha iyi olur. Bunun için yerleşik enqueue yöntemini kullanabilirsiniz.

Tek yapmanız gereken aşağıdakileri temanızın function.php dosyasına eklemek veya codenippet eklentisini kullanabilirsiniz.

2. Simgeleri Doğrudan Web Sitenizde Barındırın

Bu yöntem, yukarıda bahsedilen tüm yöntemlerden oldukça uzundur ve WordPress dosyalarının işlenmesi hakkında biraz teknik bilgi gerektirir.

Bu nedenle, bu yöntem yalnızca dosyalara erişirken ve düzenlerken ilgili tüm riskleri bilen Web geliştiricileri veya web tasarımcıları için şiddetle tavsiye edilir. Bu yöntemde, Font Awesome simgelerini doğrudan web sitenizde barındırabileceksiniz.

Tek yapmanız gereken Font Awesome web sitesini ziyaret etmek ve aşağıdaki resimde gösterildiği gibi simge paketini indirmek:

İndirdikten sonra paketi açın ve WordPress barındırma hizmetinizi FTP istemcisi (File Zilla) aracılığıyla bağlayın. Şimdi WordPress tema dizinine bakın, yeni bir klasör oluşturun ve istediğiniz gibi adlandırın.

Şimdi yapmanız gereken bir sonraki şey, indirilen Font Awesome simgeler paketinin içeriğini web barındırma sunucunuzda oluşturduğunuz yeni klasöre yüklemek. Şimdi yaptığınız değişiklikleri kaydedin ve bitirdiniz.

Şimdi işlemi tamamlamak için yapmanız gereken son şey, temanızın function.php dosyasına veya kurduğunuz kod parçacığı eklentisine basit bir kod (aşağıda verilmiştir) eklemektir.

Bu noktada, web sitenizde harika yazı tipini başarıyla barındırdınız.

WordPress Simgeleri ve Web Sitesi Performansına Etkileri

Her ne kadar yukarıda bahsettiğimiz yöntemler ne olursa olsun, web sitenize ikon eklemek için bunları takip etmenizde yanlış veya doğru bir şey yoktur. Ancak burada yatan tek endişe, web sitenizin performansı üzerindeki etkisidir. Nasıl olduğunu öğrenelim.

Hepsini Kullanmayacaksanız Neden Hepsine İhtiyacınız Var?

İlk ve asıl soru ortaya çıkıyor, neden sadece birkaç tanesine ihtiyacınız varken hepsini yüklemeniz gerekiyor. Kısa süre içinde kullanmayacaksanız neden kaynaklarınızı boşa harcıyorsunuz?

Örneğin, web sitenizde simgeler barındırırsanız veya simgeleri web sitenize yerleştirmek için eklentiler kullanırsanız, önce kitaplığın tamamını yüklerler ve ya bunlardan yalnızca 10 veya 15 tanesini kullanmanız gerekiyorsa.

Bu tamamen kaynak israfı ve izlenmesi gereken verimsiz bir yöntemdir. Ya onları kolayca verimli bir şekilde yönetebilirseniz.

Bunu daha iyi anlamak için bir örnek ele alalım:

Diyelim ki web sitenizde harika bir yazı tipi kitaplığı barındırdınız, yazı tipi dosya boyutu yaklaşık 388 kb. Bu çok büyük görünmeyebilir, ancak kullanacağınız yazı tiplerini seçtiğinizde veya aldığınızda dosya boyutunu önemli ölçüde azaltabilir.

Yazı Tiplerini Tek Bir Cdn'den Yükleyerek Performansı Artırın

Birden fazla CDN'den yazı tipi yüklemek yanlış bir şey olmamasına rağmen, tek bir tane seçme seçeneğiniz varsa neden farklı CDN'leri seçelim. Tek bir CDN, farklı CDN'lere kıyasla çok daha verimli ve daha hızlıdır.

Bunun ana nedeni, tek bir CDN'nin fazladan DNS arama sayısını azaltması ve tek bir HTTP/2 bağlantısı kullanma avantajına sahip olmasıdır. Ancak ek bir not olarak, tek CDN'niz güçlü ve verimli olmalıdır.

Özet

Bu tamamen WordPress simgeleriyle ilgili ve bu yazının sonunda, Artık WordPress simge yazı tiplerini web sitenize gömebilirsiniz. Sizin için en uygun olan yöntemi seçmeniz ve sorunsuz bir şekilde işinizi yapmanız yeterlidir.

Web sitesi performansını değerlendirirken ipuçlarımızı takip edebilir ve bundan en iyi şekilde yararlanmak için gerekeni yapabilirsiniz. Buna ek olarak, web sitenize bu yazıda bahsetmediğimiz WordPress simgeleri eklemek için farklı bir yöntem izlerseniz. Lütfen aşağıdaki yorum bölümünde bize bildirin ve değerli puanlarınızı bizimle paylaşın.

Sıkça Sorulan Sorular