Создаем 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 вашего контента , улучшить навигацию по сообщениям и страницам и со временем снизить показатель отказов из-за этого.

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

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь

СЕГОДНЯ ЧИТАЮТ

BulletProof Security плагин WordPress: безопасность, сканер, файрвол

Защита безопасности сайта на WordPress: Сканер вредоносного кода, Файрвол, защита формы авторизации, создание резервных копий базы данных, анти-спам и многое другое. Смотрите раздел Основные...

Как создавать собственные блоки Гутенберга в WordPress, пошаговая инструкция

Выпущен WordPress 5.0 , а вместе с ним и новый блочный редактор Gutenberg. Из коробки он упакован в приличный набор блоков, которые вы можете использовать на своих страницах...

Проблема темы Newspaper с Seo title при установке Seopress -исправляем

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

UDP против TCP, или Будущее сетевого стека (highload обсуждение)

Что мы знаем об IP-сетях Мы отправляем пакеты черный ящик их пересылает клиенту клиент собирает пакеты Внутри черного ящика есть уровни: Давайте сравним TCP и UDP....

Использование Google трендов для поиска идеи сайта и создания полезного контента

Знаете ли вы, что вы можете использовать Google Trends для исследования рынка и более точно ориентироваться на потребности своих клиентов, при этом адаптировать контент-стратегию...

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

WP Rocket называют лидером среди плагинов кеширования для сайтов сделанных на системе управления сайтом Wordpress. Конечно есть некоторые споры какие плагины кеширования лучше и...

ПОХОЖИЕ МАТЕРИАЛЫ

Хак Woocommerce для отображения цену в руб и грв

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

BulletProof Security плагин WordPress: безопасность, сканер, файрвол

Защита безопасности сайта на WordPress: Сканер вредоносного кода, Файрвол, защита формы авторизации, создание резервных копий базы данных, анти-спам и многое другое. Смотрите раздел Основные...

BuddyPress плагин для создания социальной сети на WordPress (профили, группы)

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

Age Gate плагин WordPress для создания ограничения по возрасту при входу на сайт

Существует много применения для ограничения контента по возрасту, такие как трейлеры фильмов, алкоголь или другие «взрослые» темы. Данный плагин позволяет установить возрастное ограничение на...

Simple Masonry Gallery простой плагин для организации галереи Masonry на сайте

Добавьте эффект Masonry к изображению. Поддерживает блок и шорткод. Добавьте эффект к изображениям, вставляемым в запись WordPress, пользовательские записи и страницы. Добавляет эффект в...

Direct Checkout for WooCommerce плагин для оптимизации оформления товаров Woocommerce

WooCommerce Direct Checkout - это плагин, позволяющий сократить количество шагов в процессе оформления заказа Woocommerce. Вы можете упростить процесс оформления заказа, пропустив страницу корзины...