Как сделать содержание статьи в wordpress: Как создать содержание на WordPress

Как создать содержание на WordPress

Для того чтобы наиболее точно ответить на вопрос пользователя, зачастую приходится писать довольно объемные тексты со сложной структурой. Оглавление (содержание) статьи заметно облегчает пользователю задачу по поиску нужной информации. Средствами WordPress кликабельное содержание, которое перенесет читателя в нужный раздел статьи, можно создать как вручную, так и в автоматическом  режиме (при помощи плагинов и кодов).

Добавление содержания вручную

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

Сперва необходимо создать оглавление вручную в виде списка в начале статьи.

Теперь зададим ссылку (якорь) для каждого пункта только что созданного оглавления. Для этого выделяем поочередно пункты, нажимаем на кнопку «Вставить/изменить ссылку» в панели редактора и задаем каждому пункту номер в поле “URL”.

Обратите внимание, что номера (ссылки) необходимо проставлять, используя знак решетки (#). Таким образом, каждому пункту присваивается свой номер (#1, #2, #3 и так далее).

Теперь, когда каждый пункт меню (оглавления) представлен в виде кликабельной ссылки, необходимо указать, с каким конкретно местом в тексте он связан. Для этого нужно перейти в режим редактирования html-кода (текст) и проставить следующий код перед каждым заголовком:

<a name="[номер]"></a>

Вместо [номер] необходимо подставить цифру, соответствующую пункту меню, и разместить этот код перед соответствующим ему заголовком в тексте (в данном случае <h3>):

Если перейти снова в визуальный режим редактирования, то можно увидеть маленькие якорьки слева от каждого заголовка.

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

При этом само содержание будет представлено в виде простых ссылок – каким вы его и создали. Если же вы захотите добавить к содержанию оформление, в этом случае необходимо поместить его в контейнер <div> c уникальным идентификатором, которому предварительно задать стиль в файле style.css.

Автоматический вывод содержания при помощи плагинов

Ручное добавление содержаний к каждой статье – утомительное занятие. Автоматизация процесса просто необходима, если оглавление требуется к каждой статье на сайте. Использование плагинов в данном случае заметно облегчит вам жизнь. Особенно, если вы не сильны в программировании.

Плагинов для автоматического создания содержания на WordPress достаточно много. Остановимся самых популярных.

Table of Contents Plus

Table of Content Plus (TOC+) – самый популярный и удобный плагин для вывода содержания статьи. С его помощью оглавление будет выводиться автоматически, вам нужно только установить, при каких условиях это будет происходить. Чтобы определить параметры вывода, нужно перейти в настройки и выбрать пункт меню «TOC+». Здесь вашему вниманию откроется небольшой перечень параметров (на английском языке).

Для настройки содержания вам понадобится только первый раздел – Main Option (основные опции).

Рассмотрим данные опции подробнее.

Position

положение оглавления на странице (before first heading – перед первым заголовком, after first heading – после первого заголовка, top – в начале статьи, bottom – в конце статьи).

Show when [количество] or more headings are present

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

Auto insert for the following content types

автоматически выводить (содержание) для следующих типов контента (post – запись, page – страница). В списке возможно наличие других пунктов (например, галереи, контактные формы и пр.) при наличии соответствующих плагинов. Если вы не хотите, чтобы во всех записях или на всех страницах автоматически появлялось содержание (при заданных условиях), то галочки нужно убрать. В таком случае содержание будет выводиться в том месте, где вы разместите шорткод

.

Heading text

содержит в себе небольшой перечень опций. Во-первых, название самого оглавление, которое нужно вписать в поле Contents. Show title on top of the table contents – показывать заголовок содержания сверху.
Ставя галочку возле “Allow the user to toggle the visibility of the table of contents”, вы позволяете читателю самому управлять видимостью содержания. Вместо show и hide вы можете указать собственные надписи – например, «показать» и «скрыть», соответственно. В таком случае посетитель на сайте сможет открывать и закрывать оглавление по собственному желанию. Если вы планируете скрыть содержание изначально, то поставьте галочку напротив пункта Hide the table of contents initially.

Show hierarchy

показывать иерархию, т.е. при наличии заголовков разных уровней (h3, h4 и так далее) будет сохранена древовидная структура в содержании. Если опция не активирована, то заголовки будут находиться в оглавлении на одном уровне.

Number list items

нумерация пунктов оглавления. Каждый пункт будет пронумерован по порядку.

Enable smooth scroll effect

активировать эффект плавной прокрутки (до нужного пункта содержания).

Далее мы видим раздел настроек Appearance (внешний вид). Собственно, этот раздел и определяет внешний вид вашего содержания.

Width
ширина блока. Можно указать как фиксированную ширину в пикселях (px – это…), так и относительную в процентах (от общей ширины статьи).

Wrapping
положение (слева или справа) на странице.

Font size
размер шрифта (в процентах, пунктах или дюймах).

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

Если перечисленных настроек вам недостаточно, то данный плагин содержит еще один перечень настроек, скрытый в разделе Advanced.

Но вообще ранее описанных настроек на самом деле вполне достаточно, и без особой надобности этот раздел редактировать не стоит.

Для применения настроек не забудьте нажать кнопку Update Options в самом низу страницы.

Другие плагины

У плагина TOC+ существуют также менее популярные аналоги. Например, Easy Table of Contents, второй по популярности плагин для создания содержаний, имеет примерно такой же функционал, даже настройки этих плагинов практически ничем не отличаются.

Менее популярные плагины (Simple Table of Content, CM Table Of Contents и другие), к сожалению, содержат много недоработок и не так просты в использовании, как их ранее упомянутые конкуренты.

Поэтому если вы ищете простое решение в виде плагина, то можно воспользоваться самым распространенным из них, и вы не прогадаете.

Автоматический вывод содержания посредством кода

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

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

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

Плагин содержание статьи в WordPress

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

Оглавление статьи в ВордПресс без плагина — как сделать содержание на странице вручную

Используем для этого html-тег: <a>, который нужен, чтобы поставить ссылку или якорь в документе. Чтобы сделать навигацию, переходим в редактор кода страницы, вставляем текст и разбиваем его подзаголовками.

Добавляем перед каждым подзаголовком строчку кода: <a name=”имя_якоря”></a>. Этим тегом отмечаем точку, на которую попадет читатель, когда кликнет по ссылке в содержании. Имена якорей должны отличатся друг от друга. Чтобы не перепутать места, используем цифры.

После этого, поднимаемся в начало текста и создаем ссылки тегом: <a href=”#Имя_Якоря”>Пункт содержания</a>. Шарп, или знак решетки по-простому, говорит о том, что пользователя отправляют на определенное место этого документа, а не на другую страницу. Между открывающим и закрывающим тегом вписываем подзаголовок, к которому ведет ссылка. Сохраняем документ и проверяем, все ли корректно отображается.

При желании используем теги <ul> или <ol> чтобы отобразить содержание маркированным или нумерованным списком, как на скриншоте. По сравнению с плагином, такая навигация удобна тем, что экономит ресурсы сервера и не тормозит загрузку страницы.

Но для оформления по вкусу придется писать дополнительный стиль css, потому что без него содержание отображается в стандартном для сайта виде. А если публикаций очень много, то ручная простановка тегов превращается в рутину. Чтобы сэкономить время и нервы, оглавление можно добавить с помощью плагина.

Table of Contents Plus — содержание материала по тегам заголовков статьи

Плагин TOC+ автоматически собирает заголовки и генерирует содержание к тексту. Дизайн похож на оглавление в статьях википедии, можно выбрать из нескольких цветовых тем или сделать свою. Удобный инструмент с гибкими настройками.

Переходим в раздел «Плагины — Добавить новый», в строку поиска вводим название и кликаем установить. Активируем модуль и переходим к настройке TOC.

Блок основных настроек плагина.

• Position — выбираем где разместить блок с оглавлением. На выбор 4 позиции: перед или после заголовка, вверху или внизу страницы.
• Show when — выставляем минимальное количество подзаголовков, при которых плагин генерирует содержание.
• Auto insert … types — выбираем в каких разделах генерировать оглавление: в записях, на страницах и т.д.
• Heading text — вводим заглавие для блока навигации, например: «Содержание». Если убрать галку с «Show title … contents», то оглавление будет генерироваться без названия. Следующий пункт позволяет читателю прятать содержание под спойлер. В поля пишем подсказку, которую увидит пользователь при наведении на кнопки «спрятать/показать».
• Show hierarchy — включаем древовидную структуру оглавления, когда в тексте используются несколько типов подзаголовков: <h3>, <h4> и т. д.
• Number list items — отключаем нумерацию содержания.
• Enable smooth scroll effect
  — включаем плавную прокрутку.

С помощью блока настроек «Appearance» настраиваем отображение.

• Width — задаем ширину блока.
• Wrapping — выбираем с какой стороны будет отображаться содержание: по умолчанию, слева или справа.
• Font size — задаем размер шрифта.
• Presentation — выбираем дизайн оглавления из доступных или делаем свой.

Advanced — блок настроек для опытных пользователей.

• Lowercase — опция ограничивает название анкоров нижним регистром.
• Hyphenate — заменяет знак подчеркивания на дефис в именах якорей.
• Include homepage — добавляет содержание на главную страницу.
• Exclude CSS file — отключает css плагина, что позволяет использовать свой стиль.
• Preserve theme bullets — позволяет применить собственный стиль отображения маркеров для неупорядоченного списка.
• Heading levels — опция позволяет выбирать заголовки, которые попадут в содержание.
• Exclude headings — позволяет игнорировать заголовки с определенным словом или словосочетанием.
• Restrict path — дает возможность не выводить оглавление на определенной странице. Для этого в строку вводим ее адрес.
• Default anchor prefix — префикс якоря по умолчанию.

Чтобы сохранить изменения, кликаем на «Update option».

TOC Плагин Easy Table of Contents для WordPress сайта

Easy ToC не уступает предыдущему плагину: автоматически генерирует блок навигации в статьях, позволяет настроить внешний вид и др. Находим модуль в поиске через админку WordPress, устанавливаем, активируем и переходим к настройкам.

• Auto Insert — включаем автоматический вывод блока навигации в статью для определенных разделов сайта. Если убрать галочки, содержание отобразится в меню сбоку.
• Position — определяем положение блока на странице.
• Show when — задаем минимальное количество подзаголовков, при которых плагин генерирует содержание.
• С помощью Опций Display Header Label и Header Label — включаем отображение заглавия.
• Toggle View — позволяем читателю прятать содержание.
• Initial View — прячем оглавление под спойлер.
• Show as Hierarchy — включаем древовидную структуру подзаголовков.
• Counter — выбираем вариант нумерации между десятичными, обычными и римскими цифрами. Или убираем числа вообще.
• Smooth Scroll — включаем плавную прокрутку.

• Width и Custom Width — задаем ширину блока.
• Float — включаем обтекание текстом.
• Font Size — выбираем размер шрифта.
• Theme — выбираем тему отображения навигации.
• Custom Theme — настраиваем цветовую схему под себя, по порядку: цвет фона, обводки и заглавия. А также: цвет ссылок в обычном состоянии, при наведении курсора мыши и уже посещенных.

Продвинутые настройки плагина идентичны ToC+. Позволяют настроить анкоры, отключить css, исключить заголовки из навигации и пр. Сохраняем изменения и смотрим результат. Как выглядит содержание, созданное плагином, видно на скриншоте ниже.

iPipe – надёжный хостинг-провайдер с опытом работы более 15 лет.

Мы предлагаем:

• Виртуальные серверы с NVMe SSD дисками от 299 руб/мес
• Безлимитный хостинг на SSD дисках от 142 руб/мес
• Выделенные серверы в наличии и под заказ
• Регистрацию доменов в более 350 зонах

Как создать оглавление в сообщениях и страницах WordPress

Вы хотите добавить оглавление в свои сообщения или страницы WordPress?

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

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

Зачем добавлять оглавление к сообщениям и страницам в WordPress?

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

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

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

Оглавление также может помочь вашему сообщению быть в списке избранных фрагментов в верхней части страницы результатов поисковой системы. Это поможет вам получить максимальный SEO-трафик.

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

• Автоматическое добавление оглавления в WordPress (рекомендуется)
• Добавление оглавления вручную в WordPress

Автоматическое добавление оглавления в WordPress

AIOSEO, также известный как All in One SEO, является лучшим SEO-плагином WordPress и поставляется со встроенным блоком оглавления для WordPress.

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

Первое, что вам нужно сделать, это установить бесплатный плагин All in One SEO Lite. Для получения более подробной информации см. наше пошаговое руководство по установке плагина WordPress.

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

После активации вам потребуется настроить плагин с помощью мастера настройки AIOSEO. Подробные инструкции см. в нашем руководстве о том, как правильно настроить All-in-One SEO для WordPress.

Добавление оглавления с помощью AIOSEO

Вам нужно будет создать или отредактировать запись или страницу, на которую вы хотите добавить оглавление. После этого щелкните синий значок «+» и найдите блок «AIOSEO — Table of Contents».

Просто перетащите блок на запись или страницу, где вы хотите разместить оглавление.

Примечание: После добавления оглавления вы можете заметить, что блок «AIOSEO — Оглавление» будет затенен. Это потому, что у вас может быть только одно оглавление на пост или страницу.

Плагин автоматически определит заголовки на странице и добавит их в оглавление. Если вы используете разные уровни заголовков (скажем, h3 и h4), то заголовки более низкого уровня будут иметь отступ, чтобы показать структуру вашего контента.

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

Настройка оглавления с помощью AIOSEO

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

AIOSEO автоматически создаст якорные ссылки для каждого заголовка. Вы можете щелкнуть значок «Ссылка», чтобы отредактировать текст привязки, и это изменится как в оглавлении, так и в заголовке в содержании сообщения.

Вы также можете щелкнуть значок глаза рядом с любым из заголовков, чтобы скрыть его. Пользователи AIOSEO Pro могут изменить порядок заголовков в блоке оглавления. Это изменит порядок заголовков в оглавлении, но не в статье.

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

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

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

Рекомендуется добавить заголовок или абзац над оглавлением. Это даст понять вашим читателям, что они смотрят на оглавление.

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

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

Это важнейшая функция, которой просто нет в большинстве других плагинов оглавления.

Добавление оглавления вручную в WordPress

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

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

Ввод оглавления

Во-первых, вам нужно добавить блок «Список», куда вы можете добавить заголовки для оглавления. Вы можете ввести заголовки в список или скопировать и вставить их один за другим из содержимого статьи.

Как добавить текст привязки к блокам заголовков

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

Сначала следует щелкнуть заголовок, например h3 или h4. Затем вам нужно щелкнуть стрелку «Дополнительно» на панели настроек блока, чтобы отобразить дополнительные настройки.

После этого введите уникальное слово или фразу без пробелов в поле «HTML-привязка». Если хотите, вы можете использовать дефисы для разделения слов.

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

Подсказка: Если вы вставите заголовок в это поле, дефисы будут добавлены автоматически. Это простой способ создать уникальный идентификатор, который также четко представляет заголовок.

Добавление ссылок привязки в оглавление

Последний шаг — связать заголовки в оглавлении с созданными привязками HTML.

Вы должны выделить первую запись в блоке списка, а затем щелкнуть значок «Ссылка» на панели инструментов.

Затем вы должны ввести хэштег (#), а затем ввести или вставить якорный текст для этого заголовка.

# указывает WordPress перейти к этому разделу текущего поста. Вы не добавляете доменное имя или другие параметры URL.

После этого вам нужно нажать «Ввод» или щелкнуть значок «Отправить», чтобы создать ссылку.

Якорная ссылка будет добавлена ​​в ваш список содержания. Когда ваши посетители нажимают на эту ссылку, они сразу же переходят к этому заголовку в сообщении или содержании страницы.

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

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

Если вам понравилась эта статья, подпишитесь на наш YouTube-канал для видеоуроков по WordPress. Вы также можете найти нас в Твиттере и Facebook.

Избранный контент — поддержка WordPress.com

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

Содержание

Ползунок избранного содержимого в Dara

Другие темы могут отображать избранное содержимое в большей области сетки — например, Canard и Gazette — или отображая их крупнее остальных ваших сообщений, например AltoFocus и Apostrophe 2 .

Сетка рекомендуемого контента в Canard

Существует несколько шагов для настройки области рекомендуемого контента. Давайте посмотрим на процесс.

---

Установка тега рекомендуемого контента

Перейдите на страницу Мои сайты → Внешний вид → Настроить и откройте панель рекомендуемого контента настройщика.

Выберите слово для тега Featured Content и добавьте его в текстовое поле.

Мы предлагаем использовать одно слово в нижнем регистре для вашего тега. Не добавляйте никаких знаков препинания, например, кавычек.

Сохраните изменения с помощью кнопки Опубликовать .

Установка тега рекомендуемого контента для ползунка в Дара

---

↑ Содержание ↑

Добавление тега рекомендуемого контента и избранного изображения

В каждом посте/странице/проекте откройте модуль «Категории и теги» — только что помеченный «Теги» для страниц и проектов портфолио — и добавьте тот же тег, который вы создали ранее.

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

Добавьте избранное изображение, которое будет отображаться в области рекомендуемого содержимого.

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

---

↑ Содержание ↑

Часто задаваемые вопросы

Как узнать, есть ли в моей теме область избранного контента?

Откройте настройщик. Если вы видите панель Featured Content, ваша тема поддерживает ее. Вы также можете найти свою тему в витрине и нажать «Открыть демо-версию», чтобы просмотреть демонстрационный сайт, или посмотреть на странице витрины темы скриншоты рекомендуемого контента и руководство по установке.

Как узнать, каким образом моя тема отображает избранный контент?

Найдите название своей темы в витрине и нажмите «Открыть демо-версию», чтобы взглянуть на демо-сайт.