Etiketler: , , , ,

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.


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; }

}

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.


<!-- Akordiyon Menü -->
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lib/jquery.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lib/chili-1.7.pack.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lib/jquery.easing.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lib/jquery.dimensions.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.accordion.js"></script>
	<script type="text/javascript">
	jQuery().ready(function(){
		// highly customized accordion
		jQuery('#list2').accordion({
			event: 'mouseover',
			active: '.selected',
			selectedClass: 'active',
			animated: "bounceslide",
			header: "dt"
		}).bind("change.ui-accordion", function(event, ui) {
			jQuery('<div>' + ui.oldHeader.text() + ' hidden, ' + ui.newHeader.text() + ' shown</div>').appendTo('#log');
		});
		// bind to change event of select to control first and seconds accordion
		// similar to tab's plugin triggerTab(), without an extra method
		var accordions = jQuery('#list2');
		jQuery('#switch select').change(function() {
			accordions.accordion("activate", this.selectedIndex-1 );
		});
		jQuery('#close').click(function() {
			accordions.accordion("activate", -1);
		});
		jQuery('#switch2').change(function() {
			accordions.accordion("activate", this.value);
		});
		jQuery('#enable').click(function() {
			accordions.accordion("enable");
		});
		jQuery('#disable').click(function() {
			accordions.accordion("disable");
		});
		jQuery('#remove').click(function() {
			accordions.accordion("destroy");
			wizardButtons.unbind("click");
		});
	});
	</script>
<!-- Akordiyon Menü-->

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.


<!-- Akordiyon Menü -->
	<fieldset>
		<legend>Akordiyon deneme</legend>
		<dl id="list2">
			<dt class="red">Kırmızı</dt>
			<dd>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
			</dd>
			<dt class="green selected">YeÅŸil</dt>
			<dd>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
			</dd>
			<dt class="blue">Mavi</dt>
			<dd>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
			</dd>
		</dl>
	</fieldset>
<!-- Akordiyon Menü -->

Ä°ÅŸ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 wp_get_archives('type=monthly'); ?>

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

Related Posts with Thumbnails

Eğer burayı ilk defa ziyaret ediyorsanız RSS Beslemesine abone olmanızı tavsiye ediyorum. Ziyaretiniz için teşekkür ederim!

Bu yazı Pazar, Temmuz 6th, 2008 tarihinde, saat 18:48 sularında ve Web Araçları kategorisi altında hazırlandı. Bu yazı hakkında yapılan tüm yorumları RSS 2.0 Beslemesi sayesinde takip edebilirsin. Siz bir yorum ya da kendi sitenizde trackback verebilirsiniz.