WPBeginner - WordPress-handledningar för nybörjare

Pålitliga WordPress-handledningar, när du behöver dem som mest.
Nybörjarguide till WordPress
WPB Cup
25 miljoner+
Webbplatser som använder våra plugins
16+
År av WordPress-erfarenhet
3000+
WordPress-handledningar
av experter

Hur man: Relaterade inlägg med miniatyrbilder i WordPress utan plugins

Av Editorial Staff | | Reader Disclosure

Shares 192 ChatGPT Perplexity X LinkedIn WhatsApp

Vill du visa en lista med relaterade inlägg på din WordPress-webbplats och föredrar att använda kod snarare än ett plugin?

På WPBeginner betonar vi ofta vikten av att engagera din publik och få dem att utforska ditt innehåll. En effektiv strategi vi har sett användas på otaliga framgångsrika WordPress-webbplatser är att visa relaterade inlägg.

När besökare på din blogg har läst klart en artikel de är intresserade av, kommer en lista med relaterade inlägg att hålla dem engagerade och hjälpa dem att hitta nytt innehåll att läsa.

I den här artikeln visar vi hur du visar relaterade inlägg med WordPress med kod, utan att behöva ett plugin.

Hur man: Relaterade inlägg med miniatyrer i WordPress utan plugins

Varför visa relaterade inlägg i WordPress?

När din WordPress-blogg börjar växa kan det bli svårare för användare att hitta andra inlägg om samma ämne.

Att visa en lista med relaterat innehåll i slutet av varje blogginlägg är ett utmärkt sätt att behålla dina besökare på din webbplats och öka sidvisningarna. Det hjälper också till att förbättra synligheten för dina viktigaste sidor genom att visa ditt bästa innehåll där folk lätt kan hitta det.

Om du inte är bekant med kod, kommer du att finna det enklare att välja ett av de många WordPress-plugins för relaterade inlägg som kan visa relaterade inlägg utan kod.

Men om du någonsin har undrat om du kan visa relaterade inlägg utan att använda ett plugin, kommer vi att dela två olika algoritmer som du kan använda för att generera relaterade inlägg med miniatyrbilder med enbart kod:

Notera: Om du vill visa en miniatyrbild med varje relaterat inlägg, se till att du först lägger till en utvald bild till dessa inlägg.

Metod 1: Hur man visar relaterade inlägg i WordPress med taggar

Ett effektivt sätt att hitta relaterat innehåll är att leta efter andra inlägg som delar samma taggar. Taggar används ofta för att fokusera på de specifika detaljer som finns i ett inlägg.

Med det i åtanke kan du kanske lägga till några vanliga taggar till de inlägg du vill relatera till varandra. Du kan ange dem i rutan 'Taggar' i WordPress-redigeraren.

Inställningsrutan 'Taggar' i WordPress-redigeraren

När du har lagt till taggar i dina inlägg är nästa steg att lägga till följande kodavsnitt i din temas single.php-mall.

Om du behöver hjälp med att lägga till kod på din webbplats, se vår guide om hur man klistrar in kodavsnitt från webben i 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

Den här koden letar efter taggar som är associerade med en sida och kör sedan en databasfråga för att hämta sidor med liknande taggar.

Var ska du placera koden? Det beror på ditt tema, men i de flesta fall bör du kunna klistra in koden i ditt temas single.php-mall efter huvudinlägget och precis ovanför kommentarsavsnittet.

Om du använder temat Twenty Twenty-One som vi gör på vår demosida, då är en bra plats att klistra in koden i filen template-parts/content/content-single.php efter headern och precis efter <?php the_content();.

Relaterat innehåll efter taggar Förhandsgranskning

Detta kommer automatiskt att visa relaterat innehåll på alla WordPress-inlägg.

Du behöver ändra stilen och utseendet på dina relaterade inlägg för att matcha ditt tema genom att lägga till anpassad CSS.

Exempel på relaterade inlägg

Tips: Istället för att redigera dina temafiler, vilket kan bryta din webbplats, rekommenderar vi att du använder ett kodavsnittsplugin som WPCode.

WPCode gör det säkert och enkelt att lägga till anpassad kod i WordPress. Dessutom kommer den med 'Infognings'-alternativ som låter dig automatiskt infoga och köra kodavsnitt på specifika platser på din WordPress-webbplats, till exempel efter ett inlägg.

WPCode-infogningsalternativ för anpassade kodavsnitt

För mer information, se vår guide om hur man lägger till anpassad kod i WordPress. Du kan också kolla in vår detaljerade WPCode-recension för att lära dig mer om pluginet.

Metod 2: Hur man visar relaterade inlägg i WordPress efter kategori

Ett annat sätt att visa relaterat innehåll är att lista inlägg som finns i samma kategori. Fördelen med denna metod är att listan med relaterade inlägg nästan aldrig kommer att vara tom.

Precis som metod 1 behöver du lägga till ett kodavsnitt i din temas single.php-mall eller i ett kodavsnitt-plugin som WPCode. För mer information, se metod 1 och vår guide om hur du lägger till anpassad kod i 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

Nu kommer du att se en lista med relaterat innehåll längst ner på varje inlägg.

Om du vill ändra utformningen och utseendet på dina relaterade sidor, då behöver du lägga till anpassad CSS för att matcha ditt tema.

Vill du lära dig mer om att visa relaterade inlägg i WordPress? Kolla in dessa hjälpsamma handledningar om relaterade inlägg:

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du visar relaterade inlägg med miniatyrbilder i WordPress utan plugins. Du kanske också vill lära dig hur man spårar besökare till din WordPress-webbplats, eller kolla in vår lista med 24 tips för att snabba upp din webbplats.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.

Populärt på WPBeginner Just nu!

Upplysning: Vårt innehåll stöds av läsarna. Det innebär att om du klickar på några av våra länkar kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt och hur du kan stödja oss. Här är vår redaktionella process.

Det ultimata WordPress-verktyget

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som alla proffs bör ha!

Ladda ner nu

Läsarnas interaktioner

184 CommentsLeave a Reply

  4. Jag har en fråga om detta: Jag kämpar med koden för att hämta inlägg från underkategorier istället för huvudkategorier. Några råd?

    Reply

  6. Jag försöker använda relaterade inlägg per kategori och jag märkte att du sa att koden måste komma före kommentarerna i huvudloopen. I min kod vill jag att de relaterade inläggen ska komma efter kommentarerna i loopen. När jag gör detta märker jag att mitt Disqus-kommentarplugin tar längre tid att ladda nu. Beror det på ett fel med kommentarerna eller är det normalt?

    Reply

  7. snälla

    kan någon hjälpa en nybörjare som jag att anpassa detta skript så att det visar relaterade inlägg på ett horisontellt sätt?

    från vänster till höger..

    istället för att för närvarande visa det från upp till ner, vertikalt...

    Reply

    • Hej,

      Hur jag gjorde det var att jag ersatte koderna och med min egen html och css. koderna skapar listor för varje inlägg, och det är vanligtvis i en vertikal riktning.

      ——————

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

      ——————

      Jag ersatte öppningen med och ersatte avslutningen med som mina HTML-taggar. Sedan skriver jag min CSS för att passa de specifika behoven för den div-klassen på din webbplats. Till exempel kan en exempel pleft-klass se ut så här:

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

      Jag använder float: selector i min CSS för att flytta inlägg horisontellt, och marginaler och stoppning för att ge varje inlägg utrymme mellan varandra. Jag lade till en specifik bredd och höjd för ytterligare exempel.

      Hoppas detta hjälper.

      Reply

  8. Jag har definitivt relaterade taggar, men när jag lägger till koden ser jag ingenting. Dessutom, när jag lägger till din kod för att begränsa till en anpassad inläggstyp, ger det mig ett fel. Jag ändrade inläggstypen till min specifika inläggstyp.

    Reply

  9. @wpbeginner hej

    tack för ditt snabba svar...

    men jag är en riktig nybörjare på allt du säger...

    kan du ge ett litet exempel?

    för att göra dem horisontella som på din egen blogg?

    kan komma i kontakt via min e-post: khiloc at gmail dot com

    Reply

  10. @subzerokh Du skulle behöva redigera stilen. Det är inte så svårt. Slå helt enkelt in varje inlägg i en div. Ange en bredd för den div:en och ställ sedan in en float left-egenskap. Justera marginalerna och så vidare så har du det.

    Reply

  11. hej allihop!! tack för detta underbara skript!!

    Det är det enda jag hittade som gjorde exakt vad jag ville!!!

    Men det visar bara relaterade inlägg på ett vertikalt sätt (uppifrån och ner)

    Jag skulle vilja att det visas från vänster till höger (horisontellt)

    Hur gör man det tack??

    Reply

  13. hej,

    bra inlägg! kanske du kan hjälpa mig:

    Jag har en automatisk miniatyrbild om ingen är definierad,

    if ($thumb_array[‘thumb’] == ”) $thumb_array[‘thumb’] = ‘länk till din standardminiatyrbild’;return $thumb_array;

    nu är min fråga hur man definierar en tumme för varje kategori, som kommer att användas om ingen är definierad vid inlägget.

    Reply

  15. Hej

    tack för ditt utmärkta inlägg..

    Men någon ändring för att få inlägg efter kategorier men inte i ul och li och inte i miniatyrbild...

    Jag menar att hela inlägg visas i relaterade inlägg.. precis som på startsidan, med läs mer-länk.

    tack

    väntar på ditt svar..

    Reply

  16. Hej

    tack för ditt utmärkta inlägg..

    Men någon ändring för att få inlägg efter kategorier men inte i ul och li och inte i miniatyrbild...

    Jag menar att hela inlägg visas i relaterade inlägg.. precis som på startsidan, med läs mer-länk.

    tack

    väntar på ditt svar..

    Reply

  19. Detta är jättebra, precis vad jag har letat efter. Jag undrar dock, hur skulle jag kunna kombinera de två ovanstående och om det inte finns några taggar så visas inlägg från samma kategori?

    Försöker lista ut detta men kommer inte så långt än

    Reply

  20. Tack för koden, den fungerade men hur stylar jag den. Jag skulle vilja att den visar 4 berättelser sida vid sida som dina. På min webbplats listas de en ovanpå den andra och inte sida vid sida som dina.

    Reply

    • Det är CSS. Vi använder inte den här koden för att visa relaterade berättelser. För det andra tror jag att det du pratar om är utvalda berättelser i vår sidofält. Vi har skrivit ett annat inlägg om det på vår webbplats.

      Reply

      Admin

  21. finns det ett sätt att visa tummarna i relaterade inlägg utan att använda utvalda bilder eller inläggstummarna??
    dvs att använda en bild som används i inlägget...

    Reply

    • Ja, du kan använda återställningsteknikerna som delas av andra utvecklare som hämtar den första bilden från inlägget. Men vi rekommenderar att du använder WordPress-inläggstumnaglar...

      Reply

      Admin

  22. Tack för den här artikeln. Jag undrade om det finns ett sätt att automatiskt tagga inlägg utan att behöva ange dem manuellt.

    Reply

  23. Utmärkt!
    Vad händer om jag vill visa relaterade inlägg per kategori utan miniatyrbilder?
    Tack

    Reply

  25. Hej där… Ville bara säga att jag har byggt min wordpress-webbplats från grunden och den här koden fungerar perfekt för mig med WP 3.1…. Allt jag behöver göra nu är att styla CSS:en och få några miniatyrer för inläggen. Tack för din hjälp med koden.

    Reply

  27. Hej, finns det ett sätt att exkludera kategorier? Jag har två huvudkategorier där alla kategorier tilldelas. Huvudkategorierna har underkategorier och jag skulle bara vilja visa relaterade inlägg från underkategorierna.

    Är detta möjligt, genom att utesluta ID:n för huvudkategorierna?

    Tack för ditt råd!

    Förresten... älskar koden... och den fungerar utmärkt!!!

    Reply

  29. Bara en fråga, finns det ett sätt att bara hämta taggar från samma inläggstyp? Kanske med något som 'post_type=videos'?

    Reply

    • Förresten, jag löste även detta:

      Lägg bara till det i arrayen:

      $args=array( ‘category__in’ => $category_ids, ‘post__not_in’ => array($post->ID), ‘posts_per_page’=> 2, // Antal relaterade inlägg som kommer att visas. ‘caller_get_posts’=>1, ‘post_type’=>’videos’ );

      Reply

  30. Hej,

    Tack för den här handledningen. Jag undrar dock om det finns något sätt att slumpmässigt välja de relaterade produkterna? Jag har kontrollerat olika produkter i samma kategori och samma relaterade produkter visades.

    Tack

    Reply

  32. Jag kopierade den här koden och lade den i min single.php utan att ändra något och inget matas ut. Är något fel med min kod? pastebin.com/kg0SkrAg

    Reply

  33. Detta visar ingen miniatyrbild – det finns inte ens en anropning för en bild i koden. Jag förstår inte hur någon kan få detta att fungera.

    Reply

    • Koden för bilden är: the_post_thumbnail(); << Detta är inte statisk HTML där du kommer att se img src-kod. Funktionen anropar databasen för att söka efter en utvald bild, även känd som en miniatyrbild, som är kopplad till varje artikel. Om den hittas, kommer den att mata ut bilden. Om du inte har miniatyrbilder för inlägg aktiverade i ditt tema, behöver du lägga till det först:

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

      Artikeln angav tydligt detta i avsnittet Notera:. Du bör överväga att läsa den noggrant.

      Reply

      Admin

  34. hej mannen, jag älskar din blogg!

    Jag har en fråga?

    Kan du göra samma trick men "EFTER FÖRFATTARE"?

    visar de senaste inläggen av författaren?

    you will save my life :-)

    Förresten tack för den här webbplatsen!

    Reply

  35. Tack för den här koden! Jag har provat den och den fungerar delvis.

    Jag kan få det att ge en lista över relaterade artiklar, en stor fördel.

    Men jag verkar inte få några bilder att visas.

    Artiklar har bilder om denna kod skrapar.

    Jag gick också in och skapade bilder för varje inlägg med den anpassade taggen "relatedthumb". Men ack, fortfarande inga bilder.

    Finns det något annat jag behöver göra?

    Tack på förhand!

    Quinn

    Reply

  37. Hej, tack för den här bra handledningen, för närvarande använder jag Thesis-temat, så jag vill veta om det finns ett sätt i Thesis-temat att implementera den här .php-koden.

    Reply

  38. Jag försöker modifiera hans kod för att använda den med kategorier inom en anpassad inläggstyp. Kan någon hjälpa mig? Jag är ganska ny på php.

    Tack!

    Reply

  40. Jag kan inte få detta att fungera, det förstör bara hela min layout nära kommentarerna, missar jag något? Jag var tvungen att ta bort det från min webbplats

    Reply

  42. HEJ!
    Tack för den här informationen! Det här är precis vad jag letade efter.
    Finns det ett sätt att lägga till ett utdrag till detta, tillsammans med fotot?

    Tack igen för din hjälp!

    Reply

  43. Tack för detta, precis vad jag letade efter! Jag älskar hur rakt på sak dina artiklar är, ingen förvirring.

    Reply

  44. Tack för att du delade. Jag har använt den här koden ett tag nu men den har ett problem: när man lägger till taggar till ett inlägg sorterar WP dem alfabetiskt oavsett prioritet som jag lade till dem. Så den här koden visar relaterade inlägg som matchar den första taggen bara, vilket ibland är mindre relevant.
    Kanske har du en idé om hur man kan förhindra denna automatiska sortering av taggar av WordPress eller någon annan lösning?

    Reply

    • Doug, kontakta oss via formuläret med ett levande länkeksempel, så kan vi hjälpa till. Vi vet att den här koden fungerar eftersom några av våra kunders webbplatser använder den.

      Reply

      Admin

  47. Bra handledning. Skulle någon kunna visa mig en fungerande single.php med den här koden?

    Jag lär mig fortfarande php.

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

    Reply

  50. Tack för den här artikeln. Jag har letat länge efter att visa miniatyrbilder med mina artiklar, jag har inte kunnat utföra detta. Jag har provat många WordPress-plugins men har inte lyckats. Hoppas detta kan hjälpa mig

    Reply

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt vår kommentarspolicy, och din e-postadress kommer INTE att publiceras. Använd INTE nyckelord i namn fältet. Låt oss ha en personlig och meningsfull konversation.

Copyright © 2009 - 2025 WPBeginner LLC. Alla rättigheter förbehållna. WPBeginner® är ett registrerat varumärke.

Hanteras av Awesome Motive | WordPress-hosting av SiteGround

WordPress®-varumärket är immateriell egendom som tillhör WordPress Foundation. Användning av WordPress®-namn på denna webbplats är endast för identifieringsändamål och innebär inte ett godkännande från WordPress Foundation. WPBeginner är inte godkänt eller ägt av, eller anslutet till, WordPress Foundation.

Jag behöver hjälp med…

Populära sökningar:

Starta en blogg WordPress SEO WordPress-prestanda WordPress-fel WordPress-säkerhet Bygga en onlinebutik