Как использовать миниатюры в ссылках Предыдущий/следующий в WordPress

Владислав Белецкий
Владислав Белецкий .
Категория:
Комментариев: 0

Один из наших читателей недавно интересовался, возможно ли использовать миниатюры для навигации ссылками Предыдущая статья/Следующая статья в WordPress. У функций next_post_link и previous_post_link нет простого параметра для задания миниатюры, который бы разработчик мог просто применить. В этой статье мы покажем вам как использовать миниатюры в ссылках Предыдущий/следующий пост в WordPress.

Результат в итоге будет примерно следующим:

thumbnailpostnav[1]

Прежде всего вам нужно открыть файл 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

VN:F [1.9.22_1171]

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии