Bir web sitesinin en önemli yapı taşlarından biri, iyi planlanmış ve kullanıcı dostu bir menüdür. Ziyaretçilerin sitenizde kolayca gezinmesini sağlayan menüler, aynı zamanda içeriklerinizi organize etmenize de yardımcı olur. WordPress kullanıcıları için menü oluşturmak oldukça kolaydır. Bu rehberde, WordPress menü ekleme işlemini adım adım, resimli gibi anlatımla detaylı bir şekilde açıklıyoruz.
🧭 WordPress Menü Nedir?
WordPress menü, ziyaretçilerin sayfalara, kategorilere, yazılara veya özel bağlantılara kolayca erişmesini sağlayan gezinme yapısıdır. Genellikle sitenin üst kısmında (header) veya yan kenarında (sidebar) yer alır.
📌 Menü ile Neler Ekleyebilirsiniz?
- Ana sayfa bağlantısı
- Hakkımızda ve İletişim sayfaları
- Blog kategorileri
- Dış bağlantılar (örneğin sosyal medya profilleri)
- Özel bağlantılar (anchor link, harici sayfa vb.)
⚙️ WordPress Menü Oluşturma Adımları
1. WordPress Paneline Giriş Yapın
İlk olarak WordPress yönetici panelinize giriş yapın:www.siteniz.com/wp-admin
2. Görünüm > Menüler Sayfasına Gidin
Sol menüden:
Görünüm > Menüler yolunu izleyin.
Bu bölümde mevcut menüleri görebilir, yeni menü oluşturabilir ve düzenleyebilirsiniz.
3. Yeni Bir Menü Oluşturun
Eğer sıfırdan bir menü oluşturmak istiyorsanız:
- “Yeni Menü Oluştur” bağlantısına tıklayın
- Menü ismini girin (örneğin: Ana Menü)
- “Menüyü Oluştur” butonuna tıklayın
4. Menüye Öğe Ekleme
Sağ tarafta yer alan bölümlerden istediğiniz sayfa, yazı, kategori veya özel bağlantıyı menünüze ekleyebilirsiniz.
➕ Sayfa Ekleme:
- Hakkımızda, İletişim gibi sayfaları işaretleyin
- “Menüye Ekle” butonuna tıklayın
🔗 Özel Bağlantı Ekleme:
- URL kısmına bağlantıyı yazın
- Metin kısmına görünen ismi yazın
- “Menüye Ekle”ye tıklayın
🧭 Kategori Ekleme:
Blog kategorilerinizi seçerek menüye dahil edebilirsiniz
5. Menü Yapısını Düzenleme
Menüye eklediğiniz her bir öğe kutu halinde görünür. Bu kutuları sürükleyerek:
- Sıralamayı değiştirebilir
- Alt menüler (açılır menü) oluşturabilirsiniz
💡 Alt menü için bir öğeyi diğerinin altına doğru sürükleyip biraz içeri kaydırmanız yeterlidir.
6. Menü Konumunu Seçme
Menülerin nerede görüntüleneceği temaya göre değişir. Genellikle:
- Üst Menü (Primary Menu)
- Alt Menü (Footer Menu)
- Mobil Menü
kutucukları bulunur. Menü konumunu işaretleyip “Menüyü Kaydet” butonuna tıklayın.
🧩 WordPress’te Mega Menü Ekleme (Gelişmiş Seçenek)
Eğer siteniz geniş içerikli ise, Mega Menü kullanarak daha organize bir yapı kurabilirsiniz. Bunun için aşağıdaki gibi eklentileri kullanabilirsiniz:
| Eklenti Adı | Özellikler |
|---|---|
| Max Mega Menu | Sürükle-bırak menü düzenleme, ikon ekleme |
| WP Mega Menu by Themeum | Renkli, ikonlu ve widget destekli mega menüler |
📱 Menülerin Mobil Uyumu Nasıl Sağlanır?
Modern temaların çoğu, menüleri mobil uyumlu şekilde sunar. Ancak özel tema kullanıyorsanız şunlara dikkat edin:
- Menü “hamburger” ikona dönüşüyor mu?
- Açılır menüler tıklanabilir mi?
- Geniş ekranlar için bozulma var mı?
Responsive yapıda bir menü için CSS medya sorguları veya özel JS menü scriptleri gerekebilir.
🧠 Menü Düzenlemede Sık Yapılan Hatalar
- Çok fazla öğe eklemek (karışıklık yaratır)
- Konum atamayı unutarak menüyü görünmez yapmak
- Mobilde test etmemek
- Harici linklere
target="_blank"eklememek
✅ Sonuç: Etkili Bir Gezinme Deneyimi Oluşturun
WordPress ile menü oluşturmak hem kolay hem de oldukça esnek bir işlemdir. Gerek sayfa yapınızı düzenlemek, gerek kullanıcı deneyimini iyileştirmek adına menüler oldukça kritik rol oynar. Bu rehberi takip ederek siz de kısa sürede ziyaretçiler için etkili bir gezinme sistemi oluşturabilirsiniz.
🧪 Örnek: Mobil Uyumlu HTML/CSS Menü Kodu
Aşağıdaki kod, küçük projelerde veya özel tema geliştirenler için basit ve responsive bir navigasyon menüsü sunar.
📄 HTML:
htmlKopyalaDüzenle<nav class="nav">
<div class="logo">LOGO</div>
<div class="menu-toggle" onclick="toggleMenu()">☰</div>
<ul class="nav-links" id="navLinks">
<li><a href="/">Ana Sayfa</a></li>
<li><a href="/hakkimizda">Hakkımızda</a></li>
<li><a href="/hizmetler">Hizmetler</a></li>
<li><a href="/iletisim">İletişim</a></li>
</ul>
</nav>
🎨 CSS:
cssKopyalaDüzenle.nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #1d1d1d;
padding: 10px 20px;
}
.logo {
color: white;
font-size: 24px;
}
.nav-links {
list-style: none;
display: flex;
gap: 20px;
}
.nav-links li a {
color: white;
text-decoration: none;
}
.menu-toggle {
display: none;
font-size: 24px;
color: white;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.nav-links {
display: none;
flex-direction: column;
background-color: #1d1d1d;
width: 100%;
}
.menu-toggle {
display: block;
}
}
🧠 JavaScript (çok basit menü aç-kapa):
htmlKopyalaDüzenle<script>
function toggleMenu() {
const navLinks = document.getElementById('navLinks');
navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
}
</script>
🧩 Max Mega Menu Eklentisi ile Gelişmiş Menü Kullanımı
🔧 Kurulum Adımları:
- WordPress paneline giriş yapın
- Eklentiler > Yeni Ekle sekmesine gidin
- “Max Mega Menu” yazarak arama yapın
- Yükle ve Etkinleştir butonuna tıklayın
⚙️ Kullanım Adımları:
- Görünüm > Menüler bölümüne gidin
- Menü konumunu “Mega Menu Etkin” yapın
- Her bir menü öğesi için “Mega Menü” sekmesi açılacaktır
- Bloklar, ikonlar ve özel HTML öğeleri ile menüyü zenginleştirebilirsiniz
🚀 Avantajları:
- Kolay sürükle-bırak düzenleme
- İkon ekleme, satır/sütun yapıları
- Mobil uyumlu mega menüler
- Widget veya kısa kod desteği