WordPress Tema Navigasyon Menüsü ve Widget Alanları

Bu bölümde, kullanıcıların içeriklere kolayca ulaşmasını sağlayan navigasyon menüleri ve widget alanları konusunu derinlemesine ele alacağız. Daha önce functions.php içinde menü ve widget kayıtlarını yapmıştık. Bu kez işin görsel entegrasyonu ve daha gelişmiş kullanımı üzerine odaklanacağız.

🚀 Bu Yazıda Öğreneceklerimiz

wp_nav_menu() fonksiyonunun gelişmiş kullanımı
CSS ile stil verilmiş, özelleştirilebilir menüler
Birden fazla menü alanı tanımlamak
Sidebar ve footer widget alanlarını görsel olarak yerleştirmek
Kullanıcı dostu alanlar oluşturmak

🍔 1. Menülerin Temada Görsel Olarak Kullanımı

📌 Daha Önce Tanımlamıştık:

register_nav_menus([
    'ust_menu' => 'Üst Menü',
    'alt_menu' => 'Alt Menü'
]);

📌 Temada Menü Çağırma

header.php içine şu şekilde yazalım:

<nav class="ana-menu">
  <?php
    wp_nav_menu([
        'theme_location' => 'ust_menu',
        'menu_class'     => 'menu',
        'container'      => false
    ]);
  ?>
</nav>

🎨 2. Menüye CSS Uygulamak

.ana-menu .menu {
    display: flex;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.ana-menu .menu li {
    position: relative;
}
.ana-menu .menu li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}
.ana-menu .menu li:hover > a {
    color: #0073aa;
}

Böylece görsel olarak güzel bir yatay menü elde ederiz.

🧩 3. Footer Menüsü Oluşturma (Opsiyonel)

Footer’a ayrı bir menü eklemek istersen:

<footer>
  <?php
    wp_nav_menu([
        'theme_location' => 'alt_menu',
        'menu_class'     => 'footer-menu',
        'container'      => false
    ]);
  ?>
</footer>

📦 4. Widget Alanlarının Temada Kullanımı

📌 Sidebar Kullanımı (`sidebar.php`)

<?php if (is_active_sidebar('ana_sidebar')) : ?>
  <aside class="sidebar">
    <?php dynamic_sidebar('ana_sidebar'); ?>
  </aside>
<?php endif; ?>

Temada bunu göstermek için örneğin index.php veya single.php içine:

<div class="icerik-ve-sidebar">
  <main class="icerik">...</main>
  <?php get_sidebar(); ?>
</div>

📌 Footer Widget Alanı

<?php if (is_active_sidebar('footer_widget')) : ?>
  <div class="footer-widgets">
    <?php dynamic_sidebar('footer_widget'); ?>
  </div>
<?php endif; ?>

🎨 5. Widget Alanları İçin Basit CSS

.sidebar {
    width: 300px;
    float: right;
    padding: 20px;
    background: #f9f9f9;
}
.footer-widgets {
    display: flex;
    gap: 30px;
    background: #222;
    color: white;
    padding: 40px;
}
.footer-widgets .widget {
    flex: 1;
}
.footer-widgets h4 {
    color: #fff;
    border-bottom: 1px solid #555;
}

🔧 6. Çoklu Menü & Widget Destekli Yapı

Örneğin:

header.php → Üst Menü
sidebar.php → Dinamik widget alanı
footer.php → Hem menü hem widget alanı

Bu yapı sayesinde temanız daha profesyonel, kullanıcı dostu ve esnek olur.

✅ Özet

Bu bölümde:

wp_nav_menu() ile menüleri görsel olarak entegre ettik
Menüleri CSS ile şekillendirdik
Sidebar ve footer için widget alanlarını yerleştirdik
Çok bölgeli menü ve widget destekli bir yapı kurduk

Artık temamızda gezinti ve dinamik içerik alanları hazır!

🚀 Sonraki Yazı: Sayfalama ve Kategori Sayfaları

Bir sonraki yazıda şunları yapacağız:

Çok sayfalı blog sayfalarında sayfalama (pagination) ekleyeceğiz
category.php, archive.php, search.php gibi şablonları oluşturacağız
Belirli kategorilere veya arama sonuçlarına göre içerik filtreleme yapacağız