Ö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;
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.
Ö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…