Post navigation


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

В реализации задачи нам помогут 4 функции, о которых расскажу ниже:

  • next_post_link;
  • previous_post_link;
  • the_post_navigation;
  • posts_nav_link.

Поскольку речь идет о странице постов (Post), то в 99% случаев вам нужно будет редактировать файл шаблона single.php (либо тот, где в вашей теме задается формат вывода единичных статей). Функции используются в цикле Loop. Если же требуется убрать следующие / предыдущие записи в WordPress, то ищите соответствующий код в этом же файле шаблона и удаляйте (или закомментируйте) его.  

Функция next_post_link

По умолчанию формируется линк на заметку, имеющую более новую дату создания сразу после текущей (т.к. все посты располагаются в хронологическом порядке). Вот как он выглядит в коде и на сайте:

Синтаксис функции:

<?php next_post_link( $format, $link, $in_same_term, $excluded_terms, $taxonomy ); ?>

Здесь:

  • format (строка) — определяет общий формат генерируемой ссылки, где с помощью переменной %link можете задавать какой-то текст до и после нее. По умолчанию это просто линк со стрелочкой: ‘%link &raquo;’
  • link (строка) — анкор ссылки на следующую запись в WordPress, параметр %title подставляет ее заголовок.
  • in_same_term (boolean) — определяет будут ли рассматриваться в работе только элементы из текущей категории. Допустимые значения true / false (1 / 0), по умолчанию второй вариант.
  • excluded_terms (строка или массив) — укажите ID категорий блога, заметки из которых будут исключены из выборки. Допускается либо массив array(2, 5, 4) либо написание в строку через запятую. Полезно при работе с GoGetLinks, когда нужно запретить показ рекламных постов в данном блоке.
  • taxonomy (строка) — содержит название таксономии, из которой берутся следующие записи, если переменная $in_same_term = true.

Судя из скриншота выше, понятно, что все эти параметры не являются обязательными. Вот пример использования функции на одном из моих сайтов:

<?php next_post_link(‘<small>(следующая статья)</small> %link &rarr;’,’%title’, FALSE, 152) ?>

Здесь я задаю свой формат для отображения линка + исключаю из выборки все элементы, принадлежащие разделу ID = 152.

Если вам нужно вывести в WordPress следующий пост из той же категории, то пригодится код ниже (при этом игнорируется раздел ID = 33):

<?php next_post_link( ‘%link’, ‘Следующая заметка в разделе’, TRUE, ’33’ ); ?>

Когда хотите работать только с текущей конкретной таксономией, указывайте ее название в параметрах (например, testimonial):

<?php next_post_link( ‘%link’, ‘Следующий >>’, TRUE, ‘ ‘, ‘testimonial’ ); ?>

Функция previous_post_link

Принцип работы с предыдущими записями WordPress аналогичен приведенному выше описанию, как и синтаксис. Выглядит так:

Соответствующий код:

<?php previous_post_link( $format, $link, $in_same_term, $excluded_terms, $taxonomy ); ?>

  • format (строка) — задает формат создаваемой ссылки, за которую отвечает переменная %link (добавляйте текст/теги до и после нее). По умолчанию — ‘&laquo; %link’.
  • link (строка) — анкор линка, для вставки заголовка пишите %title.
  • in_same_term (boolean) — если значение true, то будут выводиться только объекты из того же раздела блога.
  • excluded_terms — убираем ненужные категории, указывайте ID через запятую (как строку) или массивом.
  • taxonomy (строка) — определяет таксономию выборки предыдущей записи в WordPress, если активен параметр $in_same_term.

В одном из блогов использую:

<?php previous_post_link(‘&larr; %link’, ‘%title’, FALSE, 107) ?>

В коде все стандартно кроме исключения категории ID = 107. Ну, или вот еще пример:

<?php previous_post_link(‘<strong>%link</strong>’, ‘<< Предыдущая’, TRUE, ’33’); ?>

Здесь делаем жирный шрифт + вместо заголовка элемента пишется определенная фраза (хотя лучше в перелинковке использовать тайтл). Выводятся объекты только текущей категории кроме той, у которой ID = 33. 

Функция the_post_navigation

Данное решение объединяет обе ссылки на предыдущие и следующие записи WordPress. Это сделано для удобства, заменяет вызов двух функций одной. Если вам нужно получить на выходе HTML код без отображения, применяйте get_the_post_navigation().

Синтаксис the_post_navigation максимально простой:

<?php the_post_navigation( $args ); ?>

Где $args — набор разных не обязательных параметров:

  • $prev_text — анкор предыдущей ссылки (по умолчанию %title).
  • $next_text — аналогично текст линка но уже на следующий пост (изначально %title).
  • $in_same_term (true/false) — позволяет показывать статьи только из текущей таксономии.
  • $excluded_terms — исключаемые ID категорий через запятую.
  • $taxonomy — название таксономии для выборки, если in_same_term = true.
  • $screen_reader_text — заголовок всего блока (по умолчанию — Post navigation).

Таким образом, мы видим, что здесь имеются такие же переменные, как и в прошлых «единичных» функциях previous_post_link, next_post_link: анкоры, выборка по таксономиям и т.п. Использование решения просто сделает ваш код более компактным, да и нет смысла повторять одни и те же параметры два раза.

Рассмотрим самую простую ситуацию, когда нужно вывести навигацию по элементам из той же категории:

<?php the_post_navigation( array(
‘prev_text’ => ‘следующий: %title’,
‘next_text’ => ‘предыдущий: %title’,
‘in_same_term’ => true,
‘taxonomy’ => ‘category’,
‘screen_reader_text’ => ‘Еще почитать’,
) ); ?>

Функция posts_nav_link

Если я правильно понимаю, то ее можно использовать не только для отображения в единичной записи, но и в архивных страницах категорий, заметках по месяцам, датам и т.п. То есть в single.php она будет отвечать за ссылки на предыдущие/следующие WordPress статьи, а в архивных — за навигацию по страницам.

Синтаксис posts_nav_link:

<?php posts_nav_link( $sep, $prelabel, $nextlabel ); ?>

Здесь:

  • $sep — разделитель, отображаемый между ссылками (раньше был ::, сейчас —).
  • $prelabel — текст линка предыдущих элементов (по умолчанию: « Previous Page).
  • $nxtlabel — текст для следующей страницы/постов (Next Page »).

Вот интересный пример с картинками вместо текстовых линков:

<?php posts_nav_link( ‘ ‘, ‘<img src=»‘ . get_bloginfo( ‘stylesheet_directory’ ) . ‘/images/prev-img.png» />’, ‘<img src=»‘ . get_bloginfo( ‘stylesheet_directory’ ) . ‘/images/next-img.png» />’ ); ?>

Только не забудьте загрузить изображения prev-img.png и next-img.png в директорию images в вашем шаблоне. Думаю, аналогично добавляется и другой HTML код, если, допустим, нужно использовать какие-то DIV или class при выравнивании.

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

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

Источник: wordpressinside.ru

Displays the navigation to next/previous post, when applicable.

Description #Description

Parameters #Parameters

$args

(array) (Optional) See get_the_post_navigation() for available arguments.

Default value: array()

Top ↑

Source #Source

File: wp-includes/link-template.php

function the_post_navigation( $args = array() ) {
echo get_the_post_navigation( $args );
}

Expand full source code Collapse full source code View on Trac

Top ↑

Changelog #Changelog

Changelog

Version Description
4.1.0 Introduced.

Top ↑

Top ↑

Uses #Uses

Uses

Uses Description
wp-includes/link-template.php:
get_the_post_navigation()

Retrieves the navigation to next/previous post, when applicable.

Top ↑

User Contributed Notes #User Contributed Notes

Источник: developer.wordpress.org

For years WordPress post navigation has been possible thanks to a flexible set of five functions, including posts_nav_link(), next_post_link() and next_posts_link(). These navigational functions continue to work great in many WordPress themes, but there are newer, even more flexible functions available to theme developers. Introduced in WordPress 4, these new navigation functions can make it easier than ever to display nav links for your WordPress-powered posts.

In this DigWP article, we dig into each of these new navigational tags and check out some examples and techniques to enhance your theme-building skills.

Incredibly, WordPress currently provides 18 nav functions that developers can use to enable post and page navigation. This gives us great flexibility, but the functions are very similar in both naming convention and functionality, and so the myriad choices can be confusing. This post aims to put things into perspective so you can choose the right tool for the job.

Overview

As with the original set of post-navigation functions, this latest set uses a symmetrical naming convention. Here is a quick overview to put all of the WordPress nav tags into perspective1.

Nav Type Older Functions Newer Functions
Single Posts get_previous_post_link
previous_post_link
get_next_post_link
next_post_link
get_the_post_navigation
the_post_navigation
Sets of Posts
(Archives)
get_previous_posts_link
previous_posts_link
get_next_posts_link
next_posts_link
get_posts_nav_link
posts_nav_link
get_the_posts_navigation
the_posts_navigation
Post Pagination paginate_links
wp_link_pages
get_the_posts_pagination
the_posts_pagination

1Note: all of these tags continue work great with WordPress. The «older» and «newer» distinction is to help differentiate the newer nav functions.

So for this article, here are the newer post-navigation functions that we’ll be exploring (everything in the right column of the previous table):

  • Single Posts: get_the_post_navigation + the_post_navigation
  • Sets of Posts: get_the_posts_navigation + the_posts_navigation
  • Post Pagination: get_the_posts_pagination + the_posts_pagination

For complete coverage of the older post-nav functions, check out The Definitive Guide to WordPress Post Navigation. Also check out Optimizing WordPress Post Navigation for even more post-nav action. Now let’s dig into the new functions..

↑ Single Post Navigation

get_the_post_navigation(), the_post_navigation()

This set of tags can be used to return and display navigation links for next and previous posts, when applicable. Specifically either of these tags may be used when displaying single posts, in order to enable the user to navigate to the next single post or previous single post.

This function returns nav links:

get_the_post_navigation()

And this function displays nav links:

the_post_navigation()

Both functions accept the same optional set of parameters via $args array:

Parameter Description Default Value
prev_text (string) Anchor text for previous post link %title
next_text (string) Anchor text for next post link %title
in_same_term (bool) Whether link should be in a same taxonomy term false
taxonomy (string) Taxonomy, if $in_same_term is true category
excluded_terms (array or string) Array or comma-separated list of excluded term IDs array()
screen_reader_text (string) Screen reader text for nav element Post navigation

Here is a copy/paste array loaded with the default parameter values:

$args = array(
‘prev_text’ => ‘%title’,
‘next_text’ => ‘%title’,
‘in_same_term’ => false,
‘taxonomy’ => ‘category’,
‘excluded_terms’ => array(),
‘screen_reader_text’ => ‘Post navigation’
);

Examples

Display the default navigation links for single posts:

<?php the_post_navigation(); ?>

Display a customized set of single-post nav links:

<?php $args = array(
‘prev_text’ => ‘Previous post: %title’,
‘next_text’ => ‘Next post: %title’,
‘in_same_term’ => true,
‘taxonomy’ => ‘category’,
‘excluded_terms’ => array(1,2,3),
‘screen_reader_text’ => ‘Post navigation’
);
the_post_navigation($args); ?>

In this example, we display a set of nav links that have customized anchor text and are limited to posts in the same category, excluding categories 1, 2, and 3.

↑ Set of Posts Navigation

get_the_posts_navigation(), the_posts_navigation()

This set of tags can be used to return and display navigation links for next and previous sets of posts, when applicable. Specifically either of these tags may be used to enable the user to navigate between sets of posts, such as those displayed on the home page, front page, archive views, category views, tag views, etc.

This function returns nav links:

get_the_posts_navigation()

And this function displays nav links:

the_posts_navigation()

Both functions accept the same optional set of parameters via $args array:

Parameter Description Default Value
prev_text (string) Anchor text for previous posts link Older posts
next_text (string) Anchor text for next posts link Newer posts
screen_reader_text (string) Screen reader text for nav element Posts navigation

Here is a copy/paste array loaded with the default parameter values:

$args = array(
‘prev_text’ => ‘Older posts’,
‘next_text’ => ‘Newer posts’,
‘screen_reader_text’ => ‘Post navigation’
);

Examples

Display the default navigation links for current set of posts:

<?php the_posts_navigation(); ?>

Display a customized set of nav links for current set of posts:

<?php $args = array(
‘prev_text’ => ‘Previous posts’,
‘next_text’ => ‘Next posts’,
‘screen_reader_text’ => ‘Post navigation’
);
the_posts_navigation($args); ?>

In this example, we display a set of nav links that have customized anchor text for both previous and next posts.

get_the_posts_pagination(), the_posts_pagination()

This set of tags can be used to return and display a set of paginated navigation links for next and previous sets of posts, when applicable. Specifically either of these tags may be used to enable the user to navigate between sets of posts, such as those displayed on the home page, front page, archive views, category views, tag views, etc.

These tags generate numerical nav links similar to the following:

« Prev 1 … 3 4 5 6 7 … 9 Next »

This function returns nav links:

get_the_posts_pagination()

And this function displays nav links:

the_posts_pagination()

Both functions accept the same optional set of parameters via $args array:

Parameter Description Default Value
base (string) Base of the paginated URL %_%
format (string) Format for pagination structure ?page=%#%
total (int) The total amount of pages Value of WP_Query’s max_num_pages or 1
current (int) The current page number Value of the paged query variable or 1
show_all (bool) Whether to show all pages false
end_size (int) How many numbers on either the start and the end list edges 1
mid_size (int) How many numbers to either side of the current pages 2
prev_next (bool) Whether to include the previous and next links in the list true
prev_text (string) The previous page text « Previous
next_text (string) The next page text Next »
type (string) Controls format of the returned value, either plain, array or list plain
add_args (array) An array of custom query args false
add_fragment (string) Custom string appended to each link none
before_page_number (string) Custom string prepended to each page number none
after_page_number (string) Custom string appended to each page number none
screen_reader_text (string) Screen reader text for navigation element Posts navigation

Here is a copy/paste array loaded with the default parameter values:

$args = array(
‘base’ => ‘%_%’,
‘format’ => ‘?paged=%#%’,
‘total’ => 1,
‘current’ => 0,
‘show_all’ => false,
‘end_size’ => 1,
‘mid_size’ => 2,
‘prev_next’ => true,
‘prev_text’ => __(‘« Previous’),
‘next_text’ => __(‘Next »’),
‘type’ => ‘plain’,
‘add_args’ => false,
‘add_fragment’ => »,
‘before_page_number’ => »,
‘after_page_number’ => »
);

Examples

Display the default pagination links for current set of posts:

<?php the_posts_pagination(); ?>

Display a customized set of pagination links for current set of posts:

<?php $args = array(
‘format’ => ‘page/%#%/’,
‘prev_text’ => ‘&larr; Older’,
‘next_text’ => ‘Newer &rarr;’
);
the_posts_pagination($args); ?>

In this example, we display a set of pagination links that have a customized link format for permalinks, and also customize the anchor text for both the previous and next post links. You can see this particular configuration implemented at my found-images site, eChunks.com.

References

Visit WordPress.org to learn more about the various navigation functions covered in this article.

  • get_the_post_navigation()
  • the_post_navigation()
  • get_the_posts_navigation()
  • the_posts_navigation()
  • get_the_posts_pagination()
  • the_posts_pagination()

Also check out my post over at WP-Mix to customize post-navigation links with title attributes »

Источник: digwp.com

На чтение 2 мин. Опубликовано 09.12.2015

Привет !

Конечно в большинстве шаблонов wordpress уже установлена навигация записей, но есть и такие где нет навигации. Если на вашем сайте нет навигации для записей, то советую установить её, как никак, но штука полезная. Я покажу вам как сделать навигацию с помощью простого плагина. После каждой записи, на странице будут отображаться ссылки на следующую запись и на предыдущую, со стрелками и названием записи.

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

Плагин – WP Post Navigation можно установить прямо из админ-панели wordpress. Перейдите по вкладке: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

Чтобы настроить плагин, перейдите по вкладке: Настройки – WP Post Navigation.

Разберём настройки:

– Active, должна стоять галочка, чтобы активировать навигацию.

– Position, выберите расположение навигации, по умолчанию – внизу.

– Navigate Within Category, навигация для категорий.

– Reverse Navigation, поменять направление.

– CSS Code for Links, можно изменить стиль навигации.

– Custom Text, если поставите здесь галочку, то будет отображаться текст который вы укажите в двух полях ниже, а не название записи.

– Previous Post Text, текст который будет отображаться для предыдущей записи, если включено значение Custom Text.

– Next Post Text, аналогично, текст для следующей записи в навигации.

– Use Images, если поставите галочку, то в навигации будут отображаться загруженные вами иконки или изображения стрелок.

– Previous Post Image, укажите здесь url адрес изображения для предыдущей записи в навигации.

– Next Post Image, аналогично, только для следующей записи.

Сохраните сделанные изменения, нажав на кнопку – Update.

У меня всё, после сохранения настроек, зайдите на сайт и проверьте наличие навигации, если есть вопросы по данной статье, то пишите комментарии. До новых встреч !

Источник: info-effect.ru

Здравствуйте. При добавлении навигации по записям в WordPress функция

<?php
//Previous/next post navigation.
the_post_navigation(array(
‘next_text’ => ‘<span class=»dashicons dashicons-arrow-right»></span>’ ,
‘prev_text’ => ‘<span class=»dashicons dashicons-arrow-left»></span>’ ,
));
?>

Выводит такой html

<nav class=»navigation pagination» role=»navigation»>
<h2 class=»screen-reader-text»>Навигация по записям</h2>
<div class=»nav-links»>
<a class=»prev page-numbers» href=»http://yoursite.info/»><span class=»dashicons dashicons-arrow-left»></span></a>
<a class=»next page-numbers» href=»http://yoursite/page/3″><span class=»dashicons dashicons-arrow-right»></span></a>
</div>
</nav>

Подскажите как убрать заголовок h2? Можно конечно использовать CSS, но думаю это не вариант.

<h2 class=»screen-reader-text»>Навигация по записям</h2>

Источник: qna.habr.com

April 05, 2020 // In: WP Plugins

Plugin Information

Authour: Anas Mir

Requires at least: 3.0

Tested up to: 3.9.1

WP Post Navigation Plugin gives you facility to show Previous and Next Post Links on Single Post Page.

  • You’ve the option to set Post Navigation Bar at Bottom, Top or both Top & Bottom.
  • You can apply CSS style to Previous and Next Post Links.
  • You can set custom text instead of Next and Previous Post Titles.
  • You can set custom Image for Next and Previous Post Links.
  • Manually Place Post Navigation in single.php

<?php echo isset($WPPostNavigation)?$WPPostNavigation->WP_Custom_Post_Navigation():»; ?>

Installation

Step 1

  1. Download zip file and Extract it
  2. Upload wp-post-navigation folder to your /wp-content/plugins/ folder.
  3. Go to the ‘Plugins’ page in the menu and activate the plugin.

Step 2

  1. Go to Wodpress Admin Panel > Setting > WP Post Navigation
  2. If you want to apply CSS style to Previous and Next Post Links, then write CSS Code in CSS Code for Links Box.
  3. If you want to apply custom text to Previous and Next posts instead of Post Titles, you can enable the Option Custom Text and Set Previous & Next Post Text.
  4. If you want to use Images for Previous and Next post links instead of text, you can enable Use Images Options and give complete url of the images.

Frequently Asked Questions

How can I show Post Navigation Manually in single.php page?
Copy & paste following code anywhere in single.php page under get_header();

<?php

echo isset($WPPostNavigation)?$WPPostNavigation->WP_Custom_Post_Navigation():»;

?>

Which is the good place to show Post Navigation?

A:In my opinion, at the Bottom of the Content.

Changelog

1.2.3

  • Post Next/Previous position Reseverse option added
  • Disable Auto place navigation option is added (You can disable auto and can place navigation manually)
  • On updation you’ll not lose your previous settings
  • Bugs Fixed

1.2.2

  • Bugs Fixed
  • Position option is removed, by default shows at the bottom
  • Manually Place Post Navigation anywhere in single.php file

1.2.1

  • Bugs Fixed

1.2

  • Compatible with WordPress 3.8
  • Show Post Navigation above the Post Title

1.1

  • Navigate Within Category Option Added

1.0.1

  • Bugs Fixed

Screenshots

1. Admin Panel Setting

2. WP Post Navigation

3. Custom Placement of Navigation

Download:

Download Try it today for free!

Источник: sharp-coders.com

Навигацию между предыдущим и следующим постом в 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 версии PRO уже можно установить обе ссылки на статьи. А самое интересное, показать случайный пост или похожую тему поста, отобразить несколько случайных или последующих ссылок на статьи. Стоимость плагина на один сайт €12.99.

Источник: webkato.ru