Якорная ссылка WordPress: как добавить плавную прокрутку страницы

Здравствуйте интернет-люди!

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

Кроме того, я расскажу, как добраться до якоря с другой страницы .

1. Мы добавим собственный идентификатор в HTML и используем # в ссылке, чтобы сообщить WordPress, что эта ссылка находится на той же странице.

2. Чтобы добиться плавной прокрутки, мы будем использовать прокрутку страницы плагина WordPress до идентификатора.

После этого урока вы сможете сделать себе одну из этих татуировок…

Так что дамы могут ссылаться на вас из любой точки мира .

Я также сделал видео о добавлении якорной ссылки в WordPress:

СОДЕРЖАНИЕ:

Настройте простую якорную ссылку WordPress без плагина

Как сделать ссылку на якорную ссылку с другой страницы

Плагин Anchor Link с плавной прокруткой страницы

Настройте простую якорную ссылку WordPress без плагина

Хорошо, самый простой способ добавить якорную ссылку в ваш WordPress НЕ требует никаких плагинов .

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

Якорная ссылка — это ссылка, по которой вы щелкаете, и она запускает прокрутку к якорю где-то внизу на той же странице.

Давайте начнем. Просто убедитесь, что вы вошли в свой WordPress и найдите пост, в который хотите добавить якорную ссылку.

Перейдите к тексту, который вы хотите сделать якорной ссылкой .

Давайте превратим этот текст в ссылку, нажав здесь.

Далее дайте ссылке имя, но перед ним нужно поставить знак # .

«Не используйте никаких специальных символов. Если вы хотите разделить слова, вы можете использовать дефис».

Идентификатор может быть любым , но я советую использовать что-то короткое, но описательное .

Потому что позже вы увидите эти ссылки в Google Analytics , поскольку Google может ссылаться на определенные части вашего сайта.

Например, я буду использовать #anchor-link-info .

И сохраните настройки ссылки.

О да, убедитесь, что вы используете хэштеги правильно, чтобы не закончить как это.

Теперь, если мы перейдем на веб-сайт и попытаемся нажать на новую ссылку, ничего не произойдет, кроме того, что в URL-адресе будет #anchor-link-info.

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

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

Я обычно ссылаюсь на заголовки в тексте, как этот.

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

Затем найдите заголовок в текстовом виде (он должен быть выделен).

Теперь вы видите, что заголовок обернут вокруг <h2></h2> . Это просто HTML-код для заголовка 2 (аналогичная структура, как в Microsoft Word).

Затем сделайте немного пробела между «h2» и «>». И добавьте следующее:

id="#якорь-ссылка-информация"

Итак, у вас должно быть:

<h2 id="#anchor-link-info"> вместо <h2>

«Просто замените анкорную ссылку-информацию своим собственным анкорным идентификатором ».

Имейте в виду, что идентификатор должен быть уникальным , иначе вы можете что-то сломать на своем сайте.

Затем сохраните пост и посмотрите на сайте.

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

Я понимаю, что эта прокрутка очень внезапна, но ее очень просто настроить, и она хорошо справляется со своей задачей.

Если вы хотите, чтобы это было гладко , нам нужен какой-нибудь javascript или используйте плагин .

Ниже я покажу вам, как это сделать с помощью плагина.

Как сделать ссылку на якорную ссылку с другой страницы

Чтобы сделать ссылку на якорь с другой страницы, вам просто нужно добавить #your-anchor-name в конце URL-адреса вашего сообщения (учитывая, что вы настроили якорь для своего сообщения, как мы сделали выше).

Вот как это сделать шаг за шагом.

1. Возьмите URL публикации,

2. открыть новое окно браузера

3. и в конце URL добавьте якорь (с хэштегом).

Например: #anchor-link-info .

4. Нажмите Enter, и страница откроется в правильном разделе.

Например, URL этого раздела на моем веб-сайте: https://punchsalad.com/wordpress-tips/wordpress-anchor-link #anchor-link-from-other-page .

Вы можете добавить этот URL-адрес в любом месте в качестве ссылки или в меню WordPress , и это откроет этот учебник в этом разделе.

Плагин Anchor Link с плавной прокруткой страницы

Что делать, если вы хотите плавную прокрутку страницы WordPress при нажатии на якорную ссылку? Для этого вам понадобится javascript .

Самый простой способ — установить плагин WordPress под названием «Прокрутка страницы до идентификатора».

Для этого выполните следующие действия:

1. Заходим в свои плагины и добавляем новые.

2. В поле поиска введите прокрутку страницы.

3. Установите плагин.

4. Активируйте его.

Теперь у этого плагина много разных настроек, и вы можете поиграть с ними.

Настройки расположены в левой строке меню: Настройки > Прокрутка страницы до ID.

Я считаю, что плагин работает довольно хорошо из коробки . Так что оставлю все по умолчанию.

«Одна вещь, которую следует иметь в виду, это то, что если вы используете отложенную загрузку , плагин может не найти нужное место на странице».

Далее давайте настроим якорную ссылку с помощью плагина.

Если вы следовали приведенному выше руководству, вернитесь к сообщению, которое мы подготовили ранее, и удалите ссылку и идентификатор.

Как видите, рядом со стандартными значками редактирования текста появилось 2 новых значка.

Первый — настроить ссылку, а тот, что с мишенью , — это якорь или цель ссылки.

Во- первых, давайте добавим якорную ссылку, щелкнув значок ссылки.

Появится всплывающее окно, и оно запросит URL-адрес.

Просто используйте идентификатор с # , например: #anchor-link-info.

Кроме того, вам нужно включить пользовательский класс «ps2id» , который сообщает плагину прокрутку.

И если мы посмотрим в текстовом виде, то увидим, что в него добавлен новый класс ps2id.

Так что все хорошо!

Затем прокрутите вниз до точки, в которую вы хотите добавить якорь.

Затем поместите курсор сразу после заголовка. ..

а затем нажмите на значок яблочка .

Тем временем добавьте тот же идентификатор , что и выше, но без # , поэтому «anchor-link-info».

Вы увидите, что плагин добавляет шорткод .

Ничего страшного, он НЕ появится на сайте . Он просто сообщает WordPress, где разместить якорь.

Далее сохраните изменения .

Давайте посмотрим, как это выглядит на сайте.

Просто обновите страницу и нажмите на ссылку …

Он будет плавно прокручиваться к якорю, который вы только что установили.

Как видите, шорткод нигде не отображается !

Удивительно! Не так ли?

Вы можете разместить несколько якорей на странице , только не забудьте присвоить им уникальные идентификаторы и создать ссылки.

Например, вы можете видеть, что идентификаторы этой статьи:

#простая-wordpress-якорная-ссылка
#якорная-ссылка-с-другой-страницы
#якорь-ссылка-плагин

И ссылки вверху страницы в «Содержании». Это упрощает прокрутку до любого раздела.

Тем не менее, мне пришлось отключить плагин ленивой загрузки , так как у меня есть ленивая загрузка с моим wordpress.

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