WordPress'e Harika Yazı Tipi Nasıl Eklenir?

Günümüzde, WordPress kullanıcıları web sitelerine daha fazla görsel tasarım getirme konusunda başarılılar. Yıllar boyunca tasarımcılar ve geliştiriciler, görsel tasarımı web sitelerine getirmek için hayal güçlerine ve uygulamalarına güvendiler. Peki ya herhangi bir programlama veya tasarım bilgisi olmayan normal kullanıcılar?

Font Awesome, sorunlarının anahtarıdır. Font Awesome'i kullanarak, herhangi bir programlama veya tasarım bilgisine sahip olmadan WordPress'e simgeler ekleyebilirsiniz.

Bu yazıda, WordPress'e Harika Font eklemeyi tartışmak istiyoruz.

Harika Yazı Tipi nedir?

Font Awesome, WordPress'e Font Simgeleri eklemek için en popüler eklentidir. Şu anda 80.000'den fazla aktif kuruluma sahiptir ve WordPress'in en son sürümüyle uyumludur. Font Awesome birçok özellik sunar, örneğin:

• Font Awesome Free ve Font Awesome Pro'yu destekler. (premium sürüm olan)
• Düzenli olarak güncellenir.
• Kolayca yapılandırılabilir
• vesaire.

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

Yukarıda bahsedildiği gibi, Font Awesome birçok fayda sağlar ve iyi tasarlanmış bir web sitesine sahip olmak neredeyse gereklidir. WordPress'e Font Awesome eklemenin birçok yolu vardır.

Her zaman olduğu gibi, bir eklenti kullanmak bunu yapmanın en kolay yoludur. WordPress'e Harika Yazı Tipi eklemek için aşağıdaki adımları izleyin:

1. WordPress kontrol panelinize gidin.
2. Eklentiler üzerine gelin ve Yeni Ekle'ye tıklayın.

1. Arama kutusuna "font harika" yazın ve enter tuşuna basın.
2. Şimdi Kur'a ve ardından Etkinleştir'e tıklayın.

Yapmanız gereken her şey bu. Eklentiyi .zip dosyasını kullanarak da yükleyebilirsiniz.

Yazı Tipi Simgesi nedir? Neden WordPress'e Eklemeliyiz?

Yıllar boyunca geliştiriciler ve tasarımcılar, fikirlerini web sitelerinde resim olarak tasarlamaya ve uygulamaya güvendiler. Ancak yazı tipi simgelerinin geliştirilmesiyle görsel tasarım dünyası basitleştirildi. Yazı tipi simgeleri duyarlıdır ve bazı durumlarda geleneksel görüntülerin veya hareketli grafik sayfalarının yerini alan tamamen özelleştirilebilir simgelerdir.

Adından da anlaşılacağı gibi, yazı tipi simgeleri tam olarak düşündüğünüz şeydir. Tamamen simgelerden yapılmış bir yazı tipi. Örneğin, normal bir yazı tipi normal karakterleri kullanır. Ancak yazı tipi simgesi, karakterleri farklı simgelerle değiştirir. Örneğin, klavyenizde “a”ya basarsanız bir ev görüntülenecektir.

Hala cevapsız kalan soru, neden yazı tipi simgelerini kullanmalıyız? Yukarıda belirtildiği gibi, görüntüler yıllardır 1 numaralı başvuru aracımız olmuştur. Ancak yazı tipi simgeleri bize resimlerde sahip olmadığımız bir esneklik sağlıyor. Kullanımı kolaydır ve çok duyarlıdırlar.

Yazı tipi simgeleri vektör görüntüleridir ve kalitelerini kaybetmeden herhangi bir boyuta ölçeklenebilir. Yukarıda belirtildiği gibi, yazı tipi simgeleri, kullandığımız normal günlük yazı tipleri gibi yönetilebilir. Renkleri, hizalamayı, yüksekliği, stili vb. değiştirebilirsiniz.

Yazı tipi simgeleri hemen hemen her tarayıcıyla uyumludur. Bu nedenle, bazı tarayıcıların WordPress'te kullandığınız yazı tipi simgelerini görüntüleyememesi konusunda endişelenmemelisiniz.

Web sitelerimizdeki resimlerin kullanımını sınırlayan binlerce yazı tipi simgesi var. Bununla birlikte, yazı tipi simgelerinin dezavantajı platform uyumluluğudur. Tarayıcılar bu yazı tiplerini işlerler ve genellikle farklı İşletim Sistemlerinde farklı çalışırlar ve işlerler.

Harika Yazı Tipini WordPress'e Manuel Olarak Ekleme

WordPress'e Font Awesome'i eklemeye başlamadan önce, etkinleştirilen tema için bir alt tema oluşturmayı tartışalım. Bir alt tema oluşturarak, herhangi bir terslik olması durumunda Ana temanızı yedek olarak tutabilirsiniz. Aşağıdaki kodu ana temaya eklemekten çok daha güvenli olduğu için alt temaya ekleyebilirsiniz.

WordPress'te Çocuk Teması Nasıl Oluşturulur?

Yukarıda belirtildiği gibi, bir çocuk temasına sahip olmak çok faydalı olabilir. Bir alt tema oluşturmak için aşağıdaki adımları izleyin:

1. public_html'den wp-content > theme'a gidin
2. Yeni bir klasör oluşturun ve temanızın adını kullanın ancak sonuna “-child” ekleyin
3. Yeni oluşturulan klasörü açın. Yeni bir dosya oluşturun ve onu style.css olarak adlandırın
4. Yeni bir dosya oluşturun ve onu function.php olarak adlandırın
5. WordPress panosu > Görünüm'e gidin ve oluşturduğunuz yeni temayı etkinleştirin
6. WordPress kontrol paneli > Görünüm > Tema Düzenleyici'ye geri dönün ve oluşturduğunuz alt temayı seçin
7. Aşağıdaki kodu kopyalayıp function.php dosyasına yapıştırın

 <?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); } ?>

• Güncelle'yi tıklayın ve bununla yapmanız gerekir.

Font Awesome'i WordPress'e Manuel Olarak Nasıl Eklersiniz?

WordPress'e bir eklenti ile Font Awesome'i eklemekten bahsetmiştik. Şimdi bir adım yukarı çıkalım ve manuel olarak WordPress'e ekleyelim. Her zaman olduğu gibi, herhangi bir değişiklik yapmadan önce, bir şeyler ters giderse diye WordPress'in yedeğini almanızı öneririz.

WordPress'e Font Awesome'i manuel olarak eklemenin iki yöntemi vardır:

1. Functions.php dosyasını indirip kodu ekleyerek.
2. WordPress kontrol panelinden functions.php dosyasını düzenleyerek.

Bir FTP istemcisi ile veya doğrudan barındırma panelinden web sitenize bağlanın. Etkinleştirilmiş temanızın klasöründe functions.php dosyasını arayın. Masaüstünüze indirin ve Notepad++ veya tercih ettiğiniz başka bir düzenleyici ile açın.

Ardından, ücretsiz bir CDN sunucusu kullanmak için aşağıdaki kodu kullanı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' ); } Or you can directly add the Font Awesome to your CSS and create a new function with the following code: //enqueues our locally supplied font awesome stylesheet function enqueue_our_required_stylesheets(){ wp_enqueue_style('font-awesome', get_stylesheet_directory_uri() . '/css/font-awesome.css'); } add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

Kaydedin ve indirdiğiniz klasöre geri yükleyin.

Ayrıca function.php'ye kontrol panelinizden de erişebilirsiniz. Görünüm > Tema Düzenleyici > Etkinleştirilen temanız > functions.php'ye gidin

Artık Font Awesome'i WordPress'e manuel olarak eklediğinize göre, Awesome simge arama web sitesine gidin ve aradığınız simgeyi arayın. Simgeyi bulduktan sonra üzerine tıklayın.

Ardından seçilen simge için bir kod alacaksınız. Tek yapmanız gereken kodu kopyalayıp WordPress düzenleyicisinin metin sekmesine yapıştırmak.

CSS ile Font Müthiş Stili Nasıl Değiştirilir?

Font Awesome, sadeliği ve esnekliği nedeniyle yıllar içinde çok popülerlik kazandı. Çoğu tasarımcı, geleneksel görüntüleri kullanmayı bıraktı ve onları Font Awesome simgeleriyle değiştirdi.

Font Awesome simgelerinde yapabileceğiniz birçok olası, ancak basit değişiklik vardır. Örneğin, simgenin boyutunu değiştirebilir, döndürebilir, rengini değiştirebilir vb.

Her biri için bir örnek ve ayrıntılı açıklama vererek başlayalım. Size yalnızca temel bilgileri öğretecek olsak da, daha gelişmiş değişiklikleri bulmak için Font Awesome ile daha fazla zaman harcamalı ve hayal gücünüzü uygulamalısınız.

Yazı Tipi Müthiş Simgelerinin Boyutu Nasıl Değiştirilir?

En temel değişiklik, Font Awesome simgesinin boyutunu değiştirmektir. Varsayılan olarak, resmi Font Awesome web sitesinden simge kodunu aldığınızda, simgeler oldukça küçüktür ve bunları ihtiyaçlarınıza göre değiştirmeniz gerekebilir. Boyutu artırmak için aşağıdaki kodu kullanın:

• fa-lg – boyutu %33 artırmak için
• fa-2x – boyutu iki katına çıkarmak için
• fa-3x – boyutu üç katına çıkarmak için
• ve benzeri.

İşte yukarıdaki kodun bir örneği. İndirme simgesini üç katına çıkardık:

 <i class=”fa fa-download fa-3x” aria-hidden=”true”></i>

Muhtemelen anlayabileceğiniz gibi, indirme simgesinin boyutunu üç katına çıkardık.

Yazı Tipi Harika Simgelerin Boyutu Nasıl Döndürülür? Yazı Tipi Harika simgeleri farklı açılarda döndürülebilme özelliğine sahiptir. Bu, ihtiyaçlarınızı karşılamak için aşağıdaki kodu kullanarak kolayca elde edilebilir. Yukarıda belirtilen yöntemin aynısını kullanın, ancak yeniden boyutlandırma kodu yerine aşağıdaki kodu kullanın:

• fa-rotate-90 – simgeyi 90 derece döndürmek için
• fa-rotate-180 – simgeyi 180 derece döndürmek için
• fa-rotate-270 – simgeyi 270 derece döndürmek için
• fa-flip-horizontal – simgeyi yatay ekseni boyunca çevirmek için
• fa-flip-vertical – simgeyi dikey ekseni boyunca çevirmek için

Font Müthiş Simgelerine Animasyon Nasıl Eklenir?

Yukarıda belirtildiği gibi, Font Awesome çok esnektir, bu nedenle aşağıdaki kodla Font Awesome simgelerine çok temel animasyon ekleyebilirsiniz.

• fa-spin – bir dönüş dönüşü eklemek için
• fa-pulse – simgeyi 8 farklı adımda döndürmek için

Yazı Tipi Müthiş Simgelerinin Rengi Nasıl Değiştirilir?

Yukarıdaki değişikliklerin aksine, simgeleri değiştirmek için önceden ayarlanmış bir kod yoktur. Bunun yerine özel CSS kodunu kullanmanız gerekir. Örneğin, indirme simgesini kullanıyorsanız, rengi yeşil olarak değiştirmek için aşağıdaki kodu kullanın:

 .fa-download { color: green; }

Ek CSS'ye Görünüm > Özelleştirici aracılığıyla erişilebilir.

Müthiş Yazı Tipini CSS Öğelerine Manuel Olarak Nasıl Eklersiniz?

CSS'de bildiğiniz gibi, her kod bir şeyi temsil eder. Font Awesome'de her kod bir simgeyi temsil eder; ve her simgenin benzersiz bir kodu vardır. Teknik terimlerle, bu bir Unicode olarak bilinir. Tarayıcıya neyin görüntüleneceğini ve nasıl görüntüleneceğini söyler.

Yazı tipi simgesi ailenizi kullanmak için benzersiz bir sözde öğe oluşturmanız ve yazı tipini ayarlamanız gerekir. Ardından, içerik değerini ayarlayabilirsiniz. Bu amaçla, ihtiyacınız olan:

• içerik
• font ailesi

Aşağıdaki örnek bir düğme oluşturacaktır:

 <!-- Here is the styling --> <style> .my-button{ display: inline-block; padding: 8px 12px; background: #eee; border: solid 1px #D5D5D5; } .my-button span{ display: inline-block; } .my-button span:before{ font-family: 'FontAwesome'; content: '\f085'; position: relative; margin-right: 5px; font-size: 110%; } </style> <!-- Here is the HTML markup --> <div class="my-button"> <span class="text"> Settings Menu </span> </div>

Çıktı şöyle görünecektir:

Bir CDN Sunucusundan Font Müthiş Simgeleri Nasıl Kullanılır?

Font Awesome için bir CDN'nin manuel olarak nasıl kullanılacağından yukarıda bahsettik. Basitçe, kodu kopyalayıp etkinleştirdiğiniz temanın functions.php dosyasına yapıştırın.

Ancak, bunu gerçek tema yerine bir çocuğun temasıyla yaparsanız en iyisidir. Çünkü WordPress ve temayı güncellerseniz tüm süreci yeniden yapmanız gerekecektir.

Font Awesome premium sürümünü kullanarak, Font Awesome CDN'sine erişebilecek ve simgeleri doğrudan web sitesinden alıp kendi web sitenizde kullanabileceksiniz. Premium sürümün fiyatı yılda 99 ABD dolarıdır.

Elementor'da Font Awesome Nasıl Kullanılır?

Elementor, dünya çapındaki web'deki en ünlü sayfa oluşturuculardan biridir ve normal WordPress editörünün sunmadığı birçok özelliğe sahiptir.

Elementor sayfa oluşturucu, diğer birçok kullanışlı özellikle birlikte, Font Awesome simgeleriyle birlikte gelir. Bu nedenle, herhangi bir ekstra eklenti yüklemenize veya temanızın çekirdek dosyalarını düzenlemenize gerek yoktur.

Font Awesome simgelerine erişmek için simge widget'ını kullanmanız yeterlidir. Ardından sayfaya sürükleyip bırakın.

Ayrıca, Harika Yazı Tipi Simge Kutusu ve Simge Listesi widget'larında mevcuttur. Bu widget'lar son derece kullanışlıdır ve özellikle herhangi bir programlama bilginiz yoksa farklı senaryolarda kullanılabilir.

Better Font Awesome eklentisi ile Önbellekle İlgili Sorunları ve Uyumluluk Sorunlarını Düzeltme

Better Font Awesome eklentisi, WordPress topluluğunda kullanılan bir başka ve daha da popüler Font Awesome eklentisidir. Font Awesome eklentisi çok kullanışlı bir eklentidir. Ancak, aşağıdakiler de dahil olmak üzere birçok sorunla birlikte gelir:

• Diğer eklentilerle çakışmalar
• Belirli önbelleğe alma sorunları

Bu, çok sayıda eklenti yüklü web siteleri ve düzenli olarak güncellenen web siteleri için birçok soruna neden olabilir. Öte yandan, Better Font Awesome eklentisi, Font Awesome Simgeleri, Font Awesome Daha Fazla Simge ve Font Awesome Kısa Kodları ile oluşturulan kısa kodlarla çalışmak üzere tasarlanmıştır.