jQuery eklentileri katkılarıyla websitelerinin görselli bir adım daha ilerlerken tasarımcıların ihtiyaç duydukları özellikler hazırladıkları websitelerine kazandırmak için daha az çaba sarf ediyor olmaları sanırım özellikle kodlama safhasıyla ilgilenenler için büyük nimet olsa gerek.
Başlıktan da anlaşılacağı gibi şimdi bahsedeceğim eklenti sayesinde sitenize akordiyon menü yapabilirsiniz. Beş çeşit akordiyon menünün kodlarını elde edebilirsiniz. Jörn Zaefferer‘in yazısında gördüğüm bu jQuery eklentisini inceledim ve daha önce görmediğim sıra dışı akordiyon menülerin olduğunu gördüm. Hatta beğendiğim bir tanesinini kodlarını ayırıp WordPress “Default” temasında denedim. “#list2″ olarak adlandırılan akordiyon menünün bahsettiğim temanın sidebar.php dosyasına uygun hale getirdim.
jQuery akordiyon menü eklentisini indirmek için şuradaki sayfayı ziyaret edebilirsiniz.
Şimdi gelelim WordPress’in “Default” taması için uyarladığım #list2 olarak adlandırılan menünün kodlarına ve sayfaya yerleştirilmesine;
Önelikle yukarıda belittiğim sayfadan gerekli dosyaları indirin ve .zipli dosyadan çıkarın.
Klasörün içindeki “lib” klasörünü ve “jquery.accordion.js” dosyasını temanın içine atın.( gerekli .js dosyalarımızı elde ettik)
Şimdi de gerekli kodlara sıra geldi.
Bir metin editörü açın ve içine aşağıdaki kodları yapıştırıp menu.css olarak kaydedin.
[css]
fieldset { padding: 0px; }
legend { font-weight: bold; }
pre { margin-bottom: 1em; }
li { list-style-type: none; }
#list2 { width:195px; }
#list2 {
height: 210px;
border: 1px solid #eee;
overflow: hidden;
}
#list2 .red {
height:25px;
font-size:20px;
width:195px;
color: #ffffff;
background-color: red;
}
#list2 .green {
height:25px;
font-size:20px;
width:195px;
color: #ffffff;
background-color: green;
}
#list2 .blue {
height:25px;
font-size:20px;
width:195px;
color: #ffffff;
background-color: blue;
}
#list2 dd { height: 130px; overflow: hidden; }
}
[/css]
Evet gerekli stil dosyamızıda oluşturduk. Bu dosyayıda tema klasörünün içine atıyoruz.
Şimdi de dosyalarınımı çapırmaya geldi. Tema klasöründeki head.php dosyasını açıpyoruz ve <head> </head> taglerinin arasına aşağıdaki kodu yapıştırıyoruz.
[php]
[/php]
Bu işlemi de tamamladıktan sonra temamızda görüntüleme işi kaldı. Bunun için sidebar.php dosyamızı açıyoruz ve yan menüden sonra görüntülemek istiyorsak oryada aşağıdaki kodları yağıştırıyoruz.
[php]
[/php]
İşte menümüz hazır. yukarıda belirttiğim “ Buraya ekleme yapın.” yerine isterseniz metin girebilir yada göstermek istediğiniz menün kodlarını yapıştırabilirsiniz. Mesela arşivinizi aylara göre görüntülemek istiyorsanız bu cümllerin yerine aşağıdaki kodu girebilirsiniz.
[php]
[/php]
Çalışmamızın sonunda elde edeceğimiz çıktı aşağıdaki gibi olması gerekiyor.
Mümkün oldukça basite indirgeyerek anlatmaya çalıştım umarım faydalı olmuştur. Kolay gelsin.
arkadaşım gerçekten güzel bir anlatım.sitemin birinde uygulamaya çalışacağım.ellerine sağlık
bir sorum olacak.http://themes.wordpress.net/?s=scary
buradaki temayı kullanıyordum.1 gün sorunsuz kullandım.ertesi gün açılır kapanır menü kendi kendine açılı vaziyette sabit kaldı.sorunu bir türlü çözemedim.2.5.1 kullanıyorum.2.6.2 beta dada denedim sonuç alamadım.bu sorunu nasıl aşabilirim.ne yapmalıyım.teşekkürler
Bende bir önceki temamda bazı js sorunları almıştım ki bu sorunlarla localhostum karşılaşmamıştım. Fakat dosyalarımı hosta gönderince çıkan sorunu çözmeye çalıştım. Öncelikle belirtmediğim js dosyasının olduğunu düşündüm, ancak herşey düzgündü. Daha sonra üst menü ikonlarımdan biri silince soeun çözülmüştü.
Sendeki sorunu önce header.php dosyasında aramalısın ki zaten senin menün tema ile geliyor. O zaman eklediğin videoların ortaya çıkrdığı bir sorun olabilir diye düşünüyorum. Ne alaka şimdi diyeceksin ama dedim ya yukarıda benim başıma gelen olayda biraz garip.