16. Januar 2014

So leicht geht einzigartig Letzte Beiträge mit Bild anzeigen

   14 Kommentare

Ein Beitrag von Felix Meyer

Share on Facebook0Tweet about this on Twitter0Share on Google+0Share on LinkedIn0Email this to someone

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-ZeileErklä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

Share on Facebook0Tweet about this on Twitter0Share on Google+0Share on LinkedIn0Email this to someone

Felix Meyer

Es gibt nicht viele Aktivitäten, bei denen ich vergesse zu essen oder zu schlafen. An Wordpress Designs zu arbeiten ist eine davon.

Letzte Artikel von Felix Meyer (Alle anzeigen)

Du willst up-to-date bleiben?

Trage dich jetzt in unseren kostenlosen Newsletter ein, um stets die aktuellsten Neuigkeiten rund um Wordpress zu erhalten.

Wir geben deine Daten nicht weiter! Wir hassen Spam genauso wie du!

14 Kommentare

Reaktionen auf diesen Beitrag

  • 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.

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

  • Peter

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

    Lg

  • Jannik

    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 🙂

  • 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 !!

    • Felix Meyer

      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.

  • 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

  • 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

    • Felix Meyer

      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

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