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.
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:
- Metod 1: Hur man visar relaterade inlägg i WordPress med taggar
- Metod 2: Hur man visar relaterade inlägg i WordPress efter kategori
- Experthandledningar om relaterade inlägg i WordPress
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.
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();
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();.
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.
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.
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();
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.
Experthandledningar om relaterade inlägg i WordPress
Vill du lära dig mer om att visa relaterade inlägg i WordPress? Kolla in dessa hjälpsamma handledningar om relaterade inlägg:
- Hur man visar relaterade inlägg i WordPress (steg för steg)
- Hur man visar relaterade inlägg av samma författare i WordPress
- Hur man visar de senaste inläggen i WordPress
- Hur man visar de senaste inläggen från en specifik kategori i WordPress
- Hur man lägger till inbäddade relaterade inlägg i WordPress-blogginlägg
- Hur man visar slumpmässiga inlägg i WordPress
- Hur man visar relaterade sidor i WordPress
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.
Jiří Vaněk
Relaterade inlägg är ett fantastiskt sätt att locka användare till mer innehåll på din webbplats. Efter att ha läst flera av dina artiklar om detta ämne förstod jag äntligen kraften i den här funktionen och implementerade den på min 404-sida. Nu, istället för att visa innehåll som inte längre finns, erbjuder den alternativ och liknande artiklar till mina användare. Detta har kraftigt minskat min webbplats avvisningsfrekvens. Tack inte bara för den här artikeln utan också för de andra artiklarna du har skrivit om detta ämne. De har hjälpt mig att förbättra min 404-sida.
WPBeginner Support
Glad to hear our content was helpful
Admin
kabir bairwa
Jag försökte korrigera WordPress-relaterade inlägg men det hände inte när jag såg den här koden och jag använde den här koden i min WordPressfil så nu kommer mina WordPress-relaterade inlägg ordentligt
WPBeginner Support
Kul att höra att vår guide kunde hjälpa dig!
Admin
Jennifer
Finns det ett sätt att ha relaterade inlägg baserat på inläggets titel. Jag har inga taggar och mina kategorier gör verkligen inte tricket eftersom det inte finns någon åtskillnad mellan dem.
Detta skulle vara till stor hjälp om du hade en kod för att visa relaterat innehåll baserat på inläggstiteln.
aman
Jag vill ha kod för att visa slumpmässiga inlägg och sidor med miniatyrbild
WPBeginner Support
Du vill titta på vår guide nedan:
https://www.wpbeginner.com/wp-tutorials/how-to-display-random-posts-in-wordpress/
Admin
karan4official
Använd <?php istället för <? överallt
WPBeginner Support
Thank you for your feedback, this article should currently be using the php version everywhere
Admin
Motahar Hossain
Tack för ditt fina inlägg.
Här bör "ignore_sticky_posts" användas istället för "caller_get_posts". Eftersom "caller_get_posts" är föråldrad.
WPBeginner Support
Thanks for pointing that out, we’ll be sure to look into updating the article
Admin
Frank
Kan du visa mig var jag ska lägga till vilka kategorier jag vill begränsa de relaterade inläggen till?
WPBeginner Support
Den här metoden begränsar inläggen till den kategori som inlägget tillhör. För att begränsa kategorierna skulle du behöva skapa ett if-uttalande för att exkludera vissa kategorier.
Admin
Greg
Är det möjligt att när det finns fler än X relaterade inlägg per kategori som är relaterade, att man kan slumpa fram säg 3 inlägg?
WPBeginner Support
Även om det är möjligt, skulle det kräva att man lägger till mycket mer till detta, du kanske vill titta på ett plugin för den typen av anpassning.
Admin
Akiode obasanjo
Ingen CSS läggs till
luigi
Hej, är det möjligt att begränsa dem efter datum? Visa bara de från förra året?
Luis
Jag hittade ett sätt att göra de mindre miniatyrbilderna, men de visas i en kolumn och inte horisontellt. Hur kan detta ändras?
Luis
Skriptet fungerar bra. Det enda problemet jag har är att miniatyrbilderna är väldigt stora. Finns det något sätt att göra dem mindre?
WPBeginner Support
Hej Luis,
Den använder standardstorleken för inläggsbilder. Du kan skapa en ny miniatyrbildsstorlek och sedan använda den i koden så här:
1-click Use in WordPress
Admin
Ana
hur gör man för att skapa en kortkod för den här koden, jag har skapat funktionen men jag vet inte hur jag ska returnera utskriften till sidan.
Musarrof
Varför jag ställs inför det här problemet. syntaxfel, oväntat slut på filen
Vänligen hjälp mig.
Mike
Hej,
Jag är nybörjare i WordPress.
Jag skulle vilja visa relaterade inlägg.
I huvudmenyn har jag Kategori A, och i Kategori A – underkategorierna A, B och C. Inläggen finns i Kategori A, men de kan också finnas i alla 3 underkategorierna.
När jag väljer ett av de relaterade inläggen går något fel och inläggen från den ursprungligen valda underkategorin visas inte längre korrekt.
Anthony Reese
Tack för handledningen. Detta var otroligt användbart och fungerade som en charm!
pawan singh
Hej Admin, Mycket informativ artikel. Jag gillar din webbplats på grund av enkelhet och rakhet. Alla artiklar är rakt på sak men när det gäller att dela kunskap om kod blir du för teknisk. Ignorera bara det faktum att mycket av besökarna inte är kodningsexperter. Skulle det inte vara mycket bättre om du bara lade till 2 eller 3 rader till i din förklaring för att göra den komplett och lättförståelig för alla. Hur som helst, utmärkt artikel Men jag vill veta vilken kod eller plugin som Wpbeginner använder?
Ahmad
verkligen hjälpsamt, tack!
Tracy
det som verkligen suger med dina artiklar är att du aldrig faktiskt säger HUR man gör något. Det är bra och väl att säga åt mig att lägga kod i min single.php, men som nybörjare vet jag inte vad det är eller var jag hittar det. Du kanske vill tänka på att lägga den här typen av kritisk information i dina artiklar istället för att anta att vi vet vad det betyder, eller att vi har surfat igenom alla dina artiklar för att lista ut det.
Victor Siyaya
Jag håller med. Jag har ingen aning om var jag ska klistra in den här koden heller.
Rose
Tack för det utmärkta inlägget, mycket användbart. Jag stötte på ett fel i koden så jag ville dela med mig i hopp om att det kan vara användbart för andra i framtiden. Felet var:
WP_Query anropades med ett argument som är föråldrat sedan version 3.1.0! "caller_get_posts" är föråldrat. Använd "ignore_sticky_posts" istället.
Så jag ersatte den helt enkelt och det fungerade bra. Jag använder också namnutrymmen så jag behövde ändra WP_Query till \WP_Query plus att jag ändrade ordningen på följande:
global $post;
$orig_post = $post;
Tack igen
Rose
sanjeev Kumar
sir
Jag använder kategorikoden som fungerar korrekt men en sak är när det på startsidan finns samma kategori med 2 eller 3 inlägg, då visas länken svart men jag vill att kategorin som är nästa inlägg ska visas
Luan
Hej,
Tack för ditt inlägg. Jag lade till koden i content-single.php och det fungerade. Dock visas det som 1 kolumn, inte 3 kolumner som i ditt exempel. Kan du hjälpa mig med detta? Jag vill att mina relaterade inlägg ska visas i 1 rad, 3 kolumner. Tack så mycket.
Claudio
Hej!
Den första länken under Ytterligare källor är trasig.
Tack för koden.
WPBeginner Support
Hej Claudio,
Tack för att ni meddelade oss. Vi har tagit bort den trasiga länken.
Admin
Abhijit Badgujar
Hej,
Jag har ett alternativ för 'Relaterade inlägg' från mitt WordPress-tema och jag använder det redan. Jag har visat 6 inlägg efter innehållet. Problemet är att det bara visar 3 relaterade inlägg och de nästa tre kan ses när man drar det horisontellt. Jag vill inte ha det alternativet, jag vill att webbplatsen ska visa alla 6 inlägg direkt. Kan du tala om för mig hur jag gör det?
Gyuricza Laszlo
Hej,
Din vägledning var fantastisk, men hur kan jag utesluta en specifik kategori från de relaterade inläggen för att inte visa den?
Tack på förhand!
Vänliga hälsningar,
LAszlo Gyuricza
WPBeginner Support
Du kan prova ett av plugins för relaterade inlägg.
Admin
Tuta
Hej Syed. Hur stylar jag det?
WPBeginner Support
Hej Tuta,
Du kan använda #relatedposts .relatedthumb och .relatedcontent selektorer i din CSS för att styla det.
Admin
Dev Rathore
Hur visar man en lista över alla inlägg på en sida
Suraz
Hur visar man relaterade inlägg i två kolumner som här på WPBeginner??
Tom
Bra lösning men inte definitiv för mina krav. Faktum är att det huvudsakliga problemet är att denna kod sorterar relaterade inlägg från de senaste i samma kategori eller taggar. Resultatet är att när du bläddrar i en kategori/tagg kommer du alltid att visa samma få senaste inlägg, vilket kraftigt begränsar de äldre inläggen på din webbplats. Är det en korrekt slutsats? Vänligen dela din åsikt om du har provat det!
Glädje
1. Efter ‘caller_get_posts’=>1 sätt ett kommatecken(,)
2. Tryck på enter-knappen [nästa rad]
3. Lägg till ‘orderby’=>’rand’
Du är klar. Nu kommer relaterade inlägg att visas slumpmässigt. Tack.
Zane DeVault
Den här koden fungerar utmärkt. Jag undrade om du kunde förklara vad den här delen av koden gör?
$orig_post = $post;
global $post;
…
$post = $orig_post;
Jag tror att jag har en uppfattning om vad resten gör, men detta gör mig förvirrad.
Tack för allt ditt fantastiska innehåll!
may nghe len
Låt mig fråga om koden Relaterade inlägg efter kategori som publicerats på offentliga platser. Tack
atiq
i Twentyfifteen standardtema var ska jag infoga den här koden i filen single.php? Om jag infogar den ovanför endwhile; visas ett syntaxfel, unexpected 'endwhile' och om jag infogar den under endwhile; men ovanför endif; visas ett syntaxfel, unexpected 'endif'
Någon lösning på detta?
Tack
Mohammad Kazemi
Du måste använda '<?php' inte '<?'
atiq
I Twentyfifteen standardtema, var ska jag infoga den här koden i filen single.php? Om jag infogade den ovanför enwhile; visas ett syntaxfel, oväntat ‘endwhile’ och om jag infogade den under enwwile men ovanför endif; visas ett syntaxfel, oväntat ‘endif’
Någon lösning på detta?
Tack
Marcel Tripoux
Hej! Bra inlägg!
Finns det ett sätt att kombinera båda alternativen, för att bara anropa relaterade taggar i den aktuella kategorin?
Bambang
min single.php-layout:
//the_content bla bla bla code here
//Klistra in koden för relaterade inlägg efter taggar här
//comments_template bla bla bla kod här
——————————-
resultatet jag fick var ett fel:
Parse error: syntax error, unexpected ‘endwhile’ (T_ENDWHILE) in …
——————————-
efter att jag ändrade ” <? } " till " <?php } " fungerade det,
just sugestion, maybe it better if you put complete php open tag
thanks
Alex
Fungerar perfekt. Hur utesluter man en specifik tagg från relaterade inlägg efter taggar? Jag menar hur man ändrar koden när algoritmen hittar andra inlägg med någon av taggarna (förutom tagg 595 till exempel) som det aktuella inlägget har och listar dem.
Mohammad
Tack för den fina koden
Den fungerar utmärkt men du har inte inkluderat några CSS-koder för ett vackrare utseende för den här sektionen. Kan du vara snäll och göra det? Jag är nybörjare på kodning och jag har provat några koder men de fungerade inte. I din kod finns:
echo ‘Related Posts’;
men i liknande koder som jag hittat i andra källor finns:
och i css några koder som dessa:
.relatedposts {
font-size: 12px;
width: 640px;
}
.relatedposts h3 {
font-size: 20px;
margin: 0 0 5px;
}
kommer att ge ett snyggt utseende men det fungerade inte med din kod.
Tack
Muthu
Kära kollega, detta är ett fel jag får när jag klistrar in den här koden i filen single.php. Vänligen tala om exakt var jag ska klistra in den här koden.
Parse error: syntax error, unexpected end of file in C:\xampp\htdocs\beingusefull\wp-content\themes\TechPlus\single.php on line 78
WPBeginner Staff
Det beror på ditt individuella tema och din mall. Du måste lägga till den villkorliga taggen efter att WordPress-loopen har börjat. Efter den här raden:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>Jenny
Jag fick också det där felet och här är min uppdaterade kod:
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, // Antal relaterade inlägg som kommer att visas.
‘caller_get_posts’=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) { ?>
Relaterade inlägg
have_posts() ) : $my_query->the_post(); ?>
<a href="” rel=”bookmark” title=””>
<a href="” rel=”bookmark” title=””>
wiyono
När inlägget jag delar på Facebook får miniatyrbilden från ett relaterat inlägg, kan jag få miniatyrbilden från huvudsidan? tack
Lacey Tech Solutions
Om du använder Yoast’s WordPress SEO-plugin kan du ange miniatyrbildens URL under fliken sociala medier för inlägget. Om fliken sociala medier inte visas måste du klicka på länken Yoast SEO i WordPress adminmeny och sedan klicka på ”Social”. På sidan sociala medier markerar du alternativet ”Lägg till Open Graph-metadata” och sparar. Gå tillbaka till ditt inlägg så kan du ange miniatyrbilden du vill använda när inlägget delas. Om du inte uttryckligen anger inläggsbilden har användaren möjlighet att välja vilken bild som helst som visas på sidan, vilket är anledningen till att dina senaste inläggsbilder dras in när du delar länken till artikeln.
Gretchen Louise
Några tankar om hur mycket databas-/serverbelastning detta skulle innebära på en stor självhostad webbplats? Letar efter ett alternativ för relaterade inlägg nu när #nRelate inte längre är tillgängligt.
WPBeginner Staff
Använd villkorlig tagg if (is_single()) på första raden av koden.
vipul
kan du berätta var och hur?
Rachael
Detta fungerar inte i single.php för mig, eftersom relaterade inlägg visas längst ner på sidan. Det fungerar med loop.php men då visas de även på startsidan – några idéer på en lösning så att det bara visas i enskilda inlägg och inte på startsidan?
kate // alltid sugen //
Hej, jag måste vara den enda som inte gör detta korrekt. Mitt tema stöder utvalda bilder, jag lade till den här koden före kommentarerna i filen single.php. Några tips om exakt var jag ska ange i koden?
Keyko Sakura
Alla koder jag hittar fungerar aldrig. Eller så ändrar de ingenting på min sida eller så visar de ett felmeddelande. Jag vet inte vad jag mer ska göra!
Mason Coulter
Finns det ett sätt att lägga till sidnumrering till frågan om relaterade inlägg? Jag verkar inte kunna få sidnumreringen att fungera på en sekundär fråga inom single.php. Tack!
Tom K.
Hej, jag vill fråga, finns det ett sätt att göra så att relaterade inlägg är efter kategori och taggar på ett ställe? Tack.
Jonas
Mina miniatyrbilder är för stora, hjälp. Hur kan man begränsa miniatyrbilderna för relaterade inlägg?
WPBeginner Support
Du behöver förmodligen återgenerera miniatyrbilder.
Admin
Jonathan
Finns det ett sätt att välja en enda kategori (låt oss kalla den Varumärken) och sedan få den att visa relaterade inlägg som endast är kopplade till underkategorierna under Varumärken? Så, hierarkin för kategorierna skulle vara Varumärken > JCPenny. Jag vill bara visa relaterade inlägg för JCPenny. Men den underkategorin kan vara olika per inlägg. Så om ett inlägg använder en annan underkategori kommer det att visa relaterade inlägg för den underkategorin. Kan den här koden modifieras för att hantera det på något sätt?
Jonathan
OH! Jag tror jag har fattat det. Jag lade precis till ‘parent’ => ‘katten id-nummer’, till argumenten och jag tror att det löste det.
Jonathan
wait… no, that didn’t work
Miro
Hej, tack för koden, men istället för att hämta den markerade bilden som en miniatyrbild, kan jag istället hämta den första bilden i mina inlägg? Tack
WPBeginner Support
Det här låter som en bra idé för ett inlägg, vi kommer att täcka det snart i en ny artikel. Tack för feedbacken.
Admin
Miro
Det vore bra om ni kunde skriva ett inlägg om det. Tack så mycket och jag väntar. Hoppas att ni vänligen kan posta en notis här när ni har skrivit inlägget så att vi vet.