Bu herkesin başına gelir.

Beğendiğiniz bir tema bulursunuz, onu yüklersiniz ve birkaç ay boyunca sitenizin görünümünün keyfini çıkarırsınız. Ancak birkaç ay sonra tema bayatlamaya, biraz sıkıcı gelmeye başlar.

Tek sorun, yeni bir şey aramak için birkaç saatinizi harcamak istememenizdir. Keşke temanıza biraz renk katmanın bir yolu olsaydı, onu öne çıkaracak küçük bir parıltı.

Umutsuzluğa kapılıp ellerinizi havaya kaldırmadan önce, çok fazla çaba harcamadan ve sitenizi yavaşlatabilecek gereksiz resimler eklemeden temanızı renklendirmenin kolay bir yolunu göstereyim.

Dashicons'a girin. Dashicons, WordPress 3.8'de tanıtılan yazı tipi simgeleridir. Kontrol panelinize giriş yaptığınızda gördüğünüz harika ve havalı simgelerdir. Bunları temanıza da ekleyebilseydiniz harika olmaz mıydı?

Yapabilirsiniz ve ben size nasıl yapılacağını göstereceğim.

Gezinti menünüzde Dashicon'ları nasıl kullanabilirsiniz?

Basit bir örnekle başlayalım. 3.8 sürümünden bu yana WordPress'te Dashicons zaten yer almaktadır, ancak sitenizin ön ucunda, yani temanızda düzgün bir şekilde görüntülenmelerini sağlamak için bunları eklemeniz gerekir.

Adım 1: Temanızın Dashicon'larını hazırlayın

Temanızın Dashicon'larını hazır hale getirmek için önce functions.php dosyanızı açın (Görünüm>Editör'de bulunur - varsayılan olarak mevcut temanızın CSS dosyasını açacaktır. Devam edin ve functions.php dosyasını arayın ve Editör'de yüklemek için üzerine tıklayın).

Adım 2: Komut dosyasını sıraya alın

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

 //Dashicons komut dosyasını çağır add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); } 

Pekala! Artık temanız Dashicons'u kullanmaya hazır.

Adım 3: Menü öğelerine Dashicons ekleme

Ana Sayfa bağlantınız için bir Dashicon ekleyelim. Dashicons web sitesine gidin ve beğendiğiniz simgeyi seçin.

Güncelleme: Dashicons başlangıçta GitHub.io'da mevcuttu, ancak o zamandan beri WordPress.org'da kullanıma sunuldu.

Adım 4:

İstediğiniz simgeye tıklayın (bu durumda ben ev simgesini seçtim) ve ardından HTML Kopyala'ya tıklayın. Size ihtiyacınız olan kodu içeren bir açılır pencere verecektir.

Adım 5:

WordPress kontrol panelinize geri dönün, Görünüm> Menüler'e tıklayın ve kodu Gezinti Etiketi yazan yere yapıştırın.

Sözcüğün hala görünmesini istiyorsanız, kapanış bölme ayracından sonra yazın.

Kaydet'e tıklayın ve ana sayfanızı yükleyin. Ana sayfa bağlantınız şimdi güzel, net bir Dashicon görüntülemelidir.

Bunu tüm navigasyon menüsü öğeleri için veya sadece ev için yapabilirsiniz. Yukarıdaki adımları eşleşen simgelerle tekrarlamanız yeterli. Kolaydı değil mi?

Yazı metasında Dashicon'ları nasıl kullanıyorsunuz?

Bir adım daha ileri gidebilir ve yazı metanıza Dashicon'lar ekleyebilirsiniz; başka bir deyişle temanıza ve görüntülediği bilgilere bağlı olarak yazar adı, tarih, kategori veya etiketin önüne Dashicon'lar ekleyebilirsiniz.

Temanızda Dashicon'ları zaten sıraladığınıza göre, şimdi tek yapmanız gereken style.css dosyanızı açmak (veya temanız güncellendiğinde değişiklikleri kaybetmemek için her zaman daha iyi bir seçenek olan Özel CSS düzenleyicisini kullanmak!), eşleşen seçiciyi bulmak ve CSS kodunu eklemek.

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

Adım 1:

İlk olarak istediğimiz bir simgeyi seçeceğiz.

Adım 2:

Ardından üzerine tıklayın ve bu kez CSS Kopyala'yı seçin. Yine, yapıştırmanız gereken kodu içeren bir açılır pencere verecektir.

Adım 3:

Şimdi style.css dosyanızı açın ve ilgili seçiciyi bulun, bu durumda - .entry-author. Önce :before ekleyerek ve ardından Dashicons web sitesinden kopyaladığınız CSS kodunu yapıştırarak, yazarın adının önünde güzel bir simge olacaktır. Ayrıca Dashicons yazı tipini kullandığınızı da belirtmeniz gerekir. Değiştirilmiş kod aşağıdaki gibi görünür:

 .entry-author:before { font-family: "dashicons"; content: "\f110"; } 

Biraz da stil ekleyelim ve şimdi tamamlanan kod şöyle görünüyor:

 .entry-author:before { font-family: "dashicons"; content: "\f110"; color: #f15123; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1; vertical-align: top; margin-right: 5px; margin-right: 0.5rem; } 

Nihai sonuç

Peki sonunda bu nasıl görünecek?

Bunun gibi bir şey:

Dashicon'ları kullanabileceğiniz pek çok yol var - yaratıcılığınızı konuşturun ve neler yapabileceğinizi görün.

Her şeyi bir araya getirmek

Yukarıdaki örneklerin yanı sıra, farklı yazı türleri için farklı simgeler belirlemek üzere arka ucunuzda Dashicon'ları kullanabilir veya bunları yazı başlıklarınızda, widget başlıklarınızda kullanabilir ya da özel bir açılış sayfası oluşturuyorsanız sitenizin farklı sayfaları arasında ayrım yapabilirsiniz.

İşte bunları kullanarak neler oluşturabileceğinize dair temel bir örnek: