Zaufane samouczki WordPress, kiedy ich najbardziej potrzebujesz.
Przewodnik dla początkujących po WordPressie
WPB Cup
25 milionów+
Witryny korzystające z naszych wtyczek
16+
Lata doświadczenia z WordPressem
3000+
Samouczki WordPress od ekspertów

Jak: Powiązane posty z miniaturami w WordPress bez wtyczek

Czy chcesz wyświetlić listę powiązanych postów na swojej stronie WordPress i wolisz używać kodu zamiast wtyczki?

W WPBeginner często podkreślamy znaczenie angażowania odbiorców i zachęcania ich do przeglądania Twoich treści. Jedną z efektywnych strategii, którą widzieliśmy stosowaną na niezliczonych udanych stronach WordPress, jest wyświetlanie powiązanych postów.

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

W tym artykule pokażemy, jak wyświetlać powiązane posty w WordPressie za pomocą kodu, bez potrzeby wtyczki.

Jak: Powiązane posty z miniaturami w WordPress bez wtyczek

Dlaczego wyświetlać powiązane posty w WordPress?

Gdy Twój blog WordPress zaczyna się rozwijać, użytkownikom może być trudniej znaleźć inne posty 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 stronie internetowej i zwiększenie liczby wyświetleń stron. 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 znasz się na kodowaniu, łatwiej będzie Ci wybrać jeden z wielu wtyczek do powiązanych postów dla WordPress, które mogą wyświetlać powiązane posty bez kodu.

Ale jeśli kiedykolwiek zastanawiałeś się, czy możesz wyświetlać powiązane posty bez używania wtyczki, podzielimy się dwoma różnymi algorytmami, których możesz użyć do generowania powiązanych postów z miniaturkami, używając samego kodu:

Uwaga: Jeśli chcesz wyświetlić miniaturę z każdym powiązanym postem, upewnij się, że najpierw dodasz obraz wyróżniający do tych postów.

Metoda 1: Jak wyświetlać powiązane posty w WordPressie według tagów

Jednym z efektywnych sposobów lokalizowania powiązanych treści jest wyszukiwanie innych postów, które mają te same tagi. Tagi są często używane do skupienia się na konkretnych szczegółach zawartych w poście.

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

Pole „Tagi” w edytorze WordPress

Po dodaniu tagów do swoich postów, następnym krokiem jest dodanie następniego fragmentu kodu do szablonu single.php Twojego motywu.

Jeśli potrzebujesz pomocy w dodawaniu kodu do swojej witryny, zapoznaj się z naszym przewodnikiem jak wklejać fragmenty z sieci do 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();

Ten kod wyszukuje tagi powiązane ze stroną, a następnie wykonuje zapytanie do bazy danych, aby pobrać strony z podobnymi tagami.

Gdzie umieścić kod? Zależy to od Twojego motywu, ale w większości przypadków możesz wkleić kod do szablonu single.php swojego motywu, po głównym poście i tuż nad sekcją komentarzy.

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

Podobne treści według tagów Podgląd

To automatycznie wyświetli powiązane treści w każdym poście WordPress.

Będziesz musiał zmienić styl i wygląd swoich powiązanych postów, aby pasowały do Twojego motywu, dodając niestandardowy CSS.

Przykład powiązanych postów

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

WPCode sprawia, że dodawanie niestandardowego kodu w WordPress jest bezpieczne i łatwe. Ponadto, posiada opcje „Wstawianie”, które pozwalają automatycznie wstawiać i wykonywać fragmenty kodu w określonych lokalizacjach na Twojej stronie WordPress, na przykład po poście.

Opcje wstawiania kodu WPCode dla niestandardowych fragmentów kodu

Więcej szczegółów znajdziesz w naszym przewodniku jak łatwo dodawać niestandardowy kod w WordPress. Możesz również zapoznać się z naszą szczegółową recenzją WPCode, aby dowiedzieć się więcej o wtyczce.

Metoda 2: Jak wyświetlać powiązane posty w WordPress według kategorii

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

Podobnie jak w Metodzie 1, musisz dodać fragment kodu do szablonu single.php swojego motywu lub do wtyczki do fragmentów kodu, takiej jak WPCode. Aby uzyskać więcej szczegółów, zapoznaj się z Metodą 1 i naszym przewodnikiem na temat jak dodawać niestandardowy kod 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 na dole każdego wpisu zobaczysz listę powiązanych treści.

Jeśli chcesz zmienić styl i wygląd swoich powiązanych stron, musisz dodać niestandardowy CSS, aby pasował do Twojego motywu.

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

Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak wyświetlać powiązane posty z miniaturkami w WordPressie bez wtyczek. Możesz również chcieć dowiedzieć się, jak śledzić odwiedzających Twoją witrynę WordPress, lub zapoznać się z naszą listą 24 wskazówek, jak przyspieszyć działanie Twojej witryny.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.

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

Ostateczny zestaw narzędzi WordPress

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

Interakcje czytelników

184 CommentsLeave a Reply

  1. Mam pytanie: Zmagam się z kodem, aby pobrać posty z podkategorii zamiast kategorii nadrzędnych. Jakieś rady?

  2. Próbuję użyć powiązanych postów według kategorii i zauważyłem, że wspomniałeś, że kod musi być przed komentarzami w głównym pętli. W moim kodzie chcę, aby powiązane posty były po komentarzach w pętli. Kiedy to robię, zauważam, że mój wtyczka komentarzy disqus ładuje się dłużej. Czy to z powodu błędu z komentarzami, czy jest to normalne?

  3. proszę

    czy ktoś mógłby pomóc takiemu nowicjuszowi jak ja dostosować ten skrypt, aby wyświetlał powiązane posty w poziomie?

    od lewej do prawej..

    zamiast wyświetlać je teraz od góry do dołu, pionowo…

    • Cześć,

      Zrobiłem to, zastępując kody i własnym kodem HTML i CSS. Kody tworzą listy dla każdego wpisu, zazwyczaj w układzie pionowym.

      ——————

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

      ——————

      Zastąpiłem otwierający z na i zastąpiłem zamykający z na jak moje tagi HTML. Następnie napisałem mój CSS, aby pasował do potrzeb tej konkretnej klasy div na Twojej stronie. Na przykład, przykładowa klasa pleft mogłaby wyglądać tak:

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

      Używam selektora float w moim CSS, aby przesuwać posty poziomo, a marginesy i dopełnienie, aby nadać każdemu postowi odstępy między nimi. Dodałem konkretną szerokość i wysokość dla dodatkowych przykładów.

      Mam nadzieję, że to pomoże.

  4. Mam powiązane tagi, ale kiedy dodaję kod, nic nie widzę. Również, kiedy dodaję Twój kod, aby ograniczyć do niestandardowego typu posta, pojawia się błąd. Zmieniłem typ posta na mój konkretny typ posta.

  5. @wpbeginner cześć

    dzięki za szybką odpowiedź...

    ale jestem w tym wszystkim prawdziwym nowicjuszem..

    czy możesz podać mały przykład?

    aby uczynić je poziomymi, tak jak na twoim własnym blogu?

    można się skontaktować przez mój e-mail: khiloc at gmail dot com

  6. @subzerokh Musiałbyś edytować styl. To nie jest takie trudne. Po prostu umieść każdy post w div. Określ szerokość dla tego div, a następnie ustaw właściwość float left. Dostosuj marginesy i tym podobne, a otrzymasz to.

  7. witam wszystkich!! dzięki za ten wspaniały skrypt!!

    To jedyna rzecz, którą znalazłem, która robi dokładnie to, czego chciałem!!!

    Ale wyświetla powiązane posty tylko w pionie (z góry na dół)

    Chciałbym, aby było wyświetlane od lewej do prawej (poziomo)

    Jak to zrobić, proszę??

  8. hej,

    świetny post! może mógłbyś mi pomóc:

    mam automatyczny miniaturę, jeśli żadna nie jest zdefiniowana,

    if ($thumb_array[‘thumb’] == ”) $thumb_array[‘thumb’] = ‘link do Twojego domyślnego obrazka miniaturki’;return $thumb_array;

    teraz moje pytanie brzmi, jak zdefiniować miniaturę dla każdej kategorii, która będzie używana, jeśli żadna nie jest zdefiniowana w poście.

  9. Cześć

    dzięki za świetny post..

    Ale czy jest jakaś zmiana, aby uzyskać posty według kategorii, ale nie w ul i li i nie w miniaturach..

    Mam na myśli, że pełne posty są wyświetlane w powiązanych postach... tak jak na stronie głównej, z linkiem 'czytaj dalej'.

    dzięki

    czekam na Twoją odpowiedź..

  10. Cześć

    dzięki za świetny post..

    Ale czy jest jakaś zmiana, aby uzyskać posty według kategorii, ale nie w ul i li i nie w miniaturach..

    Mam na myśli, że pełne posty są wyświetlane w powiązanych postach... tak jak na stronie głównej, z linkiem 'czytaj dalej'.

    dzięki

    czekam na Twoją odpowiedź..

  11. To świetnie, dokładnie tego szukałem. Zastanawiam się jednak, jak mógłbym połączyć te dwa powyżej, a jeśli nie ma tagów, to wyświetla posty z tej samej kategorii?

    Próbuję to rozgryźć, ale jeszcze nie posunąłem się daleko.

  12. Dzięki za kod, działał, ale jak mam go wystylizować. Chciałbym, aby 4 historie były obok siebie, tak jak u Ciebie. Na mojej stronie są one wyświetlane jeden nad drugim, a nie tak jak u Ciebie.

    • To jest CSS. Nie używamy tego kodu do pokazywania powiązanych historii. Po drugie, wierzę, że mówisz o wyróżnionych historiach na naszym pasku bocznym. Napisaliśmy o tym inny post na naszej stronie.

      Admin

  13. Czy jest sposób na wyświetlanie miniatur w powiązanych postach bez używania obrazów wyróżnionych lub miniatur postów??
    Czyli użyć dowolnego obrazu użytego w poście…

    • Tak, możesz wykorzystać techniki awaryjne udostępnione przez innych programistów, które pobierają pierwszy obraz z posta. Ale zalecamy używanie miniatur postów WordPress...

      Admin

  14. Dzięki za ten artykuł. Zastanawiałem się, czy istnieje sposób na automatyczne tagowanie postów bez konieczności ręcznego wprowadzania.

  15. Świetnie!
    Co jeśli chcę wyświetlić powiązane posty według kategorii bez miniatur?
    Dzięki

  16. Cześć… Chciałem tylko powiedzieć, że budowałem moją stronę WordPress od podstaw i ten kod działa dla mnie idealnie z WP 3.1…. Teraz muszę tylko dopracować CSS i dodać miniatury do postów. Dziękuję za pomoc z kodem.

  17. Cześć, czy jest sposób na wykluczenie kategorii? Mam dwie główne kategorie, do których przypisane są wszystkie kategorie. Główne kategorie mają podkategorie i chciałbym wyświetlać tylko powiązane posty z podkategorii.

    Czy jest to możliwe, wykluczając identyfikatory głównych kategorii?

    Dzięki za radę!

    BTW… uwielbiam ten kod… i działa świetnie!!!

  18. Mam tylko jedno pytanie, czy jest sposób, aby pobierać tagi tylko z tego samego typu posta? Może używając czegoś w stylu 'post_type=videos'?

    • Przy okazji, też sobie z tym poradziłem:

      Po prostu dodaj to do tablicy:

      $args=array(
      ‘category__in’ => $category_ids,
      ‘post__not_in’ => array($post->ID),
      ‘posts_per_page’=> 2, // Liczba powiązanych postów do wyświetlenia.
      ‘caller_get_posts’=>1,
      ‘post_type’=>’videos’
      );

  19. Cześć,

    Dziękuję za ten tutorial. Zastanawiam się jednak, czy istnieje sposób na losowe wyświetlanie powiązanych produktów? Sprawdzałem różne produkty w tej samej kategorii i wyświetlały się te same powiązane produkty.

    Dzięki

  20. Skopiowałem ten kod i umieściłem go w moim single.php, nic nie zmieniając, i nic się nie wyświetla. Czy coś jest nie tak z moim kodem? pastebin.com/kg0SkrAg

  21. To nie wyświetla miniatury — w kodzie nie ma nawet wywołania obrazu. Nie widzę, jak ktokolwiek może sprawić, by to zadziałało.

    • Kod dla obrazu to: the_post_thumbnail(); << To nie jest statyczny HTML, gdzie zobaczysz kod img src. Funkcja odwołuje się do bazy danych, aby wyszukać obraz wyróżniony, znanego jako miniatura, który jest dołączony do każdego artykułu. Jeśli zostanie znaleziony, wyświetli obraz. Teraz, jeśli nie masz włączonych miniatur postów w swoim motywie, musisz je najpierw dodać:

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

      Artykuł jasno to stwierdzał w sekcji Uwaga:. Powinieneś rozważyć jego dokładne przeczytanie.

      Admin

  22. hej człowieku, uwielbiam twojego bloga!

    Mam pytanie?

    Czy możesz zrobić ten sam trik ale „WEDŁUG AUTORA”?

    wyświetla najnowsze posty autora?

    you will save my life :-)

    BTW dzięki za tę stronę!

  23. Dzięki za ten kod! Wypróbowałem go i działa w pewnym stopniu.

    Mogę uzyskać listę powiązanych artykułów, co jest ogromną zaletą.

    Ale nie mogę sprawić, żeby jakiekolwiek obrazy się wyświetlały.

    Artykuły mają obrazy, jeśli ten kod je pobierze.

    Wszedłem również i stworzyłem obrazy dla każdego posta z niestandardowym tagiem „relatedthumb”. Ale niestety, nadal brak obrazów.

    Czy jest coś jeszcze, co muszę zrobić?

    Z góry dziękuję!

    Quinn

  24. Cześć, dzięki za ten dobry tutorial, obecnie używam motywu Thesis, więc chcę wiedzieć, czy jest sposób w motywie Thesis, aby zaimplementować ten kod .php.

  25. Nie mogę tego sprawić, żeby działało, psuje mi cały układ w pobliżu komentarzy, czy czegoś nie rozumiem? musiałem to usunąć z mojej strony

  26. CZEŚĆ!
    Dziękuję za tę informację! To jest dokładnie to, czego szukałem.
    Czy jest sposób, aby dodać do tego fragment, wraz ze zdjęciem?

    Jeszcze raz dziękuję za pomoc!

  27. Dzięki za udostępnienie. Używam tego kodu od jakiegoś czasu, ale ma on problem: podczas dodawania tagów do posta, WP sortuje je alfabetycznie niezależnie od priorytetu, z jakim je dodałem. W związku z tym ten kod wyświetla powiązane posty pasujące tylko do pierwszego tagu, co czasami jest mniej trafne.
    Może masz pomysł, jak zapobiec temu automatycznemu sortowaniu tagów przez WordPressa lub jakieś inne rozwiązanie?

    • Doug, skontaktuj się z nami za pomocą formularza z działającym przykładem linku, a pomożemy. Wiemy, że ten kod działa, ponieważ korzysta z niego kilka stron naszych klientów.

      Admin

  28. Świetny tutorial. Czy ktoś mógłby mi pokazać działający plik single.php z tym kodem?

    Nadal uczę się PHP.

    Niestety
    Błąd parsowania: błąd składni, nieoczekiwane T_ENDIF w C:\xampplite\htdocs\mock\wp-content\themes\scwd\single.php w linii 76

  29. Dzięki za ten artykuł. Szukam od dawna, aby pokazać miniatury z moim artykułem, ale nie mogę tego zrobić. Próbowałem wielu wtyczek WordPress, ale nie udało mi się tego zrobić. Mam nadzieję, że to mi pomoże

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszą polityką komentowania, a Twój adres e-mail NIE zostanie opublikowany. Prosimy NIE używać słów kluczowych w polu nazwy. Prowadźmy osobistą i znaczącą rozmowę.