So ein klein wenig stolz sind wir schon: 200 Tipps und Tricks für WordPress, CSS, HTML und das Divi-Theme haben wir bis zum heutigen Tag veröffentlicht. Heute wagen wir uns an ein klein wenig PHP-Programmierung. Wir bauen uns kinderleicht massgeschneiderte Beitragsübersichten. Vorzüglich geeignet für Widgets in der Seitenleiste – aber natürlich auch für anderswo.
In der Seitenleiste dieser Website hatten wir mithilfe zweier unterschiedlicher Widgets einerseits bereits publizierte Beiträge, andererseits aber auch geplante WordPress-Posts aufgelistet. Das Problem dabei: Die beiden Widgets liessen sich optisch nicht angleichen. Dann machen wir das halt selber. Oder?
Dazu benötigen wir ein wenig PHP-Code. Aber keine Bange: Das ist besser verständlich als man denken mag. Die Scripts hinterlege ich persönlich einzeln im Plugin «Insert PHP Code Snippet». Die Codes aus dessen Bibliothek kann ich dann ganz einfach per Shortcode genau dort ausführen lassen, wo ich möchte. Es gibt noch andere, ähnliche Plugins – das erwähnte ist einfach mein Favorit.
1. Liste mit den fünf neuesten Beiträgen anzeigen
Kopieren Sie also folgenden PHP-Code und legen Sie ihn in Ihrem Snippet-Plugin ab:
<?php $publish_posts = new WP_Query(
array(
'post_type'=>'post',
'posts_per_page' => 5,
'order' => 'DESC',
'post_status' => 'publish'
)); ?>
<?php if ( $publish_posts->have_posts() ) : ?>
<h4>Neueste Beiträge</h4>
<?php while ($publish_posts->have_posts()) : $publish_posts->the_post(); ?>
<p class="recent-posts"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br />publiziert am <?php the_time('j. F Y'); ?></p>
<?php endwhile; ?>
<?php endif; wp_reset_query(); ?>So funktioniert der Code:
- Zeile 3 legt fest, welche Posts berücksichtigt werden. Das könnten auch pages, projects oder Custom Type Posts sein.
- Zeile 4 benennt die Anzahl der angezeigten Inhalte. Unser Code landet in einer Übersicht in der Seitenleiste. Da sind 5 passend.
- Zeile 5 definiert die Sortierreihenfolge. ASC für ascending (oder aufsteigend) – DESC für descending (oder absteigend).
- Zeile 6 besagt, welche Posts berücksichtigt werden. In unserem Fall nur bereits bublizierte – darum «publish».
- Zeile 9 spricht für sich: Das ist der Titel, der angezeigt werden soll.
- In der Zeile 11 steht geschrieben, was wie ausgegeben wird. Hier also der verlinkte Beitragstitel, gefolgt vom Publikationsdatum. Um noch ein wenig einfacher gestalten zu können, haben wir auch gleich eine CSS-Klasse namens «recent-posts» vermerkt.
Da können Sie natürlich variieren nach Lust und Laune. Das Ergebnis unseres Codes sehen Sie hier.
Doch natürlich lässt sich mit einem ähnlichen PHP-Snippet auch in die Zukunft blicken.
Neueste Beiträge
WordPress-User ohne Mailadresse einrichten
publiziert am 17. April 2024
Informationstext-Module (Blurbs) des Divi-Themes als Teaser verwenden
publiziert am 14. April 2024
Bullet-Points mit Divi-Icons ersetzen
publiziert am 10. April 2024
Verwandte YouTube-Videos in Divi nicht anzeigen
publiziert am 7. April 2024
Ein Browser-Back-Button für die Divi-Website
publiziert am 3. April 2024
2. Liste mit den drei nächsten Beiträgen anzeigen
Auch hier wieder etwas PHP-Code, der im Vergleich zum vorher gezeigten minimal verändert wird. Am einfachsten einzusetzen durch die Verwendung eines Plugins wie etwa «Insert PHP Code Snippet»:
<?php $future_posts = new WP_Query(
array(
'post_type'=>'post',
'posts_per_page' => 3,
'order' => 'ASC',
'post_status' => 'future'
)); ?>
<?php if ( $future_posts->have_posts() ) : ?>
<h4>Geplante Beiträge</h4>
<?php while ($future_posts->have_posts()) : $future_posts->the_post(); ?>
<p class="upcoming-posts"><?php the_title(); ?><br />erscheint am <?php the_time('j. F Y'); ?></p>
<?php endwhile; ?>
<?php endif; wp_reset_query(); ?>Auch hier wieder ein Blick auf die Details; sie ähneln dem obigen Code; in fett, was hier anders ist.
- Zeile 3 legt wiederum fest, welche Posts berücksichtigt werden. Das könnten auch pages, projects oder Custom Type Posts sein.
- Zeile 4 benennt auch hier die Anzahl der angezeigten Inhalte. Mehr als 3 geplante Inhalte möchten wir aber nicht zeigen.
- Zeile 5 definiert die Sortierreihenfolge. Da hatten wir vorhin DESC für descending (oder absteigend) – hier verwenden wir ASC für ascending (oder aufsteigend).
- Zeile 6 besagt, welche Posts berücksichtigt werden. In unserem Fall noch nicht publizierte – die Selektion heisst also «future».
- Zeile 9 ist auch in diesem Snippet logisch: Das ist der Titel, der angezeigt werden soll.
- In der Zeile 11 steht geschrieben, was wie ausgegeben wird. Den Beitragstitel können wir allerdings logischerweise noch nicht verlinken – die Posts sind ja noch nicht publiziert. Darum also nur der Beitragstitel, mit anschliessendem Publikationsdatum. Und auch hier haben wir eine CSS-Klasse namens «upcoming-posts» hinterlegt. Das wird die Gestaltung vereinfachen.
Das Ergebnis sehen Sie hier:
Sie haben zahlreiche Variablen zur Hand, welche Sie einsetzen können: Etwa «the_excerpt()» für den Auszug. Oder die Variable «the_post_thumbnail()», welche das Beitragsbild ausgibt. Auch «the_category()» oder «the_tags()» funktionieren. Wichtig ist immer nur, dass Sie diese Variablen mit <?php und ?> umschliessen.
Geplante Beiträge
Slideshow mit wechselnden Bildern – aber statischer Texteinblendung
erscheint am 21. April 2024
Beliebige Divi-Module, -Zeilen oder -Sektionen per Button-Klick anzeigen oder verstecken
erscheint am 24. April 2024
Ade Bullet-Points im Footer: Aufzählungspunkte aus der Fusszeile des Divi-Themes entfernen
erscheint am 28. April 2024
3. PHP-Code mit CSS stylen
Jetzt wollen wir natürlich noch ein wenig gestalten. Da helfen uns die bereits hinterlegten CSS-Klassen «recent-posts» und «upcoming-posts». Unsere Snippets landen ja in den Widgets auf dieser Website, also sollen die beiden Klassen auch gleich aussehen.
In unserem Falle haben wir das Aussehen wie folgt festgelegt. Auch hier können Sie variieren und den anpgepassten CSS-Code unter Design/Customizer/Zusätzliches CSS in das CSS-Stylesheet Ihres Child-Themes packen:
.recent-posts, .upcoming-posts {
font-size: 16px; line-height: 1.5
}
.recent-posts a {
text-decoration: underline;
color: #293280 !important
}Das war’s. Keine Rocket-Science. Oder?
Wir denken, dass Sie sich an PHP-Codes wagen sollten. Es lassen sich auch mit einfachen Lösungen rasch hübsche Dinge machen.
Werbung
Werbung
