Содержание
Привет, друзья! На прошлом занятии мы занимались настройкой плагина Updraft Plus для создания резервных копий. А сегодня мы установим и настроим также очень полезный плагин для удобства пользователей Easy Table of Contents. С помощью него мы будем выводить содержание статей на сайте.
Преимущества плагина Easy Table of Contents
Хочу сказать, что этот плагин по праву считается одним из лучших. Он выводит оригинальное и современное содержание к записям на сайте. Кроме того, он имеет много настроек. Но это не значит, что они сложные. А совсем наоборот.
Плагин Easy Table of Contents написан на русском языке. И вы с лёгкостью сможете настроить его на свой вкус, используя любимые цвета. Да так, чтобы и блок оглавления сочетался со стилем самого блога.
Чем ещё он хорош? У него есть кнопка сворачивания. Можете взглянуть на картинку:
У себя я сделала бирюзовый фон блока в тон обложки сайта. Также радует обтекаемая форма. Думаю, вид достойный. Впрочем, скоро вы сами всё увидите.
Установка плагина Easy Table of Contents
Итак, приступим к установке. Заходим в раздел Плагины → Добавить новый. Вводим название Easy Table of Contents. Просто скопируйте его здесь. Вот так выглядит обложка плагина:
Жмём Установить. И сразу же Активировать. Далее идём в раздел Настройки → Содержание.
Easy Table of Contents настройка
И перед нами длинное окно, которое имеет три части.
Основные настройки
Здесь включаем поддержку записей и автоматическую вставку записей. Если вам нужны страницы или что-то ещё, можете поставить галочку.
Выбираем расположение оглавления. Я оставила по умолчанию - перед первым заголовком. Но можете выбрать свой вариант:
- после первого заголовка
- вверху
- внизу
Далее определяете количество, с которого начинается показ заголовков. Я выбрала 3.
Отображать заголовок оглавления. Я поставила галочку и прописала ниже Содержание.
Переключать видимость - я разрешила пользователю это делать.
Начальный вид - не стала отмечать, поэтому оно изначально будет в развёрнутом виде.
Отметила также показ иерархии и плавную прокрутку.
А нумерацию оставила десятичной. Помимо этого, её можно сделать римскими цифрами или вовсе убрать. Поэкспериментируйте.
Внешний вид
Теперь переходим к внешнему виду.
Ширина - я выбрала относительную auto. Таким образом, она будет определяться автоматически.
Обтекание - имеется ввиду текстом. Поставила значение "нет".
Размер шрифта заголовка - выбрала 120% по отношению к основному шрифту.
Начертание шрифта заголовка - также выбираете, какой понравится.
Размер шрифта - поставила 95% по отношению к основному.
Тема - отметила значение Выборочно, чтобы ниже самой определить всю цветовую гамму.
Пользовательская тема.
Тут есть где разгуляться и выбрать:
- цвет фона
- цвет бордюра
- цвет заголовка
- цвет ссылок
- цвет ссылок при наведении курсора
- цвет ссылок после нажатия
Расширенные настройки
И последний подраздел. Отмечаем строчные буквы и использование дефиса вместо нижнего подчёркивания.
Главную страницу и CSS я отмечать не стала. Мне это ни к чему.
Ниже идёт пункт Заголовки. Здесь на своё усмотрение можете пометить галочками уровни выводимых заголовков.
Исключить заголовки - на данный момент на моём блоге нет таких, поэтому игнорирую.
Смещение плавной прокрутки - по умолчанию стоит значение 30 px. Что вполне устраивает.
Смещение плавной прокрутки на мобильном - 0 px.
И далее расположено ещё несколько пунктов:
- Ограничить путь
- Префикс якоря по умолчанию
- Выбрать фиксированное положение
Здесь что-либо менять или дописывать не стала. Всё уже работает, всё итак супер.
Только не забудьте нажать Сохранить настройки 😉
Кстати, когда вы будете писать статью, то в конце редактора записи также сможете увидеть некоторые настройки плагина Easy Table of Contents.
На следующем уроке мы продолжим создавать удобства для читателей. А именно, сделаем настройку списка похожих записей в конце статьи.
И раз уж затронули тему о статьях, то не лишним будет почерпнуть идеи для их написания.
Спасибо, очень подробно и понятно. Установила плагин и настроила сразу по вашим рекомендациям. Содержание в статье работает.
Успехов вам, Галина!