Wordpress temaya tab menu ekleme

Arkadaşlar bundan 2 gün önce soru olarak açtığım bir konuyu bugün çözümünü sizlerle paylaşmak istiyorum. Ararken bu sorunun çözümü bir an kavrama yolu ile öğrenerek çözüme ulaştım. hzhatice.org sitemizdeki menu aklıma geldi ve kodlarını kullanarak çözüme ulaştım.

Konumuz, wordpress temanın istediğimiz yerine tab menu eklemek. Başlıyorum:

İlk önce bu dosyayı indiriniz bütün dökümanlar mevcuttur.


1- Script kodlarımızı ve images dosyalarımızı gerekli yerlere ekliyoruz.

tema klasörünüze js diye bir klasör açınız ve tabs.js ve imghover.js dosyalarını orya atınız.

2- Temanızın images klasörüne de mleft.gif , mright.gif ve RecentBkg.gif isimli resimleri atınız.

3- Temanızın header.php dosyasını açınız ve aşağıdaki kodu head tagından önce koyunuz:

<script>/js/tabs.js"></script>
<script>/js/imghover.js"></script>4- Tab menüyü temanızda nerde göstermek istiyorsanız aşağıdaki kodları oraya yapıştırınız:

• Ürün Bilgisi


• Sipariş


• Yorumlar


• Paylaş

Ürün Bilgisi Girilecek

Sipariş Bilgisi Girilecek

Paylaş Kısmı Burada Yer Alacak

<script>ShowTab(0);</script>

5- Son olarak da temanızın mevcut CSS dosyanızın en altına aşağıdaki CSS kodlarını yapıştırın...

.Recent { background: #EA85B9 url(images/RecentBkg.gif) repeat-x left top; padding: 10px; margin-bottom: 10px;}

.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: "Cambria"; text-transform: lowercase;}
.TabMenu li a { padding: 0px 0px 0px 9px; margin-right: 7px; 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: #DD127B;}
.TabMenu li a:hover span { color: #DD127B;}
.TabMenu li a:hover { background-position: 0% -27px; color:#fff; text-decoration: none;}
.TabMenu li a:hover span { background-position: 100% -27px; color:#fff;}

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

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

.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 #fff; 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;}Tab menuye ekleme ve çıkarma yapmak da mümkün.

Saygılarımla...

Yararlı bilgi sağ olasın.

Öyle düşünüyorum bende kardeşim. En az yüzlerce kişi olabilir benim durumumda. diğer yerlerde çok dağınık verilmiş bu konu. İnşaallah bundan sonra burdan bulurlar...

Güzel Anlatım Teşekkürler Ama Resim Rengi Kötü :D

Benim temadan kaynaklı bir sorun var. Nasıl çözebiliriz ?