Trick # 504 | Dieser Beitrag beinhaltet 599 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
WordPress liefert ein Widget mit, um Beiträge in der Seitenleiste anzuzeigen. Wer jedoch das Divi-Theme benutzt und stattdessen die Projects auflisten lassen möchte, sucht vergebens. Die Projects lassen sich jedoch fast ebenso einfach auflisten, wie die WordPress-Beiträge. Wir zeigen Ihnen wie.
Der Code, welchen Sie benötigen, ist ziemlich einfach gestrickt. Solcherlei Scripts hinterlege ich im Plugin «Insert PHP Code Snippet». Die Codes aus dessen Bibliothek kann ich dann ganz einfach per Shortcode exakt dort ausführen lassen, wo ich möchte. Es gibt noch andere, ähnliche Plugins – das erwähnte ist einfach mein Favorit.
Kopieren Sie also folgenden PHP-Code und legen Sie ihn in Ihrem Snippet-Plugin ab:
<?php $publish_projects = new WP_Query(
array(
'post_type'=>'project',
'order' => 'ASC',
'orderby' => 'title',
'post_status' => 'publish'
)); ?>
<?php if ( $publish_projects ->have_posts() ) : ?>
<?php while ($publish_projects ->have_posts()) : $publish_projects ->the_post(); ?>
<a class="projects-list" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php endwhile; ?>
<?php endif; wp_reset_query(); ?>Der Code sucht (auf Zeile 3) nach den existierenden Projects. Natürlich mit Klarnamen und auch gleich mit Link. Ausserdem habe ich die CSS-Klasse «projects-list» hinterlegt, mit welcher ich später besser stylen kann.
PHP-Code mit CSS stylen
In meinem Falle habe ich das Aussehen wie folgt festgelegt. Sie können natürlich variieren und den angepassten CSS-Code unter Design/Customizer/Zusätzliches CSS in das CSS-Stylesheet Ihres Child-Themes einfügen:
.projects-list {
font-size: 15px;
background-color: #293280;
color: #ffffff !important;
padding: 10px 18px;
border-radius: 10px;
display: inline-block;
margin-bottom: 10px;
border: 1px solid #293280;
}
.projects-list:hover {
background-color: #59b14b33;
color: #293280 !important;
}Nun präsentiert sich das Endergebnis so:
Jetzt noch den Shortcode aus meinem PHP-Plugin in ein Text- oder HTML-Widget kopieren – und gut ist.
Werbung
Werbung
