WordPress'e Harika Yazı Tipi Simgeleri Nasıl Eklenir – Eksiksiz Kılavuz

Bu kılavuzun konusu budur. Okumayı bitirdiğinizde, tam olarak nasıl yapacağınızı bileceksiniz:

• Font Awesome stil sayfasını WordPress'e manuel olarak ekleyin
• Ücretsiz bir eklenti ile WordPress'e Harika Yazı Tipi ekleyin
• Font Awesome simgelerini çeşitli şekillerde ekleyin ve stillendirin

Hadi kazalım…

WordPress'e Harika Yazı Tipi Simgeleri Eklemek İçin Neden Zaman Ayırmalısınız?

Yazı Tipi Müthiş simgeleri harikadır çünkü adından da anlaşılacağı gibi, bunlar resimlerden ziyade bir simge yazı tipidir. Bu, aşağıdaki gibi harika şeyler yapabileceğiniz anlamına gelir:

• Simgeler vektör olduğu için kaliteyi kaybetmeden yeniden boyutlandırın
• Renkleri değiştirin, animasyon ekleyin ve diğer CSS manipülasyonlarını kullanın

Tüm bunları söylemek gerekirse, Font Awesome simgeleri yalnızca statik bir görüntü kullanmaktan çok daha üstündür.

İlk olarak, bunları sitenize eklemenin iki farklı yolunu göstereceğim. Ardından, simgelerinizi nasıl şekillendirebileceğinizi ve değiştirebileceğinizi göstereceğim (hangi yöntemi seçerseniz seçin).

WordPress'e Elle Harika Yazı Tipi Simgeleri Nasıl Eklenir

Temanızın kodunu inceleme fikri sizi korkutuyorsa, ücretsiz bir eklenti kullanarak WordPress'e Font Awesome simgelerini nasıl ekleyeceğinizi göstereceğim sonraki bölüme geçmenizi tavsiye ederim.

Aksi takdirde, Font Awesome'i çalıştırmanın güzel ve hafif bir yolu olarak bu yöntemi seviyorum.

Temel olarak, tek yapmanız gereken WordPress temanıza Font Awesome stil sayfasını eklemek. Ardından, Font Awesome simgelerini eklemeye ve bunları istediğiniz gibi şekillendirmeye başlayabilirsiniz.

Tüm süreç adım adım şu şekilde çalışır:

Adım 1: WordPress Temanızda Harika Yazı Tipi Stil Sayfasını Sıralayın

Dediğim gibi, ilk adımınız WordPress temanıza Font Awesome CSS stil sayfasını eklemek. Bunu doğrudan Font Awesome web sitesinden edinebilseniz de benim tercih ettiğim yöntem Bootstrap CDN'de barındırılan sürümü kullanmaktır.

Şu anda, bu bağlantı:

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Ancak Font Awesome yeni sürümler yayınladıkça değişecek. Bu nedenle, bağlantıyı en son sürüme yarı düzenli olarak güncellemek iyi bir fikirdir (eski sürümler çalışmaya devam edecek olsa da).

Bu stil sayfasını WordPress'e eklemek için, onu alt temanızın functions.php dosyasında kuyruğa almanız gerekir. CSS eklemenin temel yöntemi, bağlantıyı başlığınıza koymak olsa da, stil sayfasını doğrudan başlığınıza koymak yerine özel WordPress kuyruğa alma işlevini kullanmak en iyi uygulamadır.

Ek olarak, bir alt tema kullanmak, temanızı yükseltmeniz gerekirse değişikliklerinizin üzerine yazılmamasını sağlar.

WordPress kodunun en iyi uygulamalarını takip etmek iyi bir şey olduğundan, kesinlikle hem alt tema hem de kuyruğa alma işlevini kullanmanızı öneririm.

Tamam, işte nasıl yapılacağı:

Görünüm → Düzenleyici'ye gidin ve alt temanız için functions.php dosyasını seçin.

Ardından, bu kodu yapıştırın:

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

Değişikliklerinizi kaydettiğinizden emin olun ve işiniz bitti! Çok acı değil, değil mi?

2. Adım: Harika Yazı Tipi Simgelerini Ekleyin

Stil sayfasını sıraya koyduktan sonra, Font Awesome simge aramasına gidip eklemek istediğiniz bir simge bularak Font Awesome simgelerini sitenize ekleyebilirsiniz:

Bir simgeye tıkladığınızda, Harika Yazı Tipi size simgeyi kullanmanız için gereken kodu verecektir:

Tek yapmanız gereken, sitenize bir simge eklemek için bu kodu WordPress Editörünün Metin sekmesine yerleştirmek.

Ve bu kadar! WordPress'e Font Awesome desteğini başarıyla eklediniz. Şimdi geriye kalan tek şey, WordPress sitenizdeki Font Awesome simgelerini nasıl şekillendireceğinizi öğrenmek.

Ancak size bunu göstermeden önce, Font Awesome Desteğini eklemek için eklenti yöntemini gözden geçirmek istiyorum. Eklenti yöntemi yerine manuel yöntemle gittiyseniz, ilerlemekten çekinmeyin.

Bir Eklenti ile WordPress'e Harika Yazı Tipi Simgeleri Nasıl Eklenir

Font Awesome stil sayfasını manuel olarak sıraya koymak yerine bir eklenti kullanmayı tercih ederseniz, WordPress.org'da Better Font Awesome adlı ücretsiz bir seçenek listelenmiştir.

Better Font Awesome, sitenize her zaman en yeni stil sayfasını eklemenin yanı sıra:

• Font Awesome simgelerini gömmek için kısa kodları kullanmanızı sağlar.
• TinyMCE Düzenleyici'de simgeleri eklemeniz için bir açılır menü sunar.

Font Awesome simgelerini düzenli olarak kullanmayı planlıyorsanız, bu iki araç hayatınızı kolaylaştırabilir. Ancak seyrek kullanım için, en hafif olduğu için manuel yöntemin en basit seçenek olduğunu düşünüyorum.

Adım 1: Eklentiyi Kurun ve Etkinleştirin

Font Awesome'i eklemek için tek yapmanız gereken eklentiyi kurmak ve etkinleştirmek. Gerçekten başka bir şey yok.

Ayarlar → Daha İyi Yazı Tipi Harika seçeneğine giderek erişebileceğiniz bir temel ayarlar paneli olsa da, her şeyi varsayılan olarak bırakmakta tamamen özgürsünüz.

2. Adım: Harika Yazı Tipi Simgelerini Ekleyin

Eklenti ile Font Awesome simgelerini eklemek için iki farklı seçeneğiniz vardır:

• Önceki bölümde gösterdiğim gibi Font Awesome'in web sitesindeki kodu kullanın.
• Bir açılır menüden oluşturulabilen kısa kodları kullanın.

İlk yöntemi size önceki bölümde gösterdiğim için, size açılır kısa kod oluşturucuya hızlıca bir göz atacağım.

Yeni bir gönderi veya sayfa oluşturmaya gittiğinizde, Medya Ekle düğmesinin yanında yeni bir Simge Ekle düğmesini göreceksiniz. Üzerine tıklarsanız, mevcut tüm Font Awesome simgelerini ve sonuçları filtreleme seçeneğini görürsünüz:

Tek yapmanız gereken seçtiğiniz simgeye tıklamak ve eklenti uygun kısa kodu ekleyecektir:

Ve hepsi bu kadar!

Artık Font Awesome simge desteğine sahip olduğunuza göre, Font Awesome simgelerinizi şekillendirmenin ve değiştirmenin bazı yollarını inceleyelim.

Harika Yazı Tipi Simgelerine Nasıl Stil Verilir ve Boyutları Nasıl Değiştirilir

WordPress'e Font Awesome'i eklemek için hangi yöntemi kullanırsanız kullanın, simgelerinizi biçimlendirmek için aynı temel ilkeleri kullanacaksınız.

Ek olarak, bu komutlar, ister kısa kodlar, ister Font Awesome'in sitesindeki gömme kodunu kullanın, çalışır.

Bu ipuçlarının çoğu doğrudan Font Awesome örnekleri sayfasından alınmıştır, bu nedenle uyumluluk konusunda endişelenmenize gerek yoktur.

Yazı Tipi Harika Simgelerinin Boyutunu Değiştirin

Temel bir tane ile başlayalım - Font Awesome simgelerinizin boyutunu artırın. Varsayılan olarak, simgeler oldukça küçüktür, bu nedenle bu kesinlikle karşılaşmanız muhtemel bir durumdur.

Bir simgenin boyutunu artırmak için şu değiştiricilerden herhangi birini kullanabilirsiniz:

• fa-lg – boyutu %33 oranında artırır
• fa-2x – boyutu iki katına çıkarır
• fa-3x – üç kat boyut
• fa-4x – …
• fa-5x – …

Bu değiştiricileri kullanmak için, onu kod için simgenin adından sonra (ancak tırnak işaretleri içinde) ve kısa kod için sınıf alıntılarının içinde eklemeniz yeterlidir. Her iki gömme yöntemi için bir simgenin boyutunu üçe katlamanın bir örneği:

• <i class=”fa fa-indirme fa-3x ” aria-hidden=”true”></i>
• [simge adı=”indir” sınıfı=” fa-3x ”]

Örneğin, bu:

Ön uçta bu olur:

Yazı Tipi Harika Simgeleri Döndür

Ayrıca, Yönlerini değiştirmek için Font Awesome simgelerini kolayca döndürebilirsiniz.

İşte rotasyon için değiştiriciler. Bunlardan herhangi birini, yukarıdaki boyut değiştiricilerle tamamen aynı şekilde kullanabilirsiniz:

• fa-rotate-90 – 90 derece döner
• fa-rotate-180 – 180 derece döner
• fa-rotate-270 – 270 derece döner
• fa-flip-horizontal – simgeyi yatay ekseni boyunca çevirir
• fa-flip-vertical – simgeyi dikey ekseni boyunca çevirir

Yazı Tipi Harika Simgelerine Animasyon Ekleme

Simgelerinize bazı temel animasyonlar da ekleyebilirsiniz. Harika Font, döndürme eklemeniz için size iki farklı değiştirici sunar:

• fa-spin – düzgün bir dönüş ekler
• fa-pulse – simgenin 8 farklı adımda dönmesini sağlar

Bu animasyonlar en iyi şekilde dairesel simgelerle eşleştirilir. Garip şekilli simgeler kullanırsanız, efekt biraz garip görünebilir.

Yazı Tipi Harika Simge Rengini Değiştir

Son olarak, Font Awesome simgelerinin rengini nasıl değiştireceğinizi göstereceğim. Ne yazık ki, bunun için yerleşik bir değiştirici yoktur. Bunun yerine, bazı özel CSS kullanmanız gerekecek.

Endişelenme, yine de – çok basit.

Tek ihtiyacınız olan bu küçük kod:

.fa-NAME {
color: COLOR;
}

Burada fa-NAME, simgenizin gerçek adıdır ve COLOR, onu değiştirmek istediğiniz renktir.

Önceki örneklerimizdeki indirme simgesine bağlı kalmak için, onu nasıl kırmızıya çevireceğiniz aşağıda açıklanmıştır:

Görünüm → Özelleştirici → Ek CSS seçeneğine giderek özel CSS'yi kolayca ekleyebilirsiniz.

Eşyaları Sarmak

Font Awesome simgelerinin ayarlanması birkaç dakikanızı alabilir. Ama onları bir kez kurduktan sonra, sonsuza kadar oradalar. O andan itibaren, tek tek Font Awesome simgelerini eklemek ve stillendirmek için tek yapmanız gereken yukarıdaki adımları izlemek.

Sadece unutmayın - manuel yöntemi kullanıyorsanız, en son sürümlerden haberdar olmak için periyodik olarak girip stil sayfasının bağlantısını güncellemek isteyeceksiniz.