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

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  Türk Telekom'un Yeni Logosunu Değerlendiriyoruz

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

Örnek Görüntü :

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

  • Logo tasarımı: Logo, Şirketin Görsel Temsilidir
  • CSS ile Etkileyici İnteraktif Logo
  • Roots WordPress HTML5 Tema
  • WordPress’i Yavaşlatan Eklentileri Bulun
  • Google PageSpeed ile CSS ve JavaScript Dosyalarınızı Sıkıştırın
  • WordPress SEO Kurulumu ve Ayarları
  • WordPress’e Eklentisiz Yazar Bilgi Kutusu
  • WordPress Eklenti Türkçeleştirme : Twitter Widget Pro
  • DISQUS için widgetlar oluşturun!
  • WordPress Kullanan 10 Dünya Devi

Popüler Örnekler

  • Ambilight ile Bootstrap Slider Kullanımı 17045
  • Sitenize Haber ve Duyuru Akışı Ekleyin 12732
  • Yukarı Scroll Edildiğinde Gözüken Header 12614
  • Material Design Öne Çıkarılmış Menü Tasarımı 11535
  • Mobil Sitenize WhatsApp ve Diğer Sosyal Paylaşım Linkleri Ekleyin 10993
  • Sitenize Kolayca Slider Ekleyin 10853
  • Sadece CSS ile Slider Yapımı 9725
  • CSS ve jQuery ile Dönen Menü 9555
  • Fareyle Birlikte Hareket Eden Arkaplan Resmi 9227
  • jQuery ile Scroll ve Arkaplan İlişkisi 7766

Kategoriler

  • Photoshop Dersleri97
    • Fotoğraf Efektleri
    • Yazı Efektleri
    • Actionlar
    • Fırçalar
    • Patternler
    • İpuçları
  • After Effects Dersleri4
  • Illustrator Dersleri4
  • WordPress84
    • Eklentiler
    • Temalar
    • Güvenlik
  • Tasarım Unsurları118
    • PHP Dersleri
    • Bootstrap
    • HTML5
    • CSS3
    • jQuery
    • SEO
    • Kaynaklar
    • İlham Verenler
    • Diğer Konular
  • Video Dersler57
  • Öne Çıkanlar110

Bağlantılar

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

Kategoriler

  • Tasarım Unsurları 396
  • Öne Çıkanlar 110
  • Photoshop Dersleri 124
  • WordPress 106
  • Video Dersler 57
  • Illustrator Dersleri 4
  • After Effects Dersleri 4
  • Sizden Gelenler 4

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 T-Shirt Tasarımı
  • Mobil Uygulama Tasarımı ve Yazılımı Arasındaki Köprü, Zeplin!
  • Ders 2 : Bootstrap Grid (Izgara) Yapısı
  • Photoshop ile Işık Işınları Oluşturma
 

Yorumlar Yükleniyor...