В этой статье я расскажу о простом способе как сделать содержание для длинного поста, которое выводится в самом начале. Дело в том, что для WordPress существуют плагины и скрипты, которые позволяют создавать содержания для статей автоматически, но, во-первых, содержание не всегда нужно, а во-вторых, использование скриптов даёт лишнюю нагрузку на сайт. Обладая минимальными знаниями HTML, вы сможете сами делать содержания для своих постов за считанные минуты. Как — сейчас узнаете.
После статьи про то, как сделать из любого поста конфетку, я получил несколько вопросов от читателей. Например, Орина спросила меня о том, почему я не упомянул в своём списке возможность сделать содержание для длинного поста, и как это сделать? Сам-то я в той статье содержание сделал!
В своей работе я придерживаюсь правила, что если что-то можно легко сделать без плагинов, то это нужно делать без плагинов. Каждый подключенный плагин, кроме плагинов, связанных с оптимизацией, хоть немного, но тормозит ваш сайт. Поэтому содержание к длинным постам я делаю без плагинов.
Тем не менее, перед тем, как рассказать о том, как сделать содержание страницы руками, я хочу привести соответствующие плагины для тех, кому лень / страшно лезть в код поста.
Какие плагины позволяют сделать содержание для сайта на WordPress?
На странице добавления плагина введите в окно поиска фразу «table of contents». Вы увидите все предлагаемые плагины для создания содержания в автоматическом режиме.
Из всех четырёх плагинов я раньше использовал только старый проверенный Easy Table of Contents (в левом верхнем углу). Количество отзывов и активных установок говорят о том, что он нравится блогерам, и можно с уверенностью использовать его на своём сайте. С остальными плагинами я не работал.
Как сделать содержание поста для записи WordPress без плагинов и скриптов
Итак, вот пошаговая схема, которую я использую.
- Написать содержание текстом, в виде списка.
- Проставить ссылки с правильными анкорами
- Проставить сами анкоры
Анкор (от англ. «anchor» — якорь) — это закладка в нужном месте сайта, к которой можно переместиться по ссылке. От обычных ссылок на другие страницы сайта или другие сайты он отличается тем, что ссылка на анкор вместо адреса содержит заданный вами идентификатор с хэшем в начале.
Понятие «анкора» используется также в SEO. Если вы в этом разбираетесь, то не путайте, это совершенно разные вещи (хотя, тогда вы вряд ли будете читать эту статью).
Вот как в языке HTML , использующемся для разметки страниц в интернете, выглядит анкор:
<a name="first"></a>
А вот как выглядит ссылка на анкор:
<a href="#first">Первый пункт содержания</a>
В языке HTML <a> и </a> — это теги, которые дают понять вашему браузеру, что всё то, что между ними находится — является ссылкой. Чтобы браузеру было понятно, куда эта ссылка ведёт, внутри тега прописывается атрибут href с адресом (в нашем случае — указанием на анкор). Сам анкор вы располагаете в нужном месте страницы, но вместо аттрибута href даёте ему имя, прописанное выше в href, только без хэштега.
Если всё написанное выше выглядит как китайская грамота, то давайте разберёмся на практике.
Пошаговая схема создания содержания
Возьмём тот самый пост про статью-конфетку.
Шаг 1. Пишем содержание в виде списка.
Делаем это в обычном визуальном редакторе.
Шаг 2. Проставляем ссылки на будущие анкоры
Далее проставляем ссылки (вот пост о том, как правильно ставить ссылки в WordPress, но нам здесь достаточно лишь маленького окошка, без захода в полную форму).
Нажимаем на кнопку «Вставить/изменить ссылку», в появившемся окошке вбиваем идентификатор анкора с хэшем в начале. Я для простоты каждому пункту содержания присваиваю его номер.
Проделываем это для всех пунктов содержания
Шаг 3. Расставляем анкоры в нужных местах
Переходим из визуального редактора в текстовый.
Наше содержание в нём выглядит так:
<h2>Содержание</h2>
<ol>
<li><a href="#1">Придумайте сильный и точный заголовок</a></li>
<li><a href="#2">Сократите вступление</a></li>
<li><a href="#3">Используйте "крючок" во вступлении</a></li>
<li><a href="#4">Структурируйте текст</a></li>
<li><a href="#5">Разбавьте текст</a></li>
<li><a href="#6">Проставьте ссылки</a></li>
<li><a href="#7">Напишите заключение</a></li>
<li><a href="#8">Бонус: как улучшить статью с помощью Yoast SEO</a></li>
</ol>
Тег <h2> — это тег подзаголовка 2-го уровня, <ol> — тег списка, а <li> — тег, окружающий каждый элемент списка. Внутри каждого <li> вы видите наши ссылки на анкоры.
Теперь расставляем анкоры. Перемещаемся к пункту №1 — «придумайте сильный и точный заголовок». У меня эта часть кода выглядит так (первый пункт, как правило, идёт сразу после содержания):
Прямо перед ним вставляем анкор: <a name="1"></a>
Если вы переключитесь обратно в визуальный редактор, то увидите, что в этом месте появился анкор, показанный значком в виде якоря. В опубликованном посте этот якорь не отобразится. Как говорил капитан из фильма ДМБ: «Видишь суслика? Вот и я не вижу. А он там есть».
То же самое проделайте и для всех остальных анкоров.
Всё, содержание готово! В первый раз этот процесс может оказаться непривычным, но, набив руку, вы будете делать содержания для своих постов за пару минут.
Я написал этот пост для WordPress, в котором включён классический визуальный редактор. В новом WordPress 5.0, до выхода которого осталось меньше месяца, будет новый редактор Guttenberg. Когда он выйдет, я дополню этот пост и покажу, как содержание делается в новом редакторе.
Делаю красивые, современные сайты на WordPress и пишу для них тексты, интересные как читателям, так и поисковым системам. Занимаюсь блогами почти 10 лет, и считаю, что каждый человек в сети должен иметь свой личный или профессиональный сайт.
Спасибо! Только что воспользовалась!
Отлично!