MENU

WordPress üst menü kategorileri oluşturmak

Anasayfa » Makalelerim » WordPress üst menü kategorileri oluşturmak
WordPress üst menü kategorileri oluşturmak

Bu konu ile ilgili daha önceden eklenti tanıttım kod vs. verdim ancak bu seferkinde şöyle bir anlatım yapacağım. Beğendiğimiz şık css menüleri nasıl WordPress’e uyarlayıp menü oluşturabiliriz.

Öncelikle daha önceden açtığım WordPress menü eklentisini inceleyebilirsiniz. Yada JQuery Widget gelişmiş menü eklentisini kullanıp hızlı menüler oluşturabilirsiniz. Gelelim konumuza şimdi Güzel CSS Menüleri inceleyelim.

13 tane çok güzel css menü Buradan 1 tane seçtik ben “Slate CSS Menu”yü seçtim ve bilgisayarıma indirdim.

Burada seçmemiz gereken bir şey var oda menü’nün hangi renk olucağı? Ben Maviyi seçtim ve maviye göre gidiyorum.

http://i1126.photobucket.com/albums/l618/rooteto/slate.png?t=1322570780

CSS Menü Kategori uyarlaması

Dosyayı indirdik ve Winrar ile klasöre çıkarttık. Slate klasöründeki style.css dosyasını notepad++ ile açıyoruz. 4 Farklı renk olduğu için ayrılmış durumda ben mavi olanı kopyalıyorum.


/* ---------------------- Blueslate nav ---------------------- */
.blue #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(images/blueslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.blue #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.blue #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.blue #slatenav ul li a{display:block;float:left;color:#D5F1FF;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{color:#fff;background:transparent url(images/blueslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- END Blueslate nav ---------------------- */

Yukarıdaki kodu WordPress Temanızın style.css dosyasında en alta yapıştırın.

Daha sonra index.html’yi notepad++ ile açıyoruz ve şu kodu kopyalıyoruz.

</pre>
<div class="blue">
<div id="slatenav">
<ul>
	<li><a class="current" title="css menus" href="http://www.13styles.com/css-menus/slate/">Home</a></li>
	<li><a title="css menus" href="http://www.13styles.com/css-menus/slate/">About Us</a></li>
	<li><a title="css menus" href="http://www.13styles.com/css-menus/slate/">Services</a></li>
	<li><a title="css menus" href="http://www.13styles.com/css-menus/slate/">Our Work</a></li>
	<li><a title="css menus" href="http://www.13styles.com/css-menus/slate/">Contact Us</a></li>
</ul>
</div>
</div>
<pre>

Şimdi yukarıdaki HTML Kodumuz sayesinde menüleri tek tek oluşturabiliriz. Tek tek oluşturmanızın size sağladığı faydalardan 1 tane söyliyim.
CPU Kullanımını azaltıcak.

Ama biz otomatik olarak eklemesini istiyoruz öyle değilmi :) Onuda hemen yapalım rahata kavuşun.

Alttaki kodu header.php de uygun yere ekleyin. Logo üstüne veya altına kaydedin menünüz tamamdır.

</pre>
<div></div>
<pre>
Rooteto Teknoloji Blogu

Rooteto WordPress, Sosyal Medya, Teknoloji, HD Resimler ve Video paylaşımında bulunan bağımsız olarak çalışan online haber teknoloji sitesidir.

Yaklaşık 1 Milyondan fazla tekil aylık ziyaretci ile Rooteto'yu büyük yapan teknoloji topluluklarıdır. 2009 yılında kurulan Rooteto'nun genel merkez ofisi İzmir / Bornova'dadır.