30.11.2017      552      0
 

Как вручную сделать содержание статьи на сайте


Привет. Внося исправления в старый пост, я сбила вывод содержания. Пришлось настраивать его по новой. Заодно решила рассказать, как вручную сделать содержание статьи на сайте под управлением WordPress. К слову, в большей части моих статей оно до сих пор отсутствует, а это не есть хорошо, особенно когда статья длинная: мало кто станет листать бесконечную «простыню» в поисках нужной информации. Гораздо удобнее, когда в самом начале поста присутствует оглавление, позволяющее посетителю автоматически перейти к интересующему его участку текста. Например, такое:

Содержание:
Создание кликабельного оглавления
Простановка ссылок для перехода в нужную часть статьи
Резюме

Показываю всю процедуру от А до Я на Денвере. Допустим, у нас есть статья, состоящая из вступления, трех абзацев с условными заголовками 1, 2, 3 и заключения. Я сначала печатаю в Word, вы можете делать это непосредственно в редакторе WP. В готовом тексте проставляем стили заголовков:

Создание кликабельного оглавления

Затем создаем будущее оглавление – пишем слово «Содержание» и столбиком под ним подзаголовки в порядке очередности:

Место для оглавления выбирайте сами. Я не хочу, чтобы оно виднелось в анонсе, поэтому ставлю его между вступительным абзацем и основным текстом:

Копируем все это в редактор (если исходный текст писался не в нем):

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

В открывшемся окне ставим #1 и нажимаем на кнопку «Добавить ссылку» (активировать окно «Открывать в новой вкладке» тут, конечно же, не надо):

После этого Заголовок 1 в содержании «посинеет»:

Аналогичную процедуру проделываем с оставшимися заголовками, только каждый раз меняем цифру рядом со знаком # на ту, что соответствует порядковому номеру заголовка в списке – для заголовка 2 - #2, для заголовка 3 - #3 и т. д. В итоге все заголовки приобретают «ссылочный» вид, но пока никуда не ведут. Обратите внимание, что само слово «содержание» остается некликабельным:

Меня это устраивает, потому что ссылки в моем шаблоне оформлены черным цветом, т. е. в чистовике все будет выглядеть одинаково:

Если же у вас ссылки цветные, то можно выделить название списка в редакторе соответствующим цветом или просто поставить на него нулевую ссылку #0 по примеру выше (хотя не очень хорошо, когда какой-то пункт ссылается сам на себя). Тогда в чистовом варианте оно внешне не будет отличаться от активных заголовков.

Простановка ссылок для перехода в нужную часть статьи

Далее нужно сделать так, чтобы при нажатии на тот или иной заголовок автоматически открывалась искомая часть статьи. Для этого идем во вкладку «Текст» и перед первым по счету заголовком H2 вставляем код , перед вторым  и т. д.:

Внимание! Сразу после вставки кода жмем на кнопку «Сохранить». Это важно. Вообще, содержание статьи в WordPress делается непосредственно перед публикацией. Если позднее вы что-нибудь исправите, оно с высокой степенью вероятности перестанет работать, а код в тексте слетит:

В этом случае его придется прописывать заново. Чтобы не искать заголовки по всему тексту, можно воспользоваться комбинацией клавиш Ctrl + F и в поисковой строке ввести H2. Появившаяся строка поиска может быть прямо над полем редактирования, а может на панели инструментов браузера:

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

Я вставляю одну и ту же строчку с 1, потом меняю только цифры, так гораздо быстрее. После публикации обязательно проверьте результат. При нажатии на заголовок в меню вас должно перекинуть на соответствующий участок текста:

Если ничего не происходит - значит, что-то было сделано неправильно.

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

Резюме

Итак, резюмируем, как сделать содержание статьи на сайте:

  1. Проставляем заголовки H2 в тексте.
  2. Вручную пишем содержание, состоящее из этих заголовков.
  3. Делаем его кликабельным, добавляя к каждому заголовку ссылку вида #1 (#2 и т. д.) (не забываем сохранять изменения («Добавить ссылку»)).
  4. Идем во вкладку «Текст» и перед каждым заголовком вставляем код типа  с требуемой цифрой.
  5. Сохраняем и публикуем.

То же самое можно проделать с подзаголовками H3. Уровень иерархии в данном случае неважен – главное, чтобы номер в коде перед заголовком соответствовал цифре рядом со значком # в названии этого заголовка в содержании.

Схема работает и при отсутствии заголовков – в частности, в этой моей статье они набраны обычным жирным текстом. Я специально не стала заключать их в теги - хотела показать, что пункты в содержании могут перекидывать не только на заголовки как таковые, но и просто на нужные участки статьи. Для этого достаточно расставить идентификаторы во вкладке «Текст» (id 1, 2, 3) в начале соответствующих абзацев.


Ваш комментарий

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

Для отправки комментария поставьте отметку, что разрешаете сбор и обработку ваших персональных данных . Политика конфиденциальности