Show Excerpts and Post Thumbnail in Twenty Eleven Theme – Ein paar Anpassungen am Child-Theme!

Was in Englisch als Post Thumbnails bezeichnet wird, heißt in Deutsch schlicht Artikelbilder und beschreibt eine eigentlich eben so schlichte Funktion für und von WordPress Themes welche aber enorme optische Auswirkungen auf die Präsentation der Beiträge hat.

Denn durch diese so genannten Artikelbilder, wobei ich das ganze Beitragsbilder nenne, besteht die Möglichkeit in jeden Artikel beziehungsweise eben Beitrag ein quasi automatisch in Größe sowie Breite generiertes Bild an einen fest definierte Position einzufügen.

ICH WILL endlich wieder Post Thumbnails!

Diese spezielle Funktion von WordPress habe ich aber nicht immer genutzt und schon gar nicht seit bestehen selbiger Funktion. Erst als ich mit dem Ari Theme von Elmastudio damals anfing zu arbeiten, wurden diese Beitragsbilder für mich sinnvoll. Nun da Elmastudio wegen persönlicher Differenzen für mich der Vergangenheit angehört und ich das Twenty Eleven mittels eines Child-Theme nutze, habe ich diese Beitragsbilder lange und schmerzlich in meinem Child-Theme vermisst.

Nun aber habe ich eben mal fix diese Funktion für die Post Thumbnails in mein Child-Theme für das Twenty Eleven nachträglich eingebaut. Eine gut beschriebene Anleitung dazu, wenn auch gleich in Englisch, gibt es nämlich unter anderem bei Zeaks.org zum nachlesen sowie selber nachbauen! 🙂

Übersetzung von Englisch in Deutsch.

Solltest du allerdings der Englischen Sprache nicht so gut mächtig sein, dann ist das auch kein Problem, denn ich habe die Anleitung nachfolgend mal fix übersetzt. Anbei findest du ebenfalls die entsprechenden Code-Beispiele welche du eigentlich nur noch kopieren sowie einfügen musst als Ersatz für die vorhanden Zeilen in den Dateien.

Sofern dein Child-Theme für das Twenty Eleven keine functions.php hat, erstellst du einfach eine und fügst dort den folgenden Code ein sowie speicherst selbige Datei:

[code]// This sets the dimensions for the thumbnails displayed on the homepage
add_image_size(‚excerpt-thumbnail‘, 140, 140, true);[/code]

Danach suchst du in deinem Twenty Elven Theme nach der Datei namens content.php und kopierst selbige ebenfalls in den Ordner deines Child-Themes für das Twenty Eleven. Dann öffnest du die eben kopierte content.php Datei und suchst in etwa bei Zeile 35 nach folgenden Codezeilen:

[code]<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
<?php the_excerpt(); ?>[/code]

Sofern du selbige Codezeilen gefunden hast, ersetzt du selbige Codezeilen mit folgenden Codezeilen und speicherst danach die Datei:

[code]<?php if ( is_search() | is_home() ) : // Edit this to show excerpts in other areas of the theme?>
<div class="entry-summary">
<!– This adds the post thumbnail/featured image –>
<div class="excerpt-thumb"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( ‚Permalink to %s‘, ‚twentyeleven‘ ), the_title_attribute( ‚echo=0‘ ) ); ?>" rel="bookmark">
<?php the_post_thumbnail(‚excerpt-thumbnail‘, ‚class=alignleft‘); ?></a></div>
<?php the_excerpt(); ?>[/code]

Dadurch das du nun

[code]| is_home()[/code]

hinzugefügt hast in den Code, gibst du deinem Child-Theme für das Twenty Eleven Theme somit nun die Anweisung wann genau entweder nur

[code]the_excerpt[/code]

oder der gesamte Artikel/Beitrag angezeigt wird. Laut dem was Zeaks schreibt, gibt das eben mehr Kontrolle über jene Funktion.

Wenn du nun die beiden Dateien gespeichert, sowie hoch geladen hast in den Ordner deines Child-Themes für das Twenty Eleven Theme, dann kannst du nun in deinen Artikel/Beiträgen entsprechend ein Artikelbild festlegen und darauf hin wird selbiges auf der Startseite deines Blog erscheinen. 😉

Fragen oder Probleme?

Dann ab damit in die Kommentare, aber bitte bedenke dabei das ich nur begrenzt dazu fähig bin bei Problemen mit Code zu helfen. Solltest du detaillierte Hilfe bezüglich des Twenty Eleven Theme benötigen, benutze doch bitte mal die Suchmaschine deiner Wahl oder schau im Forum von WordPress.org oder WordPress Deutschland vorbei!

13 Comments

  1. Hallo,
    danke für die anleitung, leider sind die Artikelbilder auf der Startseite nun zu groß, so das sie in die sidebar ragen, lässt sich das irgentwie vermeiden?

      1. Michael

        Und was müsste ich da umstellen?
        ach ja muss in die functions.php noch was anderes rein als der code? weil das ganze kommt als fehlermeldung in schwarzer schrift oben im blog, also noch über dem header?

      2. Öhm, da kann ich nicht wirklich bei weiterhelfen, weil ich arbeite selbst auch nur nach dem „Versuch und Fehler“ Prinzip ergo nicht jemand der ein richtiger Profi mit Wissen dahinter ist. 🙄

        Aber wenn du mal die Suchmaschine deiner Wahl bemühst, meist in Englischer Suchform, bekommst du sicherlich je menge Ergebnisse zu deinem Problem. Im übrigen ist das auch die Methode welche ich verwende, erst auf Deutsch mein Problem suchen und wenn das nichts bringt dann auf Englisch. 😉

  2. Mauro

    Hallo Stefan
    Super Sache, vielen Dank.
    Soweit habe ich das hinbekommen.
    Gibt es auch die Möglichkeit, NUR das „Featured-image“ (als Vorschau) anzuzeigen, und erst wenn ich auf die Überschrift klicke und im „Single.php“ bin, mir die weiteren „Post-Bilder“ und Text angezeigt wird?

    Vielen Dank

    1. Also mittels „the_excerpt“ anstatt „the_content“ kannst du da was machen, aber da solltest du mal die Suchmaschine deiner Wahl zu bemühen oder im Codex von WordPress.org nachschauen, weil umfangreiches Thema.

      Wenn du allerdings wirklich NUR das Vorschaubild und ganz ohne Titelüberschrift haben willst, dann wirst du nicht drum herum kommen per „funtions.php“ die Werte in „the_excerpt“ passend zu ändern.

  3. DANKE!!! Dank dieser Anleitung hab ich´s jetzt endlich hinbekommen. Hab schon den ganzen Vormittag das Netz durchforstet ohne auf eine richtig Anleitung zu kommen. ENDLICH!!!

  4. Hallo zusammen,

    ich bin froh endlich diese Anleitung gefunden zu haben. Aber……

    Dies zerstört mein ganzes Layout in der Beitragsübersicht auf der ersten Seite und dies wie folgt:
    – Schrift des Beitrages wird auf 15px eingestellt. Im Backend mit 12px formatiert
    – Schrift geht auf „left“, obwohl Blockschrift eingestellt (ich weiß, dies gibt Probleme bei einigen Browsern, da keine Silbentrennung und daher unschöne Löcher – wird daher geändert)
    – weiterlesen Tag ohne Rücksicht auf „Verluste“ bzw. der Stelle, wie im Backend gesetzt.
    – Zeilenumbruch wird nicht berücksichtigt.

    Mit Müh und Not habe ich den Rahmen und den Abstand Artiklbild zwischen Text elemenieren bzw. ändern können.

    Über css habe ich in der body, input, textarea die Schriftgröße auf 12px setzen können. Aber allein die Tatsache, dass der Zeilenumbruch aus dem Beitrag nicht übernommen wird, zeigt mir doch, dass ich über css nicht die Formatierung ändern kann.

    Wie kann ich also einstellen, dass die Formatierung des Beitrages in die Beitragsübersicht übernommen wird? Ich will doch bloß das Bild 😉 !

    1. Hallo Markus,

      also erst mal schön zu lesen das dieser Artikel noch für Dich einen Wert hat. 🙂

      Aber nun zu deinem Problem, was auf 2 Arten lösbar ist. Die erste Möglichkeit wäre, das du weiterhin dir im Netz unter dem Stichwort „wordpress twenty eleven thumb nail“ die Anleitungen selber zusammen suchst, was aber meist in English ist und zudem sehr aufwändig ist.

      ODER du schaust mal bei Elmastudio vorbei und überlegst dir ob du vielleicht eher bereit wärst das kostenlose YOKO als ersatz für dein bisheriges Theme zu verwenden. Noch besser als das YOKO wäre allerdings eines der Premium-Themes dort, wobei alle samt 1A sind und einzeln aber vor allem im Bundle ein wahres Schnäppchen sind.

      Ich empfehle dir das mit dem YOKO oder generell den Elmastudio-Themes weder weil ich dafür eine provision bekomme, sondern weil das Twenty Eleven schon sehr alt ist, gemessen an der aktuellen WordPress Version und zudem die meisten Englischen Anleitungen dafür kaum noch gepflegt werden. Ergo ist das also eine Menge an fummeliger Arbeit, welche zudem auch nicht wirklich zukunftssicher ist im Bezug auf mobile Nutzung, sprich Responsive Layout.

      Und mit dem Twenty Eleven habe ich damals eh auch persönlich abgeschlossen, weswegen ich dir damit dann auch keine große Hilfe mehr bin. Entschuldigung! 😐

Comments are closed.