якорь

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<h3> Часть 1 </ h3>

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

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

<H3> Часть 1 </ h3>

становится

 <H3 ID = "атрибут"> Часть 1 </ h3>

Обратите внимание на расстояние: оставьте пробел перед “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, плагин Easy Table
Легко ли сделать таблицу на странице в WordPress? однозначно легко. Об этом эта статья. 
Запланированные записи не публикуются. Что делать?
WordPress публикации. Запланированные записи не публикуются вообще или публикуются с задержкой. Что делать? Эмблема WordPress
Как вставлять смайлы в комментарии
В этой статье вы сможете узнать как вставлять смайлы в комментарии двумя способами. 
Как украсить сайт к Новому Году
Новый год не за горами. Давайте обсудим тему - Как украсить сайт к Новому году.
Как ускорить сайт на wordpress, выключив HeartBeat API
Всем привет. Продолжаем тему ускорения сайта на wordpress. В статье Как ускорить wordpress с помощью минимизации CSS, HTML и Javascript мы убрали лишнее из файлов, но ...
Как настроить плагин All in One SEO Pack
Здравствуйте, уважаемый читатель моего блога. В этой статье мы рассмотрим как правильно настроить плагин  All in One SEO Pack. От настроек этого плагина будет ...
Жить хорошо
С помощью моего блога любой человек вне зависимости от возраста, без особых знаний сможет создать свой сайт.
Что делать, если сайт сломался при установке темы
Если у вас сломался сайт по любой причине, надо переустановить движок WordPress. После чего сотрется вся текстовая информация, которую Вы разместили на сайте. Но, ...