WPBeginner - WordPress-Tutorials für Anfänger

Vertrauenswürdige WordPress-Tutorials, wenn Sie sie am dringendsten benötigen.
Anfängerleitfaden für WordPress
WPB Cup
25 Millionen+
Websites, die unsere Plugins verwenden
16+
Jahre WordPress-Erfahrung
3000+
WordPress-Tutorials von Experten

So geht's: Ähnliche Beiträge mit Thumbnails in WordPress ohne Plugins

Von Editorial Staff | | Offenlegung für Leser

Shares 192 ChatGPT Perplexity X LinkedIn WhatsApp

Möchten Sie eine Liste verwandter Beiträge auf Ihrer WordPress-Website anzeigen und bevorzugen Sie die Verwendung von Code anstelle eines Plugins?

Bei WPBeginner betonen wir oft die Bedeutung der Einbindung Ihres Publikums und der Förderung der Erkundung Ihrer Inhalte. Eine effektive Strategie, die wir auf unzähligen erfolgreichen WordPress-Websites gesehen haben, ist die Anzeige verwandter Beiträge.

Wenn Besucher Ihres Blogs einen Artikel gelesen haben, der sie interessiert, hält eine Liste verwandter Beiträge sie bei Laune und hilft ihnen, neue Inhalte zum Lesen zu finden.

In diesem Artikel zeigen wir Ihnen, wie Sie verwandte Beiträge mit WordPress per Code anzeigen, ganz ohne Plugin.

So: Verwandte Beiträge mit Thumbnails in WordPress ohne Plugins

Warum verwandte Beiträge in WordPress anzeigen?

Wenn Ihr WordPress-Blog wächst, kann es für Benutzer schwieriger werden, andere Beiträge zum gleichen Thema zu finden.

Eine Liste verwandter Inhalte am Ende jedes Blogbeitrags anzuzeigen, ist eine großartige Möglichkeit, Ihre Besucher auf Ihrer Website zu halten und die Seitenaufrufe zu erhöhen. Es hilft auch, die Sichtbarkeit Ihrer wichtigsten Seiten zu verbessern, indem Ihre besten Inhalte dort angezeigt werden, wo die Leute sie leicht finden können.

Wenn Sie sich mit Code nicht auskennen, ist es einfacher, eines der vielen WordPress Related Posts Plugins zu wählen, die verwandte Beiträge ohne Code anzeigen können.

Aber wenn Sie sich jemals gefragt haben, ob Sie verwandte Beiträge ohne Plugin anzeigen können, teilen wir Ihnen zwei verschiedene Algorithmen mit, mit denen Sie verwandte Beiträge mit Thumbnails nur mit Code generieren können:

Hinweis: Wenn Sie mit jedem verwandten Beitrag ein Thumbnail anzeigen möchten, stellen Sie sicher, dass Sie diesen Beiträgen zuerst ein Beitragsbild hinzufügen.

Methode 1: So zeigst du verwandte Beiträge in WordPress nach Schlagwörtern an

Eine effiziente Methode, um verwandte Inhalte zu finden, ist die Suche nach anderen Beiträgen, die dieselben Tags verwenden. Tags werden oft verwendet, um sich auf die spezifischen Details zu konzentrieren, die in einem Beitrag enthalten sind.

In diesem Sinne möchten Sie vielleicht einige gängige Tags zu den Beiträgen hinzufügen, die Sie miteinander verknüpfen möchten. Sie können sie im Feld 'Tags' im WordPress-Editor eingeben.

Die „Tags“-Einstellungsbox im WordPress-Editor

Nachdem Sie Ihren Beiträgen Tags hinzugefügt haben, müssen Sie als Nächstes den folgenden Code-Schnipsel in die single.php-Vorlage Ihres Themes einfügen.

Wenn Sie Hilfe beim Hinzufügen von Code zu Ihrer Website benötigen, lesen Sie unseren Leitfaden zum Einfügen von Snippets aus dem Web in WordPress.

$orig_post = $post;
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=>5, // Number of related posts that will be shown.
'ignore_sticky_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
   
echo '<div id="relatedposts"><h3>Related Posts</h3><ul>';
   
while( $my_query->have_posts() ) {
$my_query->the_post(); ?>
   
<li><div class="relatedthumb"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_post_thumbnail(); ?--></a></div>
<div class="relatedcontent">
<h3><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_title(); ?--></a></h3>
<!--?php the_time('M j, Y') ?-->
</div>
</li>
<!--?php }
echo '</ul--></ul></div>';
}
}
$post = $orig_post;
wp_reset_query();
Hosted with ❤️ by WPCode
1-click Use in WordPress

Dieser Code sucht nach Tags, die mit einer Seite verknüpft sind, und führt dann eine Datenbankabfrage aus, um Seiten mit ähnlichen Tags abzurufen.

Wo sollten Sie den Code platzieren? Das hängt von Ihrem Theme ab, aber in den meisten Fällen sollten Sie den Code in die single.php-Vorlage Ihres Themes nach dem Hauptbeitrag und direkt über dem Kommentarbereich einfügen können.

Wenn Sie das Twenty Twenty-One-Theme verwenden, wie wir es auf unserer Demo-Site tun, dann ist ein guter Ort, um den Code einzufügen, die Datei template-parts/content/content-single.php nach dem Header und direkt nach <?php the_content();.

Ähnliche Inhalte nach Tags Vorschau

Dies zeigt automatisch verwandte Inhalte in jedem WordPress-Beitrag an.

Sie müssen das Styling und das Erscheinungsbild Ihrer verwandten Beiträge ändern, damit sie zu Ihrem Theme passen, indem Sie benutzerdefiniertes CSS hinzufügen.

Beispiel für verwandte Beiträge

Tipp: Anstatt Ihre Theme-Dateien zu bearbeiten, was Ihre Website beschädigen könnte, empfehlen wir die Verwendung eines Code-Snippet-Plugins wie WPCode.

WPCode macht es sicher und einfach, benutzerdefinierten Code in WordPress einzufügen. Außerdem verfügt es über 'Einfüge'-Optionen, mit denen Sie Snippets automatisch an bestimmten Stellen auf Ihrer WordPress-Website einfügen und ausführen können, z. B. nach einem Beitrag.

WPCode-Einfügeoptionen für benutzerdefinierte Code-Snippets

Weitere Details finden Sie in unserem Leitfaden zum einfachen Hinzufügen von benutzerdefiniertem Code in WordPress. Sie können auch unsere detaillierte WPCode-Bewertung lesen, um mehr über das Plugin zu erfahren.

Methode 2: So zeigen Sie verwandte Beiträge in WordPress nach Kategorie an

Eine weitere Möglichkeit, verwandte Inhalte anzuzeigen, ist die Auflistung von Beiträgen, die sich in derselben Kategorie befinden. Der Vorteil dieser Methode ist, dass die Liste der verwandten Beiträge fast nie leer sein wird.

Ähnlich wie bei Methode 1 müssen Sie einen Code-Schnipsel zu Ihrer single.php-Vorlage oder einem Code-Schnipsel-Plugin wie WPCode hinzufügen. Weitere Details finden Sie in Methode 1 und in unserem Leitfaden zum einfachen Hinzufügen von benutzerdefiniertem Code in WordPress.

$orig_post = $post;
global $post;
$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),
'posts_per_page'=> 2, // Number of related posts that will be shown.
'ignore_sticky_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="related_posts"><h3>Related Posts</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post();?>
   
<li><div class="relatedthumb"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_post_thumbnail(); ?--></a></div>
<div class="relatedcontent">
<h3><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_title(); ?--></a></h3>
<!--?php the_time('M j, Y') ?-->
</div>
</li>
<!--?php }
echo '</ul--></ul></div>';
}
}
$post = $orig_post;
wp_reset_query();
Hosted with ❤️ by WPCode
1-click Use in WordPress

Jetzt sehen Sie am Ende jedes Beitrags eine Liste verwandter Inhalte.

Wenn Sie das Styling und Erscheinungsbild Ihrer verwandten Seiten ändern möchten, müssen Sie benutzerdefiniertes CSS hinzufügen, um es an Ihr Theme anzupassen.

Möchten Sie mehr über die Anzeige verwandter Beiträge in WordPress erfahren? Schauen Sie sich diese hilfreichen Tutorials zu verwandten Beiträgen an:

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie verwandte Beiträge mit Thumbnails in WordPress ohne Plugins anzeigen. Möglicherweise möchten Sie auch lernen, wie Sie Besucher auf Ihrer WordPress-Site verfolgen, oder unsere Liste von 24 Tipps zur Beschleunigung Ihrer Website ansehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.

Beliebt auf WPBeginner Gerade jetzt!

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, können wir eine Provision verdienen. Sehen Sie wie WPBeginner finanziert wird, warum das wichtig ist und wie Sie uns unterstützen können. Hier ist unser Redaktionsprozess.

Das ultimative WordPress-Toolkit

Erhalten Sie KOSTENLOSEN Zugang zu unserem Toolkit – eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Jetzt herunterladen

Leserinteraktionen

184 CommentsLeave a Reply

  4. Ich habe eine Frage dazu: Ich kämpfe mit dem Code, um Beiträge aus untergeordneten Kategorien anstelle von übergeordneten Kategorien zu erfassen. Irgendwelche Ratschläge?

    Reply

  6. Ich versuche, die verwandten Beiträge nach Kategorie zu verwenden, und ich habe bemerkt, dass Sie sagten, der Code müsse vor den Kommentaren in der Hauptschleife stehen. In meinem Code möchte ich, dass die verwandten Beiträge nach den Kommentaren in der Schleife erscheinen. Wenn ich das tue, stelle ich fest, dass mein Disqus-Kommentar-Plugin jetzt länger zum Laden braucht. Liegt das an einem Fehler bei den Kommentaren oder ist das normal?

    Reply

  7. bitte

    Könnte mir ein Neuling wie mir helfen, dieses Skript anzupassen, damit verwandte Beiträge horizontal angezeigt werden?

    von links nach rechts..

    anstatt sie derzeit von oben nach unten, vertikal anzuzeigen...

    Reply

    • Hallo,

      Wie ich es gemacht habe, habe ich die und Codes durch mein eigenes HTML und CSS ersetzt. Die Codes erstellen Listen für jeden Beitrag, und das ist normalerweise vertikal.

      ——————

      <a href="” rel=”bookmark” title=””> <a href="” rel=”bookmark” title=””>

      ——————

      Ich habe das öffnende mit und das schließende mit als meine HTML-Tags ersetzt. Dann schreibe ich mein CSS, um den Bedürfnissen dieser spezifischen div-Klasse auf deiner Website zu entsprechen. Zum Beispiel könnte eine Beispiel-pleft-Klasse so aussehen:

      .pleft {float:left; padding:2px; margin:10px; width:278px; height:190px;}

      Ich verwende den `float`-Selektor in meinem CSS, um Beiträge horizontal zu verschieben, und die Ränder und Abstände, um jedem Beitrag Abstand zueinander zu geben. Ich habe eine spezifische Breite und Höhe für zusätzliche Beispiele hinzugefügt.

      Ich hoffe, das hilft.

      Reply

  8. Ich habe definitiv verwandte Tags, aber wenn ich den Code hinzufüge, sehe ich nichts. Wenn ich Ihren Code hinzufüge, um auf einen benutzerdefinierten Beitragstyp zu beschränken, erhalte ich einen Fehler. Ich habe den Beitragstyp auf meinen spezifischen Beitragstyp geändert.

    Reply

  9. @wpbeginner Hallo

    Danke für deine schnelle Antwort...

    aber ich bin ein echter Neuling bei allem, was Sie sagen...

    Können Sie bitte ein kleines Beispiel geben?

    damit sie horizontal sind, wie auf Ihrem eigenen Blog?

    Sie können mich per E-Mail erreichen: khiloc at gmail dot com

    Reply

  10. @subzerokh Sie müssten das Styling bearbeiten. Es ist nicht so schwer. Wickeln Sie einfach jeden Beitrag in ein Div. Geben Sie diesem Div eine Breite an und setzen Sie dann die Eigenschaft float left. Passen Sie die Ränder usw. an und Sie haben es.

    Reply

  11. Hallo zusammen!! Danke für dieses wundervolle Skript!!

    Es ist das Einzige, was ich gefunden habe, das genau das tut, was ich wollte!!!

    Aber es werden nur verwandte Beiträge vertikal angezeigt (von oben nach unten).

    Ich möchte, dass es von links nach rechts (horizontal) angezeigt wird

    Wie mache ich das bitte??

    Reply

  13. Hey,

    toller Beitrag! Vielleicht könntest du mir helfen:

    Ich habe einen automatischen Daumen, wenn keiner definiert ist.

    if ($thumb_array[‘thumb’] == ”) $thumb_array[‘thumb’] = ‘link to your default thumbnail image’;return $thumb_array;

    Nun ist meine Frage, wie definiere ich einen Thumbnail für jede Kategorie, der verwendet wird, wenn keiner im Beitrag definiert ist.

    Reply

  15. Hi

    Danke für deinen tollen Beitrag..

    Aber gibt es eine Möglichkeit, Beiträge nach Kategorien zu erhalten, aber nicht in ul und li und nicht als Thumbnail..

    Ich meine, vollständige Beiträge werden in verwandten Beiträgen angezeigt... genau wie auf der Startseite, mit Leselink.

    danke

    warte auf Ihre Antwort..

    Reply

  16. Hi

    Danke für deinen tollen Beitrag..

    Aber gibt es eine Möglichkeit, Beiträge nach Kategorien zu erhalten, aber nicht in ul und li und nicht als Thumbnail..

    Ich meine, vollständige Beiträge werden in verwandten Beiträgen angezeigt... genau wie auf der Startseite, mit Leselink.

    danke

    warte auf Ihre Antwort..

    Reply

  19. Das ist großartig, genau das, wonach ich gesucht habe. Ich frage mich jedoch, wie ich die beiden oben genannten kombinieren könnte und ob, wenn keine Tags vorhanden sind, Beiträge aus derselben Kategorie angezeigt werden?

    Ich versuche, das herauszufinden, komme aber noch nicht sehr weit

    Reply

  20. Danke für den Code, er hat funktioniert, aber wie gestalte ich ihn? Ich möchte, dass 4 Beiträge nebeneinander angezeigt werden, wie bei Ihnen. Auf meiner Website werden sie untereinander und nicht nebeneinander angezeigt.

    Reply

    • Das ist CSS. Wir verwenden diesen Code nicht, um verwandte Geschichten anzuzeigen. Zweitens glaube ich, dass Sie von hervorgehobenen Geschichten in unserer Seitenleiste sprechen. Wir haben einen weiteren Beitrag dazu auf unserer Website geschrieben.

      Reply

      Admin

  21. Gibt es eine Möglichkeit, die Thumbnails in verwandten Beiträgen anzuzeigen, ohne Beitragsbilder oder Beitrags-Thumbnails zu verwenden??
    Also, um jedes Bild zu verwenden, das im Beitrag verwendet wird...

    Reply

    • Ja, Sie können die Fallback-Techniken nutzen, die von anderen Entwicklern geteilt werden und das erste Bild aus dem Beitrag ziehen. Wir empfehlen jedoch die Verwendung von WordPress-Beitrags-Thumbnails…

      Reply

      Admin

  22. Danke für diesen Artikel. Ich habe mich gefragt, ob es eine Möglichkeit gibt, Beiträge automatisch zu taggen, ohne sie manuell eingeben zu müssen.

    Reply

  25. Hallo... Ich wollte nur sagen, dass ich meine WordPress-Website von Grund auf neu aufgebaut habe und dieser Code mit WP 3.1 perfekt für mich funktioniert. Alles, was ich jetzt noch tun muss, ist das CSS zu gestalten und einige Thumbnails für die Beiträge zu erstellen. Danke für deine Hilfe mit dem Code.

    Reply

  27. Hallo, gibt es eine Möglichkeit, Kategorien auszuschließen? Ich habe zwei Hauptkategorien, denen alle Kategorien zugewiesen werden. Die Hauptkategorien haben Unterkategorien und ich möchte nur verwandte Beiträge aus den Unterkategorien anzeigen.

    Ist das möglich, indem die IDs der Hauptkategorien ausgeschlossen werden?

    Danke für deinen Rat!

    Übrigens... liebe den Code... und er funktioniert großartig!!!

    Reply

  29. Nur eine Frage: Gibt es eine Möglichkeit, nur Tags vom gleichen Beitragstyp abzurufen? Vielleicht mit etwas wie 'post_type=videos'?

    Reply

    • Übrigens, das habe ich auch herausgefunden:

      Füge es einfach zum Array hinzu:

      $args=array( ‘category__in’ => $category_ids, ‘post__not_in’ => array($post->ID), ‘posts_per_page’=> 2, // Anzahl der anzuzeigenden verwandten Beiträge. ‘caller_get_posts’=>1, ‘post_type’=>’videos’ );

      Reply

  30. Hallo,

    Vielen Dank für dieses Tutorial. Ich frage mich jedoch, ob es eine Möglichkeit gibt, die verwandten Produkte zu randomisieren? Ich habe verschiedene Produkte in derselben Kategorie überprüft und es wurden immer dieselben verwandten Produkte angezeigt.

    Danke

    Reply

  32. Ich habe diesen Code kopiert und in meine single.php eingefügt, ohne etwas zu ändern, und es wird nichts ausgegeben. Ist etwas mit meinem Code falsch? pastebin.com/kg0SkrAg

    Reply

  33. Dies zeigt kein Vorschaubild an – es gibt im Code nicht einmal eine Aufforderung für ein Bild. Ich sehe nicht, wie das jemand zum Laufen bringen kann.

    Reply

    • Der Code für das Bild lautet: the_post_thumbnail(); << Dies ist kein statisches HTML, bei dem Sie den img src-Code sehen. Die Funktion ruft die Datenbank auf, um nach einem Featured Image, auch Thumbnail genannt, zu suchen, das jedem Artikel zugeordnet ist. Wenn es gefunden wird, wird das Bild ausgegeben. Wenn Sie keine Beitrags-Thumbnails in Ihrem Theme aktiviert haben, müssen Sie diese zuerst hinzufügen:

      https://www.wpbeginner.com/wp-themes/how-to-add-post-thumbnails-in-wordpress/

      Der Artikel hat das klar im Abschnitt "Hinweis" angegeben. Du solltest ihn gründlich lesen.

      Reply

      Admin

  34. Hey Mann, ich liebe deinen Blog!

    Ich habe eine Frage?

    Können Sie denselben Trick machen, aber „NACH Autor“?

    die neuesten Beiträge des Autors anzeigen?

    you will save my life :-)

    Übrigens danke für diese Website!

    Reply

  35. Danke für diesen Code! Ich habe ihn ausprobiert und er funktioniert einigermaßen.

    Ich kann eine Liste der verwandten Artikel erhalten, ein großer Vorteil.

    Aber ich kann keine Bilder anzeigen lassen.

    Die Artikel haben Bilder, wenn dieser Code extrahiert wird.

    Ich habe auch Bilder für jeden Beitrag mit dem benutzerdefinierten Tag "relatedthumb" erstellt. Aber leider immer noch keine Bilder.

    Muss ich noch etwas tun?

    Vielen Dank im Voraus!

    Quinn

    Reply

    • Dieser Trick verwendet die standardmäßigen WordPress-Thumbnails, die in WP 2.9 hinzugefügt wurden. Wenn Sie ein Bild als dieses Thumbnail angehängt haben, wird es abgerufen.

      Reply

      Admin

  37. Hallo, danke für dieses gute Tutorial, ich benutze derzeit das Thesis-Theme, daher möchte ich wissen, ob es im Thesis-Theme eine Möglichkeit gibt, diesen .php-Code zu implementieren.

    Reply

  38. Ich versuche, seinen Code zu modifizieren, um ihn mit Kategorien innerhalb eines benutzerdefinierten Beitragstyps zu verwenden. Kann mir jemand helfen? Ich bin ziemlich neu in PHP.

    Danke!

    Reply

  42. Hallo!
    Danke für diese Information! Das ist genau das, wonach ich gesucht habe.
    Gibt es eine Möglichkeit, hier einen Auszug zusammen mit dem Foto hinzuzufügen?

    Nochmals vielen Dank für Ihre Hilfe!

    Reply

  44. Danke fürs Teilen. Ich benutze diesen Code schon eine Weile, aber er hat ein Problem: Beim Hinzufügen von Tags zu einem Beitrag sortiert WP sie alphabetisch, unabhängig von der von mir hinzugefügten Priorität. Dieser Code zeigt also nur verwandte Beiträge an, die dem ersten Tag entsprechen, was manchmal weniger relevant ist.
    Vielleicht haben Sie eine Idee, wie man diese automatische Sortierung von Tags durch WordPress verhindern kann, oder eine andere Lösung?

    Reply

    • Doug, bitte kontaktieren Sie uns über das Formular mit einem Live-Link-Beispiel, und wir können Ihnen helfen. Wir wissen, dass dieser Code funktioniert, weil einige unserer Kunden ihn verwenden.

      Reply

      Admin

  47. Tolles Tutorial. Würde mir jemand zeigen, wie ein funktionierendes single.php mit diesem Code aussieht?

    Ich lerne immer noch PHP.

    Leider
    Parse error: syntax error, unexpected T_ENDIF in C:\xampplite\htdocs\mock\wp-content\themes\scwd\single.php on line 76

    Reply

  50. Danke für diesen Artikel. Ich suche schon lange nach einer Möglichkeit, Thumbnails zu meinen Artikeln anzuzeigen, aber ich schaffe es nicht. Ich habe viele WordPress-Plugins ausprobiert, aber es hat nicht geklappt. Hoffentlich hilft mir das weiter.

    Reply

Kommentar hinterlassen

Vielen Dank, dass Sie einen Kommentar hinterlassen. Bitte beachten Sie, dass alle Kommentare gemäß unserer Kommentarrichtlinie moderiert werden und Ihre E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwenden Sie KEINE Schlüsselwörter im Namensfeld. Führen wir ein persönliches und bedeutungsvolles Gespräch.

Copyright © 2009 - 2025 WPBeginner LLC. Alle Rechte vorbehalten. WPBeginner® ist eine eingetragene Marke.

Verwaltet von Awesome Motive | WordPress-Hosting von SiteGround

Die Marke WordPress® ist das geistige Eigentum der WordPress Foundation. Die Verwendung von WordPress®-Namen auf dieser Website dient ausschließlich Identifikationszwecken und impliziert keine Billigung durch die WordPress Foundation. WPBeginner wird nicht von der WordPress Foundation unterstützt, besessen oder ist mit ihr verbunden.

Ich brauche Hilfe bei…

Beliebte Suchen:

Einen Blog starten WordPress SEO WordPress-Performance WordPress-Fehler WordPress-Sicherheit Aufbau eines Online-Shops