adobewordpress ~ güncel tasarım okulu
  • Adobe
    • Photoshop Dersleri
    • After Effects Dersleri
    • Illustrator Dersleri
  • WordPress
    • Eklentiler
    • Temalar
    • Güvenlik
  • Duvar Kağıtları
  • Tasarım Unsurları
    • PHP Dersleri
    • HTML5 Dersleri
    • CSS Dersleri
    • jQuery
    • Bootstrap
    • SEO Dersleri
    • Kaynaklar
    • İlham Verenler
    • DiÄŸer Konular
  • Video Dersler
  • Yazarlar

WordPress Başlıklarınızın Yanına Kategori Resmi Ekleme

7 sene önce25 Ekim 2012 Vatanay Özbeyli WordPress

WordPress sitenizde anasayfa konularının sağ tarafına ilgili kategorinin görselini koymanız mümkün. Madde madde konuyu detaylandırmadan önce aşağıdaki kategorileri içeren bir sitemiz olduğunu varsayalım.

Kategori Adı — Kategori ID Numarası

Makaleler — 1

  • Türkçe Makaleler — 2
  • İngilizce Makaleler — 3

Dersler — 4

  • Türkçe Dersler — 5
  • İngilizce Dersler — 6


Eğer kategorilerinizin id numarasını bilmiyorsanız yönetici panelinizden Yazılar > Kategoriler alanına gidiniz. Bu alanda sağ tarafta açılan kategorilerinizin üzerine imleci götürdüğünüzde aşağıdaki durum çubuğunda link gözükecektir. Bu link içinde tag_ID diye gözüken ise sizin kategori ID numaranızdır.

Üstteki örneklendirmeye göre bir çalışma hazırlayalım.

1. Adım : CSS dosyamızı açıyoruz ve aşağıdaki kodlamayı ekliyoruz.

.cat_logo {float:right; margin: 3px 3px 1px 1px;}

2. Adım : Index.PHP’yi açıyoruz ve aÅŸağıdaki kodlamayı if(have_posts()):while(have_posts()) : the_post(); satırlarının altına ekliyoruz.

<?php
$cat = get_the_category(); $cat = $cat[0];
$makaleArray = array('1','2','3');
$dersArray = array('4','5','6');

if (in_array($cat->cat_ID, $adobeArray)) {?>

<img class="cat_logo" src="<?php bloginfo('template_url')?>/images/kategori/makaleler.png" title="<?php echo $cat->cat_name;?>"/>

<?php }elseif (in_array($cat->cat_ID, $wordpressArray)) {?>

<img class="cat_logo" src="<?php bloginfo('template_url')?>/images/kategori/dersler.png" title="<?php echo $cat->cat_name;?>"/>

<?php }else{?>

<img class="cat_logo" src="<?php bloginfo('template_url')?>/images/kategori/digerleri.png" title="<?php echo $cat->cat_name;?>"/>

<?php } ?>

Üstteki kodda eÄŸer 1-2-3 id kategorilerine baÄŸlı bir konuysa makaleler.png’yi, 4-5-6 id kategorilerine baÄŸlı bir konuysa dersler.png dosyasını baÅŸlığın yanına ekliyoruz. EÄŸer her iki gruba üye deÄŸilde digerleri.png’yi çağırıyoruz. 2. ve 3. satırdaki makale ve ders arraylerini kendi kategorizasyonunuza göre düzenleyebilirsiniz.

Bir Diğer Yöntem

Aşağıdaki yöntem ise daha az kategoriye sahip siteler için uygun. Kategorilerinizin ID numaralarını öğrendikten sonra onlara özel görseller atayabilirsiniz.

<?php if ( in_category(1) ) {
echo '<img src="1.png" />';

} elseif ( in_category(2) ) {
echo '<img src="2.png" />';

} else {
echo '<img src="3.png" />';
}
?>

Örnek vermek gerekirse kategori ID numarası 1 olan baÅŸlığın yanına 1.png’yi ekliyoruz.

Biz, bu tekniklerle anasayfamızdaki konuların yanlarında kategori görselleri yayınlıyoruz. 

Bu da ilginizi çekebilir  WordPress için kullanışlı 5 Google Chrome Eklentisi

Eğer sorularınız varsa konu altında sorabilirsiniz.

Örnek Görüntü :

Share on Facebook Share
Share on TwitterTweet
Share on Google Plus Share
Share on Pinterest Share
Share on LinkedIn Share
add cat category image kategori logo thumb title wordpress


Yazı navigasyonu

Photoshop ile Serbest Çalışma #1
Sadece CSS Kullanarak Dropdown Menu Nasıl Hazırlanır

SOSYAL

E-Posta AboneliÄŸi

Güncel eğitimlerden haberdar olmak ister misin?




Arama

Benzer Yazılar

  • WordPress blogunuzda son hafta neler yazıldı?
  • İlham Veren & En Dikkat Çekici Logolar
  • ÇekiliÅŸ ile Template Monster’dan ücretsiz tema!
  • WordPress’te kırık linkler (404) nasıl düzeltilir?
  • WordPress’i hızlandırmanın bir diÄŸer yolu : Çöpleri dökün!
  • Türk Telekom’un Yeni Logosunu DeÄŸerlendiriyoruz
  • 2 Ayda Ziyaretçi Sayımı Nasıl İkiye Katladım
  • WordPress’te İlgili Konuları Eklentisiz Listeleme
  • Google Web Fonts ve Kullanımı
  • Yorumcularınıza TeÅŸekkür Postası Yollayın

Popüler Örnekler

  • Ambilight ile Bootstrap Slider Kullanımı 16706
  • Yukarı Scroll EdildiÄŸinde Gözüken Header 12495
  • Sitenize Haber ve Duyuru Akışı Ekleyin 12456
  • Material Design Öne Çıkarılmış Menü Tasarımı 11076
  • Mobil Sitenize WhatsApp ve DiÄŸer Sosyal Paylaşım Linkleri Ekleyin 10837
  • Sitenize Kolayca Slider Ekleyin 10654
  • CSS ve jQuery ile Dönen Menü 9366
  • Sadece CSS ile Slider Yapımı 9360
  • Fareyle Birlikte Hareket Eden Arkaplan Resmi 9017
  • jQuery ile Scroll ve Arkaplan İliÅŸkisi 7654

Kategoriler

  • Photoshop Dersleri95
    • FotoÄŸraf Efektleri
    • Yazı Efektleri
    • Actionlar
    • Fırçalar
    • Patternler
    • İpuçları
  • After Effects Dersleri4
  • Illustrator Dersleri4
  • WordPress83
    • Eklentiler
    • Temalar
    • Güvenlik
  • Tasarım Unsurları113
    • PHP Dersleri
    • Bootstrap
    • HTML5
    • CSS3
    • jQuery
    • SEO
    • Kaynaklar
    • İlham Verenler
    • DiÄŸer Konular
  • Video Dersler53
  • Öne Çıkanlar104

Bağlantılar

  • Anasayfa
  • Hakkımızda
  • Reklam
  • Kullanım
  • Yazarlık BaÅŸvurusu
  • ArÅŸiv
  • İletiÅŸim

Bumerang - Yazarkafe

Kategoriler

  • Tasarım Unsurları 388
  • Öne Çıkanlar 104
  • Photoshop Dersleri 122
  • WordPress 105
  • Video Dersler 53
  • Illustrator Dersleri 4
  • After Effects Dersleri 4
  • Sizden Gelenler 3

Adobe Download
Tasarım dünyasına detaylı bir giriş yapmak mı istiyorsunuz? Creative Cloud'u şimdi bilgisayarınıza kurun!

Download Adobe Photoshop CC
Download Adobe After Effects CC
Download Adobe Flash Pro CC
Download Adobe Dreamweaver CC
Download Adobe Illustrator CC
Download Adobe InDesign CC

Uyuya mı kaldın?

10 dakikadır bir işlem yapmadın. Yoksa uyuya mı kaldın?
ÖNE ÇIKANLAR
  • Photoshop ile Flat Icon Hazırlama
  • WordPress SEO Kurulumu ve Ayarları
  • Photoshop ile Temel YaÄŸmur Efekti
  • Adobe Preview ile Tasarımlarınız Anında Apple Cihazınızda