Tutorials Schnell und einfach eingebaut

Related Posts ohne Plugin erstellen – 3 Varianten für Dein WordPress

Related Posts ohne Plugin erstellen - 3 Varianten für Dein WordPress

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.

Andreas Hecht

Andreas Hecht

Er entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google.

Das könnte auch interessant sein...

Das Perfmatters WordPress Performance Plugin macht dein WordPress raketenschnell

Auch Laien machen Ihre Website damit raketenschnell! Lies den Artikel dazu...

5 Kommentare Kommentar hinzufügen

  1. Schöne Lösung. Aber ich verwende auf meiner Seite z.B. keine Tags. Kann man das Snippet auch so anpassen, dass die Kategorien als Suchkriterium verwendet werden? Das wäre echt ne klasse Sache….

  2. Nice, das nenne ich mal ne schlanke Lösung! Habe mir etwas ähnliches ebenfalls selbst gecodet – bin nur nicht bei WordPress, daher standen teilweise die entsprechenden Funktionen nicht zur Verfügung.

    Bin allerdings gerade dabei mir zu Testzwecken evtl. doch mal nen “Fertig-Blog” einzurichten. Einfach um mal die Strukturen dahinter zu sehen etc.

  3. Hallo, Klasse die kleinen Snippets und Danke, dass du sie mit uns teilst. Bei diesem Snippet ist mir ein kleiner Fehler aufgefallen.
    <?php endforeach;

    Das Abschliessende ‘?>’ kommt nicht hinter ‘postdata();’, sonden hinter ‘endforeach;’
    LG Asterios

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Do NOT follow this link or you will be banned from the site!
Teilen
Teilen