So leicht geht einzigartig

Letzte Beiträge mit Bild anzeigen

Aktualisiert am 24. Januar 2014WordPress Tipps14 Kommentare

Ich weiß nicht wie viele Themes ich schon installiert und wieder deinstalliert habe. Oft sieht die Demo toll aus, aber bei der eigenen Umsetzung funktioniert rein gar nichts. Premium-Themes bieten gern eigene Widgets an, die die letzten Beiträge mit Thumbnails aufhübschen. Eigentlich klasse, aber in 99% aller Fälle sehen diese starren Designvorlagen dann doch unpassend aus. Stattdessen die nackten Bulletpoints des Standard-Widgets? Sicher nicht! Also: Do it yourself!

letzte beiträge

Um deinem Theme einen einzigartigen Anstrich zu verpassen, musst du kein PHP können.

Sieht schwierig aus, ist es aber nicht

Um sich selbst seine letzten Beiträge mit Thumbnails anzureichern, muss man nicht mal PHP können. Es hilft natürlich, aber HTML und CSS reichen völlig aus. Vorausgesetzt, es sagt einem jemand wie es geht. Die offizielle WordPress-Seite zeigt dem Profi, dass es einfach geht. Aber ganz ehrlich, das verstehen die wenigsten auf Anhieb:

<?php
 $thumbnails = get_posts('numberposts=5');
 foreach ($thumbnails as $thumbnail) {
 if ( has_post_thumbnail($thumbnail->ID)) {
 echo '<a href="' . get_permalink( $thumbnail->ID ) . '" title="' . esc_attr( $thumbnail->post_title ) . '">';
 echo get_the_post_thumbnail($thumbnail->ID, 'thumbnail');
 echo '</a>';
 }
 }
 ?>

Dieser Code oben zeigt die fünf letzten Thumbnails an und verlinkt diese auf den dazugehörigen Post. Es wird aber nicht der Titel des Artikels dargestellt. Daher erweitere ich den Code und räume ihn etwas auf. Das sieht dann immer noch kompliziert aus, lässt sich aber leicht erklären.

<?php
 $thumbnails = get_posts('numberposts=5');
 foreach ($thumbnails as $thumbnail) {
 if ( has_post_thumbnail($thumbnail->ID)) {
 echo '<a href="' . get_permalink( $thumbnail->ID ) . '">';
 echo get_the_post_thumbnail($thumbnail->ID, array(100,100));
 echo esc_attr( $thumbnail->post_title );
 echo '</a>';
 }
 }
 ?>
Code-Zeile Erklärung
$thumbnails = get_posts('numberposts=5');
Es sollen die letzten 5 Posts verwendet werden. Die Zahl lässt sich beliebig ändern.
foreach ($thumbnails as $thumbnail) {
Die Zeile muss einfach sein. Besagt nur, dass ein einzelnes Element der fünf Beiträge jetzt $thumbnail heißt.
if ( has_post_thumbnail($thumbnail->ID)) {
Die Zeile soll Fehler vermeiden. Nicht fragen.
echo '<a href="' . get_permalink( $thumbnail->ID ) . '">';
Hiermit wird ein <a>-Tag geöffnet, in das unter href= die entsprechende URL eingefügt wird. So wird alles Folgende verlinkt.
echo get_the_post_thumbnail($thumbnail->ID, array(100,100));
Hiermit wird das Thumbnail eingefügt, in der Größe 100×100. Die Größe lässt sich ändern, idealerweise solltest du sie aber voreinstellen (siehe unten)
echo esc_attr( $thumbnail->post_title );
Hiermit wird der Titel des Artikels ausgegeben.
echo '</a>';
Hiermit wird das <a>-Tag geschlossen und der Link ist perfekt.

So viel zum Verständnis. Diesen Code müsst ihr also nur an die gewünschte Stelle in einer eurer PHP-Dateien einfügen. Text-Widgets unterstützen kein PHP, der Code gehört daher am ehesten in die sidebar.php, falls vorhanden. Dann haben wir aber noch eine ziemlich nackige Version der letzten Posts:

letzte beiträge in der sidebar

Noch fehlt das Design.

 

Letzte Beiträge mit Styles aufpolieren

Daher sollten das Bild und der Text eigene CSS-Klassen bekommen, damit wir nach Belieben das Design verändern können. Das sieht dann so aus:

<?php
 $thumbnails = get_posts('numberposts=5');
 foreach ($thumbnails as $thumbnail) {
 if ( has_post_thumbnail($thumbnail->ID)) {
 echo '<a href="' . get_permalink( $thumbnail->ID ) . '">';
 echo ‘<div class=”navithumb” >’ . get_the_post_thumbnail($thumbnail->ID, array(100,100)) . ‘</div>’;
 echo ‘<div class=”navittitle” >’ esc_attr( $thumbnail->post_title );
 echo '</div></a>';
 }
 }
 ?>

Jetzt können wir wie gewohnt über unsere CSS-Datei mit den beiden <div>-Elementen anstellen, was wir möchten. Nur macht die Formatierung der Thumbnails leider manchmal Probleme.

Anpassung der Thumbnails

Bei manchem sind bisher eventuell noch gar keine Thumbnails festgelegt. In diesem Fall empfehle ich das Plugin Auto Post Thumbnail, das generiert in Windeseile zu jedem Beitrag ein Bildchen. Aber selbst wenn die Bilder bestehen, sind sie oft verzerrt oder zu klein. Um das zu umgehen, lassen sich eigene Thumbnail-Größen in WordPress hinterlegen. Das geht über die functions.php und die Funktion add_image_size.

add_theme_support( 'post-thumbnails' );
add_image_size( 'navithumb', 200, 100, true );

Das bedeutet im Klartext:

  • Erste Zeile: Sollte vorhanden sein. Wenn nicht, musst du sie ergänzen.
  • navithumb: mein Wunschname für die neue Bildergröße
  • 200, 100: Maximale Breite und Höhe in Pixeln, nach Belieben anpassen
  • true: Damit wird festgelegt, dass das Bild beschnitten und nicht gezerrt werden soll. Sonst sieht das unschön aus.

Sobald dieser Code vorhanden ist, wird jedes neu(!) hochgeladene Bild in dieser Größe auf dem Server hinterlegt. Jetzt ist es perfekt zugeschnitten auf dein Vorhaben. Um die Größe zu verwenden, muss nur im obigen Code der Wunschname statt der Maße angegeben werden.

Bisher:

get_the_post_thumbnail($thumbnail->ID, array(100,100));

Neu:

get_the_post_thumbnail($thumbnail->ID, ‘navithumb’);

Und jetzt wird’s bunt!

Jetzt ist alles erledigt und ihr könnt nach Lust und Laune eure letzten Posts gestalten. Das folgende Beispiel  hilft vielleicht als Anregung.

PHP

<h3>Tastings</h3>
 <?php
 $thumbnails = get_posts('numberposts=3&category=3');
 foreach ($thumbnails as $thumbnail) {
 if ( has_post_thumbnail($thumbnail->ID)) {
 echo '<a href="' . get_permalink( $thumbnail->ID ) . '">';
 echo '<div>' . get_the_post_thumbnail($thumbnail->ID, 'navi') . '</div>';
 echo '<div></div>';
 echo '<div>' . esc_attr( $thumbnail->post_title ) . '</div></a>';
 }
 }
 ?>

CSS

a.navibox {
 position:relative;
 width:200px;height:100px;margin-bottom:2px;
 }
 div.navititlebg {
 background-color:white;opacity:0.8;filter:alpha(opacity=80);
 }
 div.navititle {
 position:absolute;top:70px;
 padding:10px;width:179px;height:30px;
 color:black;border-top:2px solid black;
 }
 div.navititle:hover {
 background-color:white
 }

letzte beiträge schön dargestellt

Bild: Igor Zh. (shutterstock.com) & whisky-bar.net

Kommentare zu "Letzte Beiträge mit Bild anzeigen"
  1. […] Feld können wir jetzt im Code ausspucken lassen. Dafür müsst ihr wieder mal kein PHP können. Ihr müsst einfach nur den folgenden Code an die gewünschten Stelle einfügen. […]

  2. Thomas schrieb am 18. Februar 2014, um 17:56 Uhr:

    wie cool ist das denn ?
    jetzt hab ich schon so viele Plugins und Premium Themes durch und dann das ! Genial.
    Danke.
    PS: pressengers ist gebookmarked.

  3. Die neusten Artikel anzeigen mit Widget in Wordpress › wpneu.de schrieb am 23. August 2014, um 11:38 Uhr:

    […] Ein passendes Widget selbst zu programmieren ist nicht ganz einfach, man benötigt einige Kenntnisse in HTML und CSS sowie eine gute Anleitung. Wenn ihr etwas fortgeschritten seit, dann probiert es mal mit dieser Anleitung. […]

  4. Matthias schrieb am 20. März 2015, um 22:04 Uhr:

    Richtig gut, vielen Dank für die ausführliche Anleitung 🙂 – Newsletter wird abonniert!

  5. Peter schrieb am 16. Juli 2015, um 23:34 Uhr:

    Und wo muss ich das einfügen? bzw. bearbeiten?
    Also die Source bräuchte ich..

    Lg

    1. Felix Meyer schrieb am 21. Juli 2015, um 09:58 Uhr:

      Einfügen kannst du das an jeder Stelle, ganz wie du magst. Wie genau die Datei heißt, kommt völlig auf dein Theme an.

  6. Jannik schrieb am 6. September 2015, um 10:43 Uhr:

    Danke für den Tipp,
    habe schon ein paar PlugIns getestet, aber diese habe ich auch schnell wieder deinstalliert.
    Jetzt versuche ich es mal nach der Anleitung zu machen 🙂

  7. Daniel Hennig schrieb am 29. April 2016, um 03:46 Uhr:

    Hey Felix 🙂

    Erstmal klasse Beitrag! Vielen Dank!

    Allerdings zerhaut es bei mir die ganze Sidebar, sobald ich die divs hinzufügen will. Ohne die divs klappt an sich noch alles, sieht nur eben noch nicht ganz so sauber aus. Dann füge ich die Divs hinzu und die ganze Sidebar wird irgendwie ausgeblendet.

    Hab auch versucht deine beiden fertigen Codes zu implementieren. Also die ganz unten. Den PHP-Teil in Sidebar.php und das CSS in die CSS Datei eben. Aber Das einzige was dann in meiner Sidebar angezeigt wird ist „Tastings“ 😀

    Bin leider noch ein Neuling mit WordPress und beherrsche PHP auch nicht wirklich gut. 🙂

    Aber hast du vlt. aus dem Stegreif ne Ahnung woran das liegen könnte?

    Vielen Dank auf jeden Fall !!

    1. Felix Meyer schrieb am 29. April 2016, um 09:32 Uhr:

      Hey Daniel,
      freut mich, dass es dir bis dahin geholfen hat! 😉 Ist leider schon ein Weilchen her, daher bin ich nihct mehr so drin. Aber das klingt so als wäre irgendwo ein ^/div^ zu viel oder zu wenig (hab die eckigen Klammern „um 90° gedreht“, damits angezeigt wird).
      Heut weiß ich nicht mehr, warum ich die Zeile verwendet habe:
      echo ‚^div^^/div^‘;
      Macht für mich keinen Sinn. An deiner Stelle würde ich mal mit den browsereigenen Entwicklerwerkzeugen drüber gehen und schauen, ab wann der Code nicht mehr dargestellt wird. Da kannst du auch direkt dein HTML bearbeiten und schauen, wann sich das Problem löst ohne ständige refreshs.
      Hoffe das hilft! Mehr ist aus der Ferne leider schwierig.

  8. Daniel Hennig schrieb am 29. April 2016, um 15:52 Uhr:

    Hey Felix,

    Danke für deine Rückmeldung!

    habs hinbekommen 🙂

    Habs ma ohne die „Html in echo“ variante probiert. So wars einfacher für mich zu verstehen 🙂

    Also für die, die es interessiert:

    ID)) {
    echo ‚ID ) . ‚“>‘;
    ?>

    ID, array(100,100));
    ?>

    post_title );
    echo ‚
    ‚;
    }
    }
    ?>

    Grüße
    Daniel

    1. Daniel Hennig schrieb am 29. April 2016, um 15:56 Uhr:

      ok, der post ging schief 🙂

      Keine Ahnung wie man hier code postet und auch leider nicht wie man antworten löschen kann 🙂

      Gruß
      Daniel

      1. Felix Meyer schrieb am 2. Mai 2016, um 09:01 Uhr:

        😀 Hi Daniel, danke fürs Teilen! Ich habs jetzt mal so gelassen. Wenn ichs für dich löschen soll, sag Bescheid!

  9. Amely schrieb am 6. September 2016, um 23:18 Uhr:

    Hallo Felix, vielen Dank für die Anleitung. Ich bin bei WordPress und habe das kostenlose Theme Graphy.
    Nun wollte ich mithilfe deiner Anleitung auch Thumbnails erstellen, aber da ich überhaupt kein Computerexperte bin, habe ich nicht mal herausgefunden, wo ich den Code finde, den ich verändern möchte. Geht das mit der kostenlosen Version überhaupt? Oder liegt es an mir?
    Würde mich sehr über einen Tipp freuen.
    LG und danke
    Amely

    1. Felix Meyer schrieb am 8. September 2016, um 10:59 Uhr:

      Hallo Amely,
      was genau meinst du denn mit kostenlos? Wenn du deinen Blog auf wordpress.com gehostet hast, dann kann es gut sein, dass du keinen Editor hast und dadurch nicht an die PHP-Dateien ran kommst. Wenn du das (auch kostenlose) WordPress selbst gehostet hast (vgl. wordpress.org), dann geht es. Hoffe das hilft!
      Viele Grüße
      Felix

Schreibe einen Kommentar

Pressengers lebt von der Wordpress Community, beteilige dich mit einem Kommentar!
Deine E-Mail Adresse wird nicht veröffentlicht.
Kommentare die Werbung oder eine reine Linkplatzierung darstellen, werden gelöscht oder von den Links befreit ;) Wenn du etwas wertvolles und relevantes beitragen kannst, ist dein Link willkommen.