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