Один из наших читателей недавно интересовался, возможно ли использовать миниатюры для навигации ссылками Предыдущая статья/Следующая статья в 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