Как создавать якорные ссылки в WordPress

Определены якорные ссылки

Иногда на веб-странице вы нажимаете на ссылку, и вместо того, чтобы перейти на другую страницу, она перемещает вас в другое место на этой же странице? Это “якорная ссылка”, и это отличный способ помочь пользователям найти то, что им нужно, на длинных страницах.

Как создавать якорные ссылки в WordPress?

Способ первый (ручной)

  • Убедитесь, что вы находитесь на вкладке “Визуально” страницы редактирования или экрана редактирования публикации.
  • Введите или выделите текст для вашей ссылки.
  • Нажмите на маленький значок ссылки на цепочку над редактором страницы, чтобы открыть окно ссылки.
  • Вместо того, чтобы связывать текст с URL-адресом, публикацией или страницей, как при использовании обычной ссылки, назначьте ему имя привязки, введя “#ваше имя привязки ” (без кавычек) в поле ссылки. Нажмите на синий значок Ввода, чтобы сохранить и применить новую ссылку.
  • Затем нажмите на вкладку “Текст” в редакторе страниц, чтобы переключиться на редактирование HTML.
  • Найдите место в тексте, куда вы хотите, чтобы ссылка “переходила” (в идеале заголовок), и добавьте атрибут ID сразу после тега заголовка, внутри скобок. Вот пример:
<h2 id=”your-anchor-name-goes-here”>This is the Heading Text</h2>
  • Сохраняйте, тестируйте!

Способ второй (плагин)

Хотя мы не рекомендуем использовать плагины для небольших функций, эти два плагина могут автоматизировать процесс:

  • Advanced Editor Tools (добавляет функциональность для редактирования собственной страницы, включая выпадающий список “Вставить” функция “Якорь” в качестве опции)
  • Простое оглавление (позволяет автоматически добавлять список якорных ссылок для всех заголовков вашей страницы или публикации, вставляя шорткод [ez-toc])

Метод третий (редактор Гутенберга)

Редактор Gutenberg включает встроенную опцию для создания якорной ссылки.

Выделите заголовок в блоке Гутенберга и нажмите “Дополнительно” на правой панели.
Введите идентификатор ссылки-привязки для выделенного заголовка в поле “Привязка HTML”.
Выделите текст внутри блока, который вы хотите использовать в качестве якорной ссылки, и щелкните значок ссылки на цепочку. В поле ссылка введите “#идентификатор якорной ссылки, который вы только что создали” (без кавычек). Нажмите на значок ввода, чтобы сохранить и применить.

Поделиться

Добавить комментарий

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