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

Хотите ли вы отображать миниатюры со ссылками на предыдущий и следующий пост в WordPress?? Внизу каждого поста WordPress отображает ссылки на предыдущий...

Хотите ли вы отображать миниатюры со ссылками на предыдущий и следующий пост в WordPress??

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

В этой статье мы покажем вам, как использовать миниатюры со ссылками на предыдущий и следующий пост в WordPress.

Зачем отображать миниатюры вместе со ссылками на предыдущий и следующий пост?

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

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

Вы найдете ссылки на предыдущие и следующие записи в нижней части каждой записи блога

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

С учетом сказанного, давайте рассмотрим, как добавить миниатюры к ссылкам на предыдущий и следующий пост в WordPress.

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

Чтобы добавить миниатюры к ссылкам на предыдущее и следующее сообщение, вам нужно добавить код в файлы вашей темы WordPress. Если вы не делали этого раньше, то посмотрите наше руководство по копированию и вставке кода в WordPress.

Добавление кода в функции вашей темы.php Файл

Первым шагом будет добавление следующего фрагмента кода в вашу функцию.php-файл, в плагине для конкретного сайта или с помощью плагина code snippets.

function wpb_posts_nav() < $next_post = get_next_post(); $prev_post = get_previous_post(); if ( $next_post || $prev_post ) : ?>

«>
«>

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

Добавление кода в сингл вашей темы.php Шаблон

Далее вам нужно открыть единую тему вашей темы.php-файл. Этот файл уже содержит код, который добавляет ссылки на предыдущий и следующий пост без миниатюр. Сначала вам нужно удалить этот код.

Например, вот скриншот сингла темы Twenty TwentyOne.php файл. Найдите раздел с надписью // Навигация по предыдущему/следующему посту.

Удаление раздела The_Post_Navigation из вашей темы

Теперь вам нужно удалить код в этом разделе, начиная с the_post_navigation и до конца цикла. После этого вы должны вставить следующий код на свое место:

wpb_posts_nav();

После завершения работы обязательно сохраните файл.

Добавление CSS-кода в таблицу стилей вашей темы

Чтобы изменить стиль ссылок на предыдущие и следующие посты, вам нужно добавить пользовательский CSS в таблицу стилей вашей темы. Вы можете узнать больше в нашем руководстве о том, как легко добавить пользовательский CSS на ваш сайт WordPress.

Добавьте этот код в стили вашей темы.css файл или используя настройщик тем WordPress:

.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

Не забудьте сохранить изменения.

Предварительный просмотр предыдущих и следующих ссылок с миниатюрами

Теперь, когда вы просматриваете пост на своем сайте, вы увидите, что предыдущая и следующая ссылки внизу поста теперь имеют миниатюры.

Предварительный просмотр предыдущих и следующих ссылок с помощью миниатюр

Если у одного из связанных постов еще нет главного изображения, то вы не увидите миниатюру. Чтобы узнать, как добавить миниатюры в пост, посмотрите наше руководство о том, как добавить главные изображения или миниатюры постов в WordPress.

Альтернатива: Отображение популярных постов с помощью миниатюр

Еще один способ привлечь читателей после прочтения поста — отобразить список популярных постов после каждой статьи. Это даст вашим читателям возможность увидеть ваш лучший контент, а не только предыдущие и следующие опубликованные статьи.

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

Когда вы проверите первый метод в нашем руководстве о том, как отображать посты по просмотрам в WordPress, вы узнаете, как легко добавить популярные посты с помощью плагина MonsterInsights.

Виджет популярных сообщений MonsterInsights предлагает широкий выбор привлекательных тем, а также множество вариантов настройки.

Виджет популярных постов MonsterInsights

Вы также можете посмотреть наше руководство о том, как добавить пользовательские виджеты после поста в WordPress, где вы можете узнать, как добавить различные типы контента в конец каждой записи блога.

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

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий