Как добавить следующую/предыдущую ссылку в WordPress (полное руководство)
Опубликовано: 2022-05-10Вы хотите добавить следующую/предыдущую ссылку в WordPress?
Следующая и предыдущая ссылки — это динамические ссылки, которые позволяют пользователям просматривать следующую или предыдущую публикацию.
В этой статье мы покажем вам, как легко добавлять следующие/предыдущие ссылки в WordPress и как извлечь из них максимальную пользу.
Что такое следующие/предыдущие ссылки в WordPress?
Ссылки «Следующая/предыдущая» — это динамические ссылки, добавляемые темой WordPress, которые позволяют пользователям легко переходить к следующей или предыдущей публикации. Это может помочь увеличить количество просмотров страниц и снизить показатель отказов.
По умолчанию сообщения блога WordPress отображаются в обратном хронологическом порядке (сначала новые сообщения).
Это означает, что следующее сообщение публикуется после текущего сообщения, которое просматривает пользователь, а предыдущее сообщение — это сообщение, которое было опубликовано до текущего сообщения.
Ссылки «следующая/предыдущая» позволяют пользователям легко перемещаться по отдельным статьям и страницам архива блога. Это также поможет вам получить больше просмотров страниц для вашего блога.
Большинство тем WordPress имеют встроенные ссылки на следующие и предыдущие сообщения, которые автоматически отображаются внизу каждого сообщения. Однако некоторые темы не отображают их, или вы можете настроить, где и как они отображаются на вашем веб-сайте WordPress.
При этом давайте посмотрим, как легко добавить следующую и предыдущую ссылки в WordPress.
Ниже приведен список тем, которые мы рассмотрим в этой статье.
- Добавление следующей/предыдущей ссылки в WordPress с помощью плагина
- Добавление следующей/предыдущей ссылки в тему WordPress
- Стилизация следующей/предыдущей ссылки в WordPress
- Добавление следующей/предыдущей ссылки на страницы
- Добавление следующей/предыдущей ссылки с миниатюрами
- Удаление следующей/предыдущей ссылки в WordPress
Добавление следующей/предыдущей ссылки в WordPress с помощью плагина
Этот метод проще и рекомендуется для новичков, которым неудобно добавлять код на свои веб-сайты.
Во-первых, вам нужно установить и активировать плагин CBX Next Previous Article. Для получения более подробной информации см. наше пошаговое руководство по установке плагина WordPress.
После активации вам необходимо посетить страницу « Настройки» » CBX Next Previous . Отсюда вы можете выбрать, где вы хотите показывать следующую и предыдущую ссылки на своем веб-сайте.
Плагин позволяет отображать стрелки ссылок «Следующая» и «Предыдущая» на отдельных сообщениях, страницах, страницах архива и многом другом.
Чтобы сделать следующую и предыдущую ссылки более релевантными, вы также можете отображать следующую и предыдущую записи из той же категории или тега.
Бесплатная версия плагина позволяет отображать стрелки только для следующей и предыдущей статей. Вы можете перейти на профессиональную версию, чтобы разблокировать другие параметры отображения, такие как всплывающее окно.
Если вы решите отображать следующие/предыдущие сообщения из той же таксономии, вам нужно переключиться на вкладку Навигация по таксономии.
Отсюда вам нужно выбрать, какую таксономию вы хотите использовать для выбора следующей и предыдущей ссылок.
При желании плагин также позволяет отслеживать клики с помощью Google Analytics. Чтобы использовать эту функцию, вам необходимо сначала установить Google Analytics в WordPress.
После этого перейдите на вкладку Google Analytics в настройках плагина и включите параметры отслеживания кликов.
Когда вы закончите, не забудьте нажать кнопку «Сохранить настройки», чтобы сохранить изменения.
Теперь вы можете посетить свой веб-сайт WordPress, чтобы увидеть следующие/предыдущие ссылки в действии.
Этот метод проще, но он не дает вам большой гибкости. Например, бесплатная версия не отображает заголовок следующего или предыдущего поста.
Если вам нужно больше гибкости, продолжайте читать.
Добавление следующей/предыдущей ссылки в тему WordPress
Для этого метода вам нужно отредактировать файлы темы WordPress. Если вы еще этого не делали, ознакомьтесь с нашим руководством о том, как копировать и вставлять код в WordPress.
Затем вам нужно будет подключиться к вашему веб-сайту WordPress с помощью FTP-клиента или с помощью приложения «Диспетчер файлов» в панели управления хостингом WordPress.
После подключения вам нужно перейти в папку /wp-content/themes/your-current-theme/.
Теперь вам нужно найти файл single.php. Это файл, отвечающий за отображение отдельных постов на вашем сайте.
Некоторые темы WordPress могут ссылаться на другие файлы внутри файла single.php. Эти файлы называются частями шаблона и находятся в папке template-parts вашей темы WordPress.
Подробнее читайте в нашей статье о том, какие файлы редактировать в теме WordPress.
После этого просто скопируйте и вставьте следующий код в то место в файле шаблона, где вы хотите отобразить следующую и предыдущую ссылки.
<?php the_post_navigation(); ?>
Теперь вы можете сохранить изменения и посетить свой веб-сайт, чтобы увидеть ссылки «Следующая/Предыдущая» в действии.
Приведенный выше тег шаблона просто покажет ссылку на следующую и предыдущую записи с заголовком записи в качестве текста привязки. Там не сказано, что это ссылки на следующую и предыдущую статьи.
Давайте немного изменим это и предоставим пользователям некоторый контекст об этих ссылках. Мы сделаем это, добавив доступные параметры для тега шаблона the_post_navigation .
Просто замените приведенный выше код следующим:
<?php the_post_navigation( array(
'prev_text' => __( 'Previous Article: %title' ),
'next_text' => __( 'Next Article: %title' ),
) );
?>
Теперь вы можете сохранить изменения и просмотреть свой веб-сайт.
Вот как это выглядело на нашем тестовом сайте:
Вы также можете использовать специальные символы и стрелки вместе с заголовками следующего и предыдущего сообщения.
Просто замените код следующим:
<?php the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
) );
?>
Вот как этот код выглядел на нашем тестовом сайте:
Теперь предположим, что вы хотите сделать следующую и предыдущую ссылки более релевантными статье, которую пользователь просматривает в данный момент.
Вы можете сделать это, показав следующую и предыдущую ссылки из той же категории или тегов.
<?php the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
'in_same_term' => true,
'taxonomy' => __( 'category' ),
) );
?>
Этот код указывает WordPress отображать следующую и предыдущую записи в одной и той же категории. При необходимости вы можете изменить параметр таксономии на теги или любую другую пользовательскую таксономию.
Стилизация следующей/предыдущей ссылки в WordPress
Теперь, когда мы узнали, как добавлять ссылки «Следующая/Предыдущая» в WordPress, давайте посмотрим, как правильно их стилизовать.
По умолчанию WordPress автоматически добавляет несколько классов CSS по умолчанию к ссылкам навигации по записям. Вы можете использовать эти классы CSS в своей теме WordPress для оформления этих ссылок.
Вот базовый CSS, который вы можете добавить в свою тему.
.nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
display: flex;
}
.nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
flex: 1 0 50%;
}
.nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
text-align: end;
flex: 1 0 50%;
}
Этот базовый CSS просто отображает следующую и предыдущую ссылки рядом друг с другом, но с разных сторон одной строки.
Вы также можете выделить свои навигационные ссылки, добавив цвет фона, эффект наведения и многое другое.
Вот пример кода CSS, который вы можете использовать в качестве отправной точки.
.post-navigation {
background-color:#f3f9ff;
padding:0px;
}
.nav-previous, .nav-next{
padding:10px;
font-weight:bold
}
.nav-previous:hover,.nav-next:hover {
background-color:#0170b9;
}
.nav-previous:hover a:link ,.nav-next:hover a:link {
color:#fff;
}
Этот код стилизует текст ссылки и добавляет цвет фона и эффект наведения, чтобы сделать следующую и предыдущую ссылки более заметными.
Добавление следующей/предыдущей ссылки на страницы WordPress
Обычно ссылки для навигации по записям используются для сообщений блога в WordPress. Это потому, что эти элементы публикуются в обратном хронологическом порядке.
С другой стороны, страницы WordPress обычно публикуются не в хронологическом порядке. Для получения более подробной информации см. наше руководство о разнице между записями и страницами в WordPress.
Однако некоторым пользователям может потребоваться отобразить навигацию по страницам, чтобы пользователи могли легко найти следующую страницу.
К счастью, вы можете использовать тот же код, который мы использовали ранее для страниц. Однако вам нужно будет добавить код в шаблон page.php.
<?php the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
) );
?>
Вот как это выглядело на нашем демонстрационном сайте:
Добавление ссылок «Следующая/предыдущая» в WordPress с помощью миниатюр
Хотите сделать следующую и предыдущую ссылки более заметными? Изображения — это самый простой способ привлечь внимание пользователей и сделать эти ссылки более привлекательными.
Давайте добавим следующую и предыдущую ссылки с миниатюрой записи или избранным изображением рядом с ними.
Во-первых, вам нужно добавить следующий код в файл functions.php темы или плагин для конкретного сайта.
function wpb_posts_nav(){
$next_post = get_next_post();
$prev_post = get_previous_post();
if ( $next_post || $prev_post ) : ?>
<div class="wpb-posts-nav">
<div>
<?php if ( ! empty( $prev_post ) ) : ?>
<a href="<?php echo get_permalink( $prev_post ); ?>">
<div>
<div class="wpb-posts-nav__thumbnail wpb-posts-nav__prev">
<?php echo get_the_post_thumbnail( $prev_post, [ 100, 100 ] ); ?>
</div>
</div>
<div>
<strong>
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.775,18.707,8.482,13.414a2,2,0,0,1,0-2.828l5.293-5.293,1.414,1.414L9.9,12l5.293,5.293Z"/></svg>
<?php _e( 'Previous article', 'textdomain' ) ?>
</strong>
<h4><?php echo get_the_title( $prev_post ); ?></h4>
</div>
</a>
<?php endif; ?>
</div>
<div>
<?php if ( ! empty( $next_post ) ) : ?>
<a href="<?php echo get_permalink( $next_post ); ?>">
<div>
<strong>
<?php _e( 'Next article', 'textdomain' ) ?>
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M10.811,18.707,9.4,17.293,14.689,12,9.4,6.707l1.415-1.414L16.1,10.586a2,2,0,0,1,0,2.828Z"/></svg>
</strong>
<h4><?php echo get_the_title( $next_post ); ?></h4>
</div>
<div>
<div class="wpb-posts-nav__thumbnail wpb-posts-nav__next">
<?php echo get_the_post_thumbnail( $next_post, [ 100, 100 ] ); ?>
</div>
</div>
</a>
<?php endif; ?>
</div>
</div> <!-- .wpb-posts-nav -->
<?php endif;
}
Этот код просто создает функцию, которая отображает следующую и предыдущую записи с избранными изображениями или миниатюрами записей.
Затем вам нужно добавить wpb_posts_nav() в файл single.php вашей темы, где вы хотите отображать ссылки.
Если в вашей теме уже есть следующая и предыдущая ссылки, вы можете найти строку, содержащую функцию _post_navigation(), и удалить ее.
Теперь добавьте следующий код для отображения ваших пользовательских следующей и предыдущей ссылок.
<?php wpb_posts_nav(); ?>
После добавления кода не забудьте сохранить изменения и посетить свой веб-сайт, чтобы увидеть ссылки в действии.
Теперь вы можете заметить, что эти ссылки выглядят не очень чистыми.
Давайте изменим это, добавив пользовательский CSS для их стилизации.
.wpb-posts-nav {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 50px;
align-items: center;
max-width: 1200px;
margin: 100px auto;
}
.wpb-posts-nav a {
display: grid;
grid-gap: 20px;
align-items: center;
}
.wpb-posts-nav h4,
.wpb-posts-nav strong {
margin: 0;
}
.wpb-posts-nav a svg {
display: inline-block;
margin: 0;
vertical-align: middle;
}
.wpb-posts-nav > div:nth-child(1) a {
grid-template-columns: 100px 1fr;
text-align: left;
}
.wpb-posts-nav > div:nth-child(2) a {
grid-template-columns: 1fr 100px;
text-align: right;
}
.wpb-posts-nav__thumbnail {
display: block;
margin: 0;
}
.wpb-posts-nav__thumbnail img {
border-radius: 10px;
}
Теперь вы можете сохранить изменения и посетить свой веб-сайт, чтобы просмотреть следующую и предыдущую ссылки с миниатюрами.
Вот как это выглядело на нашем тестовом сайте:
Для получения более подробной информации вы можете ознакомиться с нашим руководством о том, как добавить миниатюры к ссылкам на предыдущую и следующую публикацию.
Бонус: удалить следующую и предыдущую ссылки в WordPress
Некоторые пользователи могут захотеть удалить следующую и предыдущую ссылки в WordPress.
Например, некоторые пользователи могут обнаружить, что эти ссылки менее полезны. Некоторые могут вместо этого отображать похожие сообщения или популярные сообщения.
Есть два способа удалить следующую и предыдущую ссылки в WordPress.
Метод 1. Удалить код в вашей теме WordPress
Чтобы удалить следующую и предыдущую ссылки в WordPress, вам необходимо удалить код, отвечающий за отображение ссылок в вашей теме WordPress.
Проблема с этим подходом заключается в том, что как только вы обновите свою тему, удаленный код вернется.
Чтобы избежать этого, вам нужно создать дочернюю тему.
Далее вам нужно найти код, отвечающий за отображение следующей и предыдущей ссылок в вашей родительской теме.
Обычно он находится внутри шаблонов single.php или content-single.php.
По сути, вы будете искать код, который включает следующую функцию.
<?php the_post_navigation() ?>
Этот код может иметь немного другой формат и параметры. Например, на нашем тестовом сайте тема использовала этот код для отображения ссылок:
the_post_navigation(
array(
'prev_text' => '<span class="nav-subtitle">' . esc_html__( 'Previous:', 'mytheme' ) . '</span> <span class="nav-title">%title</span>',
'next_text' => '<span class="nav-subtitle">' . esc_html__( 'Next:', 'mytheme' ) . '</span> <span class="nav-title">%title</span>',
)
);
Если вы используете дочернюю тему, вам нужно продублировать этот конкретный шаблон в дочерней теме, а затем удалить строки, используемые для отображения следующей или предыдущей ссылки.
Если вы предпочитаете просто удалить его в своей родительской теме, вы также можете сделать это.
Удаление кода остановит WordPress от отображения следующей и предыдущей ссылок.
Способ 2. Скрыть ссылки на следующие и предыдущие сообщения
Этот метод на самом деле не удаляет следующую и предыдущую ссылки. Вместо этого он просто делает их невидимыми для читателей.
Просто добавьте следующий пользовательский CSS в свою тему WordPress.
nav.navigation.post-navigation {
display: none;
}
Не забудьте сохранить изменения и посетить свой веб-сайт, чтобы увидеть исчезновение навигационных ссылок.
Мы надеемся, что эта статья помогла вам научиться легко добавлять следующую и предыдущую ссылки в WordPress. Вы также можете ознакомиться с нашим руководством по выбору лучшего программного обеспечения для веб-дизайна или нашим экспертным сравнением лучших регистраторов доменов.
Если вам понравилась эта статья, подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.