Kapitel 7: Sidebar & Widgets anpassen

7.1 Sidebar in functions.php registrieren

Sidebar registrieren

Fügen Sie in functions.php hinzu:

function mein_theme_widgets_init() {
    register_sidebar(array(
        'name'          => __('Sidebar', 'mein-theme'),
        'id'            => 'sidebar-1',
        'description'   => __('Hier Widgets hinzufügen.', 'mein-theme'),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ));

    // Zweite Sidebar (optional)
    register_sidebar(array(
        'name'          => __('Footer Widget Area', 'mein-theme'),
        'id'            => 'footer-1',
        'description'   => __('Widgets im Footer.', 'mein-theme'),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ));
}
add_action('widgets_init', 'mein_theme_widgets_init');

7.2 sidebar.php erstellen

Einfachste sidebar.php

<aside id="secondary" class="widget-area">
    <?php if (is_active_sidebar('sidebar-1')) : ?>
        <?php dynamic_sidebar('sidebar-1'); ?>
    <?php else : ?>
        <!-- Standard-Widgets, falls keine aktiv sind -->
        <section class="widget">
            <h2 class="widget-title">Suche</h2>
            <?php get_search_form(); ?>
        </section>

        <section class="widget">
            <h2 class="widget-title">Neueste Beiträge</h2>
            <ul>
                <?php
                $recent_posts = wp_get_recent_posts(array(
                    'numberposts' => 5,
                    'post_status' => 'publish',
                ));
                foreach ($recent_posts as $post) :
                ?>
                    <li>
                        <a href="<?php echo get_permalink($post['ID']); ?>">
                            <?php echo $post['post_title']; ?>
                        </a>
                    </li>
                <?php endforeach; ?>
            </ul>
        </section>
    <?php endif; ?>
</aside>

7.3 Widgets im Dashboard hinzufügen

Nach der Registrierung können Sie Widgets hinzufügen:

1. Gehen Sie zu Design → Widgets
2. Wählen Sie "Sidebar" links
3. Klicken Sie auf "Widget hinzufügen"
4. Wählen Sie ein Widget (z.B. "Kategorien", "Suche")
5. Konfigurieren Sie das Widget
6. Klicken Sie auf "Speichern"

7.4 Benutzerdefinierte Widgets erstellen

Ein einfaches "Über mich"-Widget erstellen

Fügen Sie in functions.php hinzu:

class Mein_Über_Mich_Widget extends WP_Widget {
    function __construct() {
        parent::__construct(
            'mein_über_mich_widget',
            __('Über mich', 'mein-theme'),
            array('description' => __('Zeigt "Über mich"-Informationen an.', 'mein-theme'))
        );
    }

    // Frontend-Anzeige
    public function widget($args, $instance) {
        echo $args['before_widget'];
        
        if (!empty($instance['title'])) {
            echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
        }
        
        echo '<div class="über-mich-widget">';
        if (!empty($instance['bild_url'])) {
            echo '<img src="' . esc_url($instance['bild_url']) . '" alt="" class="profil-bild">';
        }
        if (!empty($instance['text'])) {
            echo '<p>' . esc_html($instance['text']) . '</p>';
        }
        echo '</div>';
        
        echo $args['after_widget'];
    }

    // Backend-Formular
    public function form($instance) {
        $title    = !empty($instance['title']) ? $instance['title'] : '';
        $bild_url = !empty($instance['bild_url']) ? $instance['bild_url'] : '';
        $text     = !empty($instance['text']) ? $instance['text'] : '';
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>">Titel:</label>
            <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>"
                   name="<?php echo $this->get_field_name('title'); ?>"
                   type="text" value="<?php echo esc_attr($title); ?>">
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('bild_url'); ?>">Bild-URL:</label>
            <input class="widefat" id="<?php echo $this->get_field_id('bild_url'); ?>"
                   name="<?php echo $this->get_field_name('bild_url'); ?>"
                   type="text" value="<?php echo esc_url($bild_url); ?>">
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('text'); ?>">Text:</label>
            <textarea class="widefat" id="<?php echo $this->get_field_id('text'); ?>"
                      name="<?php echo $this->get_field_name('text'); ?>"><?php echo esc_textarea($text); ?></textarea>
        </p>
        <?php
    }

    // Speichern
    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title']    = !empty($new_instance['title']) ? strip_tags($new_instance['title']) : '';
        $instance['bild_url'] = !empty($new_instance['bild_url']) ? esc_url($new_instance['bild_url']) : '';
        $instance['text']     = !empty($new_instance['text']) ? strip_tags($new_instance['text']) : '';
        return $instance;
    }
}

// Widget registrieren
function mein_theme_register_widgets() {
    register_widget('Mein_Über_Mich_Widget');
}
add_action('widgets_init', 'mein_theme_register_widgets');

7.5 Sidebar-Styles anpassen

CSS für Sidebar hinzufügen

Fügen Sie in style.css hinzu:

/* Sidebar */
.widget-area {
    width: 30%;
    float: right;
    padding-left: 30px;
}

.widget {
    background: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.widget-title {
    font-size: 1.2rem;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #1a73e8;
}

.widget ul {
    list-style: none;
    padding: 0;
}

.widget ul li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.widget ul li a {
    color: #333;
    text-decoration: none;
}

.widget ul li a:hover {
    color: #1a73e8;
}

/* Responsive */
@media (max-width: 768px) {
    .widget-area {
        width: 100%;
        float: none;
        padding-left: 0;
        margin-top: 30px;
    }
}

📝 Übung 7: Sidebar mit Widgets erstellen

Ziel: Erstellen Sie eine Sidebar mit Widgets.

Schritte:

1. Registrieren Sie eine Sidebar in functions.php
2. Erstellen Sie sidebar.php
3. Fügen Sie Widgets im Dashboard hinzu
4. Stylen Sie die Sidebar mit CSS

---

✅ Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Eine Sidebar in functions.php zu registrieren
• ✅ sidebar.php zu erstellen und dynamic_sidebar() zu verwenden
• ✅ Widgets im Dashboard hinzuzufügen
• ✅ Benutzerdefinierte Widgets zu erstellen
• ✅ Die Sidebar responsive zu gestalten

Nächstes Kapitel: Wir lernen Navigationsmenüs anzupassen.

➡️ Zu Kapitel 8: Navigationsmenüs →