Как сделать содержание статьи в WordPress
Оглавление или содержание встречается на многих сайтах. Это элемент, который обеспечивает удобство пользователей. Удобство в свою очередь положительно влияет на лояльность аудитории и поведенческие факторы, что хорошо для продвижения в поисковике, для SEO. Наличие удобного оглавления является признаком того, что сайт создаётся для людей, с заботой о читателях. В этой статье мы рассмотрим, как сделать содержание статьи в WordPress, узнаем, в каких случаях стоит прибегать к этому, какой для этого есть плагин и как им можно воспользоваться.
- 1 В каких случаях нужно использовать оглавление на сайте
- 2 Как на Вордпресс сделать содержание статьи
- 3 Настройки плагина оглавления
В каких случаях нужно использовать оглавление на сайте
Оглавление представляет собой небольшой блок ссылок в начале статьи. Клик по каждой из этих ссылок переводит не на другую страницу, а на ту или иную часть текущей страницы, то есть просто прокручивает её. Такое оглавление обычно переключает между разделами статьи, подзаголовками. Данный блок помогает пользователям быстро перейти к интересующему разделу, необходимость вручную прокручивать статью до нужного места отпадает. Это быстро и удобно.
Оглавление преимущественно необходимо на длинных страницах, в которых есть большое количество контента. Здесь без такого элемента просто не обойтись, он помогает структурировать статью, улучшить восприятие читателем, и, конечно же, улучшает навигацию, позволяя быстро переключиться к нужному разделу. Однако ничего плохого не произойдёт, если сделать оглавление и в небольшой статье. Возможно, некоторым пользователям это будет также удобно и необходимо. Поэтому можно сказать, что оглавление нужно обязательно размещать на длинных статьях, лонгридах, и на небольшом контенте можно тоже.
Для реализации оглавления на сайте можно использовать разнообразные плагины. Мы рассмотрим плагин содержания в статье в WordPress, который сами используем на нашем сайте, и расскажем, как его настроить и использовать.
Как на Вордпресс сделать содержание статьи
Table of Contents Plus — это один из самых популярных плагинов для WordPress для создания содержания статьи. Мы используем его на своём сайте и оглавление, которое вы видите в начале этой статьи, создаётся именно этим способом. Данный плагин хорош тем, что является полностью бесплатным, в нём нет скрытых функций, которые доступны в платной версии — всё доступно сразу после активации. Кроме того, он полностью и качественно русифицирован и имеет интуитивно понятный интерфейс.
Начинать следует с установки плагина. Скачайте плагин оглавления и установите на свой сайт. После активации плагина, его настройки становятся доступны в отдельном разделе «Настройки», подразделе «Оглавление+». Всё управление плагином происходит именно здесь. Рассмотрим их.
Настройки плагина оглавления
- Опция «Позиция» определяет то, в каком месте страницы будет находиться блок с оглавлением. Самый лучший вариант — «Перед первым заголовком», это наиболее ожидаемое место, где пользователи хотели бы видеть оглавление. Но при необходимости можно разместить его в других местах.
- Настройка «Показывать когда» определяет то, при каком количестве заголовков в статье будет отображаться оглавление. Если заголовков будет меньше указанного здесь значения, то содержание отображаться не будет.
- В опции «Автоматически вставлять для следующих типов содержимого» можно галочками отметить типы публикаций, где оглавление будет добавляться автоматически (при соблюдении условия количества заголовков). Рекомендуется сделать так, чтобы оглавление автоматически появлялось во всех записях, поэтому галочку надо поставить на post. Но несмотря на это, оглавление можно добавлять ещё и вручную. Для этого следует использовать шорткод toc (шорткод надо добавить в квадратные скобки [ ]). Кроме этого, оглавление можно вывести с помощью виджета. Для этого в разделе «Внешний вид», подразделе «Виджеты» нужно использовать виджет, который называется «TOC+». Его можно добавить в любую область виджетов, например, в сайдбар, и он будет отображать оглавление для текущей страницы согласно заданным настройкам.
- В «Текст заголовка» можно задать то, что будет написано в самом блоке. Написать можно, например, «Оглавление». Либо этот заголовок можно вообще отключить, сняв галочку рядом с ним в » Показать заголовок сверху оглавления». Галочка на «Разрешить переключать видимость оглавления» позволяет пользователю сворачивать и разворачивать содержание в статье. Можно использовать в том случае, если оглавление получается слишком крупным и занимает много места.
- Галочка «Показать иерархию» отображает заголовки в оглавлении WordPress с учётом иерархической структуры. Рекомендуется оставить опцию включённой, так как это улучшает восприятие.
- «Нумерация элементов списка» — если оставить включенным, то напротив каждого пункта оглавления будет стоять порядковый номер.
- Если поставить галочку на «Включить эффект плавной прокрутки», то при клике на тот или иной элемент оглавления, прокрутка будет происходить не резко, а плавно, что приятно для восприятия пользователем. Однако в некоторых случаях функция может не работать, в основном это зависит от темы. Поэтому придётся поэкспериментировать с этой опцией, желательно, чтобы она работала.
- В разделе «Внешний вид» есть набор опций, которые отвечают за то, как будет выглядеть блок оглавления. Здесь можно настроить размер блока, положение на странице, размер шрифта, а также можно выбрать дизайн из готовых пресетов.
Ещё у плагина имеются расширенные опции. Мы не будем их подробно рассматривать, так как их в большинстве случаев можно оставить по умолчанию. Однако вы можете самостоятельно изучить их при необходимости — все настройки и описания к ним даются на русском языке и достаточно подробно.
В большинстве случаев все настройки плагина можно остановить по умолчанию. Но при желании всегда можно изучить их детальнее и настроить плагин по своим потребностям.
Насколько публикация полезна?
Нажмите на звезду, чтобы оценить!
Средняя оценка 5 / 5. Количество оценок: 1
Оценок пока нет. Поставьте оценку первым.
Плагин Содержание статьи для WordPress — делаем оглавление
В объемном материале, оглавление к статье превращает посетителя в читателя. Пользователь попадает на страницу и уже читает заголовки разделов, понимает структуру публикации. Видит: есть ли тут то, что он ищет. Давайте разберем варианты создания содержания к тексту, подобно как на Википедии.
Оглавление статьи в ВордПресс без плагина — как сделать содержание на странице вручную
Добавляем перед каждым подзаголовком строчку кода: . Этим тегом отмечаем точку, на которую попадет читатель, когда кликнет по ссылке в содержании. Имена якорей должны отличатся друг от друга. Чтобы не перепутать места, используем цифры.
После этого, поднимаемся в начало текста и создаем ссылки тегом: Пункт содержания . Шарп, или знак решетки по-простому, говорит о том, что пользователя отправляют на определенное место этого документа, а не на другую страницу. Между открывающим и закрывающим тегом вписываем подзаголовок, к которому ведет ссылка. Сохраняем документ и проверяем, все ли корректно отображается.
-
или
чтобы отобразить содержание маркированным или нумерованным списком, как на скриншоте. По сравнению с плагином, такая навигация удобна тем, что экономит ресурсы сервера и не тормозит загрузку страницы.
Но для оформления по вкусу придется писать дополнительный стиль css, потому что без него содержание отображается в стандартном для сайта виде. А если публикаций очень много, то ручная простановка тегов превращается в рутину. Чтобы сэкономить время и нервы, оглавление можно добавить с помощью плагина.
Table of Contents Plus — содержание материала по тегам заголовков статьи
Плагин TOC+ автоматически собирает заголовки и генерирует содержание к тексту. Дизайн похож на оглавление в статьях википедии, можно выбрать из нескольких цветовых тем или сделать свою. Удобный инструмент с гибкими настройками.
Переходим в раздел «Плагины — Добавить новый», в строку поиска вводим название и кликаем установить. Активируем модуль и переходим к настройке TOC.
Блок основных настроек плагина.
- Position — выбираем где разместить блок с оглавлением. На выбор 4 позиции: перед или после заголовка, вверху или внизу страницы.
- Show when — выставляем минимальное количество подзаголовков, при которых плагин генерирует содержание.
- Auto insert … types — выбираем в каких разделах генерировать оглавление: в записях, на страницах и т.д.
- Heading text — вводим заглавие для блока навигации, например: «Содержание». Если убрать галку с «Show title … contents», то оглавление будет генерироваться без названия. Следующий пункт позволяет читателю прятать содержание под спойлер. В поля пишем подсказку, которую увидит пользователь при наведении на кнопки «спрятать/показать».
- Show hierarchy — включаем древовидную структуру оглавления, когда в тексте используются несколько типов подзаголовков: , и т.д.
- 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 кликабельное содержание, которое перенесет читателя в нужный раздел статьи, можно создать как вручную, так и в автоматическом режиме (при помощи плагинов и кодов).
Добавление содержания вручную
Если у вас небольшое количество текстов, для которых требуется содержание, и вы не разбираетесь в технических моментах, то можете остановиться на ручном добавлении оглавления. Это делается довольно просто в режиме редактирования записи.
Сперва необходимо создать оглавление вручную в виде списка в начале статьи.
Теперь зададим ссылку (якорь) для каждого пункта только что созданного оглавления. Для этого выделяем поочередно пункты, нажимаем на кнопку «Вставить/изменить ссылку» в панели редактора и задаем каждому пункту номер в поле “URL”.
Обратите внимание, что номера (ссылки) необходимо проставлять, используя знак решетки (#). Таким образом, каждому пункту присваивается свой номер (#1, #2, #3 и так далее).
Теперь, когда каждый пункт меню (оглавления) представлен в виде кликабельной ссылки, необходимо указать, с каким конкретно местом в тексте он связан. Для этого нужно перейти в режим редактирования html-кода (текст) и проставить следующий код перед каждым заголовком:
Вместо [номер] необходимо подставить цифру, соответствующую пункту меню, и разместить этот код перед соответствующим ему заголовком в тексте (в данном случае ):
Если перейти снова в визуальный режим редактирования, то можно увидеть маленькие якорьки слева от каждого заголовка.
Это значит, что теперь после публикации статьи на сайте пользователь сможет без проблем перемещаться по ней при помощи только что созданного содержания.
При этом само содержание будет представлено в виде простых ссылок – каким вы его и создали. Если же вы захотите добавить к содержанию оформление, в этом случае необходимо поместить его в контейнер c уникальным идентификатором, которому предварительно задать стиль в файле style.css .
Решились сделать свое оформление посредством 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 – страница). В списке возможно наличие других пунктов (например, галереи, контактные формы и пр.) при наличии соответствующих плагинов. Если вы не хотите, чтобы во всех записях или на всех страницах автоматически появлялось содержание (при заданных условиях), то галочки нужно убрать. В таком случае содержание будет выводиться в том месте, где вы разместите шорткод [toc] .
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
показывать иерархию, т.е. при наличии заголовков разных уровней (h2, h3 и так далее) будет сохранена древовидная структура в содержании. Если опция не активирована, то заголовки будут находиться в оглавлении на одном уровне.
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-шаблона
В платные современные шаблоны для WordPress обычно уже «зашита» возможность вывода содержания в записях и на отдельных страницах. Например, в кастомайзере темы Reboot эту опцию можно включить в админ-панели.
Кликните Внешний вид — Темы — Reboot — Настроить. И перейдите в подменю Модули — Содержание. Здесь можно включить отображение содержания отдельно для записей и страниц, обернуть его в noindex (запретить индексацию) и задать свой заголовок.
Оформления блока с содержанием зависит от цветовых настроек шаблона. Один из вариантов представлен на скриншоте ниже.
Для более гибкого вывода содержания в макете также предусмотрен шорткод [toc] . Другие опции шаблона Reboot описаны в отдельной обзорной статье.
Скидка на Reboot
Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.
Как сделать содержание статьи в wordpress
Здравствуйте, дорогие друзья! Решил сегодня поделиться информацией о том, как сделать содержание на сайте. На мой взгляд, это очень актуальный вопрос в сегодняшнее время, где очень высокое место в продвижении сайта, занимают поведенческие факторы. Использование оглавления в статье поможет Вашему сайту в конкурентной борьбе за место в топе выдачи поисковых систем.
Содержание:
- Для чего нужно содержание на сайте
- Как сделать содержание для статьи
- Создание оглавления в WordPress
Для чего нужно содержание на сайте
Содержание в статье прежде всего нужно для удобства пользователя. Он может быстро понять главные моменты в статье. Если пользователь не желает читать статью полностью, оглавление с легкостью поможет ему переместиться в нужный фрагмент. В очень длинной статье, мне кажется, не добавить содержание вообще будет считаться издевательством над пользователем.
Как сделать содержание для статьи
Для того чтобы добавить содержание нам нужно будет разобраться немножко в коде html. Не пугайтесь, это будет совсем не трудно, разберется даже ребенок. Итак, приступим.
-
,
, . Тег
-
обозначает ненумерованный список,
— элемент списка и — ссылка. Вот как будет выглядеть структура оглавления:
Здесь атрибут href будет переводить нас в нужный фрагмент страницы. В какой именно мы узнаем чуть позже. В качестве значения атрибута href нужно указать знак «#» и значение атрибута id адресуемого элемента. Здесь «#» указывает на то, что мы будем переходить к элементу содержащий атрибут id, внутри одной страницы.
Теперь добавляем атрибуты id к нашим заголовкам.
Всё, наше содержание готово.
Создание оглавления в WordPress
В WordPress содержание делается немного проще, т.к. создавать список мы будем с помощью стандартного визуального редактора. В визуальном редакторе жмем на кнопочку «маркированный список» и перечисляем пункты содержания.
Далее переходим на вкладку «Текст» и просто расставляем теги и атрибуты id, как было указано выше.
Вот Вы и узнали, как сделать содержание на сайте. Немного рутинный процесс, но после того, как набьете руку, это будет занимать мало времени. Вопросы и пожелания оставляйте в комментариях. До скорой встречи!
С уважением, Евгений Кузьменко.
Не забывайте делиться статьей в социальных сетях! Спасибо!
Посмотрите также следующие статьи: