WordPress jQuery Tab Menü

Benim çoğu zaman ihtiyacım olur ve kullanırım sizlerinde işinize yarar muhtemelen bu tab menü, kısa keste wordpress blo­gu­muza bunu nasıl ekle­riz?  onu söyle derseniz. Sizlere seve seve anlatırım, şimdi size hem jquery ile oluşan tab menünün kodlarını ve js dosyalarını vericem hemde örnek olarak göstericem.

Unutmayın ki aşa­ğı­daki kod­ları Sidebar.php dos­ya­mıza (veya tab menü­nün görün­me­sini iste­di­ği­niz yere) yerleştiriyoruz.

<!-- tab menu baslangic -->
<ul class="tabNav">
	<li class="current"><a href="#">Yeni Yazılar</a></li>
	<li><a href="#">Popüler Yazılar</a></li>
	<li><a href="#">Son Yorumlar</a></li>
</ul>
<div class="tabContainer">

    <!-- 1. tab -->
<div class="tab current">
<ul>
Yeni Yazılar içerik...
</ul>
</div>
<!-- 2. tab -->
<div class="tab">
<ul>
Popüler Yazılar içerik...
</ul>
</div>
<!-- 3. tab -->
<div class="tab">
<ul>
Son Yorumlar içerik...
</ul>
</div>
</div>
<!-- tab menu bitis -->

Kodumuzu istediğimiz yere koyduktan sonra sıra geldi şekillendirmesine onuda css dosyamıza eklicez.

ul.tabNav {float: left; list-style: none outside none; margin: 0; padding: 0; width: 100%;}
ul.tabNav li {float:left;margin: 0 4px 0 0;padding: 4px 0 0;}
ul.tabNav li.current {padding-top:0;}
ul.tabNav a {background:#EEE;border:2px solid #CCC; border-width: 1px 1px 0; color:#333;display: block;padding: 4px 4px 5px 4px;text-decoration: none;}
ul.tabNav li.current a {background:#EEE; border-top: 2px solid #CCC;border-right: 2px solid #CCC;border-left: 2px solid #CCC;padding: 6px;}
div.tabContainer {clear:both;float:left;width:100%;}
div.tabContainer div.tab {background:#FFF;border:2px solid #CCC;color:#000;display:none;padding:10px;}
ul.tabNav a:hover {text-decoration:none;background:#F5F5F5;}
div.tabContainer div.current {display:block;background:#FFF;}
div.tab p:last-child {margin-bottom:0;}
div.tabContainer ul li {background:#FFF;padding:0px;margin-left:15px;margin-bottom:1px;list-style-type:square;list-style-image:url(img/li.png);list-style-position:outside;}

Geldik son adıma bura­dan indi­re­ce­ği­niz dos­ya­daki jquery.js ve tabs.js dos­ya­la­rını ana dizine veya iç klasörlere atı­yo­ruz. (benim örneğimde anadizin/js/script olarak attım yani anadizinden bir iç klasöre gönderdim) sonra header.php’ye aşa­ğı­daki gibi iki kod ekliyoruz.

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/tabs.js" type="text/javascript"></script>

Aklınızda soru işareti kalmasın diye sizlere örnek olarakta hazırladım isterseniz demo jqery wordpress tab menü ye bakabilirsiniz.

Ben bu olayın detayını istiyorum diyorsanız yapan arkadaşın sitesi Tıkla