Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

WordPress-Themes mit Bootstrap

Startseite gestalten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Auf der Startseite eines WordPress-Themes sind der Zugriff auf beliebige Beiträge und deren Darstellung möglich. Hierfür muss eine weitere PHP-Datei erstellt und entsprechend bearbeitet werden.
07:09

Transkript

Momentan sieht meine Startseite hier noch ziemlich komisch aus, das ist noch Standardtext, da sind noch keine wirklichen Inhalte aus dem Blog vorhanden, und genau das möchte ich jetzt in diesem Beitrag ändern. Ich gehe mal in den Quelltext und da schaue ich mir mal hier diese Startseite an. Das ist ja momentan noch der ganz normale Mustertext, den ich hier habe und was ich jetzt mache, ist, z. B. hier für diesen Bereich container marketing, da habe ich eine Reihe und innerhalb dieser Reihe habe ich dann die einzelnen Beiträge hier definiert. Und was ich mache, ist, ich nehme jetzt hier mal diese zwei Beiträge heraus. Da habe ich bisschen was vergessen. Und aus diesem einen Beitrag, da baue ich quasi eine Schleife außenrum und sage: solange entsprechende Beiträge vorhanden sind, führe bitte diese Schleife aus und anstatt heading, schreibe ich dann z. B. später the_title. Das ist so ungefähr das Prinzip, das ich jetzt vorhabe. Ich habe das schon ein bisschen vorbereitet und die Datei, die die Startseite eines WordPress-Themes definiert, die heißt home.php. Solange es diese home.php nicht gibt, wird automatisch die index.php genommen, aber deswegen habe ich jetzt hier ganz normal diese home.php angelegt und die schauen wir uns jetzt mal der Reihe nach an. Zunächst einmal habe ich hier ganz normal ein get_header, ich möchte hier das Menü oben einfügen. Dann geht's los mit dem myCarousel. Das stammt aus meinem muster.html mit den entsprechenden Klassen IDs usw. und hier geht's dann los mit dem ersten WordPress-spezifischen php-Code. Zunächst einmal sage ich get_posts (category 1 und 2). Das bedeutet, ich möchte alle Beiträge aus den entsprechenden Kategorien mit der Nummer 1 und mit der Nummer 2 haben und diese posts, die speichere ich jetzt in diesen Array $posts. Und als nächstes gehe ich dann einfach dieses Array post für post durch: foreach $posts as $post. Und als erstes sage ich dann, ich möchte aus diesem $post, was ich ja hier bekommen habe, die gesamten post-Daten zur Verfügung stellen, damit ich sie verwenden kann und das mache ich mit dem WordPress-spezifischen Befehl setup_postdata. Ab sofort stehen mir also diese Funktionen wie the_title, the_excerpt oder the_permalink zur Verfügung. Ich bin hier in dieser Schleife und gehe eben solange durch, solange ich etwas habe und damit ich die einzelnen Durchgänge durch die verschiedenen Schlaufen auch zählen kann, habe ich hier oben einen $i gleich 0. Hier unten zähle ich dieses $i gleich hoch und ich sage am Anfang z. B. dass das erste slide, das ich habe, also ein i noch 0 ist, dass das auf active gesetzt werden soll, also die entsprechende Klasse hat. Was hier noch neu ist, dass ist auch dieser Befehl has_post_thumbnail, das heißt, wenn dieser einzelne Beitrag ein thumbnail hat, dann hätte ich gerne von diesem thumbnail die Datei, bzw. die source Datei. Die bekomme ich mit den Befehl wp_get_attachment_image_src. Ist ein bisschen lang, aber am besten nehmen Sie sich einfach in die Zwischenablage und diesen wp_get_attachment_image_src, den muss ich 2 Informationen übergeben, zum einen, welches thumbnail möchte ich denn eigentlich haben. Ich möchte das thumbnail vom aktuellen Beitrag und das bekomme ich mit get_post_thumbnail_id. Und dann sage ich, welche Größe möchte ich haben, möchte ich das thumbnail haben, dann müsste ich hier jetzt ein thumbnail eintragen oder in dem Fall möchte ich eben full, dann habe ich hier ein full und dann habe ich ab sofort in $thumbnail ein Array mit den verschiedenen image sources, die ich hier abgefragt habe. Und in dem Fall möchte ich einfach das allererste haben. Es gibt nur ein Beitragsbild und das mache ich dann mit dieser eckigen Klammer gesetzten 0. Wenn ich das ganze durchlaufen habe und diese Schlaufe einmal durch ist, dann möchte ich auf meiner Seite weiter unten noch verschiedene andere Schleifen durchlaufen, also sage ich jetzt zur Sicherheit mal ein wp_reset_postdata, dann würde ab sofort das normale System wieder weiterlaufen. Das Ganze mache ich auf meiner Startseite dreimal. Einmal für diesen Bereich carousel ganz oben. Hier mache ich das ganze nochmal. Das ist im Endeffekt vom System her das gleiche, nur das ich hier halt unterschiedliche Klassen verwende. Das ist 'ne Sache von meiner muster.html-Datei. Wichtig am Ende wieder wp_reset_postdata. Schauen wir uns mal dieses get_posts etwas genauer an. Ich kann hier z. B. sagen, ich möchte hier nur Beiträge aus der Kategorie 1 haben. Weiter unten sage ich, ich möchte nur Beiträge aus der Kategorie 2 haben und ganz am Anfang, haben Sie's ja gesehen, habe ich geschrieben, Kategorie 1 und 2, da werden eben aus beiden Kategorien die entsprechenden Beiträge geholt. Schauen wir uns im codex mal genau an, was dieses get_posts eigentlich macht. Einfach mal in eine Suchmaschine eingeben und dann haben wir schon codex.wordpress.org/Template_Tags/ get_posts und da können wir verschiedene Parameter angeben, um unsere posts zu filtern, die wir haben möchten. Ich kann z. B. sagen, ich möchte nur 2 posts anzeigen, dann benutze ich posts_per_page. Ich kann sagen ich möchte 5 Beiträge haben, aber ich möchte nicht den ersten, weil den ersten habe ich schon irgendwie anders verwurschtelt, also sage ich offset gleich 1, dann fange ich quasi beim zweiten Beitrag an. Category habe ich Ihnen schon vorgestellt, wir können das Ganze sortieren mit descending und ascending, also auf- und absteigen. Ich kann sagen, dass ich manche Beiträge bewust ausschließen möchte mit exclude bspw. oder ich kann sagen, ich möchte nur Beiträge haben, die den post-Status publish haben. Das macht in dem Fall mein System schon automatisch, deswegen muss ich gar nicht extra Wert darauf legen. Wenn Sie verschiedene dieser Parameter haben, dann bauen Sie damit einfach ein Array und dieses area können Sie dann entweder direkt an get_posts übergeben oder Sie speichern es vorher in einer Variable und schreiben dann get_posts$args in diesen Beispiel. Schauen wir uns mal an, was dabei herausgekommen ist. Ich speichere das Ganze hier noch ab. Und gehe hier nochmal auf meine Startseite und dann sehen wir, habe ich hier oben den ersten Beitrag "Wilder Kaiser". Ich kann hier einmal durchklicken. Das stellt dann schon meine muster.html Datei bereit. Wenn ich auf Weiterlesen klicke, dann komme ich eben zu den entsprechenden Beitrag, das ist auch richtig. Hier unten habe ich nochmal alle Wanderungen, die ich in meiner Kategorie Wanderungen vorhalte und hier habe ich dann alle Klettertouren, die hier nochmal genauer dargstellt werden. Der Trick dabei ist, die Startseite wird von der Datei home.php versorgt, und mit get_posts und entsprechenden Parametern kann ich bestimmen, welche posts in einer Schleife durchlaufen werden sollen.

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!