Если вы хотите сделать свой контент удобным для навигации читателей или надеетесь повысить рейтинг SEO, изучение того, как создать меню оглавления WordPress (также называемое кликабельным меню) в верхней части постов вашего блога, может оказать большую помощь в обоих случаях. Вот уже более десяти лет я создаю собственные кликабельные оглавления WordPress в верхней части практически каждого поста на своем блоге. В этом руководстве я собираюсь показать вам, как сделать их также. И что самое интересное? Не нужно скачивать никаких плагинов, настраивать тему WordPress или учиться писать сложный код. Я покажу вам, как сделать красивое меню оглавления WordPress (как с Gutenberg, так и с классическим редактором) с помощью очень простого HTML-тега якорной ссылки. Без промедления, давайте погрузимся в процесс.
Для начала давайте разберемся, как сделать меню оглавления WordPress в редакторе Classic.
Создание оглавления в классическом редакторе WordPress (без плагина)
Считайте меня старожилом, но я все еще являюсь поклонником использования классического редактора WordPress в некоторых своих блогах. Хотя за последние годы Gutenberg стал намного удобнее для пользователей, я создал много настроек в этом блоге (с редактором Classic), которые потребуют некоторой доработки, когда я перейду на Gutenberg. И я знаю, что я не единственный, кто все еще держится! А пока давайте начнем с создания меню оглавления WordPress в редакторе Classic.
Шаг первый: Создайте упорядоченный (или неупорядоченный) список
Во-первых, вам нужно начать с создания списка (упорядоченного или неупорядоченного), который вы хотите сделать своим оглавлением. Например:
Прежде чем мы перейдем к гиперссылке пунктов меню в функциональное оглавление, начните с ввода основных разделов вашей статьи. В идеале эти пункты меню должны соответствовать заголовкам заголовков во всем вашем контенте (как вы можете видеть, я сделал это в данном руководстве).
Шаг второй: добавьте тег HTML Anchor (гиперссылка)
После того как вы завершили работу над текстовой частью меню оглавления, пришло время сделать гиперссылки на каждый пункт. Для этого мы добавим так называемый HTML-тег якоря – очень простой формат гиперссылки, особенно удобный для SEO. Вот как выглядит этот тег:
Для начала перейдите в текстовый режим, если вам удобно и вы хотите видеть полную картину того, что вы добавляете. Перейдя в текстовый режим, найдите первый элемент списка в оглавлении, на который вы хотите сделать гиперссылку (сделать ее кликабельной). Как показано на скриншоте выше, добавьте <a href="#hyperlink-text-goes-here"> сразу после открывающего тега первого элемента списка (<li> ) в оглавлении. Я рекомендую всегда использовать здесь описательный текст, так как это поможет повысить SEO-рейтинг вашего блога для данного поста. Далее вам нужно закрыть гиперссылку, добавив закрывающий тег (</a> ) в конце текстовой части первого пункта меню. Вот пример копирования/вставки полного HTML-кода:
<a href="#hyperlink-text-goes-here">Описательный текст дисплея здесь</a>
Вам нужно будет добавить HTML-тег гиперссылки к каждому отдельному пункту меню в вашем оглавлении. Если вы хотите обойтись без текстового режима и уверены в функциональности вашей темы WordPress, вы можете просто нажать кнопку Вставить/Редактировать ссылку и добавить текст тега гиперссылки в формате #hyperlink-text, как показано ниже:
Важно: Это определенно лучшая практика – использовать точно такой же (описательный) текст в вашем кликабельном пункте меню, как и в соответствующем разделе, к которому читатели перейдут при клике. Какой бы метод вы ни использовали для добавления HTML-тега якоря, вы уже создали первую половину ссылки на оглавление WordPress. В следующем шаге вы добавите соответствующий тег внутри вашего сообщения, куда вы хотите, чтобы эта кликабельная ссылка привела читателя.
Шаг 3: Добавьте соответствующие теги ссылок в пост
После того как вы добавили теги якорей в оглавление, сделав пункты меню кликабельными, пришло время добавить соответствующий тег для каждого из этих пунктов меню, чтобы ваши читатели попадали куда-то после клика на пункт меню. Как показано на скриншоте ниже, добавьте <a name="hyperlink-text-goes-here"></a> сразу после тега заголовка (и перед текстом заголовка) – там, где начинается раздел первого пункта списка в вашем посте. Поскольку этот тег названия просто служит точкой привязки для гиперссылки на пункт меню выше, вы можете сразу закрыть тег, как показано в приведенном выше фрагменте кода. Текст, который вы используете внутри тега (<a name=""> ), должен точно совпадать с содержимым тега (<a href="#"> ), который вы используете в соответствующем пункте оглавления, иначе кликабельная ссылка не будет работать. Часть, выделенная синим цветом на этом снимке экрана, – это то, как должен выглядеть тег полного имени:
Этим шагом вы завершили создание меню оглавления с гиперссылками с помощью простого HTML. Вот пример копирования/вставки полного кода тега name:
<h3><a name="hyperlink-text-goes-here"></a>Descriptive Display Text Goes Here</h3>
Теперь для тех из вас, кто использует редактор Gutenberg, давайте пройдемся по процессу создания оглавления WordPress и там.
Создание кликабельного оглавления в Gutenberg (без плагина)
Если вы используете Gutenberg, вам повезло! Процесс создания кликабельного оглавления WordPress немного упростился. А если вы предпочитаете следовать видеоуроку выше, вы можете посмотреть его там.
Первый шаг, независимо от того, какой редактор WordPress вы используете, остается неизменным.
Шаг первый: Создайте упорядоченный (или неупорядоченный) список
Начните с добавления блока списка (упорядоченного или неупорядоченного), который вы хотите сделать оглавлением. Например:
Обязательно добавьте все элементы, которые вы хотите включить в оглавление. Далее мы добавим гиперссылки, которые превратят их в функциональное, кликабельное оглавление.
После того как вы закончили работу над текстовой частью меню оглавления, пришло время добавить внутренние гиперссылки к каждому из них. Мы сделаем это так же, как и в классическом редакторе, добавив так называемый HTML-тег якоря – очень простой формат гиперссылки, удобный для SEO – просто в Gutenberg этот процесс выглядит немного иначе. Вот как выглядит добавление тега:
Чтобы добавить гиперссылки в оглавление, просто нажмите кнопку Вставить/Редактировать ссылку и добавьте текст тега якоря в формате #hyperlink-text, как показано ниже. Не забудьте про символ # в начале, который делает эту ссылку внутренней. Далее мы добавим соответствующий тег имени в элемент заголовка, расположенный ниже по тексту вашего сообщения, чтобы читатели, которые щелкнут на элементы оглавления, имели место, где они смогут приземлиться.
Шаг 3: Добавьте соответствующие пункты назначения ссылок на именные бирки
После того как вы добавили гиперссылки в оглавление, сделав каждый пункт меню кликабельным, пришло время добавить соответствующий тег имени для каждого из этих пунктов меню, чтобы ваши читатели попадали куда-то после клика. И благодаря тому, что Gutenberg ориентирован на создание блоков, это гораздо проще и быстрее, чем в редакторе Classic. Чтобы добавить соответствующий тег якоря, просто…
- Выберите блок заголовка (или тот текстовый блок, который вы будете использовать в качестве места назначения ссылки).
- Нажмите на настройки отдельных блоков (на правой боковой панели)
- Нажмите на Advanced, чтобы открыть выпадающее меню с настройками HTML якоря
- Добавьте соответствующий тег якоря, который соответствует кликабельному пункту меню из оглавления выше
Вот как это выглядит:
Как показано на скриншоте выше, это очень просто и легко – не нужно редактировать HTML. Хотя вы, конечно, можете использовать более ручной способ редактирования как HTML, как это делается в классическом редакторе, приятно, что не нужно переключаться между визуальным и текстовым режимом. И вуаля! Теперь вы завершили цикл и сделали кликабельное меню оглавления WordPress в Gutenberg. Хотя, конечно, существуют некоторые плагины WordPress (например, премиум-версия Yoast SEO), которые помогут создать оглавление в записях вашего блога, я всегда был сторонником того, чтобы делать все как можно проще и по возможности избегать использования плагинов, поскольку они часто замедляют скорость загрузки страницы. Скоро я создам учебник о том, как сделать прокручивающееся оглавление (изображенное в моей правой боковой панели на рабочем столе).
