Tehnografi.com - Технологические новости, обзоры и советы
[adinserter block="67"]

Как добавить разрыв страницы в WordPress и настроить внешний вид?

Использование идеальной длины (количества слов) является одним из успешных факторов, позволяющих статье хорошо ранжироваться в поиске Google. Нет никаких правил для определения длины, и это зависит от темы, которую вы пишете. Тем не менее, длинные статьи, как правило, работают хорошо, поскольку они могут ранжироваться по ключевым словам с длинным хвостом в дополнение к ключевым словам с фокусом. Как бы то ни было, показ статьи, состоящей из 3000 и более слов за один раз, быстро утомит пользователей и наскучить им. Решение состоит в том, чтобы использовать разрыв страницы в WordPress, чтобы статья была разбита на несколько страниц. В этой статье мы объясним, как использовать разрыв страницы в WordPress и настроить внешний вид.

Что происходит при использовании разрыва страницы?

Разрыв страницы — это функция WordPress, позволяющая разделить длинную статью на нужное количество страниц. Вы можете вставить несколько разрывов страниц в одну статью, чтобы разделить ее на несколько страниц. Опубликованная статья будет иметь разбивку на страницы, чтобы пользователи могли щелкнуть по ней и перейти на следующую страницу, чтобы прочитать дополнительный контент. Допустим, вы вставили в статью два разрыва страницы. В этом случае статья будет разделена на три страницы, как показано ниже, с тремя разными URL-адресами:

yoursite.com/test-post/ Страница 1
yoursite.com/test-post/2/ Страница 2
yoursite.com/test-post/3/ Страница 3

Помните, что каждый URL — это отдельная страница в WordPress, что означает, что пользователи могут получать к ним независимый доступ. WordPress добавит канонический URL-адрес той же разделенной страницы (например, /2/ или /3/) в исходный код, чтобы сообщить поисковым системам, что их можно рассматривать как независимые страницы.

Канонический URL для разрывов страниц в WordPress

Однако ваш XML Sitemap будет иметь один URL-адрес сообщения, который является страницей 1 статьи. Это тот же случай, если вы используете карту сайта WordPress по умолчанию или используете плагины для создания карты сайта для вашего сайта.

Преимущества разрыва страницы

Добавление разрыва страницы в WordPress помогает улучшить видимость следующими способами:

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

    Добавить разрыв страницы в редакторе Гутенберга

    Разрыв страницы — это один из блоков редактора Гутенберга, который вы можете вставить в любом месте контента. Создайте блок абзаца, в который вы хотите вставить разрыв страницы, просто введите, чтобы отфильтровать соответствующие блоки.

    Найти блок разрыва страницы в Гутенберге

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

    Разрыв страницы добавлен в редактор Gutenberg

    Теперь опубликуйте или обновите свою статью и откройте страницу в отдельной вкладке браузера. Вы можете увидеть ссылки навигации по страницам, где вы вставили разрыв страницы в редакторе. Часть содержимого под строкой разрыва страницы в редакторе Гутенберга будет перемещена на новую страницу, доступ к которой вы можете получить, нажав на ссылку страницы 2. Вы можете вставить несколько разрывов страниц, чтобы разделить содержимое на разные страницы, доступ к которым можно получить с помощью ссылок на страницы. Ниже показано, как это выглядит на странице с темой WordPress двадцать-двадцать два.

    Разрыв страницы в теме WordPress по умолчанию

    Настройка внешнего вида разрыва страницы в WordPress

    От используемой вами темы будет зависеть внешний вид раздела разрыва страницы на опубликованной странице. Как вы можете видеть на скриншоте выше, нумерация страниц выглядит просто, и пользователи могут даже не заметить, что она появляется в конце контента. Тем не менее, коммерческие темы используют настраиваемые встроенные стили, чтобы сделать разбиение на страницы привлекательным. Например, ниже показано, как будет выглядеть разбиение на страницы в темах Astra и Kadence.

    Пагинация в теме Astra
    Разрыв страницы в теме Kadence

    Если вы хотите настроить ссылки на страницы, WordPress предлагает три класса CSS, которые вы можете использовать. Вы можете использовать раздел инструментов разработчика браузера, чтобы изменить стиль на действующем сайте, чтобы найти подходящий CSS, который будет хорошо работать для вашего сайта. Мы объясним здесь с темой двадцать двадцать два по умолчанию, и внешний вид может отличаться, если у вас другая тема. Класс CSS для оболочки разбиения на страницы — .post-nav-links, вы можете добавить фон, отступы, радиус границы к этому классу, используя следующие стили.

    .post-nav-links { фон: rgb (144 238 144); отступ: 10 пикселей; радиус границы: 5px; }

    Этот код CSS изменит оболочку разбиения на страницы, чтобы она выглядела так:

    Добавить цвет фона для навигационных ссылок публикации

    Второй — это класс .post-page-numbers, который используется для отображения числовых ссылок. Вы можете добавить к этому классу следующие стили, чтобы отображать рамки вокруг чисел.

    .post-page-numbers {граница: 1px сплошной rgb (0 0 0); отступ: 5px 10px; радиус границы: 5px; }

    Добавить поле к номерам страниц

    Последний класс — .post-page-numbers.current, чтобы различать ссылку на активную страницу. Вы можете добавить другой цвет фона в поле ссылки на активную страницу, чтобы пользователи могли легко понять, что они в данный момент находятся на этой выделенной странице.

    .post-page-numbers.current { фон: rgb (255 255 0); }

    Мы добавляем желтый фон на активную страницу, и это будет выглядеть так:

    Текущая страница активна

    Сочетая вместе, вы можете добавить все вышеперечисленные стили CSS в раздел «Внешний вид > Настроить > Дополнительный CSS», чтобы изменить внешний вид нумерации страниц.

    Использование тем для автоматического разрыва страниц

    В некоторых темах используется совершенно другой подход к автоматической настройке разрыва страницы. Например, популярная тема «Газета» предлагает создать смарт-список на основе выбранного вами уровня заголовка. Если вы выберете заголовок уровня 2, тема будет автоматически разбивать страницу и добавлять разбивку на страницы всякий раз, когда вы используете заголовок H2 в содержимом. Кроме того, вы можете выбрать разбиение на страницы для отображения в виде раскрывающегося списка, чтобы пользователи могли видеть заголовки и выбирать эту страницу для чтения.

    Пагинация в раскрывающемся списке

    Добавить разрыв страницы в классическом редакторе

    Если вы используете пользовательские типы сообщений, которые не поддерживают Гутенберг, или все еще используете старый классический редактор, вы также можете вставить разрыв страницы. Переключитесь в редактор «Текст» и вставьте приведенный ниже код туда, где вы хотите вставить разрыв страницы.

    Добавить разрыв страницы в классическом редакторе

    Теперь вернитесь к «Визуальному» редактору, чтобы увидеть разделитель разрыва страницы, похожий на редактор Гутенберга. Опубликуйте или обновите контент, чтобы увидеть разбивку на страницы в живом контенте.

    Примечание: WordPress также предлагает функцию разделения количества комментариев и добавления разбивки на страницы, когда в статье больше комментариев. Хотя это работает точно так же, как разрыв страницы, разрыв комментария только разрывает комментарии, не влияя на длину содержимого.