WORDPRESS

WordPress Icon Ekleme Nasıl Yapılır? Acemiler için Rehber

WordPress ikon yazı tipleri bütün WordPress sitelerinin önemli bir parçasıdır. Mobil duyarlı bir web site tasarımına sahip olmakta büyük katkıları vardır.

Web sitemizdeki ikonları farkettiniz mi? Eğer farketmediyseniz bunlardan biriyse navigasyon çubuğumuzdaki ana sayfa ikonu.

Eğer siz de web sitenize böyle ikonlar eklemek istiyorsanız şanslı gününüzdesiniz çünkü bu makalede size tam olarak WordPress icon ekleme nasıl yapılır öğreteceğiz.

Neden İkonlar?

Ikon yazı tipleri harfler ve normal sembollerdense semboller ve piktogramlar içeren yazı biçimidir. Örneğin küçük resimler gibi sıkça kullanılan ikonları görüntülemek için kullanılabilir. Hadi daha derine inelim.

Ikon yazı tiplerinin neredeyse her web sitede veya blogda bulabileceğiniz örneklerinden bir tanesi sosyal medya butonlarıdır. Facebook hesabınızdan bir şey paylaşmak üzereyken Facebook ikon yazı tipine tıklarsınız!

Hostinger'ın blog yazısındaki sosyal medya ikon yazı tipleri

Yazı tiplerinden önce bütün web ikonları sadece görsellerden oluşmaktaydı. Çünkü görseller ölçeklenebilir ve mobil duyarlı değildi. Bu da sayfa yüklenme süresini yavaşlatmaktaydı ve bazı kitleler için ulaşılmaz olmaktaydı. İkon yazı tipleri ise herhangi bir ekranda çalışan ve çok daha hızlı olan bir altenatif olarak ortaya çıktı.

İkon yazı tipleri vektör görsellerdir. Bu yüzden sınırsız ölçeklenebilirler.

Mobil duyarlı tasarımlar için harika bir özelliktir çünkü ikon yazı tiplerini ihtiyaçlarınıza göre kolaylıkla özelleştirebilirsiniz. İkon boyutunu, rengini ve açısını değiştirmek, efektler eklemek vb. gibi birçok özelleştirme seçeneği bulunmaktadır. Bunların hepsi herhangi bir görsel kalite kaybı olmadan CSS aracılığıyla yapılabilir.

Oldukça sadedirler ve kolaylıkla eklenebilirler. Üstelik ikon yazı tipleri tek bir dosya içinde birçok sembol depolamanıza izin verir. Bu da HTTP istekleri sayısını azaltır.

WordPress icon ekleme için başka seçenekler olsa da ikon yazı tipleri halen yaygın biçimde kullanılmaktadır çünkü sitenizde kullanmak için kolaylıkla ücretsiz ikon yazı tipleri bulabilir veya kendiniz bile tasarlayabilirsiniz.

Ücretsiz Ikon Yazı Tipleri

WordPress siteniz için birçok ücretsiz ikon yazı tipi kaynakları bulunmaktadır. Basitçe Google‘da “ikon yazı tipi” olarak aratabilirsiniz. IcoFontFont AwesomeWe Love Icon Fonts, ve IcoMoon en çok tavsiye edilen platformlardır.

Icofont ana sayfası

IcoFont ücretsiz ikon yazı tipleri için en büyük kaynaklardan biridir. Tek bir kaynakta 2100’den fazla ikon sunar ve 30’dan fazla kategorisi bulunmaktadır. Ayrıca kendi özel ikonunuzu oluşturmanıza izin verir.

IcoFont’un web sitesinden direkt olarak indirebilirsiniz. Bunu da ya HTML kodunu kopyalayarak veya site navigasyonunundaki indirme tuşuna tıklayarak yapabilirsiniz.

Seçtiğiniz ikonlara göz atın, koleksiyonunuza ekleyin ve indirin. İndirdiktn sonra CSS, örnekler ve yazı tipleri içeren bir zip dosyası elde edeceksiniz. İndirdiğiniz ikonların HTML satırları örnekler klasöründeki Unicode’larıyla eşleştirilmiştir.

Eğer onları direkt olarak web sitenizde kullanmak isterseniz IcoFont dizinini direkt olarak proje klasörünüze yapıştırabilirsiniz. Header’da konumu icofont.min.css dosyanız için belirlediğinizden emin olun.

Font Awesome sitesinin ana sayfası

İkon yazı tiplerinin bir başka popüler kaynağıysa Font Awesome‘dır. 1500’dan fazla ücretsiz ikon ve 5000’den fazla dört farklı stilden pro sürüm icon mevcuttur.

We Love Icon Fonts ana sayfası

We Love Icon Fonts font oluşturucularının yardımı sayesinde kendi ikonlarınızı oluşturmanızı sağlar. “Add” tuşuna tıklayarak koleksiyonunuzu CSS üzerinden özelleştirmek için kullanabileceğiniz embed kodu alabilirsiniz.

IcoMoon ana sayfası

Son olarak IcoMoon 5,500’den fazla ücretsiz vektör ikon ve 4000’den fazla premium ikon sağlar. Ayrıca kendi IcoMoon yazı tipinizi oluşturabilir ve SVG dosyanızı içeri aktarma özelliğiyle yükleyebilirsiniz.

WordPress’de Ikon Kullanmanın En Hızlı Yolları

Font ikonlarını WordPress sitenizde kendiniz embed kodunu kopyalayarak kullanabilir veya alternatif seçenekleri tercih edebilirsiniz. Performans sorunlarını dikkate almaksızın eklentileri ve yerleşik Dashikonları kullanmak WordPress yazı tipi ikonlarını kullanmanın en hızlı ve kolay yoludur.

Bir Eklenti Kullanmak

Eklenti kullanmak herhangi bir kod düzenlemesi yapmadan WordPress icon ekleme en kolay yoldur.

Font Awesome Integration eklentisi

İlk olarak Font Awesome Integration eklentisini indirip etkinleştirmeniz gerekiyor. Etkinleştirdikten sonra [fawesome] kısa koduyla yazı tipi iconları eklemeye başlayabilirsiniz.

Bu kısa kodda dört nitelik bulunmaktadır:

  • target –  ‘a’ etiketinin hedefi
  • href –  ‘a’ etiketinde kullanılacak bağlantı
  • iclass/i/ etiketinde kullanılacak sınıflar
  • aclass –  ‘a’ etiketinde kullanılacak sınıflar

Hadi WordPress resmi web sitesine yönlendirecek bir ikon oluşturalım.

Ikon kodunu (fa-wordpres) iclass etiketi içine bağlantıyıysa http://wordpress.com/ ahref etiketi içine yerleştirmeniz gerekiyor:

[fawesome iclass="fab fa-wordpress" ahref="https://wordpress.com"]

Bu örnekte fab ön ekini iclass‘e ekledik. Stil ön eklerini birazdan örnek listeyle size göstereceğiz.

İşte iconumuzun kısa kod bloğu üzerindeki görüntüsü:

WordPress icon HTML parçacığı

Önizledikten veya yayınladıktan sonra böyle gözükecektir:

WordPress.com'a gidecek olan icon önizlemesi

WordPress ikonuna tıkladığınızda bağlantıda olan siteye yönlendirileceksiniz.

Ayrıca direkt olarak Font Awesome ikon dizinine gidebilir ve kullanmak istediğiniz ikonun kodunu kontrol edebilirsiniz. Bunu yapmak için ikona tıklayın ve web sitenizin istediğiniz kısmına yerleştirin.

Hadi Font Awesome’da mevcut olan ücretsiz bir ikonu kullanalım ve bir WordPress yazısına örnek olarak yerleştirelim.

İlk olarak Font Awesome’dan ikon kodunu kopyalayın:

<i class="fab fa-wordpress"></i>

Daha sonra ise bu kodu HTML bloğundaki WordPress editörüne yerleştirin. Sonuç böyle olacaktır:

WordPress yazı editöründeki Font Awesome ikonunun HTML parçacığı

İşte önizlendiğinde alınan sonuç:

WordPress yazısındaki WordPress ikonunun önizlemesi

Bu örneğin dışında ikonu projenizin ihtiyaçlarına göre elementleri (renk, boyut vb.) kendiniz tanımlayarak özelleştirebilirsiniz.

İşte bir ikonun rengini ve boyutunu düzenleyen bir kod örneği:

İkon boyutu ve rengini özelleştirmek için HTML parçacık örneği

Önizlemesi:

WordPress ikon yazı tipi önizlemesi

Unutmayın ki <i> etiketini bir ikonu tanımlamak için, <span> etiketiniyse komutun çalışması için kullanırız.

İşte komutun düzenli hali:

<i class=”style_prefix fa-icon name></i>

veya,

<span=”style_prefix fa-icon_name></span>

İşte yukarıdaki komut için bir kopya kağıdı:

StilKullanılabilirlikStil Ön EkiÖrnek
Solid (koyu renkli logolar)Ücretsizfas
<i class="fas fa-icon_name"></i>
<span class="fas fa-icon_name"></span>
Regular (normal)Profar
<i class="far fa-icon_name"></i>
<span class="far fa-icon_name"></span>
Light (hafif)Profal
<i class="fal fa-icon_name"></i>
<span class="far fa-icon_name"></span>
Brands (marka)Ücretsizfab
<i class="fab fa-icon_name"></i>
<span class="far fa-icon_name"></span>

Dashicon Kullanmak

İnternet’te bulunan açık kaynaklı ikon yazı tiplerine trağmen WordPress aslında dashiconlara sahiptir. Dashiconlar bütün WordPress sitelerinde varsayılan olarak bulunan ikon yazı tipi paketidir. Bu özellik WordPress 3.8 ile birlikte gelmiştir.

Dashikonlar yönetici menüsü, hoş geldin ekranı, yazı formatları, medyalar, görsel düzenleme, TinyMCE, yazı ekranı, sıralama, sosyal, ürünler, taksonomiler, bileşenler ve daha da fazlası için yazı tipi ikonları sağlar.

Bu ikonlar kendi eklentilerinizi, temalarınızı, yazı tipi ikonlarınızı ve sitenizdeki diğer elementleri özelleştirmek için kullanılabilir. WordPress’inizde varsayılan olarak bulundukları için kullanmaları oldukça kolaydır!

Bunu kodu functions.php dosyasınıza kodu ekleyerek yapabilirsiniz. Ancak biraz zaman alacaktır.

Code Snippets eklentisifunctions.php dosyasını düzenlemeye gerek kalmadan Code Snippets gibi ücretsiz bir eklenti kullanabilirsiniz.

Bu eklentiyle dashicons web sitesine  web sitesine gidebilir ve kullanmak istediğinizi seçebilirsiniz. Web sitenizde entegre etmek için “Copy HTML” bağlantısına tıklayın. Böylelikle gereken kodu almış olacaksınız. Kodu aldıktan sonra WordPress elementinize kopyalayıp yapıştırın.

Örneğin dashikonlar dizininden dashicons-tickets ikonunu alalım ve bir WordPress yazısına ekleyelim. HTML‘yi kopyalayın ve HTML bloğuna yerleştirin. Sonuç böyle olacaktır:

Ticket ikonunun önizlemesi

Dashikonlarını daha da ileri biçimde özelleştirmek için CSS kullanabilirsiniz. Tebrikler WordPress icon ekleme nasıl yapılır öğrenmiş oldunuz!

Sonuç

Gördüğünüz gibi ikon yazı tipleri web siteniz için ikon olarak kullanılan görsellerin, piktogramların veya sembollerin yerini almak için harika bir alternatif olabilir. İkon yazı tipleri mobil duyarlı bir web site için harika bir elementtir çünkü küçük boyutlarından dolayı yüklenme süresini azaltırlar.

Ayrıca ikon yazı tiplerini ücretsiz olarak İnternet’te bulabilirsiniz.

İkon yazı tipleri bulabileceğiniz önerdiğimiz bazı kaynaklar ise:

  1. IcoFont
  2. Font Awesome
  3. We Love Icon Fonts
  4. IcoMoon

İkon yazı tiplerini elle eklemek yerine çok hızlı ve kolay olan yöntemleri seçebilirsiniz:

  1. Font Awesome Entegrasyon eklentisi kullanmak
  2. Code Snippets eklentisiyle yerleşik WordPress dashikonlarını kullanmak

Tek yapmanız gereken kullanmak istediğiniz ikonları HTML kodunu sitenizde istediğiniz yere kopyalayıp yapıştırmak. Bu makalemizin de sonuna geldik. Artık WordPress icon ekleme nasıl yapılır biliyorsunuz. Umuyoruz ki size yardımcı olmuştur!

 

Yazar hakkında

Gökhan O.

Gökhan Hostinger'da Pazarlama Asistanı olarak çalışmakta. WordPress hakkındaki tecrübe ve bilgisini bu blogda paylaşıyor. Çeviri yapmak, içerik yönetmek ve de SEO optimizasyonu yapmaktan büyük keyif alır. Hobileri arasında oyun oynamak ve futbol maçları izlemek vardır.

Yorum Ekle

Yorum göndermek için buraya tıklayın

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Dünya çapında binlerce aboneye katılın

ve mükemmel fırsatlarla en yeni rehberler e-posta adresinize gelsin

Please wait...

Abone olduğunuz için teşekkürler!

Şimdi kazanmaya başlayın!

Hepsi bir arada web hosting & alan adı yalnızca

9
39 TL
/ay