Создаем html якорь (оглавление) в WordPress в коде и с плагинами

Представьте что вы создаёте интересный насыщенный материал для сайта и вот вы написали очень много текста, разбили на разделы и подразделы, а как всем этим управлять пользователю потом? И тут встаёт вопрос организации заголовков статьи в виде якоря. Этот вопрос одинаково важен как сделать якорь в html, так и для статьи на сайте WordPress. Сегодня я покажу вам 5 способов как сделать якори в html статьи и с помощью плагинов, так чтобы вы могли выбрать для себя самый оптимальный и удобный.

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

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

Зачем нужны якорные ссылки для статьи?

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

  • Длинные сообщения в блоге
  • Оглавление
  • Целевая страница с множеством подразделов
  • Вернуться к началу функции

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

 

Простое руководство по созданию якорных ссылок внутри постов и страниц WordPress

Как и любая другая обычная ссылка, якорная ссылка должна указывать куда-то. Основное различие между обычными и якорными ссылками заключается в том, что мы должны указывать на существующий элемент на той же странице, а не на внешний URL, который ведет на другую страницу. Чтобы полностью понять, как это работает, позвольте мне объяснить основы HTML необходимых элементов, которые нам нужны для привязки:

  1. Источник привязки – элемент ссылки
  2. Якорь назначения – элемент на той же странице, на который мы хотим, чтобы наша ссылка указывала

HREF атрибут  любой регулярной связи , как правило , указывает на другую страницу, но в данном случае мы используем символ «#» , за которым следует идентификатор. Посмотрите на пример ниже.

123 <a href=”#okwebiso”>1. Выделение якоря в статье?</a>

 

Что это значит? Он буквально сообщает эту команду браузеру: найдите на текущей странице HTML-элемент с атрибутом идентификатора «okwebiso» и прокрутите его там

И, наконец, остальным шагом является предоставление атрибута ID для элемента на той же странице, на который нам нужна наша ссылка привязки, чтобы указать. Это может быть div, h-tag, практически любой элемент HTML. Единственным требованием является наличие атрибута ID, который соответствует атрибуту href в привязке. Пример ниже.

123 <h2 id=”okwebiso”>1. How to set up a travel blog?</h2>

 

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

Перейдите в свой пост WordPress или в редактор страниц, затем нажмите на текстовую вкладку, и вы получите HTML-код, который вы можете редактировать для создания привязки. Вот как это выглядит на основе нашего предыдущего примера:

Создаем html якорь (оглавление) в WordPress в коде и с плагинами

Сделав это, вы проинструктировали команду и для браузера, и для Google, и для ваших посетителей, о чем эти ссылки и как их использовать. И если вы заинтересованы в более глубоком изучении привязки HTML-ссылок, вы можете проверить это подробное объяснение привязки ссылок .

Якорь ссылка WordPress для привязки на другой странице?

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

В этом случае требуется только небольшая модификация внутри атрибута href элемента ссылки, где вы будете использовать как фактический URL-адрес страницы, так и символ «#» после идентификатора элемента на этой странице. Взгляните на пример ниже, где мы используем наш пост в блоге о путешествиях, как в предыдущем примере:

123 <a href=”https://mekshq.com/how-to-start-a-travel-blog-from-scratch-the-ultimate-guide#stepone”>1. How to set up a travel blog?</a>

 

Просто как тот! А для вашего браузера это в основном означает: перейдите по этому URL и найдите на этой странице HTML-элемент с атрибутом идентификатора «stepone» и прокрутите его там .

Как создать якорные ссылки в Гутенберге?

Очевидно, что это руководство не будет работать для всех вас, кто использует новый редактор Gutenberg. Не бойтесь, у меня есть краткое руководство для этого. Просто следуйте этим шагам, и через несколько минут вы получите якорную ссылку в Гутенберге. Обратите внимание, что это работает для содержимого типа заголовка, всего, что вы пишете с H1, H2, H3,…

#1

Откройте редактор Gutenberg и выберите раздел, который вы хотите использовать в качестве якорной ссылки. Нажмите кнопку «Дополнительно» на правой боковой панели и запишите название этого раздела на панели привязки HTML. Это якорь назначения.

Создаем html якорь (оглавление) в WordPress в коде и с плагинами

#2

Вернитесь в редактор Gutenberg и создайте оглавление или сводку со списком разделов, которые вы хотите связать. Затем выделите один за другим и напишите то же, что вы написали на панели привязки HTML, только добавьте перед ним знак #.

Создаем html якорь (оглавление) в WordPress в коде и с плагинами
Все сделано! Вы успешно добавили якорные ссылки в Гутенберге

Настройка якоря в  WordPress с помощью плагинов

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

Easy Table of Contents

Создаем html якорь (оглавление) в WordPress в коде и с плагинами

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

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

Создаем html якорь (оглавление) в WordPress в коде и с плагинами

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

Scroll to Anchor

Создаем html якорь (оглавление) в WordPress в коде и с плагинами

Еще один отличный бесплатный плагин, который поможет вам установить якорные ссылки в WordPress. После установки вы получите значок привязки на панели инструментов визуального редактора, который избавит вас от вмешательства в область кода.

Создаем html якорь (оглавление) в WordPress в коде и с плагинами

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

Создаем html якорь (оглавление) в WordPress в коде и с плагинами

Смотрите также:Лучшие SEO плагины для WordPress – выпуск 2019

TinyMCE Advanced

Создаем html якорь (оглавление) в WordPress в коде и с плагинами

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

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

Создаем html якорь (оглавление) в WordPress в коде и с плагинами

Больше не нужно писать HTML в текстовом режиме

WP Anchor Header

Создаем html якорь (оглавление) в WordPress в коде и с плагинами

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

Создаем html якорь (оглавление) в WordPress в коде и с плагинами

Заключение

Помимо преимуществ, которые я описал, знание того, как создавать и реализовывать якорные ссылки, хорошо и для поисковых роботов. Таким образом, его пауки могут быстрее проскальзывать через ваш контент и лучше понимать, о чем ваша страница, таким образом, улучшая SEO. Якорные ссылки помогут вам улучшить UX вашего контента , улучшить навигацию по сообщениям и страницам и со временем снизить показатель отказов из-за этого.

Я надеюсь, что это руководство поможет вам научиться делать якорные ссылки самостоятельно. Если, по какой-либо причине, вы все еще застряли на этом пути, не стесняйтесь связаться со мной

РЕКОМЕНДУЕМ

10 плагинов для всплывающих форм на сайте WordPress 2019, плюсы и...

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

10 распространенных ошибок WordPress и решения для их исправления

Для инструмента, которому принадлежит 50-процентная доля рынка всей системы управления контентом (CMS), WordPress стал собственным стандартом. Но, как и любой инструмент, вы можете время от...

Полный обзор админ панели WordPress: функционал, пункты меню, настройки

Итак, вы только что установили WordPress и вошли в свой новый WordPress через «site.com/wp-admin». Что теперь? Если вы не знакомы с WordPress, ваше первое знакомство...

WP Rocket правильная и оптимальная настройка на сайте для кеширования

WP Rocket называют лидером среди плагинов кеширования для сайтов сделанных на системе управления сайтом Wordpress. Конечно есть некоторые споры какие плагины кеширования лучше и...
Alecs Retin
Работаю в сфере web с 2009 года. Занимался созданием своих проектов в разных тематиках. В основном делаю сайты на Instantcms и Wordpress. Оказываю услуги разработки сайтов и стартапов, инвестирую в интернет проекты и сервисы. Более 10 лет занимаюсь Web разработкой и создание интернет проектов. Интернет магазины, информационные порталы, городские порталы. Оказываю поддержку в развитии и продвижении сайтов.