Владельцы сайтов и блогов всегда стремятся улучшить навигацию по своим публикациям. Один из способов сделать это — добавить ссылки на предыдущую и следующую запись внутри каждой публикации.
В этой статье мы рассмотрим, как добавить эти ссылки навигации внутри каждого поста на вашем сайте WordPress с использованием функций и стилей.
Добавление ссылок на предыдущую и следующую запись в WordPress
Чтобы добавить ссылки на предыдущую и следующую запись внутри поста на вашем сайте WordPress, вам нужно поместить код, тот, что ниже, в файл functions.php вашей темы WordPress:
//навигация следующая/предыдущая
function ws_navigation_links_content($content) {
if (is_single()) {
$previous_post = get_previous_post();
$next_post = get_next_post();
$navigation_links = '<div id="singnex">';
if ($previous_post) {
$navigation_links .= '<div class="lion"><span>← Предыдущий пост</span>';
$navigation_links .= '<a href="' . get_permalink($previous_post->ID) . '">' . $previous_post->post_title . '</a>';
$navigation_links .= '</div>';
}
if ($next_post) {
$navigation_links .= '<div class="linx"><span>Следующий пост →</span>';
$navigation_links .= '<a href="' . get_permalink($next_post->ID) . '">' . $next_post->post_title . '</a>';
$navigation_links .= '</div>';
}
$navigation_links .= '</div>';
$content .= $navigation_links;
}
return $content;
}
add_filter('the_content', 'ws_navigation_links_content');
Этот код создает блок с двумя ссылками: на предыдущую запись и на следующую запись из всех категорий на сайте.
Ссылки записи из текущей категории
У функций get_previous_post и get_next_post есть несколько полезных параметров. Один из таких параметров позволяет создавать ссылки на предыдущие и следующие посты, находящиеся в той же категории, что и текущий пост. Для этого нужно внести небольшую корректировку в аргументы функций, а именно добавить значение true. Вот как это выглядит:
//навигация следующая/предыдущая из той категории, что и текущий пост
function ws_navigation_links_content($content) {
if (is_single()) {
$previous_post = get_previous_post(true, '', 'category');
$next_post = get_next_post(true, '', 'category');
$navigation_links = '<div id="singnex">';
if ($previous_post) {
$navigation_links .= '<div class="lion"><span>← Предыдущий пост</span>';
$navigation_links .= '<a href="' . get_permalink($previous_post->ID) . '">' . $previous_post->post_title . '</a>';
$navigation_links .= '</div>';
}
if ($next_post) {
$navigation_links .= '<div class="linx"><span>Следующий пост →</span>';
$navigation_links .= '<a href="' . get_permalink($next_post->ID) . '">' . $next_post->post_title . '</a>';
$navigation_links .= '</div>';
}
$navigation_links .= '</div>';
$content .= $navigation_links;
}
return $content;
}
add_filter('the_content', 'ws_navigation_links_content');
Добавив значение true в аргументы функций, мы говорим WordPress, что необходимо искать следующий или предыдущий пост именно в той же категории, что и текущий пост. Это позволяет легко создавать навигацию между постами внутри одной категории.
Стили оформления навигации
На последнем этапе остается стилизовать все эти ссылки с помощью CSS-стилей. Для этого откройте файл style.css и добавьте в него следующий код:
/* Стили навигации singl */
#singnex {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
#singnex .lion {
width: 50%;
text-align: left;
padding-right: 10px;
}
#singnex .lion a {
text-align: left;
}
#singnex .linx {
width: 50%;
text-align: right;
padding-right: 10px;
}
#singnex .linx a {
text-align: right;
}
#singnex span {
display: inherit;
font-size: 14px;
}
#singnex a {
text-decoration: underline;
}
#singnex a:hover {
text-decoration: none;
}
@media (max-width: 480px) {
#singnex {
display: block;
}
#singnex .lion {
width: 100%;
padding-right: 0px;
margin-bottom: 15px;
}
#singnex .linx {
width: 100%;
text-align: left;
padding-right: 0px;
}
}
Результат.
Здравствуйте. Все работает, только смущает один момент. Если название заголовка не достаточно длинное, то получается в одну строку, то есть примерно так: Следующая запись>ваап ор ворв. Как сделать, чтобы название поста всегда было под надписью «Следующая запись»?
Ева, здравствуйте! Самое простое решение, поставьте просто тег переноса строки. Пример:
Предыдущий пост