WordPress-Themes mit Bootstrap

Beitragsbilder einbinden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Beitragsbilder können in ein WordPress-Theme eingebunden werden. Hierfür müssen diese jedoch zunächst registriert werden, damit das Theme diese bereitstellt.
03:44

Transkript

Ich bin jetzt hier auf der Übersichtsseite für eine Kategorie. In dem Fall sind's die Klettertouren. Da werden die einzelnen Beiträge angezeigt, aber es sieht noch ein bisschen traurig hier aus. Ich möchte gerne, dass hier auch zusätzliche Beitragsbilder angezeigt werden, also kleine Vorschaubilder zu einem Beitrag. Die gibt es aber noch nicht. Also gehe ich mal in einen Beitrag hinein, den ich jetzt hier bearbeiten möchte, Wilder Kaiser (Umrundung). Und normalerweise habe ich hier rechts einen Bereich der heißt Beitragsbild festlegen, aber der fehlt hier. Auch wenn ich in die Optionen reingehe, dann finde ich hier keinen Bereich mit dem ich diese Beitragsbilder definieren kann- woran liegt das? Das liegt daran, dass das verwendete Theme, dass ich hier eingesetzt habe diese Beitragsbilder noch nicht bereit stellt, und genau diese Bereitstellung zeige ich Ihnen jetzt in diesem Video. Ich gehe mal in den Quelltext hinein, bin hier in der Datei functions.php innerhalb meines Theme-Ordners und hier schreibe ich einfach einen neuen Befehl rein und der heißt add_theme_support(post-thumbnails). Da gibt's nichts selber zum Einstellen, sondern es muss genauso in diese functions eingetragen werden und wenn ich jetzt das Ganze hier nochmal neu lade, also einen einzelnen Beitrag bearbeiten möchte, dann habe ich hier rechts unten diesen Bereich Beitragsbild festlegen. Ich klicke mal drauf und lege jetzt z. B. für den Wilden Kaiser hier dieses Beitragsbild fest. Es wird hier auch angezeigt. Ich speichere das Ganze und wenn ich mir das jetzt draußen anschaue, dann hat sich noch nichts getan - warum? Das Beitragsbild ist zwar da, aber es wird nicht automatisch angezeigt, sondern ich muss das erst in meinem Theme natürlich einstellen. Genau das mache ich jetzt. Also gehe ich jetzt in den Bereich category.php. Das ist ja diejenige Datei, die dafür sorgt, dass eine Übersichtsseite für Kategorien erstellt wird und hier gehe ich jetzt mal direkt hinein und unterhalb des Titels, da mache ein bisschen Platz, und da kommt jetzt folgender code hinein: if (has_post_thumbnail). Also wenn dieser post, dieser ganz spezielle post ein thumbnail, also ein Beitragsbild definiert hat, dann gebe ich hier folgendes aus. div class category_thumbnail und dann get_the_post_thumbnail, mit null gebe ich an, für welchen Beitrag ich das thumbnail haben möchte, in dem Fall gebe ich nichts an, nämlich null und das bedeutet, dass das Beitragsbild für den aktuellen Beitrag genommen wird und ich möchte als Größe thumbnail haben, ich könnte hier auch einfach full hineinschreiben, ein medium bspw. aber in dem Fall möchte ich eben das thumbnail haben. Ich speichere das Ganze ab und zu guter Letzt kann ich für category thumbnail noch eine entsprechende Klasse vergeben. Ich mach' das in das style.css und füge hier einfach ein float left und ein entsprechendes margin ein. Ich habe jetzt alle 3 Dateien auf einmal gespeichert und jetzt schauen wir uns das Ergebnis mal an. Hierfür die Klettertouren, der Mitterkaiser, sehen wir nichts. Es liegt daran, dass ich dieses thumbnail hier für den Wilden Kaiser eingestellt habe und Sie sehen, wenn kein thumbnail definiert ist, dann wird auch keins angezeigt, es kommt auch keine Fehlermeldung. Wenn wir uns das Ganze hier nochmal genauer auf der Konsole anschauen, oder in den Elements, ist alles in Ordnung und ansonsten wird hier eben dieses Bild angezeigt. Mit dem Befehl add_theme_support sorgen Sie dafür, dass Sie thumbnails erzeugen können und mit has_post_thumbnail und get_the_post_thumbnail können Sie eben diese Beitragsbilder auch ausgeben.

WordPress-Themes mit Bootstrap

Verwirklichen Sie Ihre eigenen Designvorstellungen bei Ihrem Webauftritt und sehen Sie, wie Sie WordPress-Seiten über Plug-ins und Themes wie z.B. Bootstrap erweitern können.

2 Std. 33 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!