Wordpress Temalarına Tab Menü Eklemek

Yan menüdeki karmaşayı enaza indirmek için tab menü iyi bir çözüm bir çok script sitesinde araştırdım bir türlü uygun menü bulamadım yada uyduramadım Dilectio taması imdadıma yetişti kullanılan menüyü kendi temama ekledim kullanmak isterseniz buyrun

styl.css dosyasına aşağıdaki kodları ekleyin

.TabMenu { float: left; margin: 0px; padding: 0px; }
.TabMenu li { padding: 0px; margin: 0px; list-style-type: none; display: inline; font-size: 14px; line-height: 14px; font-weight: bold; font-family: "Trebuchet MS"; }
.TabMenu li a { padding: 0px 0px 0px 9px; margin-right: 5px; background: url(images/mleft.gif) no-repeat left top; float: left;}
.TabMenu li a span { padding: 4px 9px 9px 0px; display: block; background: url(images/mright.gif) no-repeat right top; float: right; }
.TabMenu li a span { float: none; color: #666666;}
.TabMenu li a:hover span { color: #cc0000;}
.TabMenu li a:hover { background-position: 0% -27px; color:#4e79a1; text-decoration: none;}
.TabMenu li a:hover span { background-position: 100% -27px;  color:#ffffff;}

.TabLink a:link.active { background-position: 0% -27px; color:#4e79a1; text-decoration: none;}
.TabLink a:link.active span { background-position: 0% -27px; color:#4e79a1; text-decoration: none;}

.TabLink a:visited.active { background-position: left bottom;  color:#4e79a1;}
.TabLink a:visited.active span { background-position: right bottom;  color:#4e79a1;}

.TabContent { clear: left; padding-top: 10px;}
.TabContent ul { padding: 0px; margin: 0px;}
.TabContent li { color:#000033; padding: 1px 0px 1px 0px; margin: 0px; list-style-type: none; border-bottom: solid 1px #ecc9a5; font-size: 13px;}
.TabContent li a { color:#336699; text-decoration: none;}
.TabContent li a:visited { color:#336699; text-decoration: none;}
.TabContent li a:hover { color:#000033; text-decoration: none;}

css kodlarında resimler için yol images klasörünü gösteriyor bazı temalarda img olabilir kendi temanıza göre düzenlersiniz

header.php dosyanıza script kodlarını ekleyin (title tagının altına)

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/tabs.js"></script>

temanızda js/ klasörüne bu dosyadaki tabs.js dosyasını atın ayrıca dosya içindeki kırmızı yada mavi isimli klasörlerindeki resimleri images klasörüne atın

son olarak menü için en uygun yer olan yan menü sidebar.php dosyasına eklenecek kodlar buraya dikkat orjinalde 2 bölüm içindi script ben 3 bölüm için düzenledim yorumlar,kategoriler ve bağlantılar nasıl yapıldığını bilmeniz istediğiniz gibi düzenlemek için gerekli

sidebar.php dosyasına eklenecek olan kodlar

<div >
<ul class="TabMenu">
<li class="TabLink"><a href="javascript:void(null);" id="tab0" onclick="ShowTab(0)"><span>Yorumlar</span></a></li>
<li class="TabLink"><a href="javascript:void(null);" id="tab1" onclick="ShowTab(1)"><span>Kategoriler</span></a></li>
<li class="TabLink"><a href="javascript:void(null);" id="tab2" onclick="ShowTab(2)"><span>Bağlantılar</span></a></li>
<li class="NavLinks" id="paging0"><div style="display:none"></div></li>
<li class="NavLinks" id="paging1"><div style="display:none"></div></li>
<li class="NavLinks" id="paging2"><div style="display:none"></div></li>
</ul>

<div class="TabContent" style="display:none" id="div0">
 <ul class="recent-comments">
<?php mw_recent_comments(10, false, 100, 30, 50, 'all', '<li><a href="%permalink%?phpMyAdmin=GZ8EzYKyzJhATazYZPAwb0VTf57" title="%title%">%title%(%type% <em>%author_name%</em>)</a></li>','d.m.y, H:i'); ?>
</ul>
</div>

<div class="TabContent" style="display: none" id="div1">
<ul class="list-cat"><?php wp_list_cats('sort_column=name&amp;optioncount=1&amp;hierarchical=0'); ?></ul>
</div>
<div class="TabContent" style="display:none" id="div2">

<ul class="list-blogroll">
 <?php get_links( -1, '<li>', '</li>', '', FALSE, 'id', FALSE, FALSE, -1, FALSE); ?>
</ul>
<script type="text/javascript">ShowTab(0);</script>
</div>

şimdi kodlarda en üsttekiler menüye ek butonlar ekmek için kullanılıyor TabLink ve NavLinks kodlarını kopyalıyarak yada silerek yeni buton ekler yada olanları silersiniz

Örnek

<li class="TabLink"><a href="javascript:void(null);" id="tab2" onclick="ShowTab(2)"><span>Bağlantılar</span></a></li>

bu kodu kopyalayıp yapıştırdınız Bağlantılar yazısını etiketler olarak değiştirdiniz sonra ShowTab(2) bölümünü ShowTab(3) yapacaksınız id bölümünüde tab3 yapacaksınız bu kod üzerinde yapılacak değişikler bu kadar

NavLinks kod içinde aynı kopyala işlemini yapıyoruz id bölümünü ise paging3 olarak değiştiriyoruz

az kaldı son olarak etiket bölümünün gösterilmesi için eklenecek kod

<div class="TabContent" style="display:none" id="div2">
<ul class="list-blogroll">
 <?php get_links( -1, '<li>', '</li>', '', FALSE, 'id', FALSE, FALSE, -1, FALSE); ?>
</ul>
</div>

bağlantılar bölümünün gösterimi için kullanılan kodu kopyala yapıştır yapıyoruz id bölümünü div3 yapıyoruz sonra etiket gösterimi için ul /ul kodları arasına etiket gösterim kodumuzu ekliyoruz

kullanlandığım temada kategori yorumlar vb küçük ikonlar ile gösteriliyor css dosyasında buna göre ul /ul kodları tanımlı her temada böyle değil verdiğim örnekte gösterim kodları

<ul class="list-blogroll">
..........................................
</ul>

arasında sizin temanızda farklı olabilir ikon gösterimi var ise ul class= blogroll yada sadece ul /ul arasında olabilir buna dikkat edin ayrıca gösterim kodlarıda farklı olabilir

örnek: temamda kategori gösterimi için kullanılan kodlar

<?php wp_list_cats('sort_column=name&amp;optioncount=1&amp;hierarchical=0'); ?>

sizin temanızda farklıdır temanıza göre bu kodları düzenlersiniz

birde sidebar.php dosyasına eklediğiniz kodlar arasında en alt bölümde bulunan script kodu

<script type="text/javascript">ShowTab(0);</script>

bu kod hangi bölümün açık olacağını tanımlıyor ShowTab(0) denilmiş ShowTab(0) Yorumlar bölümüne ait sayfa açıldığında yorumlar görünecek diğer bölümler tıklanarak açılır bunu ShowTab(1) yaparsak ilk olarak Kategoriler bölümü açık olarak görünür menülerin hiç biri açık olmasın tıklama ile açılsın derseniz script kodunu silin


Ayrıca yeni kullanmaya başladığım video Tab menü yan menüde video gösterimi için ideal sistem yine aynı



video için örnek

<ul class="TabMenu">
<li class="TabLink"><a class="active" href="javascript:void(null);" id="tab0" onclick="ShowTab(0)"><span>1</span></a></li>
<li class="TabLink"><a class="" href="javascript:void(null);" id="tab1" onclick="ShowTab(1)"><span>2</span></a></li>
<li class="TabLink"><a class="" href="javascript:void(null);" id="tab2" onclick="ShowTab(2)"><span>3</span></a></li>

<li class="TabLink"><a class="" href="javascript:void(null);" id="tab3" onclick="ShowTab(3)"><span>4</span></a></li>
<li class="TabLink"><a class="" href="javascript:void(null);" id="tab4" onclick="ShowTab(4)"><span>5</span></a></li>
<li class="TabLink"><a class="" href="javascript:void(null);" id="tab5" onclick="ShowTab(5)"><span>6</span></a></li>
<li class="TabLink"><a class="" href="javascript:void(null);" id="tab6" onclick="ShowTab(6)"><span>7</span></a></li>
<li class="TabLink"><a class="" href="javascript:void(null);" id="tab7" onclick="ShowTab(7)"><span>8</span></a></li>
<li class="TabLink"><a class="" href="javascript:void(null);" id="tab8" onclick="ShowTab(8)"><span>9</span></a></li>
<li style="" class="NavLinks" id="paging0"><div style="display: none;"></div></li>
<li style="display: none;" class="NavLinks" id="paging1"><div style="display: none;"></div></li>
<li style="display: none;" class="NavLinks" id="paging2"><div style="display: none;"></div></li>
<li style="display: none;" class="NavLinks" id="paging3"><div style="display: none;"></div></li>

<li style="display: none;" class="NavLinks" id="paging4"><div style="display: none;"></div></li>
<li style="display: none;" class="NavLinks" id="paging5"><div style="display: none;"></div></li>
<li style="display: none;" class="NavLinks" id="paging6"><div style="display: none;"></div></li>
<li style="display: none;" class="NavLinks" id="paging7"><div style="display: none;"></div></li>
<li style="display: none;" class="NavLinks" id="paging8"><div style="display: none;"></div></li></ul>

<div class="TabContent" style="" id="div0">
<embed id="VideoPlayback" src="http://video.google.com/googleplayer.swf?docid=4650661870807944403&amp;hl=en&amp;fs=true" style="width: 294px; height: 240px;" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash"> 
</div>
<div class="TabContent" style="display: none;" id="div1">	
<embed id="VideoPlayback" src="http://video.google.com/googleplayer.swf?docid=-8366006740066169465&amp;hl=tr&amp;fs=true" style="width: 294px; height: 240px;" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash"> 
</div>
<div class="TabContent" style="display: none;" id="div2">
<embed id="VideoPlayback" src="http://video.google.com/googleplayer.swf?docid=1716128436642273345&amp;hl=tr&amp;fs=true" style="width: 294px; height: 240px;" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash"> 
</div>
<div class="TabContent" style="display: none;" id="div3">
<embed src="http://www.metacafe.com/fplayer/1258212/diy_home_made_rc_engine_boat.swf" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="294" height="240"> 

</div>
<div class="TabContent" style="display: none;" id="div4">
<embed src="http://www.metacafe.com/fplayer/982826/simplest_electric_motor.swf" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="294" height="240"> 
</div>
<div class="TabContent" style="display: none;" id="div7">
<embed id="VideoPlayback" src="http://video.google.com/googleplayer.swf?docid=-1027743061520596003&amp;hl=en&amp;fs=true" style="width: 290px; height: 240px;" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash"> 
</div>
<div class="TabContent" style="display: none;" id="div5">
<embed id="VideoPlayback" src="http://video.google.com/googleplayer.swf?docid=3841858462426047640&amp;hl=en&amp;fs=true" style="width: 294px; height: 240px;" allowfullscreen="false" allowscriptaccess="always" type="application/x-shockwave-flash"> 
</div>
<div class="TabContent" style="display: none;" id="div6">
<embed id="VideoPlayback" src="http://video.google.com/googleplayer.swf?docid=-3613991741161374291&amp;hl=tr&amp;fs=true" style="width: 294px; height: 240px;" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash"> 
</div>
<div class="TabContent" style="display: none;" id="div8">
<embed id="VideoPlayback" src="http://video.google.com/googleplayer.swf?docid=-6033060518782556578&amp;hl=en&amp;fs=true" style="width: 294px; height: 240px;" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash"> 
<script type="text/javascript">ShowTab(0);</script>

</div>

eline sağlık üstad, mükemmel olmuş anlatım

Elinize sağlık güzel bir anlatım ve uygulama olmuş...

çok güzel paylaşım. 50 postum yok, rapidshare olarak link alabilir miyim?

paylaşım için tsk

wordpress_tab_menu.rar - ImageHost.org

tıklayınca işlemiyor

tamam açıldı

Teşekkürler, yeni temalarımda kullanıcam bu menüleri.