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

Post Navigation

The post navigation is an important part in order for Auto Load Next Post to work. Most themes should have one applied for single posts, preferrably at the end of the article. Without the post navigation, Auto Load Next Post will not know which post to load next.

My theme does not have a post navigation

If the theme that you are using does not have a post navigation then you will need to add one. The Next and Previous Links guide available at WordPress.org will help you along.

Once you have a post navigation applied, Auto Load Next Post will be able to load the next post when the post navigation is read.

My theme has a post navigation

Great. By code standards a post navigation should have the rel attribute applied to both the previous and next post link. However, some themes dont use the standard post navigation or at least extend the standard post navigation and provide their own post navigation to provide the style they wish to present. Alot of these types of themes tend to forget about applying the required attribute to the links or enter a different attribute altogether.

Auto Load Next Post looks for two possible types of rel attributes applied to the previous post link, rel=»prev» and rel=»previous».

If your theme does have a post navigation but posts are still unable to load, then it is most likley because the post navigation in your theme is missing either attribute assigned to the previous post link.

In this case, you will need to apply it in order for Auto Load Next Post to recognize the link of the previous post.

How to fix this

One way to apply the missing attribute to the post navigation is via JavaScript. Simply change div.previous-post to your themes post navigation theme selector.

// Runs on page load, the initial post.
jQuery( document ).ready( function() {
jQuery( ‘div.previous-post’ ).find( ‘a’ ).attr( ‘rel’, ‘prev’ );
});

// Runs once a post has loaded.
jQuery(‘body’).on( ‘alnp-post-loaded’, function( e ) {
jQuery( ‘div.previous-post’ ).find( ‘a’ ).attr( ‘rel’, ‘prev’ );
});

Another would be to find the source of the post navigation function within your theme and apply the rel=»prev» attribute to the previous post link.

Either solution applied will then allow Auto Load Next Post to function.

Im seeing two post navigations, why?

Auto Load Next Post inserts a post navigation for you within the repeater template. This is because themes that are well structured do not include them within the template loops.

Should the theme you are developing or the theme you are using did add a post navigation to the template loops then it would be best to remove the post navigation Auto Load Next Post inserts.

All you have to do to remove it is add this line to your functions.php file. Or if you prefer you can use a plugin like My Custom Functions to apply it without modifying your files.

remove_action( ‘alnp_load_after_content’, ‘auto_load_next_post_navigation’, 1, 10 );

Only one post loads after the initial post viewed. Why?

This is caused generally because there are two different post navigations. The post navigation the theme provides and the post navigation Auto Load Next Post inserts with the repeater template. Both do not match either due to using a different theme selector or because the post navigation that the theme provides is customized.

To fix this you will need to make sure the post navigation matches from your theme so Auto Load Next Post recognizes it. First, you will need to check to see if there is a matching theme selector available. If not then it would be best to remove the post navigation from the repeater template (as shown above) and then hook in the themes post navigation in place instead.

add_action( ‘alnp_load_after_content’, ‘your_theme_post_navigation’, 1, 10 );
function your_theme_post_navigation() {
// Place your themes post navigation here.
}

Once done, double check the post navigation theme selector matches and posts will load without issue.

If you have any issues with this guide, or the documentation that is linked throughout, please open a new issue in this repository for it to be reviewed. Thank you!

Источник: github.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

Навигацию между предыдущим и следующим постом в 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

Выводит на экран HTML блок ссылок на следующую и предыдущую записи. Используется на странице отдельной записи: is_singular().

Эта функция объединяет в одну отдельные функции: next_post_link() и previous_post_link(). Функция создана для удобства, с ней вставлять блок навигации между соседними статьями (записями) можно одной строкой.

Не путайте с функцией the_posts_navigation(), которая выводит ссылки на следующую/предыдущую страницу с записями.

Хуков нет.

Возвращает

Ничего (null). Выводит на экран HTML код.

Использование

the_post_navigation( $args );

Параметры $args

$args — это массив который может содержать следующие параметры:

$prev_text(строка)
Текст который будет показан, как анкор ссылки на предыдущую запись.
По умолчанию: ‘%title’
$next_text(строка)
Текст который будет показан, как анкор ссылки на следующую запись.
По умолчанию: ‘%title’
$screen_reader_text(строка)
Название блока навигации для сканирующих роботов.
По умолчанию: __( ‘Post navigation’ )
$in_same_term(логический)
true, когда нужно, чтобы ссылка была из текущего элемента указанной в taxonomy таксономии. C версии 4.4.
По умолчанию: false
$excluded_terms(строка/массив)
ID элементов таксономии, который нужно исключить. В виде массива или в строке через запятую. C версии 4.4.
По умолчанию: »
$taxonomy(строка)
Название таксономии, когда $in_same_term = true. C версии 4.4.
По умолчанию: ‘category’

Примеры

#1 Ссылки навигации между постами

Выведем ссылки на следующий и предыдущий записи (посты) на отдельной странице типа is_single().

// След./Пред. Пост.
the_post_navigation( array(
‘next_text’ => ‘<span class=»meta-nav» aria-hidden=»true»>Далее</span> ‘ .
‘<span class=»screen-reader-text»>Следующая запись</span> ‘ .
‘<span class=»post-title»>%title</span>’,
‘prev_text’ => ‘<span class=»meta-nav» aria-hidden=»true»>Назад</span> ‘ .
‘<span class=»screen-reader-text»>Предыдущая запись</span> ‘ .
‘<span class=»post-title»>%title</span>’,
) );

В результате мы получим такой HTML код:

<nav class=»navigation post-navigation» role=»navigation»>
<h2 class=»screen-reader-text»>Навигация по записям</h2>
<div class=»nav-links»>
<div class=»nav-previous»><a href=»//wptest.ru/post8/» rel=»prev»><span class=»meta-nav» aria-hidden=»true»>Назад</span> <span class=»screen-reader-text»>Предыдущая запись:</span> <span class=»post-title»>Запись со случайным номером 81717</span></a>
</div>
<div class=»nav-next»><a href=»//wptest.ru/post10/» rel=»next»><span class=»meta-nav» aria-hidden=»true»>Далее</span> <span class=»screen-reader-text»>Следующая запись:</span> <span class=»post-title»>Привет, мир!</span></a>
</div>
</div>
</nav>

Или так это выглядит в дефолной теме twentyfifteen:

Список изменений

Код the post navigation:

wp-includes/link-template.php

WP 5.3.2

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

Cвязанные функции

Из метки: adjacent link (связанные ссылки)

Еще из метки: navigation pagination (навигация пагинация)

Еще из раздела: Навигация

Еще из тегов шаблона: Записи: посты, страницы, …

Kama4 Июн 2020 . 24 Янв 2020 6 комментов

Источник: wp-kama.ru

Обновление: версия 4.1 вышла 18 декабря. Подробное описание в нашей новой статье →

В WordPress версии 4.1 появятся несколько новых функций для упрощения навигации в темах: the_post_navigation, the_posts_navigation и функция пагинации the_posts_pagination.

Для постраничной навигации многие темы для WordPress внедряют поддержку таких плагинов, как WP-PageNavi, а начиная с темы Twenty Fourteen, некоторые авторы последовали примеру стандартной темы и стали выполнять пагинацию с помощью встроенной функции ядра paginate_links.

Использование этой функции часто требует большое количество кода и иногда включает логику для работы с постоянными ссылками модуля WP_Rewrite, данными о запросе WP_Query и прочее. Начиная с WordPress версии 4.1 разработчики ядра обернули эту логику в одну простую функцию.

the_posts_pagination()

Функция the_posts_pagination() вставляет блок пагинации в тему WordPress:

<?php paginate_links(); ?>

Пагинация в теме Twenty Fifteen

В качестве единственного параметра функция the_posts_pagination() принимает массив, который передается в функцию paginate_links(). Это значит, что весь функционал который мы ранее выполняли с помощью paginate_links(), также легко реализовать и с помощью новой упрощенной функции the_posts_pagination().

Например, можно добавить символ № перед каждым номером страницы:

the_posts_pagination( array(
‘before_page_number’ => ‘&#8470;’,
) );

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

  • show_all — показывать все страницы
  • end_size — количество страниц в начале и конце списка
  • mid_size — количество страниц слева и справа от текущей страницы

Например:

the_posts_pagination( array(
‘end_size’ => 2,
‘mid_size’ => 2,
) );

Данный код будет отображать первую, вторую, предпоследнюю и последнюю страницы, независимо от текущей. А вокруг текущей страницы будет по две страницы с каждой стороны. На примере темы Twenty Fifteen это будет выглядеть следующим образом:

Пагинация в теме Twenty Fifteen

Функция the_posts_pagination() добавляет ряд дополнительных классов к разметке, с помощью которых можно изменять внешний вид каждого элемента пагинации.

the_posts_navigation

Функция the_posts_navigation() является менее привлекательной альтернативой функции the_posts_pagination(). Она выводит лишь ссылки на следующую и предыдущую страницы относительно текущей.

До WordPress 4.1 данные ссылки можно получить с помощью функций get_next_posts_link() и get_previous_posts_link(), которыми на сегодняшний день пользуются большинство авторов тем для WordPress. Начиная с версии 4.1 авторы могут существенно упростить вывод подобных ссылок:

<?php the_posts_navigation(); ?>

С помощью ключей prev_text и next_text передаваемого массива, можно изменить текст ссылок. По умолчанию используется «Старые записи» и «Новые записи», что подойдет для большинства случаев.

the_post_navigation

Функцию the_post_navigation() можно использовать в шаблоне вывода одной записи. Данная функция отображает ссылки на следующую и предыдущую записи относительно текущей. Она также хорошо подходит для использования в шаблонах прикрепленных файлов.

<?php the_post_navigation(); ?>

Аргументами prev_text и next_text можно изменить текст, куда строкой %title можно вставить заголовок следующей или предыдущей статьи:

the_post_navigation( array(
‘next_text’ => ‘Следующая запись: %title’,
‘prev_text’ => ‘Предыдущая запись: %title’,
) );

Заключение

Данные встроенные функции WordPress позволяют существенно уменьшить количество кода в темах, а значения их аргументов по умолчанию подойдут для большинства тем, что позволят их использовать без каких-либо параметров.

Следует отметить, что все три функции выводят результат сразу на экран. Если вы хотите записать результат в переменную, сделать это можно добавив префикс get_ к любой из них, например get_the_posts_pagination().

Напоминаем, что WordPress версии 4.1 выйдет в декабре 2020 года вместе с новой стандартной темой Twenty Fifteen.

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