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

Yeni WordPress menü sistemiyle birlikte önceden kullandığımız wp_page_menu ve wp_categories_menu özelliklerinin dışında kendi sıralamamıza ve düzenlememize göre ekelyeceğimiz wp_nav_menu olarak da bilinen bir fonksiyon girdi hayatımıza. Bunu kullanmak için önce temamıza bunun desteğini sağlamalı ve ardından menümüzü hazırlamalıyız. Bunu functions.php dosyasına birkaç ekleme yaparak ve menü sistemimizin çağrıldığı alanı düzenleyerek yapabiliriz. En basit yoldan, sizi sıkmadan bunu anlatmaya çalışacağım.

WordPress yönetim alanındaki Görünüm sekmesinden erişebileceğiniz Menüler sayfasıyla bu menülerimizi düzenleyebiliriz. Burada  bize küfür eder gibi (!) Temanızda menü desteği yok diyecektir. Bizde inatla temamıza bu desteği sağlayalım.

Destek sağlama kodu aşağıda.. Bu kodu temanızda bulunan functions.php dosyasına ekleyin. Yedeğini alın ha :). İşlemi bitirince dosyayı hemen kaydetmeyin.

// Temaya Menü Desteği //
add_theme_support( 'nav-menus' );

Bu temamıza menülerin desteğini sağladı. Ama menüleri kullanabilmek için hala eksik olan birşey var. Menü için alan açmalıyız. Hemen yukarıdaki kodun altına şunu da eklerseniz menüler sayfasına gittiğinizde bu küfür eder gibi karşımıza çıkan yazının yerine “Hangi menüyü kullanmak istersiniz efendim?” diye soran bir alanla karşılaşacaksınız. Ekleyin bu kodu.

register_nav_menu('anamenu', 'Ana Menü alanı');

Bu kodla birlikte Ana Menü alanı diye bir alan kaydetmiş olduk. Şimdi gönül rahatlığıyla dosyayı kaydedip sunucuya gönderebilirsiniz.

İlk aşama bitti. Geldik zurna ile vuvuzelanın çarpışmasına. Temamıza desteğimizi ekledik ama temayı kullanmak konusunda atmamız gereken bir adım daha var. O da temaya menüyü gösterecek alanı eklemek. Onun için genelde temaların menü alanları header.php içinde olduğundan, o dosyanın da yedeğini alarak düzenlemeye başlayın.

Aşağıdaki kodu siz menünüzün bulunduğu (wp_page_menu, wp_categories_menu) alana ekleyin. Ben de şu açıklamaları hazırlayayım.

<?php wp_nav_menu( array( 'theme_location' => 'anamenu', 'sort_column' => 'menu_order', 'fallback_cb' => 'wp_page_menu' ) ); ?>

Burada görebileceğiniz gibi yukarıda bahsettiğim wp_nav_menu özelliğini kullanıyoruz. Sonrasında theme_location ile bir önceki adımda kaydettiğimiz   alanın adını yazıyoruz. Burada dikkat etmeniz gereken rastgele bir menü değil, kaydettiğimiz alanın  adını çağırmamız. Menünüzü hazırlarken anlatacağım bunu. sort_column alanında menu dizilimi kullanıyoruz. Bu da listelemede düzenlenmiş görünüm sağlıyor. Burada en önemli ve can alıcı nokta eğer bir menü yapmayı unutursanız menü alanınızın boş kalmaması için ayarladığımız nokta. Bu wp_nav_menu ile birlikte gelen güzel bir özellik. fallback_cb ile menü yapmazsak wp_page_menu olan klasik sayfa menüsünü çağırıyoruz. Bu da bir nevi istepne (böyle yazıylıyordu sanırım) vazifesi görüyor. tema içine eklediğimiz kodları bitirdik. Eğer herşeyi düzgün ayarladıysanız sisteminizde menü eklemediğimizden şu an için sayfalar menüsü görünecektir. Hadi menümüzü oluşturalım.

WordPress yönetim alanına geçiş yapın. Bundan sonraki işlemlerimiz sürükle bırak tarzında olacak :). Görünüm sekmesindeki Menüler sayfasına geçiş yapın. Sol tarafta bulunan Tema alanlarında Temanız 1 menü destekliyor. Kullanmak istediğiniz menüyü seçinyazısını göreceksiniz. Ben size ne demiştim :). Şimdi öncelikle bir menü oluşturalım. Adını herhangi birşey yapın. Yani ne istiyosanız onu yazın. Sonra da en basitinden çalıştığını test etmek için sol alt tarafta bulunan sayfalardan Hepsini Seç butonuyla menüye ekleyin. Sonra sağ taraftaki menü alanından istediğiniz gibi sıralayın ve sol tarafta bize menü soran alanda yarattığınız menünün adını seçin. Menüyü kaydederek anasayfanıza bakın. Puff Merlin sitenize değneğiyle mi dokundu ne :)

Yeni menünüz eski temanızı daha efektif kılacak. Yakında Yeni WordPress ile gelen Post Type (Yazı Türleri) hakkında yazacağım. O yazıma da beklerim efendim… Resimler aşağıda…

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