Красивая навигация с изображениями между постами в WordPress

Красивая навигация с изображениями между постами в Wordpress

Навигацию между предыдущим и следующим постом в WordPress можно сделать более современной и красивой с помощью добавления изображения записи и CSS. Если ссылки навигации находятся в самом низу статьи и выглядят неприметно, то пора сделать их заметнее для посетителя. Сделаем это двумя способами: без плагина и с плагином.

Навигация между постами с изображениями без плагина.

Ссылки на следующую и предыдущую запись в WordPress выводятся функцией the_post_navigation, она объединяет в себе функции next_post_link() и previous_post_link(). Если в вашей теме используется именно такая функция, то аккуратно ее удалим и на это место вставим этот код:

<div class="float-posts-nav">
    <?php
    $nextPost = get_next_post();
    $nextthumbnail = wp_get_attachment_image_src( get_post_thumbnail_id($nextPost->ID), 'thumbnail' );?>
	<div class="postNavigation nextPostBox"><?php next_post_link('%link','<div class="inner-prevnext"><div class="thumbnail"><img src="' . esc_url( $nextthumbnail[0] ) . '"/></div><div class="headline"><span>'. __('Next', 'nanima') .'</span><h4>%title</h4></div></div>'); ?></div>
    <?php
    $prevPost = get_previous_post();
    $prevthumbnail = wp_get_attachment_image_src( get_post_thumbnail_id($prevPost->ID), 'thumbnail' );?>
	<div class="postNavigation prevPostBox"><?php previous_post_link('%link','<div class="inner-prevnext"><div class="thumbnail"><img src="' . esc_url( $prevthumbnail[0] ) . '"/></div><div class="headline"><span>'. __('Previous', 'nanima') .'</span><h4>%title</h4></div></div>'); ?></div>
</div>
<!-- navigation End -->

В этой функции мы выведем ссылки с заголовком и миниатюрой поста. Задайте свой размер миниатюры заменив ‘thumbnail’ на свое значение. Также можно заменить тег h4 на любой другой. Убедитесь, что ссылки работают как надо и добавьте стили. Блоки с ссылками навигации будут располагаться по бокам страницы и раскрываться при наведении. Вы можете изменить размер и цвет шрифта, высоту строки, цвет фона и расстояние от конца страницы до блока навигации.

/* Post Navigation -------------------------------------------------------------- */
.postNavigation {
    position: fixed;
    z-index: 9999;
    bottom: 45%;
    height: 100px;
    margin-top: -47px;
    transition: all .7s ease-in-out;
}
.postNavigation a {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 100px;
    transition: all .4s ease-in-out;
    vertical-align: middle;
    color: #fff;
    background: #dfdfdf;
    box-shadow: 0 0 80px #e7e7e7;
}
.postNavigation a:before {
    line-height: 28px;
    font-family: 'FontAwesome';
    font-size: 28px;
    position: absolute;
    top: 50%;
    margin-top: -14px;
}
.nextPostBox a:before {
    left: 12px;
    content: '\f104';
}
.prevPostBox a:before {
    right: 12px;
    content: '\f105';
}
.prevPostBox {
    right: 0;
}
.nextPostBox {
    left: 0;
}
.postNavigation .thumbnail {
    position: relative;
    float: right;
    width: 70px;
    height: 70px;
    margin-left: 5px;
    text-align: center;
}
.postNavigation.prevPostBox .thumbnail {
    float: left;
    margin-right: 5px;
    margin-left: 0;
}
.postNavigation .headline {
    font-size: 14px;
    position: relative;
    overflow: hidden;
    height: 70px;
    padding: 0 8px;
    -webkit-font-smoothing: antialiased;
}
.postNavigation .headline span {
    line-height: 10px;
    font-size: 10px;
    display: block;
    margin-bottom: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.postNavigation .headline h4 {
    margin: 0;
}
.postNavigation .inner-prevnext {
    position: absolute;
    top: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 290px;
    height: 100%;
    padding: 15px;
    transition: all .2s ease-in-out .3s;
    color: #111;
    background-color: #fff;
}
.postNavigation.prevPostBox .inner-prevnext {
    left: 0;
    margin: 0 0 0 40px;
}
.postNavigation.nextPostBox .inner-prevnext {
    right: 0;
    margin: 0 40px 0 0;
}
.postNavigation a:hover {
    width: 330px;
    color: #fff;
}
.postNavigation.prevPostBox a:hover .inner-prevnext {
    margin: 0 40px 0 0;
    opacity: 1;
}
.postNavigation.nextPostBox a:hover .inner-prevnext {
    margin: 0 0 0 40px;
    opacity: 1;
}

Не забудьте про отображение на мобильных устройствах. На моем сайте стили для экранов меньше 701px выглядят так:

@media only screen and (max-width: 701px){
    .postNavigation a {
        line-height: 32px;
        width: 32px;
        height: 32px;
    }
     .postNavigation a:hover {
        width: 35px;
    }
    .postNavigation .inner-prevnext {
        display: none;
    }
}

У вас должен получиться вот такой раскрывающийся блок навигации справа и слева каждой статьи.

Навигация между постами с изображениями без плагина

Чтобы блоки навигации появлялись с задержкой при прокрутке страницы, добавим небольшой скрипт.

/* Scroll Post Navigation */
    $(window).scroll(function(){
    if ($(this).scrollTop() >= 600) {
        $('.float-posts-nav').fadeIn();
     } else {
        $('.float-posts-nav').fadeOut();
     }
     });

Навигация между постами с изображениями с плагином Cresta Posts Box.

Cresta Posts Box Free — бесплатный плагин WordPress для навигации между постами. Ссылка на следующий или предыдущий пост выводится в красивом блоке, всплывающем при прокрутке страницы. Появляется оно в самом конце поста, поэтому не будет мешать просмотру контента. Выглядит блок таким образом:

Навигация между постами с изображениями с плагином Cresta Posts Box

В настройках этого плагина мы можем отметить какую ссылку показать — предыдущего или следующего поста, выбрать положение блока. Также можно включить или отключить изображение, установить его размер, добавить краткое описание статьи. Включить навигацию не только в постах, но и на страницах. Изменить размер шрифта и высоту строки. Добавить собственные стили и отключить навигацию на мобильных устройствах. Настройки абсолютно просты и понятны. Можно не боясь устанавливать на работающий сайт.

Навигация между постами с изображениями с плагином Cresta Posts Box

В Cresta Posts Box версии PRO уже можно установить обе ссылки на статьи. А самое интересное, показать случайный пост или похожую тему поста, отобразить несколько случайных или последующих ссылок на статьи. Стоимость плагина на один сайт €12.99.

СтраUz
Читайте также
Привет! Я Натали Мамбетова.

Занимаюсь разработкой сайтов, блогов, интернет-магазинов, лендингов на WordPress. Оказываю платные помощь и консультации. Являюсь сертифицированным партнером TemplateMonster по CMS системе WordPress, имею сертификат этой компании подтверждающий мои навыки в работе с данной системой.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© СтраUz 2018. Все права защищены. Копирование разрешено только с указанием гиперссылки на источник.
Сделано с ❤
Заказать сайт