So zeigen Sie ganz einfach eine Seitenliste mit Thumbnails in WordPress an

Möchten Sie Ihre WordPress-Seitenlisten auf einfache Weise ansprechender gestalten? Das Hinzufügen von Thumbnails ist eine einfache, aber effektive Technik, um die visuelle Attraktivität zu steigern und die Website-Navigation zu verbessern.

Das Anzeigen von Beitragsbildern neben Ihren Seitentiteln gibt Ihren Besuchern mehr Informationen über den Inhalt, sodass sie eher auf die Seiten klicken und diese besuchen.

Bei WPBeginner haben wir vielen Benutzern geholfen, ihre WordPress-Sites zu optimieren, und wir wissen, dass dieser Trick einen großen Unterschied machen kann. 

In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie eine Seitenliste mit Thumbnails in WordPress anzeigen.

Warum eine Seitenliste mit Thumbnails in WordPress anzeigen?

WordPress hat zwei verschiedene Beitragstypen, die als Beiträge und Seiten bezeichnet werden.

Seiten werden für beständigere Inhalte verwendet, wie z. B. „Über uns“, „Kontakt“ und „Dienstleistungen“, während Beiträge für Blog-Inhalte verwendet werden, die häufiger aktualisiert werden.

Ihre wichtigsten Seiten werden normalerweise aus Ihrem Hauptnavigationsmenü verlinkt, aber Sie haben möglicherweise weitere Seiten, die Sie anzeigen möchten.

Durch das Hinzufügen einer Seitenliste mit Thumbnails können Sie Ihre Links ansprechender gestalten als reine Textlinks und Ihren Besuchern eine bessere Vorstellung vom Inhalt jeder Seite auf Ihrer WordPress-Website geben.

Wenn Besucher engagiert und interessiert sind, werden sie wahrscheinlich mehr Seiten besuchen und länger auf Ihrer Website bleiben, was die Wahrscheinlichkeit erhöht, dass sie einen Kauf tätigen oder Ihrer E-Mail-Liste beitreten.

Nichtsdestotrotz sehen wir uns einige verschiedene Möglichkeiten an, wie Sie eine Seitenliste mit Thumbnails auf Ihrer Website anzeigen können. Verwenden Sie einfach die unten stehenden Schnelllinks, um direkt zu der Methode zu springen, die Sie verwenden möchten:

• Methode 1. Seitenliste mit Thumbnails anzeigen, indem Code zu WordPress hinzugefügt wird
• Methode 2. Seitenliste mit Thumbnails im WordPress Block Editor anzeigen

Methode 1. Seitenliste mit Thumbnails anzeigen, indem Code zu WordPress hinzugefügt wird

Eine Möglichkeit, eine Seitenliste mit Thumbnails anzuzeigen, besteht darin, Code zu Ihren WordPress-Dateien hinzuzufügen.

Diese Methode ist fortgeschrittener, aber der Vorteil ist, dass Sie anpassbare Shortcodes verwenden können. Anstatt die Liste jedes Mal manuell aktualisieren zu müssen, wenn Sie eine neue Seite veröffentlichen, generieren die Shortcodes automatisch eine aktualisierte Liste von Seiten für Sie.

Wenn Sie noch nie Code zu Ihrer WordPress-Website hinzugefügt haben, finden Sie in unserem Leitfaden für Anfänger zum Einfügen von Snippets aus dem Web in WordPress.

Dann müssen Sie den folgenden Code zu Ihrer functions.php-Datei hinzufügen, in einem standortspezifischen Plugin oder mithilfe eines Code-Snippet-Plugins:

add_shortcode('pagelist', function ($args) {
    $args = wp_parse_args($args, [
        'type'  => 'page',
        'limit' => 10,
    ]);
    $out = [];
    $ids = [];
    // Check if we have a predefined list od IDs
    if ( ! empty($args['id'])) {
        $ids = array_filter(explode(',', $args['id']), function ($id) {
            return ! empty($id);
        });
        $ids = array_map('intval', $ids);
    }
    // If we don't have a predefined list od IDs, get the latest posts based on 'limit' parameter
    if (empty($ids)) {
        $queryArgs = [
            'post_type'              => isset($args['type']) && post_type_exists($args['type']) ? $args['type'] : 'page',
            'posts_per_page'         => ! empty($args['limit']) && is_numeric($args['limit']) ? intval($args['limit']) : 10,
            'ignore_sticky_posts'    => true,
            'fields'                 => 'ids',
            'cache_results'          => false,
            'update_post_meta_cache' => false,
            'update_post_term_cache' => false,
        ];
        $ids = get_posts($queryArgs);
        wp_reset_postdata();
    }
    foreach ($ids as $id) {
        $img = has_post_thumbnail($id)
            ? get_the_post_thumbnail($id, [60, 60])
            : '<span class="wpb-post-list__no-image"></span>';
        $excerpt = has_excerpt($id) ? wpautop(get_the_excerpt($id)) : '';
        $out[] = "<a href='" . get_the_permalink($id) . "' class='wpb-page-list__item'>
            <div>{$img}</div>
            <div>
                <div><h4>" . get_the_title($id) . "</h4></div>
                {$excerpt}
            </div>
        </a>";
    }
    return "<div class='wpb-page-list'>" . implode('', $out) . "</div>";
});

Wir empfehlen, diesen Code mit WPCode hinzuzufügen. Es ist das beste Code-Snippet-Plugin auf dem Markt.

WPCode macht es sicher und einfach, benutzerdefinierten Code in WordPress hinzuzufügen, ohne die functions.php-Datei Ihres Themes zu bearbeiten.

Um loszulegen, müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie unser Tutorial zur Installation eines WordPress-Plugins.

Sobald das Plugin aktiviert ist, gehen Sie in Ihrem WordPress-Dashboard zu Code-Snippets » + Snippet hinzufügen .

Bewegen Sie auf der Seite „Snippet hinzufügen“ den Mauszeiger über die Option „Benutzerdefinierten Code hinzufügen (Neues Snippet)“ und klicken Sie auf die Schaltfläche „Benutzerdefiniertes Snippet hinzufügen“.

Wählen Sie als Nächstes im Popup-Fenster, das auf dem Bildschirm erscheint, „PHP-Snippet“ als Code-Typ aus.

Von dort aus müssen Sie einen Titel für Ihr Snippet hinzufügen, der alles sein kann, damit Sie sich daran erinnern, wofür der Code bestimmt ist.

Fügen Sie dann den obigen Code in das Feld 'Code-Vorschau' ein.

Schalten Sie danach einfach den Schalter von 'Inaktiv' auf 'Aktiv' um und klicken Sie oben auf der Seite auf die Schaltfläche 'Snippet speichern'.

Dieser Code-Schnipsel erstellt einen Shortcode, den Sie verwenden können, um Ihre Seitenliste mit Thumbnails überall auf Ihrer Website anzuzeigen.

Bevor Sie den Shortcode verwenden, müssen Sie den folgenden CSS-Code zu Ihrer Website hinzufügen, um sicherzustellen, dass Ihre Seitenliste gut angezeigt wird.

Wenn Sie dies noch nicht getan haben, lesen Sie unseren Leitfaden zum einfachen Hinzufügen von benutzerdefiniertem CSS zu Ihrer WordPress-Website.

.wpb-page-list{
    display: block;
    margin: 10px 0 35px;
}
.wpb-page-list__item{
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-column-gap: 16px;
    align-items: center;
    text-decoration: none;
    margin: 10px 0;
}
.wpb-page-list__item:hover h4{
    text-decoration: underline;
}
.wpb-post-list img,
.wpb-post-list__no-image{
    display: block;
    width: 60px;
    height: 60px;
}
.wpb-post-list__no-image{
    background: #aaa;
}
.wpb-page-list__item h4{
    font-size: 20px;
}
.wpb-page-list__item p {
    font-size: 1rem;
    color: #555;
}

Danach müssen Sie den folgenden Shortcode zu WordPress hinzufügen, um Ihre Seitenliste hinzuzufügen:

[pagelist]

Dieser Shortcode zeigt eine Liste Ihrer neuesten 10 Seiten an, sortiert nach Veröffentlichungsdatum. Sie wird automatisch aktualisiert, wenn neue Seiten hinzugefügt werden.

Wenn Sie die Anzahl der anzuzeigenden Seiten begrenzen möchten, können Sie den folgenden Shortcode verwenden:

[pagelist limit=3]

Ersetzen Sie einfach „3“ durch die Anzahl der Seiten, die Sie anzeigen möchten.

Um den Shortcode zu WordPress hinzuzufügen, öffnen Sie die Seite, die Sie bearbeiten möchten, und klicken Sie dann auf die Schaltfläche 'Plus' zum Hinzufügen von Blöcken.

Suchen Sie danach nach dem Block „Shortcode“.

Klicken Sie dann auf den Block „Shortcode“, um ihn zu Ihrer Website hinzuzufügen, und fügen Sie einfach den obigen Shortcode ein.

Wenn Sie fertig sind, stellen Sie sicher, dass Sie auf 'Speichern' oder 'Veröffentlichen' klicken, um Ihre Änderungen zu speichern.

Danach können Ihre Besucher Ihre Seitenliste mit Thumbnails anzeigen.

Sie können den Shortcode auch in einem Widget verwenden, um Ihre Seitenliste in Ihrer Seitenleiste oder Ihrem Footer anzuzeigen.

Seitenliste mit bestimmten Website-Seiten anzeigen

Um eine Seitenliste mit nur bestimmten Seiten anzuzeigen, müssen Sie den folgenden Shortcode zu Ihrer Website hinzufügen:

[pagelist id="20, 10, 35"]

Dieser Shortcode zeigt bestimmte Seiten anhand ihrer Seiten-ID an. Weitere Details finden Sie in unserem Leitfaden zum Auffinden von Seiten-IDs in WordPress.

Liste mit Ihren neuesten Blogbeiträgen anzeigen

Sie können auch den Shortcode verwenden, um eine Liste Ihrer neuesten Blogbeiträge anzuzeigen. Dies kann eine großartige Möglichkeit sein, die Seitenaufrufe Ihrer Blogbeiträge zu erhöhen.

Fügen Sie einfach den folgenden Shortcode zu WordPress hinzu:

[pagelist type=post]

So wird Ihre Liste mit Ihren neuesten Blogbeiträgen für Ihre Leser aussehen.

Seitenliste mit jeder veröffentlichten Seite anzeigen

Schließlich können Sie eine Seitenliste mit Thumbnails anzeigen, die jede von Ihnen veröffentlichte Seite enthält.

Dies kann nützlich sein, wenn Sie eine Archivseite oder eine HTML-Sitemap-Seite für Ihre Leser erstellen möchten. Die hinzugefügten Beitrags-Thumbnails machen sie ansprechender als eine einfache Seitenliste.

Sie müssen den folgenden Shortcode zu Ihrer Website hinzufügen:

[pagelist limit="-1"]

Wenn Sie neue Seiten veröffentlichen, wird Ihre Seitenliste automatisch aktualisiert.

Methode 2. Seitenliste mit Thumbnails im WordPress Block Editor anzeigen

Eine weitere Möglichkeit, eine Seitenliste in WordPress anzuzeigen, ist die Verwendung des WordPress Block Editors.

Hinweis: Bei Verwendung dieser Methode muss Ihre Seitenliste manuell erstellt und aktualisiert werden, da neue Seiten nach der Veröffentlichung nicht automatisch hinzugefügt werden.

Öffnen Sie dazu die Seite, die Sie bearbeiten möchten.

Klicken Sie dann auf das 'Plus'-Symbol zum Hinzufügen von Blöcken, um das Blockmenü zu öffnen.

Suchen Sie danach im Suchfeld nach „Spalten“.

Wählen Sie dann den Block 'Spalten'.

Dies öffnet eine Liste der verfügbaren Spaltenblöcke.

Wählen Sie den Block '30/70' Spalten. Wir verwenden die linke Spalte für die Thumbnail-Bilder und die rechte Spalte für den Seitentitel und eine kurze Zusammenfassung.

Klicken Sie dann auf das Symbol „Plus“ zum Hinzufügen eines Blocks.

Wählen Sie danach den Block 'Bild', um Ihr Beitragsbild hinzuzufügen. Dies gibt Ihnen die Möglichkeit, ein neues Bild hochzuladen oder eines aus Ihrer Mediathek auszuwählen.

Wenn Sie Ihr Bild verlinken möchten, klicken Sie auf das Symbol 'Link einfügen'.

Fügen Sie dann einfach die URL Ihrer Seite hinzu.

Nachdem Sie Ihr Bild hinzugefügt haben, klicken Sie in der rechten Spalte auf das Symbol „Plus“ zum Hinzufügen eines Blocks.

Suchen Sie dann nach dem Block „Überschrift“ und klicken Sie darauf, um ihn zu Ihrer Seite hinzuzufügen.

Geben Sie als Nächstes Ihren Seitentitel ein und markieren Sie ihn.

Klicken Sie dann auf das Symbol 'Link', um einen Link zur Seite hinzuzufügen.

Sie können wählen, ob der Link auf derselben Seite geöffnet werden soll oder in einem neuen Tab, indem Sie den Schalter ein- oder ausschalten.

Wenn Sie Text unter Ihrer Überschrift hinzufügen möchten, klicken Sie einfach erneut auf das Symbol 'Block hinzufügen' und wählen Sie den Block 'Absatz'.

Geben Sie dann einfach in den verfügbaren Textbereich ein.

Um weitere Elemente zu Ihrer Liste hinzuzufügen, die die gerade erstellte Formatierung verwenden, klicken Sie auf den Spaltenblock und wählen Sie das Optionsmenü mit den drei Punkten aus.

Wählen Sie dann die Option 'Duplizieren' aus der Dropdown-Liste.

Dies erstellt automatisch eine Kopie der Spalte.

Sie müssen lediglich die gleichen Schritte wie oben ausführen, um das Bild, die Überschrift und den Text zu ändern.

Wenn Sie mit den Änderungen an Ihrer Seitenliste fertig sind, klicken Sie oben auf der Seite auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“.

Jetzt sehen Ihre Besucher eine ansprechendere Seitenliste mit Beitrags-Thumbnails.

Hinweis: Es gibt einen weiteren Block namens 'Seitenliste'-Block, mit dem Sie eine Seitenliste ohne Thumbnails hinzufügen können.

Die obige manuelle Methode ist jedoch der einzige Weg, eine Liste mit Thumbnails über den Block-Editor hinzuzufügen.

Wenn Sie komplett benutzerdefinierte Seiten erstellen möchten, die auch eine Seitenliste mit Thumbnails enthalten, können Sie das Plugin SeedProd verwenden, um dies mit einem Drag-and-Drop-Builder zu tun. Weitere Details finden Sie in unserem Leitfaden zur Erstellung einer benutzerdefinierten Seite in WordPress.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ganz einfach eine Seitenliste mit Thumbnails in WordPress anzeigen. Möglicherweise möchten Sie auch unsere Expertenauswahl der besten WordPress Theme Builder und unseren Leitfaden zum Thema unendliches Scrollen zu Ihrer WordPress-Website hinzufügen sehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.