WordPress Tipp: Die neusten Blog-Artikel mit Thumbnails anzeigen

Eine tolle Möglichkeit deine Leser auf deine neusten Blog-Artikel aufmerksam zu machen, ist eine Liste der neusten Artikel in der Sidebar oder auch im Footer anzuzeigen. Und da es für die Leser noch viel ansprechender ist, wenn du nicht nur die Artikel-Überschriften, sondern auch die entsprechenden Vorschaubilder-Bilder anzeigst, zeige ich dir kurz wie das funktioniert.

1. Die neusten Artikel mit query-posts anzeigen

Um die 5 neusten Artikel deines Blogs anzuzeigen, kannst du folgenden Code verwenden.

<?php query_posts('showposts=5'); ?>
<ul class="recent-posts">
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile;?>
</ul>

Natürlich kannst du noch etliche weitere Einschränkungen für die Sortierung der Artikel machen. Um nur die 5 neusten Artikel einer Kategorie (z.B. der Kategorie: News) anzuzeigen, verwendest du folgenden Code.

<?php query_posts('cat=news&showposts=5'); ?>
<ul class="recent-posts">
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile;?>
</ul>

Im WordPress Codex findest du eine genaue Beschreibung, was du mit query_posts so alles anstellen kannst.

2. Thumbnail-Bilder hinzufügen

Seit der WordPress-Version 2.9 gibt es eine neue, praktische Möglichkeit Thumbnails für deine Artikel zu verwenden. Eine ausführliche Beschreibung, wie du die Thumbnail-Funktion verwendest findest du im Artikel »Using The New Post Thumbnail Feature In WordPress 2.9«.

Um die Thumbnail-Funktion in deinem WordPress-Theme zu aktivieren, musst du folgenden Code in die functions.php Datei deines Themes einfügen.

if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' );

Anschließend findest du die neue Option »Beitrags-Miniaturbild« rechts auf der Artikel-Seite im Admin-Bereich. Über »Miniaturbild setzen«, kannst du deinem Artikel ein Thumbnail-Bild hinzufügen.

WordPress neuste Blog-Artikel mit Thumbnails

Um die Thumbnails im WordPress-Loop der index.php und single.php Datei einzufügen, verwendest du jetzt folgenden Code-Schnipsel.

<?php the_post_thumbnail(); ?>

3. Die Thumbnails in der Neusten Artikel-Liste anzeigen

Um die Thumbnails in deiner Neuste Artikel-Auflistung anzuzeigen, erweiterst du Codeaus Schritt 1 um folgende Zeile (Zeile 5 in der Code-Ansicht).

<?php query_posts('cat=news&showposts=5'); ?>
<ul class="recent-posts">
<?php while (have_posts()) : the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array( 90,90 ), array( 'class' => 'recent-thumbs' )); ?></a>
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
</li>
<?php endwhile;?>
</ul>

In meinem Beispiel linke ich vom Thumbnail auf den jeweiligen Artikel, verkleinere die Größe der Thumbnails auf 90×90 Pixel und gebe ihnen die CSS-Class: recent-thumbs. So kann ich meine Neusten Artikel später leichter mit CSS stylen.

Das war’s auch schon, deine neusten Artikel sollten jetzt inklusive Thumbnails angezeigt werden.

Hast du noch Fragen oder Anregungen zu meinem kleinen WordPress-Tutorial? Dann schreibe mir doch einfach einen Kommentar. Ich freue mich auf dein Feedback!

27 Kommentare

  1. Vielen Dank für diesen tollen Tipp! Ich wusste gar nicht, dass man mit WordPress 2.9 so einfach Thumbnails hinzufügen kann. Ich freue mich schon darauf, diese Funktion auszuprobieren :)

  2. @Barbara: Ja, ich habe das auch erst vor kurzem getestet. Wenn man vor hat, etwa Thumbnail-Bilder zu erstellen finde ich es eine klasse Möglichkeit. Der Artikel den ich im Text erwähnt habe, ist ein super Tutorial :-)

    Und auch auf dem WP Engenieer Blog gibt es mehrere ausführliche Artikel zur Thumbnail-Funktion.

    Viele Grüße
    Ellen

  3. Hallo Ellen,
    ich bin bei meinem Problem auf dein Tutorial gestoßen und wollte noch mal kurz etwas nachfragen, bevor ich mich im einzelnen damit auseinandersetze (dauert bei mir immer alles ziemlich lang, weil ich gerade erst anfange mich damit zu beschäftigen).

    Mein Problem: Über das App “networked blogs” habe ich meinen WordPress blog auf meine Facebook Fanpage geleitet. Dort erscheint immer dieses Standardvorschaubild vom wordpressblog (das mit dieser Allee). Bei WordPress kann ich das ja anpassen mit einem eigenen header und eigenem Hintergrund. Aber auf Facebook erscheint immer diese nicht zu meiner Seite passende Standardvorschau.

    Kann mit dem obigen Tutorial das ändern oder ist das etwas anderes? Und wenn ja, hast du ein Tipp wie ich das sonst ändern könnte?

    Liebe Grüße,
    Marc

    • @Marc: Vielen Dank für deinen Kommentar :-) Ich finde es klasse, dass du einen WordPress-Blog hast!

      In diesem Artikel geht es nur um eine Auflistung der neusten Blog-Artikel auf dem Blog (genau wie hier auf Elmastudio im Footer). Wenn du die Header-Ansicht auf deinem eigenen Blog schon geändert hast könnte es sein, dass du einfach eine Weile warten musst bis die Ansicht bei “networked blogs” ebenfalls angepasst wird (dann liegt das Problem am Cache).

      Da ich den Dienst selbst aber noch nicht ausprobiert habe bin ich nicht 100% sicher, wie das Vorschaubild der Blogs erstellt wird. Ging das automatisch? Hast du schon probiert, dein Account zu löschen, und dich noch einmal neu einzutragen?

      Vielleicht könntest du mir kurz Feedback geben, dann kann ich dir vielleicht etwas besser weiterhelfen :-)

      Viele Grüße
      Ellen

  4. Guten Morgen Ellen,

    ich habe mich zu früh gefreut ich benutzt WordPress3 und klappt es nicht. Ich muss sagen ich weiß noch nicht mal wo ich den 1. Code einfügen solle… hast du ein Tipp für mich

    PS: Sorry wegen meine Rechtschreibung aber mein DE ist noch nicht so weit.

    Gruß

    • @Franzose, vielen Dank für deinen Kommentar :-)

      Der Code sollte eigentlich auch für die 3.0 Version funktionieren. Ich verwende den gleichen Code hier auf dem Blog für den Slider im Footer (Aktuelle Artikel).

      Einsetzen kannst du den Code z.B. in der Sidebar.php Datei oder in der footer.php Datei. Die Thumbnail-Funktion müsstest du dann noch wie im Punkt 2 beschreiben, aktivieren.

      Ich wünsche dir viel Erfolg, falls es immer noch nicht klappt, melde dich einfach noch einmal, ja :-)

      Viele Grüße,
      Ellen

      • Hallo Ellen,

        Vielen Dank für deine Hilfe.
        Ich habe punkt2 auch gemacht.
        Ich sehe in Admin Bereich immer noch nichts, ich glaube ich bin zu Doof.

        /wp-content/themes/twentyten/function.php, da habe ich punkt2 eingefügt oder muss ich irgendwo in der Admin Verzeichnis einfügen?

        Ich bin mehr an Joomla und Typo gewohnt, WordPress ist wirklich ganz neu für mich.

        Merci pour ton Aide.

        • @Franzose, nein, das bist du ganz bestimmt nicht!!! Ich habe es gerade eben im TwentyTen Theme ausprobiert, es ist wichtig, dass du den Code aus Punkt 2 in deiner functions.php ganz unten (als allerletztes) einfügst.

          Außerdem hat sich der Text im Abmin-Bereich der Artikel (zumindest in der deutschen WP-Version) zu “Artikelbild” geändert. Ich werde das Bild im Artikel noch anpassen.

          Hoffe so klappt es,
          Viele Grüße
          Ellen

  5. Hi Ellen,

    wollte mich nochmal kurz bei dir zurückmelden. Du hattest Recht mit deiner Vermutung, dass ich einfach ein bisschen warten musste, bis das Bild geändert wurde. Gerade als ich meinen Blog gestartet habe, hatten die bei “networked blogs” wohl für ein paar Tage ziemliche Probleme… Aber dann hat es funktioniert:)

    Nochmal vielen Dank für deine Hilfe!

    Liebe Grüße,
    Marc

  6. Super, liebe Ellen. Ich habe mich schon die ganze Zeit gewundert, warum ich bei mir das Feld “Artikelbild” nicht finden konnte. Schon witzig, dass die WP-Entwickler ein neues Feature einbauen, das man dann erst umständlich aktivieren muss.

    Doch dank Deiner hervorragenden Anleitung habe sogar ich das geschafft, nachdem ich kapiert hatte, dass der Code in der functions.php vor dem letzten ?> eingefügt werden muss. Vorher hat das andauernd Fehlermeldungen produziert.

    Vielen Dank!
    Jürgen

  7. Hi

    ich bau mir gerade meinen Blog (Theme: 2010) zusammen und versuche auf der Startseite gekürzte Artikel mit kleinem Bild hinzubekommen.
    Danke für den tollen Artikel. Zumindest hab ich es jetzt schon mal geschafft, die thumbnail Funktion als solche ausfindig zu machen.
    In welcher Datei muss ich denn jetzt die oben unter Punkt 3 gannten Codezeilen einbauen?

    LG und Danke

    Hansjörg

  8. Danke Ellen,

    ich greife das Thema mal im Bezug zum “WordPress 3.1 – Netzwerk” wieder auf:

    Folgendes:
    Ein Theme unterstützt die Artikel-Bild-Einbinden”-Funktion. Somit auch die Thumbnail-Ausgabe im Frontend.

    Nachdem ich eines unserer WordPress-Blogs für das Netzwerk freigeschaltet hatte, war die Thumbnail-Funktion für Artikelbilder nicht mehr aufrufbar.

    Die Funktion, Artikelbilder einzufügen, ist in einem Netzwerk einfach nicht vorhanden.

    Habt ihr Ideen oder Ansätze, wie man die “Artikel-Bilder-Einbinden”-Funktion, inklusive Post-Thumbnails auch für Blogs eines Netzwerks bereitstellen kann?

    Hatte jemand von euch in der Vergangenheit ähnliches Problem?

    Lieben Gruß,
    Jonathan

  9. Hallo Ellen,

    ich kann ein Artikelbild einfügen, sehe aber im Editor das Bild nicht, auch der Website auch nicht. Welche Codeschnipsel fehlen mir noch?

    Viele Grüße
    Daniel

  10. Hallo Ellen,
    hast mir gerade jede Menge Arbeit mit diesen Snippets erspart. Vielen viele Dank dafür :)

    lg
    @das_menikin

  11. Hi Ellen,

    gibt es denn auch eine Möglichkeit die Ausgabe nur von dem den neuesten Artikel anders zu gestalten? Ich würde gern den neuesten Artikel anders darstellen als die folgenden.

    Greetinx Nick

  12. Danke Ellen,
    genau den Beitrag habe ich gesucht! Mit WordPress 3.+ geht das ja ganz einfach, wenn man es findet… Vor lauter Bäumen habe ich den Wald nicht mehr gesehen, und dass stundenlang….

    Jetzt habe ich nur noch eine Frage/Bitte: Kannst du das Tutorial erweitern und uns sagen wie man das “thumbnail” über den Artikel positioniert???

    Ich habe es mit der 500×200 Miniaturbild Einstellung probiert und habe dann das Problem dass sich der Artikeltext über die Sidebar schiebt…

    Eine Idee?

  13. Liebe Ellen,

    ich hatte schon mal vor einiger Zeit versucht, die Thumbnails auf meine Startseite zu bekommen. Das ist immer gescheitert. Nach dem ich mir jetzt deinen ausführlichen Artikel zu Gemüte geführt habe, läufts! Du bist die Größte!!

    Danke sagt,
    Jens :)

  14. Hallo Ellen, genau das, wonach ich gesucht habe. Leider Funktioniert das nicht so ganz, wie ich mir das vorstelle. Ich will auf der Home-Seite meines Blogs die jeweils 5 letzten Einträge aus meinen Custom Post Types News und Projekte darstellen. So sehen meine Templates und die functions.php (Auszug) aus

    functions.php

    //custom post type news erzeugen
    
    add_action( 'init', 'register_cpt_news' );
    
    function register_cpt_news() {
    
        $labels = array( 
            'name' => _x( 'Alle Nachrichten', 'news' ),
            'singular_name' => _x( 'Nachricht', 'news' ),
            'add_new' => _x( 'Hinzufügen', 'news' ),
            'add_new_item' => _x( 'Nachricht hinzufügen', 'news' ),
            'edit_item' => _x( 'Nachricht bearbeiten', 'news' ),
            'new_item' => _x( 'Neue Nachricht', 'news' ),
            'view_item' => _x( 'Nachricht ansehen', 'news' ),
            'search_items' => _x( 'Nachricht suchen', 'news' ),
            'not_found' => _x( 'Nachricht nicht gefunden', 'news' ),
            'not_found_in_trash' => _x( 'Keine Nachricht im Papierkorb gefunden', 'news' ),
            'menu_name' => _x( 'Nachrichten', 'news' ),
            'all_items' => _x( 'Alle Nachrichten', 'news' )
        );
    
        $args = array( 
            'labels' => $labels,
            'hierarchical' => true,
            'description' => 'News auf der Zarthen Seite',
            'supports' => array( 'custom-fields', 'title', 'editor', 'excerpt', 'thumbnail' ),
            'taxonomies' => array( 'category', 'post_tag', 'page-category' ),
            'public' => true,
            'show_ui' => true,
            'show_in_menu' => true,
            'menu_position' => 5,
            'show_in_nav_menus' => true,
            'publicly_queryable' => true,
            'exclude_from_search' => false,
            'has_archive' => true,
            'query_var' => true,
            'can_export' => true,
            'rewrite' => false,
            'capability_type' => 'post'
        );
    
        register_post_type( 'news', $args );
    }
    
    //custom post type projekte erzeugen
    
    add_action( 'init', 'register_cpt_projekte' );
    
    function register_cpt_projekte() {
    
        $labels = array( 
            'name' => _x( 'Alle Projekte', 'projekte' ),
            'singular_name' => _x( 'Projekt', 'projekte' ),
            'add_new' => _x( 'Hinzufügen', 'projekte' ),
            'add_new_item' => _x( 'Projekt hinzufügen', 'projekte' ),
            'edit_item' => _x( 'Projekt bearbeiten', 'projekte' ),
            'new_item' => _x( 'Neues Projekt', 'projekte' ),
            'view_item' => _x( 'Projekt ansehen', 'projekte' ),
            'search_items' => _x( 'Projekt suchen', 'projekte' ),
            'not_found' => _x( 'Projekt nicht gefunden', 'projekte' ),
            'not_found_in_trash' => _x( 'Kein Projekt im Papierkorb gefunden', 'projekte' ),
            'menu_name' => _x( 'Projekte', 'projekte' ),
            'all_items' => _x( 'Alle Projekte', 'projekte' )
        );
    
        $args = array( 
            'labels' => $labels,
            'hierarchical' => true,
            'description' => 'Projekte der Zarthen Seite',
            'supports' => array( 'custom-fields', 'title', 'editor', 'excerpt', 'thumbnail' ),
            'taxonomies' => array( 'category', 'post_tag', 'page-category' ),
            'public' => true,
            'show_ui' => true,
            'show_in_menu' => true,
            'menu_position' => 5,
            'show_in_nav_menus' => true,
            'publicly_queryable' => true,
            'exclude_from_search' => false,
            'has_archive' => true,
            'query_var' => true,
            'can_export' => true,
            'rewrite' => false,
            'capability_type' => 'post'
        );
    
        register_post_type( 'projekte', $args );
        
        register_taxonomy( 'techniken', 'projekte',
            array(
                 'hierarchical' => false,
                 'label' => __('Techniken'),
                 'query_var' => 'techniken',
                 'rewrite' => array('slug' => 'techniken' )
            )
        );
    }
    

    home.php

    <?php
    /**
     * The template for displaying all pages.
     *
     * This is the template that displays all pages by default.
     * Please note that this is the WordPress construct of pages
     * and that other 'pages' on your WordPress site will use a
     * different template.
     *
     * @package WordPress
     * @subpackage Twenty_Twelve
     * @since Twenty Twelve 1.0
      Template Name: Home
     */
    get_header();
    ?>
    
    <?php query_posts('cat=news&showposts=5'); ?>
    <h2>Kürzlich erschienene News</h2>
    <ul class="recent-posts">
        <?php while (have_posts()) : the_post(); ?>
            <li>
                <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array(150, 150), array('class' => 'recent-thumbs')); ?></a>
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </li>
        <?php endwhile; ?>
    </ul>
    
    <?php query_posts('cat=projekte&showposts=5'); ?>
    <h2>Neueste Projekte</h2>
    <ul class="recent-posts">
        <?php while (have_posts()) : the_post(); ?>
            <li>
                <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array(150, 150), array('class' => 'recent-thumbs')); ?></a>
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </li>
        <?php endwhile; ?>
    </ul>
    
    <div id="primary" class="site-content">
        <div id="content" role="main">
    
            <?php while (have_posts()) : the_post(); ?>
                <?php get_template_part('content', 'page'); ?>
    
            <?php endwhile; // end of the loop. ?>
    
        </div><!-- #content -->
    </div><!-- #primary -->
    
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>
    

    projekte.php

    <?php
    /*
    Template Name: Projekte
    */
    get_header();
    ?>
    
    <div class="projekte">
        <h2>Projekte</h2>
        <?php $wp_query = new WP_Query( array( 'post_type' => 'projekte', 'paged' => $paged ) ); ?>
        <?php if ($wp_query->have_posts()) : ?>
        <div class="projekte-box">
            <?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
            <?php
                global $more;
                $more = 0;
    	?>
            <div id="post-<?php the_ID(); ?>" class="projekte-thumbnail">
                <a href="<?php the_permalink(); ?>"><?php if(has_post_thumbnail()){ the_post_thumbnail('thumbnail'); } ?>
                <div class="title"><?php the_title(); ?></div></a>
                <div class="content"><?php the_content('weiterlesen'); ?><?php echo get_the_term_list( $post->ID, 'techniken', 'Projektumsetzung mit: ', ', ', '' ); ?></div>
            </div>    
            <?php endwhile; ?>
        </div>
        <?php endif; ?>
        <?php twentytwelve_content_nav( 'nav-below' ); ?>
    </div>
    
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>
    

    news.php

    <?php
    /*
    Template Name: News
    */
    get_header();
    ?>
    
    <div class="news">
        <h2>News</h2>
        <?php $wp_query = new WP_Query( array( 'post_type' => 'news', 'paged' => $paged ) ); ?>
        <?php if ($wp_query->have_posts()) : ?>
        <div class="news-box">
            <?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
            <?php
                global $more;
                $more = 0;
    	?>
            <div id="post-<?php the_ID(); ?>" class="news-thumbnail">
                <a href="<?php the_permalink(); ?>"><?php if(has_post_thumbnail()){ the_post_thumbnail('thumbnail'); } ?>
                <div class="title"><?php the_title(); ?></div></a>
                <div class="content"><?php the_content('weiterlesen'); ?></div>
            </div>    
            <?php endwhile; ?>
        </div>
        <?php endif; ?>
        <?php twentytwelve_content_nav( 'nav-below' ); ?>
    </div>
    
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>
    

    Hoffentlich kannst du mir weiterhelfen. Ich benutze übrigens die WordPress-Version 3.5.1, aber ich glaube nicht, dass es einen Unterschied macht.

  15. Habe es hinbekommen, habe nur statt ‘cat=news&showposts=5’ ‘post_type=news&showposts=5′ verwendet und schon ging’s. Danke für den Artikel und die Inspiration, die ich durch euch erhalten habe.

  16. Hallo,
    ich hab den Code eingebaut,
    jedoch nicht in die Sidebar oder dem Footer sondern in die index.php/single.php/page.php,
    allerdings habe ich ein Problem denn das ganze funktioniert nicht wirklich.
    Wenn ich den Code einbaue ist es nicht möglich auf ältere Posts zuzugreifen in der index.php, in der single.php werden die posts wie in der index.php angezeit, also nicht der einzelne Post sondern alle und ohne Kommentarfunktion.
    Vielleicht kennen sie das Problem und können mir sagen wie ich es am besten behebe, den gestylet habe ich das ganze schon erfolgreich.

    MfG

  17. Hallo Ellen,
    Nun das mit den Bildern gefällt mir gut, jedoch habe ich ein kleines Problem…meine Seite ist mehrsprachig und es werden die Beiträge in mehreren Sprachen auf einmal angezeigt. Ich versuche die Beiträge im Conten der Seite unten zu platzieren…
    Gibt es da eine Möglichkeit?

  18. Neues Projekt, wie immer sucht man bevorzugte Code-Snippets: Wie so oft habe ich meiner Suche gleich “elmastudio” hinzugefügt, konnte über den Artikel scroolen und habe kurz und knackig gefunden was ich suchte. Wie immer. Das gilt als großes Danke; wie immer.

    Diesmal sogar gleich zwei Fliegen mit einer Klappe: ich war nicht nur auf der SUche nach dem Artikelbild-Snippet, sondern wollte auch die “Letzten Beiträge” optisch GENAU SO im Seitenbereich (ohne Plugin, weil ja hier abolut unnötig) integrieren. Ja, super. Wie immer.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *