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

Добавил пользователь Валентин П.
Обновлено: 04.10.2024

Допустим, вы написали большую статью. В ней много разделов и заголовков — так нужно по смыслу.

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

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

Сегодня напишем скрипт, который сам соберёт оглавление для ваших эпических лонгридов.

Задача скрипта

Подготовка

Возьмём стандартный шаблон страницы и заполним его текстом из нашей статьи про чужой код :

Добавляем место для оглавления

Мы будем делать оглавление в виде маркированного списка с буллетами, но вы можете сделать его каким угодно. Главное — понимать принцип работы.

Чтобы из скрипта мы смогли обратиться к этому элементу и работать с ним напрямую, сразу дадим ему название — nav. Можно дать любое другое и просто указать это в скрипте.

Пишем скрипт

Первым делом подключаем jQuery — он нам поможет работать с элементами на странице:

Сам скрипт должен делать вот что:

    Найти все подзаголовки

Немного о внутренних ссылках

Обычно ссылки ведут на другие страницы. Когда страница загружается, мы видим её верхнюю часть и скроллим вниз. Интуитивно понятно.

Но есть и такая штука: с помощью специальной метки можно заставить браузер показать нам не верх страницы, а какое-то её конкретное место. Такая метка называется якорем.

Чтобы якорь сработал, нужно две вещи:

А если нужно перекинуть на нужное место в странице, то просто:

Боевой скрипт

Теперь посмотрим на скрипт, который делает именно то, что нам нужно. Читайте комментарии в коде, чтобы понять, что происходит:

Вся магия здесь в двух моментах:

  1. Три точки в команде . document.querySelectorAll('h2') позволяют нам найти все элементы на странице, обозначенные тэгом h2 — так мы находим все подзаголовки.
  2. Эта команда взяла порядковый номер этого подзаголовка (нулевой, так как считается с нуля), добавила его в ссылку, потом взяла текст самого заголовка, добавила его в текст ссылки и из всего этого сделала кусок HTML-кода. Теперь, когда последняя команда добавит его на страницу, браузер сможет его прочитать и обработать как нужно.Команда links.push(` `); формирует новую строчку оглавления, которая для первого подзаголовка будет выглядеть, например, вот так:

Добавим наш скрипт в самый конец страницы. Теперь, если мы что-то поменяем в структуре страницы, добавим или уберём какие-то подзаголовки, оглавление само найдёт все изменения и сделает правильные ссылки.

👉 Если его поставить в начало, то он не будет работать — на момент запуска скрипта на странице не успеет появиться ни одного подзаголовка.

Содержание нужно для того, чтобы посетителям и читателям было легче ориентироваться в статье, особенно если она большая. Обычно содержание делают в виде активных ссылок по статье или обзору, это помогает не тратя большого количества времени найти интересующую посетителя часть статьи и быстро перейти на неё. При этом, не скроля мышью, как сумасшедший вашу статью вниз-вверх в поисках нужной информации.

Активные ссылки содержания работают только внутри статьи (поста) вашего блога. Место, куда должно перебросить пользователя вы определяете сами, вставляя анкор (или якорь) в нужное место статьи.

Итак, оглавление в блоге:

  • Улучшает навигацию по статье
  • Помогает вашему посетителю быстро найти нужную информацию
  • Улучшает поведенческие факторы сайта

Делаем оглавление в статье вручную, с помощью html-кода

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

Естественно, нужно поменять текст в содержании и в якорной ссылке, которая ведет в саму статью. Строчек кода нужно добавить столько, сколько пунктов вы хотите чтобы у вас было в содержании.

Добавляем содержание в блог WordPress при помощи плагина

Так же можно обойтись без правки кода статьи блога в текстовом режиме. Существует множество плагинов для создания Содержания в статьях. Я расскажу о небольшом, но действенном плагине, который мне понравился. Называется он Easy Table of Contents. Плагин регулярно обновляется, не заброшен. На момент написания статьи, для установки была доступна версия 1.6.1. Так же хочу заметить, что плагин бесплатен.

Установка достаточно тривиальна для WordPress плагинов. Переходим по ссылке, скачиваем, устанавливаем и активируем.

Затем нужно его немного настроить под свои требования — смотрите скриншоты ниже. (Кликните по картинке для увеличения)

Плагин Easy Table Of Contents: Меню основных настройки. Плагин Easy Table Of Contents: Меню настроек внешнего вида и цветовых опций. Плагин Easy Table Of Contents: Расширенные настройки.

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

Заключение

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

Из минусов html-оглавления могу отметить лишь трудоемкость и ручной процесс создания, в то время, как плагин настраивается один раз и затем автоматизирует создание содержания на вашем блоге или сайте. Что выбрать — личное дело каждого вебмастера, блоггера. Последнее, что хотел бы сказать в конце статьи — пользуйтесь этой функцией с умом, не стоит делать содержание на короткие заметки.

На этом на сегодня всё, подписывайтесь на обновления блога, поделитесь записью в соцсетях и следите за новыми обзорами и статьями! Всем добра!

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

Но сначала, по традиции оффтоп: меня второй день валит вирусня на хостинге. Кто сможет помочь? Я сейчас разбираюсь в этой теме и скоро напишу статейку. Так что не пропусти — подпишись!

Ну а мы переходим дальше.

Как создавать оглавление статьи средствами HTML?

Да, знания HTML все-таки нужны. И чем дальше в лес, в смысле, чем больше развивается IT индустрия — тем больше нужно будет знать, чтобы хотябы оставаться на плаву.

Но не будем о грустном :)

Итак, зачем нам HTML ? Всё очень просто. Я раньше делал в первых статьях своих (например этой или этой) — делал следующее:

Есть такое понятие в HTML — якорь! Это может быть даже пустой тег. Вот например.

И всё, внутри этого параграфа даже писать ничего не нужно.

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

Вот такими параграфами я наполнял свою статью. Я ставил по одному такому якорю над каждым подзаголовком. Постоянно присваивал им порядковые номера , якорям, всмысле.

Как только все якоря проставлены — осталось создать само содержание статьи — это также делается через HTML прямо в текстовом редакторе самой статьи.

Я делал это так:

Ниже мы видим список пунктов. Причем в ссылке

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

Вот живой пример:

Эта ссылка ведет на интервью с Максимом Войтиком, причем именно на вопрос о том , когда он приедет ко мне в гости. Перейди — узнаешь.

Вот и всё, на seo оптимизацию это никак не влияет. Если вы переидете по подобной ссылке с другого сайта — вам откроется эта страница и сразу перекинет к этому абзацу, где стоит этот якорь.

Ну, надеюсь понятно объяснил. Если нет — задавайте вопросы в комментариях. А мы пойдем дальше.

Как создать содержание статьи без плагинов

На самом деле вариант с HTML вставками — вполне рабочий. Его можно использовать. Но блин, так много времени отнимает. Я, хоть и не сторонник левых кодов и функций на блоге, но мне пришлось признать, что подобная функция как автоматическое создание оглавления (содержания) статьи очень нужна и полезна на сайте,а тем более на блоге. Ведь у блоггеров зачастую бывают длинные, интересные и полезные статьи.

Не буду ходить вокруг да около, давайте к делу.

Идем в файл functions.php и вписываем туда функцию:

‘; static $css; $css = ( ! $css && $this->opt->css ) ? ‘

Представляете — все просто оказывается :)

Я не буду вдаваться в детали этого кода. Я думаю, вам это сейчас не очень интересно — главное — он работает!

Вопрос — как? Хороший вопрос.

Содержание или оглавление статьи создается на блоге, согласно вашей seo разметке, т.е. по заголовкам и подзаголовкам.

[tip]Заголовки H2 — это главы нашей статьи
Заголовки H3 — подглавы или как там их правильно назвать. [/tip]

У меня кстати есть подобные статьи, с разделениями. Но ниже чем H3 я уже не спускался. Вот пример.

пример содержания статьи

Осталось дело за малым, в нужном месте, в статье, вставьте хэштег

И будет вам счастье.

Осталось только стилизовать содержимое. Это всё делается через CSS классы, в файле style.css вашей темы. Если у вас возникнут с этим проблемы — обращайтесь. Если не хотите обращаться ко мне — рекомендую бесплатный [urlspan]курс по CSS[/urlspan].

Пользуясь случаем, хочу объявить о том, что у меня есть БЕСПЛАТНЫЙ курс по созданию блога с нуля — ПОЛУЧИТЬ КУРС. Помогаю новичкам в развитии.

[urlspan]Подписывайтесь[/urlspan] на обновления, чтобы не пропускать полезных статей.

А на сегодня у меня всё.

Как сделать оглавление (содержание) для статьи блога : 6 комментариев

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

Привет, Денис! А первый способ подойдет для любой CMS?

В общем попробовал на blogger сделать такое оглавление – не получилось… Или я что-то не так сделал (хотя проверил несколько раз), или же для blogspot этот способ не подходит…

А оглавления у вас хорошие получаются. Главное плавные переходы бы сделать.

Всем доброго времени суток! Вчера побывали на выставке оптических иллюзий. Столько там всякой всячины: картинки разные, но которые долго смотришь и потом чудеса начинают вершиться:) Экскурсовод объяснял, почему это происходит, как работает наш мозг в данные мгновения, что нам начинает казаться то, чего на самом деле нет. Больше всего понравилась комната Эймса, фото смотрите в конце!

Сегодня мы рассмотрим, как сделать содержание для записи и страницы в WordPress.

Содержание статьи, в которой я научу вас делать такие содержания:

Зачем делать автоматическую прокрутку страницы

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

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

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

Кроме того, использование оглавления в WordPress поможет в продвижении блога. Использование подобранных ключевых слов в ссылках содержания статьи — один из способов внутренней оптимизации блога.

Создание и настройка содержания страницы

Для создания содержания страницы кодом HTML мы будем использовать якоря гиперссылок. Это две части HTML-кода: первая является ссылкой на якорь (вместо адреса вписываем решетку и названия якоря), вторая часть — сам якорь (тег а с параметром name, в который мы вписываем имя якоря). Имена якорей можно придумывать любые, лучше, чтобы они подходили по смыслу, но не страшно, если их имена будут и бессмысленными.

Попробуйте перейти в режим HTML (вкладка Текст) и добавить приведенный ниже код.

oglav

oglav2

Первая часть HTML-кода – это сам подзаголовок в нашем оглавлении, а вторая – место в тексте, до которого автоматически будет прокручена страница.

Создавать такие ссылки можно неограниченное количество, но в каждом последующем случае необходимо задавать уникальное имя якоря (параметр name):

Ваш подзаголовок Место, до которого будет выполнена автоматическая прокрутка страницы

Очень важно следить, чтобы код был прописан не в визуальном редакторе, а в режиме HTML, иначе оглавление не будет работать.

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

Папка с закладками

Здравствуйте, дорогие друзья! Решил сегодня поделиться информацией о том, как сделать содержание на сайте. На мой взгляд, это очень актуальный вопрос в сегодняшнее время, где очень высокое место в продвижении сайта, занимают поведенческие факторы. Использование оглавления в статье поможет Вашему сайту в конкурентной борьбе за место в топе выдачи поисковых систем.

Содержание:

Для чего нужно содержание на сайте

Содержание в статье прежде всего нужно для удобства пользователя. Он может быстро понять главные моменты в статье. Если пользователь не желает читать статью полностью, оглавление с легкостью поможет ему переместиться в нужный фрагмент. В очень длинной статье, мне кажется, не добавить содержание вообще будет считаться издевательством над пользователем.

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

Для того чтобы добавить содержание нам нужно будет разобраться немножко в коде html. Не пугайтесь, это будет совсем не трудно, разберется даже ребенок. Итак, приступим.