30.11.2017      287      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) в начале соответствующих абзацев.


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

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

Политика конфиденциальности
Пользовательское соглашение