Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak to zrobić: Powiązane wpisy z miniaturkami w WordPress bez wtyczek

Czy chcesz wyświetlić listę powiązanych wpisów na twojej witrynie internetowej WordPress i wolisz używać kodu zamiast wtyczki?

Gdy odwiedzający twojego bloga skończą czytać interesujący ich artykuł, zaoferowanie listy powiązanych wpisów utrzyma ich zaangażowanie i pomoże im znaleźć nowe treści do przeczytania.

W tym artykule pokażemy, jak wyświetlić powiązane wpisy w WordPressie za pomocą kodu, bez konieczności korzystania z wtyczki.

How to: Related Posts with Thumbnails in WordPress Without Plugins

Dlaczego warto wyświetlać wpisy powiązane w WordPress?

Kiedy twój blog WordPress zaczyna się rozrastać, użytkownikom może być trudniej znaleźć inne wpisy na ten sam temat.

Wyświetlanie listy powiązanych treści na końcu każdego wpisu na blogu to świetny sposób na zatrzymanie odwiedzających na twojej witrynie internetowej i zwiększenie liczby odsłon. Pomaga również poprawić widoczność twoich najważniejszych stron, wyświetlając najlepsze treści tam, gdzie ludzie mogą je łatwo znaleźć.

Jeśli nie jesteś obeznany z kodem, to łatwiej będzie ci wybrać jedną z wielu wtyczek WordPress do wyświetlania wpisów powiązanych bez kodu.

Ale jeśli kiedykolwiek zastanawiałeś się, czy możesz wyświetlać powiązane wpisy bez użycia wtyczki, podzielimy się dwoma różnymi algorytmami, których możesz użyć do generowania powiązanych wpisów z miniaturami za pomocą samego kodu:

Uwaga: Jeśli chcesz wyświetlać miniaturkę przy każdym powiązanym wpisie, upewnij się, że najpierw dodałeś obrazek wyróżniający do tych wpisów.

Metoda 1: Jak wyświetlić powiązane wpisy w WordPressie za pomocą tagów?

Jednym ze skutecznych sposobów na zlokalizowanie powiązanych treści jest wyszukiwanie wpisów, które mają te same tagi. Tagi są często używane do skupienia się na konkretnych szczegółach zawartych we wpisie.

Mając to na uwadze, możesz dodać kilka wspólnych tagów do wpisów, które chcesz ze sobą powiązać. Możesz je wpisz w polu „Tagi” w edytorze WordPress.

The ‘Tags’ Settings Box in the WordPress Editor

Po dodaniu tagów do twoich wpisów, następną rzeczą do zrobienia jest dodanie następującego fragmentu kodu do szablonu single.php twojego motywu.

Jeśli potrzebujesz pomocy w dodaniu kodu do twojej witryny, zapoznaj się z naszym przewodnikiem na temat wklejania fragmentów kodu z sieci do WordPressa.

$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();

Ten kod szuka tagów powiązanych ze stroną, a następnie uruchamia zapytanie do bazy danych w celu pobrania stron z podobnymi tagami.

Gdzie należy umieścić kod? To zależy od twojego motywu, ale w większości przypadków powinieneś być w stanie wkleić kod do szablonu single.php twojego motywu po głównym wpisie i tuż nad sekcją komentarzy.

Jeśli korzystasz z motywu Twenty Twenty-One, tak jak my na naszej witrynie demonstracyjnej, dobrym miejscem do wklejenia kodu jest plik template-parts/content/content-single.php po nagłówku i zaraz po <?php the_content();.

Related Content by Tags Preview

Spowoduje to automatyczne wyświetlanie powiązanych treści w dowolnym wpisie WordPress. Będziesz musiał zmienić styl i wygląd powiązanych wpisów, aby dopasować je do twojego motywu, dodając własny CSS.

Related Posts example

Wskazówka: Zamiast edytować pliki motywu, co może zepsuć twoją witrynę internetową, zalecamy użycie wtyczki fragmentów kodu, takiej jak WPCode.

WPCode umożliwia bezpieczne i łatwe dodawanie własnego kodu w WordPress. Ponadto zawiera opcje „Insertion”, które pozwalają automatycznie wstawić i wykonać fragmenty kodu w określonych miejscach na twojej witrynie WordPress, na przykład po wpisie.

WPCode insertion options for custom code snippets

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat dodawania własnego kodu w WordPress. Możesz również sprawdzić naszą szczegółową recenzję WPCode, aby dowiedzieć się więcej o wtyczce.

Metoda 2: Jak wyświetlić powiązane wpisy w WordPressie według kategorii?

Innym sposobem wyświetlania powiązanych treści jest lista wpisów, które znajdują się w tej samej kategorii. Zaletą tej metody jest to, że lista powiązanych wpisów prawie nigdy nie będzie pusta.

Podobnie jak w metodzie 1, musisz dodać fragment kodu do szablonu single. php twojego motywu lub we wtyczce fragmentów kodu, takiej jak WPCode. Aby uzyskać więcej informacji, zapoznaj się z Metodą 1 i naszym przewodnikiem na temat dodawania własnego kodu w 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();

Teraz zobaczysz listę powiązanych treści na dole każdego wpisu.

Jeśli chcesz zmienić styl i wygląd powiązanych stron, będziesz musiał dodać własny CSS, aby dopasować go do twojego motywu.

Chcesz dowiedzieć się więcej o wyświetlaniu powiązanych wpisów w WordPress? Sprawdź te pomocne poradniki dotyczące powiązanych wpisów:

Mamy nadzieję, że ten poradnik pomógł ci dowiedzieć się, jak wyświetlać powiązane wpisy z miniaturkami w WordPressie bez wtyczek. Możesz również dowiedzieć się, jak śledzić odwiedzających twoją witrynę WordPress lub zapoznać się z naszą listą 24 wskazówek, jak przyspieszyć twoją witrynę internetową.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

182 komentarzeZostaw odpowiedź

  1. kabir bairwa

    I was trying to correct WordPress-related posts but it was not happening when I saw this code and I used this code in my WordPressfile so now my WordPress-related posts coming properly

    • WPBeginner Support

      Happy to hear our guide could help you!

      Administrator

  2. Jennifer

    Is there a way to have related post based on the post title. I do not have tags and my categories really don’t do the trick since there is no distinction between them.

    This would be of great help if you had a code to show related content based on the post title.

  3. aman

    I want code to display random posts and pages with thumbnail

  4. karan4official

    Instead of using <? use <?php everywhere

    • WPBeginner Support

      Thank you for your feedback, this article should currently be using the php version everywhere :)

      Administrator

  5. Motahar Hossain

    Thank you for your nice post.

    Here „ignore_sticky_posts” should be used instead of „caller_get_posts”. Because „caller_get_posts” is deprecated.

    • WPBeginner Support

      Thanks for pointing that out, we’ll be sure to look into updating the article :)

      Administrator

  6. Frank

    Can you direct me as to where to add what categories I would like to limit the related posts to?

    • WPBeginner Support

      This method limits the posts to the category the post is in. To limit the categories you would need to create an if statement to exclude certain categories.

      Administrator

  7. Greg

    Is it possible where there are more than X related posts by category that are related that you can randomise say 3 posts?

    • WPBeginner Support

      While it is possible, it would require adding far more to this, you may want to look into a plugin for that type of customization.

      Administrator

  8. luigi

    Hi, is it possible to limit them by date? Show only those of the last year?

  9. Luis

    I found a way to make the smaller thumbnails, but it shows them in a column and not horizontally. How can this be modified?

  10. Luis

    The script is working well. The only problem I have is that the thumb-nails are very large. Would there be some way to make them smaller?

  11. Ana

    how to do for create a shortcode for this code, I created the function but I do not know how to return the print to the page.

  12. Musarrof

    Why I’m facing this problem. syntax error, unexpected end of file
    Please help me.

  13. Mike

    Hello,
    I’m a beginner in WorldPress.
    I’d like to show Related Posts.
    In the main menu I have Category A, and in Category A – Subcategories A, B and C. The posts are in Category A, but they can also be present in all 3 Subcategories.
    When choosing one of the Related Posts something goes wrong and the posts from the initially chosen Subcategory don’t show correct anymore.

  14. Anthony Reese

    Thanks for the tutorial. This was incredibly useful and worked like a charm!

  15. pawan singh

    Hi Admin, Very informative article. I like your site because of simplicity and straightforwardness. All articles are to the point but when it comes to sharing the knowledge of code you become too technical. Just ignore the fact that much of the visitors are not coding expert. Wouldn’t it be much better if you just add 2or 3 more lines in your explanation to make it complete and easily understandable to all. Anyway, great article But I want to know which code or plugin is Wpbeginner using?

  16. Tracy

    what really sucks about your articles is you never actually say HOW to do something. It’s all well and good to tell me to put code into my single.php, but as a beginner I don’t know what that is or where to find it. You might want to think about putting this kind of critical information into your articles instead of assuming we know what it means, or that we have surfed every one of your articles to figure it out.

    • Victor Siyaya

      I Agree. I have no idea where to paste this code too.

  17. Rose

    Thanks for the great post, very useful. I came across an error in the code so wanted to share in hope it may be useful for others in the future. The error was:

    WP_Query was called with an argument that is deprecated since version 3.1.0! „caller_get_posts” is deprecated. Use „ignore_sticky_posts” instead.

    So I simply replaced it and it worked fine. I am also using namespacing so I needed to change WP_Query to \WP_Query plus I changed the order of the below:

    global $post;
    $orig_post = $post;

    Thanks again
    Rose

  18. sanjeev Kumar

    sir
    I am using the code of categories working properly but one thing is when on home page same category of 2 or 3 post then the link show balack but i want to show to show category which is next post

  19. Luan

    Hi,

    Thanks for your post. I added the code in content-single.php and it worked. However, it displays as 1 column not 3 columns like your example. Could you please help me on this? I want my related posts to be displayed in 1 row, 3 columns. Thanks so much.

  20. Claudio

    Hello!
    The first link on Aditional Sources, is broken.
    Thank you by the code.

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.