Mit zwei kleinen PHP-Hacks Beitragsübersichten für alle Lebenslagen selber bauen – der 200. Beitrag von Dr. Code

18. Januar 2023 | CSS-Stylesheet, Scripts, WordPress

Dieser Beitrag beinhaltet 1317 Wörter. Geschätzte Lesezeit: ca. 7 Minuten.

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.

​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

Divi-Theme: Geöffnetes Mobilmenu mit einem «X» schliessen und/oder Icon animieren
erscheint am 12. Februar 2023

WordPress-Suchfunktion auf Beiträge beschränken
erscheint am 15. Februar 2023

Schlagwörter im Divi-Blog-Modul anzeigen
erscheint am 19. Februar 2023

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

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This