11 yorum

WordPress 3 İçin Menü Yapımı

WordPress 3.0 ile gelen özelliklerden “Özel Menü (Custom Menu)” özelliğinden biraz bahsedeyim istedim.

Temel Bilgiler

WordPress 3.0 yüklediğinizde “Görünüm (Appearance)” sekmesinde “Menüler (Menus)” isimli bir bölüm göreceksiniz. Menüler bölümünü açtığınızda ise karşınıza; kendinize özel menünüzü hazırlayabileceğiniz, bir ekran çıkacak.

Tema hazırlama ekranının üst kısmında “Kullandığınız temanın, menü bölgesi içermediği fakat hazırlayacağınız menüyü gereç olarak kullanabileceğinize…” dair bir uyarı görebilirsiniz. Temanızı hazır olarak edindiyseniz; yeni sürümünün bulunup bulunmadığına bakabilirsiniz ya da uyarıyı takmayıp, bir menü hazırlayıp gereç olarak kullanmaya başlayabilirsiniz.

Tema hazırlama ekranında “Menü İsmi (Menu Name)” kısmına bir menü adı yazıp, “Menüyü Kaydet (Create Menu)” butonuna tıklayarak menünüzü hazırlamaya başlayabilirsiniz. Bu aşamadan sonra “Özel Bağlantılar (Custom Links)”, “Sayfalar (Pages)” ve “Kategoriler (Categories)” sekmeleri aktif duruma gelecek. İlgili sekmelerden istediğiniz sayfaları, kategorileri işaretleyerek ya da bir bağlantı adresi girip menüye ekle diyerek menüye ekleyebilirsiniz. Menüye eklediğiniz öğeleri sürükle-bırak yaparak istediğiniz sıralama ile kaydedebilirsiniz. Hatta menü öğelerini sağa doğru sürükleyerek alt öğeler oluşturabilirsiniz. “Otomatik olarak ilk seviye sayfaları ekle (Automatically add new top-level pages )” seçeneğini işaretleyerek yeni oluşturduğunuz sayfaların menünüze otomatik olarak eklenmesini sağlayabilirsiniz. (Oluşturduğunuz sayfa için üst sayfa belirlemişseniz menüye otomatik eklenmez.)

Eğer temanız “Tema Konumları (Theme Locations)” destekliyorsa bu kısımdan; hangi menünün hangi konumda yayınlayacağını seçip kaydederek, menünüzü kullanmaya başlayabilirsiz.

Oluşturdunuz menünün görünümü ise hayal gücünüze ve “CSS” yeteneğinize bağlı olarak düzenleyebilirsiniz.

Temanıza Menü Desteği

Kullandığınız tema “Tema Konumları”nı desteklemiyorsa ve biraz kod bilginiz varsa, bu özelliği temanıza kendiniz de kazandırabilirsiniz. Temanızın klasöründe bulunan “functions.php” dosyasını bir kod editörü ile açın (Windows yüklü bilgisayarlarda hazır bulunan “Notepad” işinizi görür. Daha gelişmiş özellikleri için ücretsiz kod editörü Notepad++ kullanabilirsiniz). Bu dosyada “<?php ?>” kodları (tırnaklar hariç) arasında kalacak şekilde;

register_nav_menus(array(
'menubar' => 'Konum açıklaması'
));

kodunu eklerseniz temanızda “menubar” isimli bir konum oluşturmuş olacaksınız. Birden fazla konum eklemek için;

register_nav_menus(array(
'menubar' => 'Konum açıklaması',
'footer' => 'Konum açıklaması'
));

gibi bir kod kullanabilirsiniz. Bu kod ile temanızda “menubar” ve “footer” isimlerinde iki konum oluşturmuş olabilirsiniz. (“Konum açıklaması” kısmına konumu açıklayacak bir yazı ekleyebilirsiniz.)

Konumu tanımladık şimdi de bu konumu kullanan menünün sitenin neresinde görüneceğini belirleyelim. “menubar” konumu için sayfanın üst kısmı uygundur. “header.php” dosyası da üst kısmın görünümünü belirlediğine göre “header.php” dosyasını kod editörümüz ile açın ve uygun bir yere;

<?php wp_nav_menu( array( 'container_id' => 'menubar', 'theme_location' => 'menubar' ) ); ?>

kodunu ekleyin. Burada “container_id” menü öğelerinden oluşan listeyi, kapsayan “div” tagının “id” değeridir. “theme_location” ise menüyü biraz önce tanımladığımız konuma yerleştirir.

Artık wordpress yönetim panelinden bir menu hazırlayıp, tema konumlarından “menubar”ı seçtiğinizde; menümüz, biraz önce “header.php” dosyasına eklediğimiz kısımda gösterilmeye başlanacaktır.

Menü Kancaları

Eğer menünüz sizin için yetersiz kalıyorsa, başına ya da sonuna eklemek istediğiniz kodlar varsa ya da menüyü belirli bir kod filtresinden geçirmek istiyorsanız; wordpress içerisindeki “kancaları (hook)” kullanabilirsiniz. Örneğin menünüzün başına özel bir menü elemanı eklemek için;

function bizim_ menu_extra($content) {
$content = '<li class="menu-item">Özel içerikli öğe</li>' . $content;
return $content;
}
add_filter('wp_nav_menu_items', 'bizim_ menu_extra');

gibi bir kod kullanabilirsiniz. Yalnız bu kod tüm menüleri etkiler. Özel olarak wordpress admin panelinde oluşturduğunuz “Header” isimli bir menü için;

function bizim_ menu_extra($content) {
$content = '<li class="menu-item">Özel içerikli öğe</li>' . $content;
return $content;
}
add_filter('wp_nav_menu_header_items', 'bizim_ menu_extra');

fonsiyonunu kullanmanız gerekir. Üstteki iki fonksiyon arasındaki tek fark ikincide “wp_nav_menu_items” yerine “wp_nav_menu_{menu kısa ismi}_items” kullanılmasıdır. Menünüzün kısa ismini bilmiyorsanız; menü başlığınız ile aynı isimli bir etiket oluşturup bu etiketin kısa ismine bakarak menünüzün kısa adını öğrenebilirsiniz.

Oy ver:
YıldızYıldızYıldızYıldızYıldız
(3.5)

“WordPress 3 İçin Menü Yapımı” için 11 yorum yapılmış

  • Halim 28 Ağustos 2010, 4:44 pm

    “” kodları (tırnaklar hariç) arasında kalacak şekilde… demişsin hocam ama kodları yazmamışsın. ” ” kodları arasında hangi kodlar bunlar?

    Saygılar…

  • halibrahim 01 Eylül 2010, 3:42 pm

    Kusura bakmayın o tırnakların “<?php ?>” şeklinde olması gerekiyordu… Düzelttim. İnternetim olmadığından yazıyı evde yazıp, internet cafede yayınlamıştım. WordPress güvenlik sebebiyle o kısmı temizlemiş.

    PHP’de kodlar “<?php” etiketi ile başlar, “?>” etiketi ile biter. Yazılan da wordpress içerisindeki bir PHP fonksiyonu olduğundan bu etiketler arasında kalması gerekiyor.

  • seo teknikleri 12 Ekim 2010, 12:25 pm

    bu yararlı bilgiler için teşekkürler

  • Serhat 16 Mayıs 2011, 1:46 am

    Teşekkür ederim çok faydalı oldu. istediğim yerde yapabildim. ama özel menüde alt menü olarak atadığımı açılır menü şeklinde nasıl göstereceğim?

  • karolla 25 Mayıs 2011, 12:17 pm

    yahu ben özel menü kullanıyordum. fakat şuan temanız menüleri desteklemiyor diyor. benim ne yapmam lazım. var olan özellik kendi kendine nasıl kapanır yahu :)

  • halibrahim 29 Mayıs 2011, 4:14 pm

    Bunu yapmak için biraz css ve javascript bilgisi gerekiyor. Bu konularda bilginiz yoksa yaptığınız menünün kaynak kodlarını inceleyip http://www.dynamicdrive.com adresinden bulabileceğiniz bir açılır menünün kodu ile benzerlik kurabilirsiniz.

  • Ali 20 Ağustos 2011, 11:40 am

    Hocam süper anlatmışsınız çoğu arkadaşlar bu konuda çok zorluk çekiyorlar

  • halibrahim 29 Ağustos 2011, 9:31 am

    Rica ederim. Elimizden geldiğince…

  • Yaşar Önal 20 Eylül 2011, 8:37 pm

    Allah senden razı olsun. Google’dan ara tara hiçbir şeye ulaşamadım. En sonunda senin yazını buldum ve temamdaki menü konumlarını ayarladım. Footer ve headera menü yerleştirdim.

  • mehmet 21 Aralık 2011, 7:54 pm

    cok mahbule geçti kardeş cok sagol

  • tşk 24 Ocak 2012, 12:33 am

    Çok teşekkür ederim kullandım anlatımına sağlık.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>