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

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

Без плагина

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

<?php if(get_previous_post(true) or get_next_post(true)) : ?>
	<aside class="nav-growpop">
	        <nav class="postnavigation">
	            <?php
	            $nextPost = get_next_post();
	            if( ! empty($nextPost) ){
                   $nextthumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $nextPost->ID ), 'thumbnail' );
	               if( ! empty( $nextthumbnail ) ) {
        	           next_post_link('%link','
    	                    <span class="icon-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg></span>
    	                    <div>
    	                        <span>'. __('Next', 'theme_textdomain') .'</span>
    	                        <h3>%title</h3>
    	                        <img src="' . esc_url( $nextthumbnail[0] ) . '"  alt="%title"/>
    	                    </div>
    	                ');
                    } else {
                        next_post_link('%link','
                            <span class="icon-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg></span>
                            <div>
                                <span>'. __('Next', 'theme_textdomain') .'</span>
                                <h3>%title</h3>
                            </div>
                        ');
                    }
	            }; ?>
                <?php
                $prevPost = get_previous_post();
                if( ! empty($prevPost) ){
	               $prevthumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $prevPost->ID ), 'thumbnail' );
	               if( ! empty( $prevthumbnail ) ) {
    	                previous_post_link('%link', '
    	                    <span class="icon-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
    	                    <div>
    	                        <span>'. __('Previous', 'theme_textdomain') .'</span>
    	                        <h3>%title</h3>
    	                        <img src="' . esc_url( $prevthumbnail[0] ) . '"  alt="%title"/>
    	                    </div>
    	                ');
    	            } else {
                        previous_post_link('%link', '
                            <span class="icon-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
                            <div>
                                <span>'. __('Previous', 'theme_textdomain') .'</span>
                                <h3>%title</h3>
                            </div>
                        ');
    	            }
	            }; ?>
	        </nav>
	</aside><!-- navigation End -->
<?php endif; ?>

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

Теперь добавьте этот код в файл functions.php. Он назначит класс «prev» и «next» ссылкам навигации.

/**
 * Add the class to the navigation links between posts
 */
function posts_link_next_class($format){
     $format = str_replace('href=', 'class="prev" href=', $format);
     return $format;
}
add_filter('next_post_link', 'posts_link_next_class');

function posts_link_prev_class($format) {
     $format = str_replace('href=', 'class="next" href=', $format);
     return $format;
}
add_filter('previous_post_link', 'posts_link_prev_class');

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

/* Post Navigation */
.nav-growpop {
	position: relative;
}
.nav-growpop nav a {
	position: fixed;
	z-index: 1000;
	display: block;
	text-align: left;
	outline: none;
}
.postnavigation {
	position: fixed;
	z-index: 4;
	bottom: 50%;
}
.nav-growpop nav a.prev {
	left: 0;
}
.nav-growpop nav a.next {
	right: 0;
}
.nav-growpop nav a svg {
	display: block;
	margin: 0 auto;
	padding: 0;
}
.postnavigation .icon-wrap {
	position: relative;
	z-index: 100;
	display: block;
	padding: 20px 10px;
	-webkit-transition: border-width .3s .15s;
	transition: border-width .3s .15s;
	color: white;
	border: 0 solid #00a4ea;
	background: #00a4ea;
}
.postnavigation div {
	position: absolute;
	top: 50%;
	overflow: hidden;
	width: 440px;
	height: 144px;
	padding: 20px;
	-webkit-transition: -webkit-transform .3s, opacity .3s;
	-webkit-transition: opacity .3s, -webkit-transform .3s;
	transition: opacity .3s, -webkit-transform .3s;
	transition: transform .3s, opacity .3s;
	transition: transform .3s, opacity .3s, -webkit-transform .3s;
	opacity: 0;
	background: #fff;
}
.postnavigation a.prev div {
	left: 0;
	padding: 20px 140px 20px 70px;
	-webkit-transform: translateY(-50%) translateX(-100%) scale(.75);
	transform: translateY(-50%) translateX(-100%) scale(.75);
	text-align: right;
}
.postnavigation a.next div {
	right: 0;
	padding: 20px 70px 20px 140px;
	-webkit-transform: translateY(-50%) translateX(100%) scale(.75);
	transform: translateY(-50%) translateX(100%) scale(.75);
}
.postnavigation span {
	line-height: 1.2;
	font-size: 13px;
	display: block;
	padding-bottom: 5px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #afafaf;
	border-bottom: 1px solid #ddd;
}
.postnavigation h3 {
	line-height: 1.2;
	font-size: 18px;
	margin: 0;
	padding: 8px 0 10px;
}
.postnavigation img {
	position: absolute;
	top: 20px;
	width: 104px;
	height: 104px;	
	-o-object-fit: cover;
	object-fit: cover;
}
.postnavigation a.prev img {
	right: 20px;
}
.postnavigation a.next img {
	left: 20px;
}
.postnavigation a:hover .icon-wrap {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	border-top-width: 40px;
	border-bottom-width: 40px;
}
.postnavigation a:hover div {
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	-webkit-transform: translateY(-50%) translateX(0) scale(1);
	transform: translateY(-50%) translateX(0) scale(1);
	opacity: 1;
	-webkit-box-shadow: 0 0 5px 0 #171616;
	box-shadow: 0 0 5px 0 #171616;
}
/* End Post Navigation */

Не забудьте про отображение на мобильных устройствах. Например, на экранах не более 900px ширину кнопок можно уменьшить, а на экранах менее 500px можно совсем скрыть изображение.

@media (max-width:900px) {
	.postnavigation .icon-wrap {
		padding: 20px 0;
	}
}
@media (max-width:500px) {
	.postnavigation div {
		width: auto;
		height: auto;
	}
	.postnavigation a.prev div {
		padding: 20px 10px 20px 30px;
		height: 144px;
    	width: 200px;
	}
	.postnavigation a.next div {
		padding: 20px 30px 20px 10px;
		height: 144px;
    	width: 200px;
	}
	.postnavigation a:hover .icon-wrap {
		border-top-width: 0;
		border-bottom-width: 0;
	}
	.postnavigation span {
		font-size: 11px;
	}
	.postnavigation h3 {
		font-size: 14px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-height: 20px;
		max-height: 72px;
		white-space: normal;
	}
	.postnavigation img {
		display: none;
	}
}

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

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

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

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

C плагином Cresta Posts Box

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

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

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

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

⚠️ Так как WordPress и его плагины могут изменяться, тестируйте любой кастомный код на промежуточном веб-сайте перед переходом в рабочую среду.

ВКонтакте Pinterest

Елена сказал:
02.05.2020 в 21:33
с цены начинать надо было
Ответить
1. Наталья Мамбетова сказал:
  25.06.2020 в 04:30
  В посте описаны БЕСПЛАТНЫЕ функции плагина, поэтому цена платной версии указана в конце для ознакомления.
  Ответить
Владимир сказал:
07.01.2021 в 03:48
Здравствуйте.
Спасибо большое за код!
Подскажите, а как сделать, чтобы блоки навигации раскрывались не только при наведении, а и по прошествии заданного времени?
Ответить
1. Наталья Мамбетова сказал:
  08.01.2021 в 01:19
  Вы можете запланировать вызов с помощью JavaScript
  setTimeout(function() {...}, 100);.
  Или сделать задержку с помощью CSS animation с подсвойством animation-delay.
  Ответить

Комментарии, считающиеся спамом или исключительно рекламные по своему содержанию, будут удалены. Допускается включение ссылки на соответствующий контент, но текст должен иметь отношение к теме поста. Также будут удалены анонимные, оскорбительные, содержащие ненормативную лексику, вводящие в заблуждение или клеветнические комментарии.

Для публикации кода в комментариях используйте следующие шорткоды -
[php]ваш код[/php] - для PHP, [css]ваш код[/css] - для CSS, [code lang="js"]ваш код[/code] - для HTML или JS, указав соответствующий lang.

Без плагина

C плагином Cresta Posts Box

Комментарии

Оставьте комментарий