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…

Öncelikle kendi temanızın css dosyasını kopyalayıp (genelde style.css) kendinize göre ayarlama yapmalısınız. Bunu hazırladıktan sonra kullanmak istediğiniz kategorisinin ID değerini bilmelisiniz. Bunu Yazılar->Kategoriler menüsüne geldikten sonra istediğiniz kategorinin üstüne gelerek, tarayıcınızın durum çubuğunda görünen linkten alabilirsiniz. Değer id=xx gibi olacaktır. Bize lazım olan xx değeridir.

Bu işlemleri tamamladıktan sonra gelelim kodumuza. Bu kodu temanızın header.php kodu içine alanından önce eklemelisiniz. Lütfen çalışmaya başlamadan dosyalarınızın yedeğini alın. Yedek aldıktan sonra;

İşte Kod;

//Bu sizin kendi css dosyanız
<!--link rel="stylesheet" href="/blue.css" type="text/css" media="screen,projection" /-->

//Bu da kategoriye göre css in başlayacağı alan
< ?php if( in_category( 1 ) ) { ?>
<!-- link rel="stylesheet" href="/blue.css" type="text/css" media="screen"  /-->
< ?php } elseif ( in_category (2) ) { ?>
<!-- link rel="stylesheet" href="/yellow.css" type="text/css" media="screen"  /-->
< ?php } elseif ( in_category (33) ) { ?>
<!-- link rel="stylesheet" href="/black.css" type="text/css" media="screen"  /-->
< ?php }else {?>
< ?php }?>

Bu kodu sisteminize ekleyin. Else if komutlarını çoğaltarak her kategoriye bir css atayabilirsiniz. Kategori numaralarını 1-2 ve 33 yazan yerlerdeki gibi yerleştirin. Temsili bir kod oluşturdum ben size. Bütün işlem bundan ibaret :) Hadi kolay gelsin. Eğer kafanıza takılan birşey olursa yorum bırakmayı unutmayın.

Önce neler yapacağız şöyle bir bakalım;

• Temamızda bulunan comments.php içine kod ekleyeceğiz. (YEDEĞİNİ ALIN)
• Sonrasında da style.css içine kod ekleyeceğiz. (YEDEĞİNİ ALIN)

İşte kodlar;

Aşağıda vereceğim üç satır kodu gene aşağıda vereceğim gibi sıralamanız gerekecek. İlk önce kodlarımızı görelim.

<?php $i = 1; ?>
<div class="commentnumber">#<?php echo $i; ?></div>
<?php $i++; ?>

Ne şimdi bu diyenler için şöyle açıklayalım. burada “i” değişkenine bir sayı ve değer atıyoruz. ve bunu her foreach (tekrarlanan kod) komutu için 1 arttırıyoruz. Böylece rakamsal olarak bir artış oluyor.

Şimdi bu kodu aralara serpiştiriyorum ve o kodu aşağıya ekliyorum.

<ol id="commentlist">

<?php $i = 1; ?>
<?php foreach ($comments as $comment) : ?>
<li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
<?php echo get_avatar( $comment, 32 ); ?>
<?php comment_text() ?>

<p><cite><?php comment_type(_c('Comment|noun'), __('Trackback'), __('Pingback')); ?> <?php _e('by'); ?> <?php comment_author_link() ?> &amp;#8212; <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a></cite> <?php edit_comment_link(__("Edit This"), ' |'); ?></p>
<div class="commentnumber">#<?php echo $i; ?></div>
</li>
<?php $i++; ?>

<?php endforeach; ?>

Bu benim comment.php içindeki kod dağılımım. Siz de kendi temanızda yorum listesi başlangıcını bulun ve benim kodları nerelere ekledğime dikkat ederek bu kodları yerleştirin. Sonrasında kaydetmeden önce CSS stil dosyasına da şu aşağıdaki kodları ekleyin.

/* Yorum Numaraları */
.commentnumber {
position: absolute;
right: 5px;
top: 5px;
font-size: 18px;
color: #454545;
}
.commentlist li {
position: relative;
}
/* Yorum Numaraları */

Eğer sayılara bir de link eklemek isterseniz

#<?php echo $i; ?>

kodunun olduğu yeri şu kodla değiştirin.

<a href="#comment-<?php comment_ID() ?>" title="">#<?php echo $i; ?></a>

Dosyaları kaydedip sunucunuza gönderin. Hepsi bu kadar. İşte size bir de ekran görüntüsü. Zaten yorumlarda da var :))

Önce bir resim…

Site zaten demo alanı gibi oldu ama bir resim de şuraya ben eklemek istiyorum. Resmin üzerine tıklarsanız büyük halini de görebilirsiniz. Bu resimde görüldüğü üzere RSS simgesi üzerine geldiğinizde Bir başlık ve altında da bir link göreceksiniz. İşte bu script a href=” ile başlayıp devam eden link kodumuza eklediğimiz title ve yazdığınız linki alarak bu baloncuk içine yazıyor. bu bana güzel geldi ve kullanmak ihtiyacım vardı ve kullandım. Sizde kullanın diye buraya ekliyorum. bu kadar lak lak yeter. Hadi başlayalım…

İşte o kod!

Bu kod iki aşamalı oalrak düşünülebilir neden mi. Bir nerede kullanacağınız seçmenize gerek kalmayan kullanım var. Bir de istediğiniz yeri belirleyeceğiniz aşama. Şimdi öncelikle saf kodu ekliyorum buraya. Bu kodu header.php dosyası içine wp_head etiketinden önce ekleyin.

<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips()};
</script>

İşte bu kod dışında benim yaptığım gibi özel bir alan için de kullanabileceğiniz kod burda. Burada enable Tooltips alanını özelleştirebilirsiniz. Kod aşağıda :)

<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips("content")};
</script>

Yukarıda content yazarak sitemizdeki Content alanında tüm bulunan linkleri tooltip olarak ayarlamış olduk. Burada seçmeniz gereken id alanı div içinde kullandığımız id alanıdır.

Gelelim CSS olayına…

Bu kodu style.css dosyanıza direkt oalrak ekleyin. Gerisini java halleder :)

.tooltip{
width: 200px; color:#000;
font:lighter 11px/1.3 Arial,sans-serif;
text-decoration:none;text-align:center}

.tooltip span.top{padding: 30px 8px 0;
    background: url(bt.gif) no-repeat top}

.tooltip b.bottom{padding:3px 8px 15px;color: #548912;
    background: url(bt.gif) no-repeat bottom}

Bu aşamada bir imaj ve bir de java dosyası gerekli. Onu da şu aşağıdaki dosya içinde bulabilirsiniz. İndirdiğiniz dosya tam olarak bu anlattıklarım ve örnekleriyle doludur. Hadi Selametle… Orjinal Yazı!

[download id=”17″]

Öncelikle düzenlemeniz gereken iki dosya var. header.php ve style.css (temanızdaki style.css dosyası tek değilse uygun olanını seçin).

Başlayalım…

Öncelikle gerekli olan javascript kodu…

Bu kodu sitenizdeki header.php içinde etiketinden önce ekleyin.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#slide-panel").slideToggle("slow");
});
});
</script>

Gelelim HTML kodlarına :D

Bunları da header.php içinde etiketinden sonra istediğiniz bir yere ekleyin.

<div id="slide-panel">
<?php if ( ! is_user_logged_in() ){ ?>
<div class="loginregister">
<a href="<?php echo get_option('home'); ?>/wp-register.php">Kayıt Ol!</a> |
<a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">Şifremi Unuttum</a>
</div>
</div><!--Kullanıcı Girişi Biter-->
<?php } else { ?>
<div class="loginform">
<h2>Kontrol Paneli</h2><ul>
<li><a href="<?php echo get_option('home'); ?>/wp-admin/">Başlangıç</a></li> |
<li><a href="<?php echo get_option('home'); ?>/wp-admin/post-new.php">Yeni Yazı Oluştur</a></li> |
<li><a href="<?php echo get_option('home'); ?>/wp-admin/page-new.php">Yeni Sayfa Oluştur</a></li> |
<li><a href="<?php echo wp_logout_url( get_bloginfo('url') ); ?>" title="Logout">Çıkış</a></li></ul>
</div><!--giriş paneli biter-->
<?php }?>
</div><!--GİRİŞ PANELİ BİTER-->
<div class="slide"><a href="#" class="btn-slide"><?php if ( ! is_user_logged_in() ){ ?>Giriş<?php } else { ?>Çıkış<?php }?></a></div><!--Giriş Butonu Biter-->

Dosyasınızı sunucuya yollamayın :) style.css ile işimiz bitsin ondan sonra :) Ha bu arada dosyayı UTF-8 olarak kaydetmeyi unutmayın…

Evet en son aşama CSS…

Style.css dosyanızı açın ve en son satıra bir boşluk verip bu kodları ekleyin.

* {margin:0; padding:0; outline:0;}
#slide-panel{ background-color:#000;border-bottom-style:solid;border-bottom-width:2px;display:none;height:100px;margin:auto;}
.slide {width:950px; margin:auto;}
.btn-slide:link, .btn-slide:visited{color:#fff; float:right; display:block;font-size:14px; text-transform:uppercase; font-weight:bold;height:26px; padding:3px 0 3px 0;line-height:22px;text-align:center;text-decoration:none;width:100px; background-color:#000; font-family:Arial;}
.loginform {width:950px; margin:auto; color:#999; font-family:Arial, Helvetica, sans-serif;}
.formdetails {color:#FFF; font-size:12px;padding:5px;}
.formdetails input{border:none; padding:2px 5px 2px 5px; background-color:#EFEFEF;}
.loginregister {color:#999; padding:5px;}
.loginregister a:link, .loginregister a:visited {color:#FFF; font-size:11px; text-decoration:underline;}
.loginform h2 {padding:10px 10px 10px 0; font-size:18px; font-weight:normal; text-transform:uppercase;}
.loginform ul li {display:inline;}
.loginform ul li a:link, .loginform ul li a:visited {color:#FFF; font-size:12px; text-decoration:underline;}

Şimdi bütün dosyaları ftp ile suncuya yolalyın ve bir Ctrl+F5 çekin bakem sitenizin anasayfasına :D

Hadi Selametle..

İşte o Kod…

[notice type=alert]Eğer WordPress sisteminde yeniyseniz ya da PHP kodlama üzerine pek bilginiz yoksa bu kodu kullanmanızı pek tavsiye etmiyorum. Çünkü WordPress tema sisteminden iki dosyaya müdahale edeceğiz. Bunlar single.php ve style.css.[/notice]

Öncelikle yedek alarak ftp programı kullanarak temanızdaki single.php dosyasını indirin. Sonra açarak şu kodları istediğiniz yere yada content alanının aşağısına yerleştirin.

<div class="socials">
<a class="btn_email" href="mailto:?subject=<?php the_title(); ?>&amp;amp;body=<?php the_permalink() ?>">E-Posta</a>
<a class="btn_comment" href="#respond">Yorum</a>
<a href="http://del.icio.us/post?url=<?php the_permalink() ?>&amp;amp;title=<?php the_title() ?>" title="Submit to Del.icio.us" target="_blank" class="btn_delicious">Del.icio.us</a>
<a href="http://www.digg.com/submit?phase=2&amp;amp;url=<?php the_permalink() ?>&amp;amp;title=<?php the_title() ?>" title="Submit Post to Digg" target="_blank" class="btn_digg">Digg</a>
<a href="http://reddit.com/submit?url=<?php the_permalink() ?>&amp;amp;title=<?php the_title() ?>" title="Reddit'e Yolla" target="_blank" class="btn_reddit">Reddit</a>
<a href="http://technorati.com/faves?add=<?php the_permalink() ?>" title="Technorati" target="_blank" class="btn_technorati">Technorati</a>
<a href="http://furl.net/storeIt.jsp?t=<?php the_title() ?>&amp;amp;u=<?php the_permalink() ?>" title="Furl" target="_blank" class="btn_furl">Furl</a>
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>"&amp;t="<?php the_title(); ?>" target="blank" class="btn_face"> Facebook</a>
</div>

Bu işlemi yaptıktan sonra ftp üzerinden style.css dosyasını indirin ve aşağıdaki kodları style.css dosyasının en sonuna yapıştırın.

/* Social Bookmarks Style Baslangic */
.socials {font-size:10px; font-weight:bold; margin-bottom:10px; background-color:#FFFFFF; border:1px solid #BBB9B2; padding:5px 5px 5px 10px; width:575px;}
.socials a {margin-right:10px; color:#BFBCB3;}
.btn_email {background:url(images/mail.gif) left no-repeat; padding-left:15px;}
.btn_comment {background:url(images/comments.gif) left no-repeat; padding-left:15px;}
.btn_delicious {background:url(images/delicious.gif) left no-repeat; padding-left:15px;}
.btn_digg {background:url(images/digg.gif) left no-repeat; padding-left:15px;}
.btn_reddit {background:url(images/reddit.gif) left no-repeat; padding-left:15px;}
.btn_technorati {background:url(images/technorati.gif) left no-repeat; padding-left:15px;}
.btn_furl {background:url(images/furl.gif) left no-repeat; padding-left:15px;}
.btn_face {background:url(images/facebook.jpg) left no-repeat; padding-left:15px;}
/* Social Bookmarks Style Bitis */

Bu işlemi de yaptıysanız yaptıklarınızı son kez kontrol ederk single.php ve style.css dosyasını direkt olarak aldığınız yerlere yükleyin. Bundan sonrası okuyucularınızın paylaşımlarınıza kalmış. Ha bu arada az kaldı unutuyordum. Aşağıdaki dosyayı da indirin ve iiçndeki resimleri temanızın images klasörüne yükleyin. Aman diyim bu resimler olmazsa pek bi işe yaramaz sonra :D Orjinal Yazı ise WPFunc Üzerinde..

[download id=”12″]

Haydi Selametle…

Yazı Biterken Biten Şarkı: Manga – Üryan Geldim