WordPress'te Taksonomi Görselleri (Kategori Simgeleri) Nasıl Eklenir

WordPress sitenize taksonomi resimleri veya kategori simgeleri eklemek, kategorilerin öne çıkmasına yardımcı olabilir.

Ancak, WordPress varsayılan olarak bu resimleri yükleme seçeneği sunmaz. Arşiv sayfalarında yalnızca kategori veya taksonomi adlarını görüntüler. Bu, sade ve sıkıcı görünebilir.

Eğitimimizde, WordPress'e taksonomi resimleri veya kategori simgeleri eklemeyi göstereceğiz. Sitenizi daha ilgi çekici ve kullanıcı dostu hale getirmek için bunları arşiv sayfalarınızda nasıl göstereceğinizi de öğreneceksiniz.

WordPress'e Taksonomi Resimleri Neden Eklenir?

Varsayılan olarak, WordPress web sitenizde, kategoriler ve etiketler gibi taksonomileriniz için resim ekleme seçeneği bulunmaz (veya başka herhangi bir özel taksonomi).

Kategori arşivleri veya taksonomi arşiv sayfaları dahil olmak üzere her yerde taksonomi adlarını kullanır.

Bu sıkıcı görünüyor.

Taksonomi sayfalarınız çok fazla arama trafiği alıyorsa, daha ilgi çekici görünmelerini isteyebilirsiniz.

Sadece ilgili resimler ekleyerek sıkıcı, metin ağırlıklı sayfaların ilgi çekici sayfalara dönüştüğünü gördük. Bunun nedeni resimlerin özel olması değil, insanların metin yerine görsel ipuçlarını tercih etmesidir.

Bu sayfaları daha kullanıcı dostu ve ilgi çekici hale getirmek için taksonomi resimleri veya kategori simgeleri ekleyebilirsiniz.

Bunun iyi bir örneği, başlığında kategori simgeleri kullanan NerdWallet gibi bir sitedir:

Ana sayfanızda güzel gezinme bölümleri oluşturmak için de kullanabilirsiniz.

İşte Bankrate'in web sitesinden bir örnek:

Bununla birlikte, taksonomi resimlerini WordPress'e kolayca nasıl ekleyeceğimize bakalım.

WordPress'te Taksonomi Resimlerini Kolayca Ekleyin

Yapmanız gereken ilk şey, Categories Images eklentisini kurmak ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın: bir WordPress eklentisi nasıl kurulur.

Etkinleştirdikten sonra, yalnızca Gönderiler » Kategoriler sayfasına gidebilirsiniz. Eklentinin mevcut kategorileriniz için yer tutucu bir resim gösterdiğini fark edeceksiniz.

Kendi kategori simgenizi seçmek için bir kategori altındaki Düzenle bağlantısına tıklamanız gerekir.

Kategori Düzenleme sayfasında, aşağı kaydırın ve özel taksonomi resminizi yüklemek için bir form bulacaksınız.

Kullanmak istediğiniz resmi ilgili kategoriye yüklemek için 'Resim Yükle/Yeni Ekle' düğmesine tıklamanız yeterlidir.

Değişikliklerinizi kaydetmek için 'Kategori Ekle' veya 'Güncelle' düğmesine tıklamayı unutmayın.

Ardından, diğer kategoriler için resim yükleme işlemini tekrarlayabilirsiniz. Etiketleriniz ve diğer tüm taksonomiler için de resim yükleyebilirsiniz.

Şimdi, sorun şu ki, resimleri ekledikten sonra bir kategori sayfasını ziyaret ederseniz, orada kategori resminizi göremezsiniz.

Görüntülemek için WordPress temanızı veya alt temanızı düzenlemeniz veya WPCode eklentisini kullanarak kodu eklemeniz gerekir.

Her iki yöntemi de göstereceğiz ve size daha kolay gelen birini seçebilirsiniz.

Seçenek 1. Kategori Resim Simgelerini WPCode Kullanarak Görüntüleme (Önerilen)

Bu yöntem daha kolaydır çünkü hangi tema dosyasını değiştireceğinizi anlamak zorunda kalmazsınız ve sitenizi bozmadan kodu güvenli bir şekilde ekleyebilirsiniz.

Site düzenleyicisi desteği olan bir blok teması kullanan kullanıcılar için de önerilir.

İlk olarak, WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisi yükleme hakkındaki eğitimimize bakın.

Etkinleştirdikten sonra, WPCode » + Snippet Ekle sayfasına gidin ve 'Özel Kodunuzu Ekleme (Yeni Snippet)' kutusunun altındaki Snippet Kullan düğmesine tıklayın.

Bir sonraki ekranda, kod parçacığınıza onu tanımlamanıza yardımcı olacak bir başlık verin.

Bundan sonra, kod türünüz olarak PHP kod parçasını seçin.

Kod Önizleme kutusunda, aşağıdaki kod parçasını kopyalayıp yapıştırın:

if( is_category() ) { ?> 
<div class="taxonomy-image">
<img class="taxonomy-img" src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>"  alt="" / >
</div>
<?php 
} else {  
//do nothing
} 

Ardından, Ekleme bölümüne aşağı kaydırın ve Ekleme yöntemi olarak Kısa Kod'u seçin.

WPCode'un otomatik olarak bir kısa kod gösterdiğini fark edeceksiniz. Ancak, hatırlamayı kolaylaştırmak için özel bir kısa kod da oluşturabilirsiniz.

Ardından, özel kısa kod için ‘Kopyala’ düğmesine tıklayın.

Kategori resmini arşiv sayfalarınızda göstermek için artık bu kısa kodu kullanabilirsiniz.

Site Düzenleyicisine Kısa Kod Ekleme

Site düzenleyicisi desteği olan bir blok teması kullanıyorsanız, Site Düzenleyicisini başlatmak için Görünüm » Düzenleyici sayfasına gidin.

Buraya, Arşiv Başlığı bloğundan hemen önce bir kısa kod bloğu ekleyebilirsiniz.

Şimdi daha önce kopyaladığınız kısa kodu kısa kod bloğuna yapıştırın.

Değişikliklerin uygulanması için kaydetmeyi unutmayın. Kısa kodu aktifken görmek için kategori arşiv sayfanızı şimdi ziyaret edebilirsiniz.

Görsel doğru görünmüyorsa endişelenmeyin. Bunu daha sonra özel CSS kullanarak nasıl düzelteceğinizi göstereceğiz.

Seçenek 2. Kategori Resim Simgelerini Manuel Olarak Görüntüleme

Bu yöntem için özel kodu WordPress tema dosyalarınıza eklemeniz gerekecektir.

WordPress dosyalarını ilk kez düzenliyorsanız, WordPress'te kodu kopyalayıp yapıştırma hakkındaki rehberimize bakmak isteyebilirsiniz.

İlk olarak, bir FTP istemcisi veya WordPress barındırma dosya yöneticinizle WordPress sitenize bağlanmanız gerekecektir.

Bağlandıktan sonra, taksonomi arşivlerinizi görüntülemekten sorumlu şablonu bulmanız gerekecektir. Bunlar archives.php, category.php, tag.php veya taxonomy.php dosyaları olabilir.

Daha fazla ayrıntı için, bir WordPress temasında hangi dosyaların düzenleneceğini bulma konusundaki kılavuzumuza bakın.

Dosyayı bulduktan sonra, bilgisayarınıza indirmeniz ve Not Defteri veya TextEdit gibi bir metin düzenleyicide açmanız gerekecektir.

Şimdi taksonomi resminizi görüntülemek istediğiniz yere aşağıdaki kodu yapıştırın. Genellikle, bunu taksonomi başlığından veya the_archive_title() etiketinden önce eklemek istersiniz.

<?php if( is_category() ) { ?> 
<div class="taxonomy-image">
<img class="taxonomy-img" src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>"  alt="" / >
</div>
<?php 
} else {  
//do nothing
} 
?>

Kodu ekledikten sonra, bu dosyayı kaydetmeniz ve FTP kullanarak web sitenize geri yüklemeniz gerekir.

Taksonomi resminizin nasıl görüntülendiğini görmek için artık taksonomi arşiv sayfasını ziyaret edebilirsiniz. Demo arşiv sayfamızda nasıl göründüğü aşağıdadır.

Şimdi, hala garip görünebilir, ancak endişelenmeyin. Bunu özel CSS kullanarak stilleyebilirsiniz.

Kategori Simgelerini Özel CSS ile Stilize Etme

Kategori Simgesi veya Taksonomi resimlerini WordPress temanıza ekledikten sonra, resminiz çok iyi görünmeyebilir.

Bunu düzeltmek için, düzgün hizalamak üzere CSS kodu eklemeniz gerekecektir.

WordPress'e ilk kez CSS kodu ekliyorsanız, WordPress'e özel CSS ekleme konusundaki başlangıç rehberimize göz atın.

Taksonomi resmi için kullandığımız özel CSS burada.

img.taxonomy-img {
    float: left;
    max-height: 100px;
    max-width: 100px;
    display: inline-block;
    padding: 20px;
}

Temanıza bağlı olarak, arşiv başlığı, taksonomi başlığı ve açıklama gibi çevreleyen öğeleri de stilize etmeniz gerekebilir.

Taksonomi arşiv başlığımızı ve açıklamamızı bir <div> öğesine sardık ve özel bir CSS sınıfı ekledik. Ardından başlığı ve açıklamayı ayarlamak için aşağıdaki CSS kodunu kullandık.

.taxonomy-title-description {
    display: inline-block;
    padding: 18px;
}

Test web sitemizde sonrasında nasıl göründüğü aşağıdadır.

Taksonomi Resimlerinin Görüntülenmesinden Taksonomileri Hariç Tutma

Şimdi, bazı kullanıcılar taksonomi resimlerini yalnızca belirli taksonomiler için kullanmak isteyebilir.

Örneğin, WooCommerce kullanarak bir online mağaza çalıştırıyorsanız, ürün kategorilerini hariç tutmak isteyebilirsiniz.

WordPress yönetici alanındaki Kategoriler Resimleri sayfasına geri dönün ve hariç tutmak istediğiniz taksonomileri işaretleyin.

Ayarlarınızı kaydetmek için ‘Değişiklikleri Kaydet’ düğmesine tıklamayı unutmayın.

Bu makalenin, WordPress'e nasıl kolayca taksonomi görselleri ekleyeceğinizi öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca bu kullanışlı WordPress kategori hileleri ve eklentilerine veya WordPress'te kategori sırasını nasıl değiştireceğinize dair makalemize de göz atmak isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.