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
Linken Einzug von Unterkommentaren verkleinern
publiziert am 4. Dezember 2024
Bildformate im Divi-Blurb-Modul angleichen
publiziert am 1. Dezember 2024
WordPress-Suchfunktion deaktivieren
publiziert am 27. November 2024
RSS-Trick #1: Bestimmte Kategorien vom WordPress-RSS-Feed ausschliessen
publiziert am 24. November 2024
RSS-Trick #2: Beitragsbilder in den WordPress-RSS-Feed einbinden
publiziert am 20. November 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
Schliessen-Icon im geöffneten Accordion anzeigen
erscheint am 8. Dezember 2024
Divi-Button mit Font-Awesome-Icons darstellen
erscheint am 11. Dezember 2024
Höhe der Beiträge in Blog-Übersichten anpassen
erscheint am 15. Dezember 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