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

Здравствуйте, читатели и гости моего блога! Сегодня рассмотрим тему: как сделать содержание в статье на сайте простым методом. Применять способ буду прямо в этой статье, для большей наглядности.

Содержание:
  • Текстовый редактор TinyMCE
  • Как сделать содержание с помощью якоря
  • Как сделать кнопку «наверх» в конце статьи

Текстовый редактор TinyMCE

Первое, что нам понадобится, это плагин TinyMCE — текстовый редактор водпресс, который имеет расширенные возможности. К сожалению, стандартный редактор вордпресс имеет ограниченные функции, выглядит он вот так:

soderzhanie na sayte

Плагин TinyMCE расширяет возможности редактора, и добавляет в него множество полезных функций. После установки плагина текстовый редактор принимает вот такой вид: 

сделать содержание

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

Как сделать содержание с помощью якоря

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

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

Теперь нам нужно настроить каждую строку в содержании, и сделать так, чтобы при нажатии на нее мы могли автоматически переместиться в нужный раздел. Первое, что мы сделаем, это установим якорь в том месте, к которому мы будем перемещаться. Для этого установить курсор в начале нужного места в статье, и нажмите кнопку якоря на панели редактора. У вас появится маленькое окошко, в которое нужно будет внести универсальное кодовое значение. Придумайте любое, лично я для создания содержания использую латинскую букву и цифру (показано на скриншоте).

сделать содержание

Далее нажмите «ок», и у вас появится маленькая кнопка якоря перед началом оглавления.

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

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

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

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

Как сделать кнопку «наверх» в конце статьи

Действуем по тому же принципу установки якоря, но с тем отличием, что якорь устанавливаем в самом начале статьи, а гиперссылку устанавливаем к слову «наверх» (которое прописываем в самом конце). Также можно установить символ (стрелку) перед словом «наверх».

как сделать содержание на сайте

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

Заключение

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

С уважением к читателю, Алена

↑наверх

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *