WordPress ссылки на следующую и предыдущую запись внутри поста

Владельцы сайтов и блогов всегда стремятся улучшить навигацию по своим публикациям. Один из способов сделать это — добавить ссылки на предыдущую и следующую запись внутри каждой публикации.

В этой статье мы рассмотрим, как добавить эти ссылки навигации внутри каждого поста на вашем сайте 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>&larr; Предыдущий пост</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>Следующий пост &rarr;</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>&larr; Предыдущий пост</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>Следующий пост &rarr;</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;
        }
}

Результат.

2 комментария

Ева:

26.11.2016 в 23:01

Здравствуйте. Все работает, только смущает один момент. Если название заголовка не достаточно длинное, то получается в одну строку, то есть примерно так: Следующая запись>ваап ор ворв. Как сделать, чтобы название поста всегда было под надписью «Следующая запись»?

Ответить
1. WordSmall:
  
  26.11.2016 в 23:46
  
  Ева, здравствуйте! Самое простое решение, поставьте просто тег переноса строки. Пример:
  Предыдущий пост
  
  Ответить