Jeden z naszych użytkowników zapytał nas na naszej stronie na Facebooku: Jak korzystać z miniaturek w nawigacji poprzedni / następny wpis w WordPress. Funkcje next_post_link i previous_post_link nie mają wystarczająco prostego parametru miniatury, który Nowy programista może po prostu włączać i wyłączać. W tym artykule pokażemy Ci, jak korzystać z miniatur postów z linkami poprzedniego i następnego postu w WordPress.
Efekt końcowy wyglądałby tak:
Pierwszą rzeczą, którą musisz zrobić, to otworzyć swój motyw singiel.php plik i dodać następujący kod wewnątrz pętli najprawdopodobniej po obszarze the_content() :
< div id="cooler-nav" class = "navigation">
<?php $prevPost = get_previous_post (true);
if ($prevPost) {?>
< div class = "nav-box previous">
<?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100));?>
<?php previous_post_link('%link',"$prevthumbnail <p>%title</P>", TRUE);?>
< / div>
<?php } $nextPost = get_next_post(true);
if ($nextPost) { ?>
< div class="nav-box next" style = " float: right;">
<?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array (100,100));}?>
<?php next_post_link('%link',"$nextthumbnail <p>%title</P>", TRUE);?>
< / div>
<?php } ?>
< / div><!-- #cooler-NAV div -- >
Następną rzeczą, którą musisz zrobić, to otworzyć swój styl.css plik i dodaj następujące style:
# cooler-nav{clear: both; height: 100px; margin: 0 0 70px;}
# cooler-nav .nav-box{background: #e9e9e9; padding: 10px;}
# cooler-NAV img{float: left; margin: 0 10px 0 0;}
{margin: 0 10px; font-size: 12px; vertical-align: middle;}
# cooler-nav .previous{float: left; vertical-align: middle; width: 250px; height: 100px;}
# cooler-nav .next{float: right; width: 250px;}
Możesz zmienić stylizację, aby dopasować ją do swojego motywu. Często nasi użytkownicy lubią stylizować kod, dzięki czemu łatwiej jest go dostosować. To tylko podstawowa stylizacja, którą powinieneś być w stanie łatwo dostosować.
Jeśli chcesz zmienić rozmiar miniatury, po prostu zmień tablicę(100,100) na dowolną.
Źródło: itsbarry
