Related Posts sind eine feine Sache. Sie helfen Dir unter Umständen, Deine Besucher länger auf Deinem Blog zu halten. Doch dafür brauchst Du kein Plugin. Hier sind gleich drei Varianten, wie Du Related Posts ohne Plugin erstellen kannst.
Viele Related Posts Plugins sind völlig überfrachtet und verlangsamen Deine Website unnötig. Hier kommen schlanke und gut an Deine Wünsche anpassbare Code-Schnipsel, mit denen Du Related Posts ohne Plugin erstellen kannst.
Related Posts ohne Plugin – die Snippets
- WordPress Version: inkl. 5.xx
- PHP-Version: inkl. PHP 7.xx
Ich empfehle Dir vorher ein Child-Theme anzulegen und alle Theme-Änderungen im Child-Theme zu machen.
1
Related Post ohne Thumbnail / mit Tags
Dieser Code nutzt die vergebenen Tags zur Anzeige.
<?php
// Ab hier kopieren
function ah_related_posts() {
global $post;
$tags = wp_get_post_tags( $post->ID );
if($tags) {
foreach( $tags as $tag ) {
$tag_arr .= $tag->slug . ',';
}
$args = array(
'tag' => $tag_arr,
'numberposts' => 3, // Setze die Anzahl der von Dir gewünschten Related Posts
'post__not_in' => array($post->ID)
);
$related_posts = get_posts( $args );
if($related_posts) {
echo '<h4>Related Posts</h4>';
echo '<ul class="related-posts">';
foreach ( $related_posts as $post ) : setup_postdata( $post ); ?>
<li class="related_post">
<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<?php wp_reset_postdata(); ?>
}
}
}Die Funktionen im Theme nutzen
Um die Funktion einsetzen zu können, musst Du herausfinden, welche der Theme-Dateien für die Anzeige der einzelnen Beiträge verantwortlich ist. Meistens ist das die single.php. Dort musst Du dann noch den Funktionsaufruf an die Stelle setzen, an der die Related Posts erscheinen sollen.
<?php ah_related_posts(); ?>2
Related Post ohne Thumbnails auf Basis von Kategorien
Related Posts ohne Plugin: dieser Code nutzt die Kategorien zur Anzeige.
<?php
$categories = get_the_category( $post->ID );
if ( $categories ) :
$category_ids = array();
foreach( $categories as $individual_category ) $category_ids[] = $individual_category->term_id;
$args = array(
'category__in' => $category_ids,
'post__not_in' => array( $post->ID ),
'showposts' => 3, // number of related posts that will be shown
'meta_key' => '_thumbnail_id', // only posts with featured image
'orderby' => 'rand'
);
endif;
$related = new wp_query( $args );
?>
<?php if ( $related->have_posts() ): ?>
<h4 class="heading">
<i class="icon-hand-o-right"></i> <?php _e('Das könnte auch interessant sein...','hueman'); ?>
</h4>
<ul class="related-posts group">
<?php while ( $related->have_posts() ) : $related->the_post(); ?>
<li class="related post-hover">
<div <?php post_class(); ?>>
<div class="related-inner">
<h4 class="post-title entry-title">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</h4><!--/.post-title-->
<div class="post-meta related group">
<p class="post-date">
<?php if (get_the_modified_time() != get_the_time()) {
echo "<time class='entry-date published updated' itemprop='dateModified' datetime=".get_the_modified_time('c').">Aktualisiert am: ".get_the_modified_time(get_option('date_format'), $the_id)."</time>";
} ?>
</p>
</div><!--/.post-meta-->
</div><!--/.related-inner-->
</div>
</li><!--/.related-->
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</ul><!--/.post-related-->
<?php endif; ?>
<div class="clear"></div>
<?php wp_reset_query(); ?>Die Funktion im Theme nutzen
Mit dieser Variante gehst Du etwas anders vor. Lege eine Datei namens related-posts.php an und kopieren den obigen Code hinein. Die Datei kommt dann per FTP in den Ordner Deines aktiven Themes hinein.
Danach benötigst Du wieder die single.php und setzt den folgenden Aufruf dorthin, wo die Related Posts erscheinen sollen.
<?php get_template_part( 'related-articles' ); ?>3
Related Post mit Thumbnails auf Basis von Kategorien
Dieser Code ist komplexer und benötigt einige Anpassungen mehr, um wirklich gute Ergebnisse liefern zu können.
Da die Related Posts ohne Plugin mit Thumbnail erstellt werden, brauchen wir eine spezielle Bildgröße, damit das Ergebnis so richtig schick wird. Kopiere daher den folgenden Code in die functions.php Deines aktiven Themes hinein:
function ah_related_posts_thumbnails() {
add_image_size( 'related-posts', 485, 300, true );
}
add_action( 'after_setup_theme', 'ah_related_posts_thumbnails' ); Nachdem Du die Datei wieder hochgeladen hast, installiere Dir das Plugin »Regenerate Thumbnails«, aktiviere es und rufe die Plugin-Seite unter Werkzeuge => Regenerate Thumbnails auf.
Klicke auf den Button »Regenerate Thumbnails for Featured Images Only«. Danach passt das Plugin die benötigten neuen Bildgrößen an.
Erstelle auch in diesem Fall eine neue Datei namens related-posts.php, kopiere den folgenden Code hinein und lade sie in das Hauptverzeichnis Deines aktiven Themes hinein.
<?php
$categories = get_the_category( $post->ID );
if ( $categories ) :
$category_ids = array();
foreach( $categories as $individual_category ) $category_ids[] = $individual_category->term_id;
$args = array(
'category__in' => $category_ids,
'post__not_in' => array( $post->ID ),
'showposts' => 3, // number of related posts that will be shown
'meta_key' => '_thumbnail_id', // only posts with featured image
'orderby' => 'rand'
);
endif;
$related = new wp_query( $args );
?>
<?php if ( $related->have_posts() ): ?>
<h4 class="heading">
<i class="icon-hand-o-right"></i> <?php _e('Das könnte auch interessant sein...','hueman'); ?>
</h4>
<ul class="related-posts group">
<?php while ( $related->have_posts() ) : $related->the_post(); ?>
<li class="related post-hover">
<div <?php post_class(); ?>>
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php if ( has_post_thumbnail() ): ?>
<?php the_post_thumbnail('related-posts'); ?>
<?php endif; ?>
</a>
</div><!--/.post-thumbnail-->
<div class="related-inner">
<h4 class="post-title entry-title">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</h4><!--/.post-title-->
<div class="post-meta related group">
<p class="post-date">
<?php if (get_the_modified_time() != get_the_time()) {
echo "<time class='entry-date published updated' itemprop='dateModified' datetime=".get_the_modified_time('c').">Aktualisiert am: ".get_the_modified_time(get_option('date_format'), $the_id)."</time>";
} ?>
</p>
</div><!--/.post-meta-->
</div><!--/.related-inner-->
</div>
</li><!--/.related-->
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</ul><!--/.post-related-->
<?php endif; ?>
<div class="clear"></div>
<?php wp_reset_query(); ?>Teil zwei: das CSS für die Related Posts
Kopiere den folgenden CSS-Code in das style.css Deines aktiven Themes hinein:
.related-posts{margin-bottom:0;border-bottom:2px solid #eee;margin-left:0;display:inline-block;padding-bottom:20px}
.related-posts li{width:33.3%;float:left;display:inline;margin:0;padding:0;line-height:1}
.related-posts .post{border-right:5px solid transparent;margin-bottom:0;padding-bottom:10px}
.related-posts li:nth-child(4) article{display:none}
.related-posts li:nth-child(3) article{border-right-color:transparent}
.related-posts .related-inner{padding:0 20px 0 0}
.single .related-posts .post-title{font-size:16px !important;font-weight:700!important;line-height:1.3em;letter-spacing:0;display:block;font-family: Arial,sans-serif; margin-top: 10px !important; margin-bottom: 8px !important; color: #495762 !important; text-transform: uppercase;}
.single .post-meta.related{font-size:13px!important;text-transform:none!important;padding-top:5px}
.related-posts article,.single article{border-bottom:none!important}
.related-posts p.post-date {margin-bottom: 0 !important}
.related-posts.group article {margin-bottom: 0 !important}Jetzt kannst Du die Related Posts in Deiner single.php mit folgendem Tag dort erscheinen lassen, wo Du es möchtest.
<?php get_template_part( 'related-articles' ); ?>Übrigens ist die Version Nummer drei bei mir im Einsatz. So einfach kannst Du Related Posts ohne Plugin erstellen.
