якорь

 Якорные ссылки – это ссылки, которые выведут Вас на определенную часть страницы. Эти ссылки практически позволяют читателям “прыгать” в различных частях страницы.

Может ли человек, незнающий html, сделать якорь? 

Хорошая новость: Да, вы можете!

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

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

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

Вот некоторые ситуации, которые могли бы стать причиной использования якорных ссылок:

  • Длинный пост или страница с оглавлением на самом верху, на которой много элементов, таблиц, подзаголовков ниже по странице.
  • Удобно, если  внизу страницы есть ссылка “Вернуться к началу».
  • В верхней части страницы продаж вы можете включить ссылку с надписью “Хочешь узнать цену прямо сейчас?”
  • На странице есть различные Примечания. 

Как сделать якорь на странице?

Скажем, например, что у вас есть длинная страница, и вы хотите, чтобы читатели сразу перейти к части 1, части 2 или части 3 страницы из оглавления на самом верху. Вот , что вам нужно сделать:

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

Часть 1
Часть 2
Часть 3

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

Давайте соединим Часть 1 с его подзаголовком. Чтобы сделать это, мы начнем с самого подзаголовком.

Шаг 2. Найдите конечную точку 

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

Если вы выберите вкладку HTML, вы увидите, что текст вашего поста все еще там, но вперемешку с html-тегами. Сейчас надо найти подзаголовок, где надо будет сделать якорь. Если вы использовали WordPress визуальный редактор, чтобы придать этому подзаголовком стиль Заголовок 3, то это будет обернуто в соответствующих html-тегах, например так:

Шаг 3. Добавьте атрибут  html и создайте якорь в нужнов месте страницы

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

становится

Обратите внимание на расстояние: оставьте пробел перед “ID”, но убедитесь, что нет пространства между закрывающей кавычки и символом.
И помните, вы не удаляете все символы, а только добавляете.
Вы можете выбрать текст между кавычками – она ​​станет частью вашей ссылки URL, так что используйте только буквы и цифры, без пробелов внутри кавычек.

Вы можете добавить = “атрибут” в любые html-теги, а не только <h3>. Подзаголовки легко найти и имеет смысл их использовать, но вы не ограничены ими. 

Шаг 4. Вернемся к визуальному режиму и убедимся, что все выглядит нормально

Теперь нажмите на вкладку Визуальный  и убедитесь, что подзаголовок – до и после изменения – выглядит все в порядке. “Все в порядке” в данном случае означает “визуально неотличим от до добавления ID =” атрибут.”  На вкладке визуально, ваш подзаголовок должен выглядеть неизменными. 

В итоге получилась точка – куда будет создан прыжок на странице.

Шаг 5. Добавить якорную ссылку на исходную точку

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

Теперь, вместо полного URL, просто введите знак номера (#), а затем слова, размещенной между кавычек в ID =атрибутаякорные ссылки

 

Еще раз уточняю, это необязательно слово атрибут, это любые буквы и цифры. При желании можно заполнить Заголовок, а затем нажмите синюю кнопку “Добавить ссылку”, чтобы сохранить ссылку. Ваша запись должна теперь выглядеть голубой, ведь мы все это делаем в Визуальном режиме.

Получилась точка – откуда будет сделан прыжок.

Шаг 6: Проверьте якорную ссылку

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

Если это работает, то хорошо.

Если это не так (если вы нажмете на ссылку и ничего не происходит, надо сначала проверить ваши изменения html-тега.

Также возможно, что ваша тема или один из ваших плагинов переписывает URL-адреса ссылок. Решение может быть таким -использовать полный URL страницы плюс “#атрибут”, вместо просто “#атрибут” в поле адреса, например, http://vkpluss.ru/yakornye-ssylki/#атрибут

Хитрость здесь в том, что вы ссылаетесь на той же странице во время редактирования, и, если эта страница не опубликована, якорь не будет отображаться в списке “существующего контента,” так что вам придется вручную ввести полный и правильный URL, убедитесь, что он заканчивается с косой черты, и добавьте параметр «#атрибут”.

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

Удачи!

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

НадеждаWordPressякорные ссылки,якорь на странице
 Якорные ссылки - это ссылки, которые выведут Вас на определенную часть страницы. Эти ссылки практически позволяют читателям 'прыгать' в различных частях страницы. Может ли человек, незнающий html, сделать якорь?  Хорошая новость: Да, вы можете! Новость, которая, может быть, не совсем хорошая: Вы должны сделать немного ручную несложную работу, чтобы заставить работать якорь, в том числе надо будет добавить...

Возможно Вас также заинтересует:

Как ускорить сайт на wordpress, выключив HeartBeat API
Всем привет. Продолжаем тему ускорения сайта на wordpress. В статье Как ускорить wordpress с помощью минимизации CSS, HTML и Javascript мы убрали лишнее из файлов, но ...
35 лучших бесплатных тем WordPress
Сообщество WordPress большое. Действительно большое. Есть тысячи дизайнеров и разработчиков, десятки тысяч писателей, и миллионы пользователей, все это способствует развитию WordPress.
18 бесплатных плагинов для таймеров обратного отсчета на сайт
Эта статья посвящена бесплатным плагинам для таймеров обратного отсчета на сайт. 
Как сделать в wordpress последние записи с миниатюрами
Эта статья о том, как сделать в wordpress последние записи с миниатюрами. Делать это мы будем с помощью плагина Newpost Catch. 
10 лучших бесплатных тем WordPress
В этой статье рассмотрены 10 лучших бесплатных тем WordPress, чтобы помочь найти то что вы ищете. В самом деле много сайтов и много шаблонов, иногда часами ...
WordPress 4.3 – что нового?
Конечно, я не могу охватить все новости о WordPress, но могу довести до вашего сведения о новой версии WordPress4.3, выпущенное в августе месяце. 
4 лучших плагина WordPress для шрифтов
Статья посвящена обзору плагинов WordPress для шрифтов. 
Рекомендуется немедленное обновление, версия WordPress 4.2.3
23 июля 2015 года, WordPress 4.2.3 теперь доступна для общественности. Это обновление безопасности для всех предыдущих версий WordPress.