Dashicons

Adım Adım Bir Kılavuz, Dashicons Nasıl Kullanılır?

Hoşunuza giden bir tema bulur, kurarsınız ve birkaç ayınızı sitenizin tadını çıkararak geçirirsiniz. Ama sonra, birkaç ay sonra tema bayat hissetmeye başlıyor. Temayı değiştireyim mi, başka bir şeyler araştırma aşamasına geçiyorsunuz.

Tek sorun, yeni şeyler aramak için birkaç saat harcamak istemiyorsun. Sadece temanıza küçük bir değişiklik eklemenin bir yolu olsaydı diye düşünmüşlüğünüz olmuştur elbet.

Kendinizi umutsuzluğa atmadan önce, size çok fazla çaba sarfetmeden ve saatlerinizi harcamadan tema geliştirmenin kolay bir yolunu göstereceğiö ve sitenizi yavaşlatabilecek gereksiz görüntüler eklemeden yapılacak.

Dashicons‘a sitesine gidelim, Dashicons, WordPress 3.8’de tanıtılan yazı tipi simgeleridir. Bunlar, gösterge tablonuza girdiğinizde gördüğünüz müthiş ve harika simgeler. Onları temanıza da eklerseniz harika olmaz mıydı?

Nasıl yapılacak peki?

Dashicons’u menülerde nasıl kullanabilirsiniz?

Basit bir örnekle başlayalım. Dashicons, sürüm 3.8’den bu yana WordPress’e zaten dahil edilmiş ancak bunları sitenizin ön ucunda düzgün bir şekilde görüntülemek için bunları eklemeniz gerekiyor; Yani sizin temanız.

1. Temanız

Temanızın Dashicons’u hazır hale getirmek için öncelikle functions.php dosyasına ulaşmanız gerekmektedir. (Görünüm> Düzenleyici’de bulunur – varsayılan olarak mevcut temanızın CSS dosyasını açar.)

En altta kaydırın ve bu kod satırlarını sonuna yapıştırın:

Dashicons komut // Kuyruğa
ADD_ACTION ( 'wp_enqueue_scripts', 'load_dashicons_front_end');
fonksiyon load_dashicons_front_end () {
wp_enqueue_style ( 'dashicons');
}

Şimdi temanız Dashicons’ı kullanmaya hazır.

3. : Menülere Dashicons Ekleme

Anasayfa bağlantısına bir Dashicon ekleyelim. Dashicons web sitesine gidin ve istediğiniz simgeyi seçin.

  • Kopya CSS
  • Kopya HTML
  • Kopya Glyph

İstenen simgeyi (bu durumda ev simgesini seçtim) tıkladıktan sonra Copy HTML’yi Kopyala’yı tıklayın. İhtiyacınız olan kodun bulunduğu bir açılır pencere verecektir.

Dashicons-Ev
Dashicons-Ev

4 : Görünüm / Menüler’e Kod Ekleme

WordPress gösterge tablonuza geri dönün, Görünüm> Menüler’e tıklayın ve Kodu Navigasyon Etiketinin bulunduğu yere yapıştırın.

Dashicons-Gorunum-Menuler-Etiket
Dashicons-Gorunum-Menuler-Etiket

Sözcüğün yine de görüntülenmesini isterseniz, kapatma div ayracından sonra yazın.  Kaydet’i tıklayın ve ana sayfanızı yükleyin. Ev bağlantınızda artık güzel ve keskin bir Dashicon görüntüleniyor olmalıdır. Bunu tüm gezinme menü öğeleri için veya sadece ev için yapabilirsiniz. Eşleşen simgelerle yukarıdaki adımları tekrarlayın. Bu çok kolay oldu mu?

Dashicons’u META’da Kullanma

Bir adım öteye gidip yazı meta dosyanıza Dashicons ekleyebilir veya başka bir deyişle yazarın adını, tarihini, kategorisini veya etiketini önüne Dashicons ekleyebilirsiniz; Temanıza ve gösterdiği bilgilere bağlı olarak.

Dashicons’u zaten temanıza eklediyseniz, şimdi yapmanız gereken tek şey style.css dosyanızı açın (veya her zaman daha iyi bir seçenek olan Özel CSS düzenleyicisini kullanın, böylece temanız güncelleştirildikten sonra değişiklikleri kaybetmeyin!), Find Eşleşen seçici ve CSS kodunu ekleyin.

Diyelim ki, adınızın veya yazarınızın adının önünde bir simge eklemek istiyorsunuz.

1:

Önce bir simge seçeceğiz.

2:

Ardından tıklayın ve bu sefer CSS’yi Kopyala’yı seçin. Yine yapıştırmanız gereken kodun bulunduğu bir açılır pencere göreceksiniz.

Dashicons-Ev
Dashicons-Ev

3:

Şimdi style.css dosyanızı açın ve ilgili seçiciyi, bu durumda – .entry yazarını bulun. Ekleyerek: Dashicons web sitesinden kopyaladığınız CSS kodunu önce ve sonra yapıştırarak, yazarın isminin önünde güzel bir simge olacaktır. Ayrıca Dashicons yazı tipini kullandığınızı belirtmeniz gerekiyor. Değiştirilen kod şuna benzer:

.entry-yazar: önce {
font-family: & quot; dashicons quot ettik ;;
içeriği: quot; \ F110 ve quot ;;
}

Biraz stil ekleyelim ve şimdi tamamlanmış kod şuna benzer:

.entry-yazar: önce {
font-family: & quot; dashicons quot ettik ;;
içeriği: quot; \ F110 ve quot ;;
color: # f15123;
Ekran: sıralı blok;
-webkit-tipi-yumuşatma: kenar yumuşatma;
yazı tipi: Normal 20 piksel / 1;
dikey hizalama: en;
margin-right: 5px;
margin-right: 0.5rem;
}

Sonunda neye benzeyecek?

Böyle bir şey:

4.

Dashicons-icon
Dashicons-icon

Dashicons’u kullanabileceğiniz pek çok yol vardır – yaratıcılığınızı sürdürün ve ne yapabileceğinizi görün.

Yukarıdaki örneklerin yanı sıra, farklı posta türleri için farklı simgeler belirlemek için arka uçtaki Dashicons’u kullanabilirsiniz veya bunları yayın başlığınıza, widget başlıklarınızda kullanabilirsiniz veya özel bir açılış sayfası oluşturuyorsanız, farklı sayfalar arasında sitenizi farklılaştırabilirsiniz.

Kısa Özet
Yayın Tarihi
Konunun Adı
Adım Adım Bir Kılavuz, Dashicons Nasıl Kullanılır?
Verilen Puan
31star1star1stargraygray
Powered by WP Review

One comment

Leave a Reply

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir