Kategori İsimlerini Linksiz Yazdırmak

Öncelikle herkese tekrardan merhaba. İşlerin yoğunluğundan paylaşamadığım kodlardan özür dilemiştim bugün öğlen gibi friendfeed sitesinde. Şimdi bir yarım saat boşluk buldum. Siteyle ilgili ayarlamaları, değişiklikleri yaptım ve yaptığım değişikliklerden bir tanesini yayınlayayım dedim. Anasayfa içerisinde hem yayınladıklarımın bir listesini çıkartmak, hem de siteyi gezen kişilere içeriğin hangi kategoriye bağlı olduğunu anlatabilmek adına kategori isimlerinden daha çok onları anlatan arkaplanları sevmişimdir hep. Ama bu güne kadar ya tema türü uyumlu olmadı bunun için ya da ben hep eklemeyi unuttum bu kodları. Hazır elime boş vakit geçmişken hayata geçirdim. Anasayfama bakarsanız her yazının “Devamı” butonunun üstünde fligran olarak eklenmiş imajlar göreceksiniz. Bunlar hangi kategoriye bağlıysa ona göre değişen resimler. Bunları css “class” larına eklediğim kategori isimleriyle sağlıyorum.

Bunu yapabilmek için öncelikle tema içerisinde kategori isimlerini linksiz bir biçimde getirmeliydim. Biliyorsunuz ki the_category() fonksiyonu yazının bağlı olduğu kategorileri arşiv linkleriyle beraber getirmekte. Bunu css atamak için kullanmak sakıncalı ve sıkıntılı oluyor. Şöyle ki;

Siz the_category fonksiyonunu kullandığınızda karşınıza gelen sonuç şu oluyor.

<a href="/kategori/kategori-adiniz">Kategori Adınız</a>

Ama bunu css için bir html kodda kullanamıyoruz. Bunu yapabilmek adına kategori ismini linksiz bir biçimde ve slug (nice name) versiyonunu çağırmamız gerekmekte. Aksi takdirde css kodlarını yazmamız mümkün olmuyor. Çünkü arada boşluk ve özel karakter ile isimlendirdiğimiz kategorilerimiz var. Aşağıdaki kodu yazdım kendi kullanımım ve paylaşımım için.

Kod;

Aşağıdaki kodu sitenize eklerken temanız içerisinde bulunan functions.php düzenleyeceksiniz. Bu dosya temanızın düzgün çalışması için gereklidir ve işinize başlamadan önce yedek almanız tavsiye edilir. functions.php dosyası wp-content/themes/temanizin-adi/ klasörünün altında bulunur. Kodu en altta bulunan ?> işaretinden önceye ekleyiniz

Yukarıdaki uyarıyı okuyarak aşağıdaki kodu temanızın functions.php dosyasının içine ekleyiniz.


//Kategori Bazlı CSS İçin Kategori İsmi Yazdırmak
function kategori_ismi($ayirici = ' ') { //$ayirici the_category() fonksiyonunda da var
    $kategoriler = (array) get_the_category(); //kategorileri çağıralım

    $liste = '';
    foreach($kategoriler as $kategori) {    // herbiri icin düzeltelim
        $liste .= $ayirici . $kategori->category_nicename; //linksiz halde seo uyumlu "slug" versiyonu çağıralım
    }
    echo $liste; //yazdıralım
}
//Kategori Bazlı CSS İçin Kategori İsmi Yazdırmak

Yukarıdaki kodu temanızın istediğiniz bir alanında kullanabilmek için yazmış olduğumuz fonksiyonu aşağıdaki gibi çağırabiliriz.

<?php kategori_ismi() ?>

Genel olarak başlıktaki anlatımım bitti. Ancak bunu benim gibi anasayfanızda yazılarınızı ayırmak için kullanacaksanız devam ediniz.

Kategori Bazlı CSS Arkaplan Uygulamak

Yukarıdaki kodu kullanarak kategori_ismi adlı fonksiyonumuzu oluşturduk. Bunu anasayfamızda ve kategori (archive) sayfamızda veya arama sonucu sayfalarımızda ayırıcı bir özellik olarak kullanabiliriz. Bu anlattığımı hayata gerçirebilmek için temanızı tanımanız ve css kodlarını (kopyala yapıştır bile olsa) düzenleyebilmeniz gerekmektedir.

Öncelikle benim yaptığım gibi anasayfanızda gösterecekseniz index.php dosyanızı ve style.css dosyanızı düzenlemeniz gerekmekte. Tabii bir de buna uygun resimlerinizi ayarlamalısınız. Ya da resim kullanmak istemiyorsanız arka plana direkt olarak renk de uygulayabilirsiniz.

Bu satırdan itibaren anlatılacak olan uygulamalar WordPress, Tema Kodlama ve CSS bilgisi gerektirmektedir. Ne yapabileceğiniz bilmiyorsanız lütfen bildiğini düşündüğünüz kişilerden destek isteyiniz. Bu uyarı yedek almayı unutmamanız ve hatalı birşey olduğunda üzülmemeniz için yazılmıştır.

Öncelike index.php dosyası içerisinde bulunan “loop” alanını bulun. Bu alan sizin genel okuma ayarlarında belirttiğiniz sayı kadar anasayfa içeriğinin gösterilmesini sağlayan alandır. Bu alanda her bir yazı belli divler içerisinde veya tasarıma göre kutular içerisinde gösterilir. Kod örneğini kendi temama göre ekledim. Sizin temanız farklılık gösterebilir.


<!-- kutucuk başlar --->
<div id="post-<?php the_ID(); ?>" class="postbox <?php kategori_ismi() ?>">
	<!-- thumb başlar -->
	<div class="post-thumb">
		<a href="<?php the_permalink() ?>" rel="bookmark"><img class="thumb" src="<?php tj_get_image($post->ID, 'thumbnail'); ?>" alt="<?php the_title(); ?>"" /></a>
	</div>
	<!-- thumb biter -->    	
	<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Kalıcı Bağlantı: <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
	<!-- özet başlar -->
    <div class="post-exerpt" text-align="justify">
		<?php tj_content_limit(get_theme_mod('limit_char')); ?>	
    </div> 
	<!-- özet biter -->               
	<div class="clear"></div>
</div> 
<!-- kutucuk biter -->

Bunun örnek olarak bu yazı için yapacağı çıktı şöyle olacaktır. Tabii anasayfada kullandığım için bunu sadece anasayfada görebilirsiniz.


<!-- kutucuk başlar --->
<div id="post-yazi_id" class="postbox wordpress">
	<!-- thumb başlar -->
	<div class="post-thumb">
		<!-- Yazı imajı yolu ve resmi-->
	</div>
	<!-- thumb biter -->    	
	<!-- Başlık ve link -->
	<!-- özet başlar -->
    <div class="post-exerpt" text-align="justify">
		<!-- Yazı Özetim -->	
    </div> 
	<!-- özet biter -->               
	<div class="clear"></div>
</div> 
<!-- kutucuk biter -->

Yukarıda gördüğünüz alan benim temamdaki yazıyı gösteren alanım. Işıklandırdığım satırdaki fonksiyon ismini görmüşsünüzdür umarım. Ve çıktıdaki kategori ismini. Kategori ismini bir “class” olarak atadım ki bununla ilgili bir css kodu yazabileyim. İşte style.css dosyasına bunun için ihtiyacımız var. Aşağıdaki kodlarda ben ilgili resim klasörüne attığım imajı arka plan olarak kategori ismi bazlı kullanacağım.

CSS;


.wordpress {background: url(images/bg/wprs.png) no-repeat right bottom;}
.internet {background: url(images/bg/intrnt.png) no-repeat right bottom;}
.jquery-kodlama {background: url(images/bg/jqry.png) no-repeat right bottom;}
.cssjavascript {background: url(images/bg/cssjv.png) no-repeat right bottom;}
.hakkimda {background: url(images/bg/hakk.png) no-repeat right bottom;}
.php {background: url(images/bg/phpp.png) no-repeat right bottom;}

Yukarıdaki class cssleri benim sitede bulunan birkaç kategoriden alıntı. Gördüğünüz gibi ben sadece resimleri atamayı uygun gördüm. Siz isterseniz arkaplan olarak renk ayarlayabilirsiniz. Bunu yaparsanız yazı rengini de değiştirmeniz gerekebilir. Bunu unutmayın.

Aklınıza takılan ve/veya anlamadığınız bir yer varsa bana bu yazıya yorum bırakarak veya iletişim formunu kullanarak erişebilirsiniz.

Selametle…

7 thoughts on “Kategori İsimlerini Linksiz Yazdırmak”

  1. <code>
    $category = get_the_category();
    echo $category[0]->cat_name;
    </code> bunu neden kullanmıyoruz?

    1. Erol, Onun çıktısı Türkçe karakter, Özel karakter ve boşluklar içerecektir. Bunu düzeltmek için bütün o karakterleri temizleyen str_replace kullanmamız gerekir. Ya da preg_match ile temizletmemiz gerekir. Hazır wordpress bunu bize nicename özelliğiyle sağlıyorken ekstra kodlar yazmamız pek bir anlamsız olur. "senin yazdığın kod ne kadar kısa ki" diyebilirsin ancak en temiz bunu yapabiliyorum :))

  2. Merhaba, Serkan kardeşim bir şey sormak istiyorum ben son konular diye bir alan yaptım orada son yayınlanan yazıları alıyorum, her yazının üstüne bağlı olduğu kategoriyi yazdırmak istedim bu kodu kullandım
    $kategori = get_the_category();
    $cat_id = $kategori[0]->cat_ID;
    echo get_cat_name( $cat_id );

    ama benim yazılarım şu şekilde "kategori>ortakategori>altkategori" ben bu alt kategoriyi nasıl alıcam kardeşim bi türlü yapamadım kardeşim nasıl yapıcaz

  3. Bu kod ile her kategoriye farklı bir arkaplan yapabilir miyim ? Aslında body class ile yaptım ancak bu sadece kategori sayfalarında işe yarıyor. Benim istediğim ise bir yazıya girildiğinde o yazının arka planının da kategori ile aynı olması.
    Örneğin Futbol kategorisinin kategori sayfası da altındaki yazılarda yeşil, basketbol kategorisinin kategori sayfası ile altındaki konuların sayfaları mavi olacak gibi.

    1. Burak,

      Genel anlamda fonksiyonda bir sayfa kısıtlaması yok. class ya da id olarak attattığın kategori adları single.php içinde de çalışır. eğer yukarıda belirttiğim gibi fonksiyonu single.php içinde doğru şekilde çağırırsan bir sıkıntı olmaz. ben önceki temamda arkaplan resmi atmak için yapmıştım bunu keza iç sayfalarda da çalışıyordu.

Comments are closed.