Как сделать красивое оглавление для статьи в WordPress

///Как сделать красивое оглавление для статьи в WordPress

Как сделать красивое оглавление для статьи в WordPress

Здравствуйте. Сегодня я расскажу вам, как сделать красивое оглавление (содержание, меню, перечень, список и тому подобное структурирование) для статьи или заметки в блоге на CMS WordPress. Вот прямо как у Википедии. Или как в этой статье. Есть два способа, который из них подойдет вам — решите сами. Думаю, что новичкам подойдет второй вариант.

С помощью HTML-разметки

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

Делаем ссылку

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

 

Затем вписываем в строку URL значение #1 и нажимаем внизу Добавить ссылку

Ставим якорь

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

И перед заголовком раздела вставляем html-код ссылки.

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

Повторяем процедуры для оставшихся разделов.

 С помощью плагина

Как это работает. Плагин собирает на странице заголовки h1, h2, h3 и так далее до h6 (какие именно, указывается в расширенных настройках — см. ниже) и просто делает из них Оглавление (Содержание, Меню, как назовете опять же в настройках — см. ниже). Поэтому, если в Содержание попали лишние заголовки, измените их размер или выделите их другим способом.

Добавление плагина

Когда я решал этот вопрос — о создании красивых Оглавлений для своих статей — я перерыл кучу информации. То есть читал, что об этом пишут другие, устанавливал и тестировал. И на данный момент остановился на плагине Table of Contents Plus

Заходим в Плагины, нажимаем Добавить новый

В строке поиска плагинов пишем название плагина. Нажимаем сначала Установить, после автоматической установки кнопка поменяется на Активировать. Нажимаем её, происходит автоматическая активация.

Переходим к установкам плагина. В списке установленных находим наш плагин, нажимаем под его названием Settings

Настройка плагина

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

Верхняя часть настроек

Средняя часть

Нажав на Advanced (Расширенные) мы развернем страницу расширенных настроек. Там я вносил только одно изменение — выбрав, для каких размеров заголовков будет создаваться Оглавление. У меня Содержание статьи собирается из заголовков размеров h1, h2, h3.

 

Шорткод

Теперь собственно о том, как вставить Оглавление в статью. В том месте статьи, где вы хотите видеть Оглавление, вставляете шорткод «левая квадратная скобка toc правая квадратная скобка»

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

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

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

С уважением.

 

2

2 комментария

  1. Вадим, хотелось бы пройти обучающий курс и создать сайт под вашим руководством. Подскажите, когда точно начнется курс? В анонсе стоит февраль-март. Не хотелось бы пропустить.

    1
  2. Олег, сейчас мы проводим этот курс по скайпу, на договорной основе, и цены колеблются в зависимости от потребностей ученика. Можно сказать, курс проходит обкатку в боевых условиях. Вы можете поучаствовать прямо сейчас — для этого напишите мне в личку на сайте. В свободной продаже курс появится примерно в конце февраля-начале марта. Туда тоже можно записаться заранее — и получить подарочную скидку.

    0

Leave A Comment

Войти с помощью: