Один из наших читателей недавно интересовался, возможно ли использовать миниатюры для навигации ссылками Предыдущая статья/Следующая статья в WordPress. У функций next_post_link и previous_post_link нет простого параметра для задания миниатюры, который бы разработчик мог просто применить. В этой статье мы покажем вам как использовать миниатюры в ссылках Предыдущий/следующий пост в WordPress.
Результат в итоге будет примерно следующим:
![]()
Прежде всего вам нужно открыть файл single.php вашей темы и добавить следующий код внутрь цикла, скорее всего после раздела 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 -->
Затем нужно открыть ваш файл style.css и добавить в него следующие стили:
#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;}
#cooler-nav p{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;}
Эти стили вы вольны изменить в зависимости от ваших потребностей. Обычно пользователи любят настраивать внешний вид к коде, посему это будет несложно. Стили элементарные, и каждый справится с задачей с легкостью.
Если вы хотите изменить размер миниатюр, то просто измените массив array(100,100) на нужные вам значения.
Источник: itsbarry
