Создание оглавления записи WordPress.

2
1256

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

Html код вывода навигации.

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

Для создания оглавления понадобится всего пара строк HTML-кода.В чистом html для создания якоря в определенной части страницы вам нужно добавить в текст пустую ссылку с href, например:

Начало кода

Затем, в другом месте документа, вы просто создаете линк с этим якорем:

Первая строчка HTML-кода – это собственно сам подзаголовок, а вторая – место на странице, до которого автоматически будет прокручена страница.

Создавать такие ссылки можно неограниченное количество, но в каждом последующем случае необходимо менять цифру после name:

При клике на такую ссылку пользователь будет перемещен на созданный вами якорь. Кстати, в системе WordPress по умолчанию в ссылки Читать далее добавляется якорь #more – при клике по ним вы попадаете на страницу с постом не в начало, а в место после якоря #more.

Исходя из вышесказанного вы наверняка поняли, что для создания html якоря в WordPress вам нужно будет перейти в HTML редактор текста. Однако я предлагаю куда более наглядный вариант – для него потребуется плагин TinyMCE Advanced. В настройках модуля первым делом добавляем кнопочку инструмента Anchor в панель редактора.

ank1

После этого при написании нового поста в блоге у вас появится кнопка создания html якоря. Вы просто размещаете курсор в том месте текста, где нужно добавить якорь и кликаете по ней. Во всплывающем окне указываете название (id) анкора. Лучше, думаю, указать имя английскими буквами.

ank2

После создания увидите соответствующую картинку перед текстом – значит, html якорь создан. Дальше вам нужно создать ссылку на якорь.

ank3

В текстовом редакторе TinyMCE Advanced при добавлении линка вы увидите всплывающее окно, где в пункте Anchors в выпадающем списке можете выбрать один из якорей. После этого его название (#yakor) будет поставлено в поле URL.

Что там и как работает в базовом редакторе, к сожалению, уже не помню – ориентируйтесь на теорию относительно html якорей, что я изложил в начале статьи.  А еще лучше поставьте себе TinyMCE Advanced:)

Информация была взята,обработана и объединена с двух источников:

http://wordpressinside.ru/ и http://pro-wordpress.ru/, за что им большое,человеческое СПАСИБО!

 

Конец кода 

 

Кстати,а вот и конец кода,поднимите страницу выше 

Плагины для вывода оглавления.

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

Better Anchor Links

Better Anchor Links

Напоследок хотелось бы рассказать еще об одном плагине – Better Anchor Links. Основная его задача – это создание якорей из заголовков страницы и автоматическое их расположение в начале статьи или других местах. По сути, это инструмент для создания оглавления, похожий на тот, что есть в word. Вот как это приблизительно выглядит на сайте.

Better Anchor Links

У Better Anchor Links есть несколько полезных настроек. Тут можно найти заголовок для оглавления,  автоопределение оглавления по H тегам, подключение своих CSS стилей и многое другое.

Better Anchor Links

Список основных функций Better Anchor Links:

  • Автоматическое создание якорей из H тегов в тексте статьи.
  • Возможно отключить базовые CSS стили плагина для задания своих.
  • Имеется специальный виджет.
  • Можно указать свой заголовок для оглавления.
  • Можно выбрать список ссылок с цифрами или без.
  • Поддержка локализации qTranslate/mqTranslate.
  • Если требуется, есть ссылка возвращения к оглавлению.

В официальном репозитории вордпресс на странице FAQ описания плагина имеется парочка советов (кодов) как выводить оглавление не в тексте статьи. То есть вы, например, можете разместить список ссылок на якоря в сайдбаре (с помощью виджета или PHP).

Table of Contents Plus

Плагин для WordPress Table of Contents Plus представляет собой мощный и удобный инструмент, который поможет добавить, маленькое или большое оглавление на ваш сайт. Он также может выводить карту сайта с перечислением всех страниц и рубрик.

Этот плагин разработан так, что выглядит и функционирует так же, как таблица содержания в Википедии, так что ваши посетители будут чувствовать себя с ним довольно комфортно. В проводимых нами тестах мы опробовали этот плагин в блоге на страницах, где было много рубрик и большое количество ссылок. далее мы покажем, как настроить Table of Contents Plus для достижения быстрого и точного результата.

Установка плагина Table of Contents Plus

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

Table of Contents Plus установка плагина

Нажмите кнопку Обзор и выберите только что скачанный zip-архив, затем нажмитеУстановить.

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

Настройка таблиц содержания в Table of Contents Plus

Настройка Table of Contents Plus

 Настройка Table of Contents Plus

На вкладке «Main Options» (основные настройки) вы сможете изменить ряд настроек для таблицы содержания: позицию (в записи или на странице), количество заголовков, необходимых для создания оглавления, типы содержимого, которые автоматически получат содержание, текст заголовка, стиль иерархии, внешний вид и многое другое.

По умолчанию установлена генерация оглавления только на страницах и только тогда, когда на ней более четырёх заголовков (h1, h2, h3 и т.д.). Это поможет не создавать таблицу содержимого с оглавлением на каждой странице, а только на тех, где есть достаточное количество разделов. Слово «Contents» в параметре «Heading text» (текст заголовка) можно заменить русским эквивалентом «Содержание» из Википедии.

Настройка Table of Contents Plus

Вкладка “Карта сайта”, на случай,если повится желание создать оглавление вашего сайта,состоящее из статей.

Использование короткого кода

Следующим шагом мы вставим короткий код TOC+ на страницу. Сейчас содержание может отображаться автоматически, но если вы отметили опцию «Hide the table of contents initially» (скрывать изначально таблицу содержания), то вам придётся указать короткий код вручную. Также короткий код нужен для определения дополнительных атрибутов, например, позиции.

Table of Contents Plus в редакторе страниц

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

Вывод

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

P.S: Я пользуюсь плагином Table of Contents Plus,который все делает сам.Спасибо сайту http://dsigh.ru/ за обзор замечательного плагина для построения оглавления поста.

  • Макс Миронов

    Спасибо за подробное описание TOC+ , помогло с выбором места расположения в теле статьи! [TOC]

  • Спасибо, выбрал плагин, давно хотел что то подобное!