Как сделать якорь в wordpress
Добавил пользователь Евгений Кузнецов Обновлено: 04.10.2024
В очередной раз возникла необходимость сделать ссылку внутри одной статьи – называется поставить якорь.
Пришлось снова лезть в инет и искать решение и хотя я уже это делал не раз все равно забываю. Поэтому было принято решение, как и полагается, все нужные вещи записывать, тем более что и раздел подходящий для этого у меня уже есть – Улучшаем сайт называется.
Поставить якорь в статье Wordpress достаточно просто для этого необходимо перейти в редактор “текст”
и перед местом в тексте, откуда мы хотим пойти, ставим команду
А сам якорь мы поставим в начале нужного нам фрагмента текста на который и будут направляться пользователи, при нажатии на ссылку перехода к якорю.
Если у вас в статье несколько якорей то у каждого должно быть свое название.
Понравилась статья? Не забудь поделиться ей с друзьями в twittere , facebooke, google+ и других сетях.
Давайте разберемся в том, что же такое якорные ссылки в Elementor и Elementor Pro, а по-простому якоря?
Изначально html-страница открывается с самого начала, и все содержимое загружается сверху вниз. Если страница содержит большое количество заголовков, пунктов и подпунктов, то для удобства перехода между ними и придумали якорные ссылки (якоря), по которым Вы очень быстро можете найти интересный абзац или раздел. Очень часто переходы по якорям используются в лендингах, в которых каждый блок соответствует своему пункту меню. Абсолютные и относительные ссылки не очень для этого подходят.
По своей сути, якорь — это своего рода закладка в на странице, к которой можно сделать переход.
Немного кода для понимания:
Помимо удобства в навигации для больших статей, якоря повышают общее ранжирование текста страницы для поисковиков.
Разберемся, как правильно использовать якорные ссылки в Elementor.
Для наглядности придумаем задачу, которую нужно реализовать средствами Elementor.
Дано: 3 секции с длинным текстом.
Задача: сделать переход к каждой секции на странице средствами Elementor.
Для решения данной задачи будем использовать якоря, привязанные к пунктам меню.
1) В первую очередь, создадим якоря перед каждой секцией Elementor на странице редактора (аналогия закладок в книгах). К этим якорям в дальнейшем будет осуществляться переход из меню навигации.
Добавим по виджету перед каждой из секций на нашей странице.
Далее заходим в настройки виджета и вводим ID якоря меню в соответствующее поле.
Для примера, ID для якорей будут такими:
2) Далее создадим меню навигации, по клику на пункт которого будет осуществляться переход к секциям с текстом по якорям. Как сделать меню Elementor мы рассмотрели в данной статье.
Создаем меню в WordPress
3) Теперь нам необходимо добавить пункты меню в созданное меню навигации. Обычно пункты добавляют из списка элементов меню слева, где автоматически появляются все созданные нами страницы, записи и рубрики. По клику на эти пункты у нас открывается новая страница сайта, ссылкой на которую пункт меню и является. Но как быть, если нам нужно осуществить переход от одного блока к другому в пределах одной страницы? Для этого в WordPress есть, так называемые, произвольные ссылки.
5) Создаем 3 произвольные ссылки (про числу секций)
6) Сохраняем меню.
8) Наслаждаемся результатом. Теперь, по клику на пункт меню мы будем переходить к соответствующей секции страницы.
Пример Якорного меню Elementor.
Привязываем якорь к кнопке
Таким простым способ вы добавите переход по якорной ссылке по клику на кнопку.
Вот для примера, кнопка с переходом по якорной ссылке в начало этой статьи.
Переход по якорю к блоку на другой странице.
Давайте добавим такую якорную ссылку.
Создадим вторую страницу и добавим переход по якорной ссылке к последней секции первой страницы, созданной для описания работы якорей в начале данной статьи. Перейдем в редактор Elementor и добавим на новую страницу виджет заголовка, который мы будем использовать как ссылку для перехода на вторую секцию первой страницы, созданной ранее.
Добавим якорную ссылку.
Если мы добавим ссылку на первую страницу, то мы не получим нужного нам результата — по клику нас будет перенаправлять в начало первой странице, а не к ее разделу.
Чтобы перейти к нужному блоку на другой странице, к url-ссылке странице необходимо добавить имя якоря следующего формата:
Перейдите на страницу с примером и кликните по заголовку на ней. Вы перейдете к Секции 2 на другой странице. Если посмотреть в инспекторе кода адрес ссылки, мы увидим следующее:
Пример перехода к якорю на другой странице.
Якорь в тексте.
Создаем якорь в текстовом виджете
Например, нам нужно сделать переход по якорю к 5 абзацу на странице. Добавим якорную ссылку с уникальным именем перед 5 абзацем прямо в текст.
Теперь посмотрим, как ссылка будет выглядеть при просмотре страницы.
Мы увидим, что теги ссылки появились в тексте как есть, а нам нужно, чтобы они встроились на страницу как html-код.
Теперь все теги, которые вы будете прописывать, будут встраиваться в код страницы.
Добавим нашу якорную ссылку в текстовый редактор по-новому:
Вот и все. По клику по кнопке мы перейдем к пятому абзацу по якорной ссылке.
как создать сайт на wordpress, настроить и оптимизировать wordpress
Здравствуйте, сегодня будем создавать с помощью HTML кода ссылки внутри записи wordpress.
Всё достаточно легко – для этого достаточно прописывать id для ссылки внутри записи и ссылаться на него.
Для примера давайте создадим текстовое меню и каждый пункт меню будет являться ссылкой на какой-то раздел записи.
Будем создавать следующую запись/страницу:
—————————–
Меню:
1. Лучшие сайты о WordPress.
2. Лучшие сайты о HTML.
3. Лучшие сайты о PHP.
1. Лучшие сайты о WordPress.
Что такое WordPress ? | NassyCompit.online | Яндекс Дзен
Яндекс.Дзен
Wordpress WordPress — это самая популярная система управления контентом на планете. Более чем 35,2% веб-сайтов, работают на этой платформе. Да-более одного из четырех веб-сайтов, которые вы посещаете, вероятно, работает на WP. На данной платформе веб-сайты со всего мира работают с большей мощностью и производительностью, чем традиционные веб-сайты или большинство других систем CMS.
Вот рейтинг сайтов о WordPress:
Сайт 1
Сайт 2
Сайт 3
…
2. Лучшие сайты о HTML.
HTML (HyperText Markup Language) – язык разметки гипертекста – предназначен для создания Web-страниц. Под гипертекстом в этом случае понимается текст, связанный с другими текстами указателями-ссылками. HTML представляет собой достаточно простой набор кодов, которые описывают структуру документа
Вот рейтинг сайтов о HTML:
Сайт 1
Сайт 2
Сайт 3
…
3. Лучшие сайты о PHP.
Вот рейтинг сайтов о HTML:
Сайт 1
Сайт 2
Сайт 3
…
Приступим к созданию данной странички/записи.
Из пунктов меню нужно создать ссылки с индивидуальным идентификатор (id), например вот так:
Далее нужно поставить якоря, чтобы при нажатии на вышеуказанный ссылки посетитель переходил на нужный раздел записи.
Для этого, к нужному разделу необходимо добавить пустую ссылку-якорь с соответствующим идентификатором (id):
Запись будет выглядеть следующим образом:
Но можно улучшить страницу, добавив ссылку на возврат к основному меню, отступы перед разделами (с помощью тега “nbsp;”, а также выравнивание по центру.
Тогда готовый вариант будет выглядеть следующим образом:
Копируем вышеуказанный код. Заходим в админку wordpress. Создем новую запись/страничку (пункт “Записи”, подпункт “Добавить новую”), выбираем закладку “Текст” и вставляем скопированный код:
Сохраняем/публикуем запись и наслаждаемся рабочим меню внутри статьи созданным с помощью якорных ссылок!
Плагин Anchor smooth scroll добавляет плавную прокрутку к якорям в WordPress. Пример применения - landing page, где все пункты меню привязываются к якорям соответствующих разделов лендинга.
Особенности плагина
- Лёгкий и быстрый;
- Плавная прокрутка к якорю при переходе по ссылке с другой страницы ;
- Можно задавать отступ сверху в пикселях, либо css-селектором на элемент, ниже которого должна прокручиваться страница к якорю ;
- Настройка скорости прокрутки;
- Возможность добавления плавного скроллинга к собственным ссылкам на якоря в любом месте сайта (с помощью css-селекторов);
- Возможность переопределить поведение якоря по умолчанию или включить плагин только при загрузке страницы.
- Если в меню несколько ссылок на якоря с 1 страницы, то все они подсвечиваются. Плагин удаляет подсветку.
Вид страницы настроек плагина:
Как добавить ссылку на якорь в меню WordPress
Для добавления ссылки на якорь в меню WordPess нужно перейти в пункт бокового меню Внешний вид->Меню:
Ссылки на якоря привязываются к ID элементов в коде HTML сайта. Чтобы найти ID в коде сайта, нужно открыть инструменты разработчика в браузере (для Google Chrome F12 или ctrl+shift+i).
Затем выбираем нужный элемент (ctrl+shift+c в Google Chrome ):
В данном случае у заголовка нет id, поэтому нужно добавить id. Код заголовка будет выглядеть так:
После этого можно добавить ссылку на якорь в меню WordPress:
Добавление плавной перемотки к собственным ссылкам на якоря
Для добавления плавной перемотки к собственным ссылкам на якоря, например, создаваемым в редакторе при редактировании поста, нужно прописать для такой ссылки любой класс, например .my-custom-anchor-link, затем добавить этот класс в специальное поле на странице настроек плагина.
После добавления класса в настройки плагина все ссылки на сайте с таким классом, содержащие ID якоря, при клике будут плавно прокручивать страницу до элемента с соответствующим ID.
Вставка якоря в редакторе WordPress
Плагин добавляет кнопку в виде якоря в панель инструментов редактора TinyMCE. Вы можете прописать имя якоря, и вставить его в любое место редактируемого текста:
Читайте также: