Как сделать якорь в тексте: Якоря | htmlbook.ru — Вебджем.рф

Содержание

Как создать якорь на сайте в LPmotor

Mottor X: Юбилейное обновление конструктора сайтов lpmotor. Подробнее

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

Автоякоря

У блоков Кнопка и Картинка в редакторе сайта уже есть вшитая функция якорной ссылки.

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

Выберите действие

Для того, чтобы кнопка или картинка была именно якорной ссылкой — на панели редактора выберите действие «Прокрутка к секции».

панель редактирования кнопки

панель редактирования картинки

Выберите секцию, к которой будет вести кнопка

Нажмите появившуюся на панели редактора кнопку «Выбрать секцию» и в открывшемся меню выбора кликните по той секции сайта, куда нужно прокрутить страницу при клике на вашу кнопку.

Выбрав секцию, кликните по ней (она выделится зеленым) и нажмите Сохранить.

выбор секции, куда будет вести якорь

Готово! Теперь при клике на добавленную вами таким образом кнопку, посетитель вашего сайта будет попадать на выбранную вами секцию!

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

Создание HTML якоря

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

Добавление кода

Перейдите в редактор сайта добавьте на страницу блок «HTML-код» в том месте, куда будет осуществляться переход.

Откройте код на редактирование

Вставьте следующий код: <a name=»xxxx»></a>

Вставьте следующий код:
<a name=»xxxx»></a>

где xxxx — это имя якоря английскими буквами. Замените xxxx на свое имя якоря.
Нажмите кнопку «Применить».

Создайте ссылку

Вариант 1
В любом текстовом блоке выделите текст, который надо сделать ссылкой. Нажмите в панели редактирования текста кнопку с цепочкой. Перейдите на вкладку «Якорь».

В поле со знаком # введите имя своего якоря, точно такое же как в прошлом шаге.
Теперь при клике на этот текст на опубликованном сайте страница будет прокручиваться к тому месту, где у вас установлен HTML блок.

Вариант 2
Создайте блок «Кнопка», нажмите на него для начала редактирования.
Выберите действие «Переход по ссылке» и введите в поле ниже текст:
#xxxx
где xxxx — это имя якоря из п. 1 (замените xxxx на имя своего якоря!)
После этого клик по кнопке будет переходить на якорь.

Вариант 3
Вставьте блок «Картинка» и нажмите на вставленный блок. Выберите действие «Переход по ссылке» и введите в поле ниже текст:
#xxxx
где xxxx — это имя якоря из п.1 (замените xxxx на имя своего якоря!).
После этого клик по картинке будет переходить на якорь.

Обратите внимание, у ссылок на якори перед именем якоря
должен стоять символ #, в то время как в коде его нет.

Плавный переход к якорю

Перейдите в раздел «Общие» настроек сайта и передвиньте переключатель.

ВНИМАНИЕ! Если настройка «плавные якоря» выключена, то в предпросмотре сайта якоря не будут работать — они будут работать только на опубликованном сайте.

Смотрите также нашу инструкцию Как вставить счетчик обратного отчета

Документы:

Полезные ссылки:

Функциональность:

О компании:

при поддержке Фонда Развития Интернет Инициатив

бесплатный конструктор сайтов, лендингов и квизов

Бесплатный звонок по России

8 800 200 51 47

support@lpmotor. ru

Видеоинструкции

Как сделать содержание с якорными ссылками в статье WordPress

Это очень просто. Во-первых, бывают соответствующие плагины. Во-вторых, можно все прописать прямо в коде HTML на странице.

С одной стороны, лишние плагины утяжеляют ваш сайт и не всегда сохраняют стабильную работу после обновлений.

Якорь в HTML — Якорь в редакторе Gutenberg — Якорная ссылка для перехода на другую страницу

Однако с плагинами проще управляться. Смотрите: если ваш сайт работает в нескольких версиях (для стационарных ПК, для мобильных устройств, с турбо-страницами…), то ссылки для каждой из них надо делать отдельно. Иначе получится смешение версий: человек жмет на якорь мобильной страницы и оказывается в подходящем (по смыслу) разделе — но на странице для ПК. Разделять версии вручную довольно трудоемко. А подходящий плагин, по идее, должен автоматически следить, чтобы ничего не смешивалось.

Сейчас я опишу именно ручной метод, потому что про свои плагины пусть рассказывают сами разработчики. Однажды сверстанный текст можно будет потом использовать сколько угодно и где угодно (вдруг вы через пару лет соберетесь переносить контент куда-нибудь на новое место). Нужно будет только поправить адреса, снова вручную.

Якорная ссылка в HTML

Торопитесь? Вот скрин-шпаргалка:

***

Важно! Метод позволяет крепить якоря не только к подзаголовкам. Но и практически к любому месту на вашей станице. Поэтому раздел длинный — ниже подробности.

Итак, якорная ссылка обычно ставится на какое-нибудь слово, фразу, картинку или место в тексте. Обычная ссылка ведет вовне, а якорная — на другой объект на этой же странице. В теге вместо классического адреса перехода нужно поставить решетку и метку в кавычках. В качестве метки можно использовать что угодно — цифру, букву, фразу, целое слово.

Примерно так:

Никаких пробелов нигде нет! В этой своей статье я вставляю возле кавычек лишние пробелы, чтобы Вордпресс не пытался преобразовывать написанное в настоящую работающую ссылку.
Закрывается этот тег как обычно, с косой чертой </a>. Между открытием и закрытием помещаем текст из «Содержания статьи», на который станут кликать пользователи. Сугубо технически этот текст не требуется, то есть конструкция <a href= «#1» ></a> тоже будет работать — но как люди поймут, куда здесь нажимать? Поэтому пишем так: <a href= «#1» >Глава первая</a>. С текстом.
В содержании обычно много пунктов, и для каждого из них метка подбирается уникальной. В этом весь смысл. Например, если вы используете нумерацию, то удобно нумеровать по порядку:
<a href= «#1» >Глава первая</a>
<a href= «#2» >Глава вторая</a>
<a href= «#3» >Глава третья</a>
***
Теперь отметьте в статье то место, куда уводит ваша якорная ссылка. То есть точку, где окажется пользователь после клика. Ее нужно пометить тегом, содержащим id= «1» , id= «отправляемся туда» или что-то вроде этого. В кавычках вставлена изначальная уникальная метка, уже без решетки.
***
Важно: id — это не самостоятельный тег, а так называемый атрибут, который нужно прицепить к какому-нибудь тегу. К любому:
<a id= «1» >якорь разместится в некоей произвольной точке текста</a>
<strong id= «1» >якорь на слово в тексте, написанное жирным шрифтом</strong>
<em id= «1» >якорь на слово или фразу, выделенную курсивом</em>
<h3 id= «1» >якорь на подзаголовке второго уровня</h3>
Вот как они будут выглядеть, если убрать лишние пробелы от кавычек и позволить Вордпрессу отобразить все прописанное:
***
И снова текст между открытием и закрытием в принципе не обязателен. Если оставить место пустым, пользователь после клика по якорной ссылке в содержании статьи все равно попадет в указанную точку текста.
Вот сюда, в точку между красным и зеленым:
<></>
Пример использования — и «красивый» результат поисковой выдачи
Но лучше ставить якоря на подходящие по смыслу ключи или подзаголовки. Потому что это нравится поисковым системам. Вот, например, скрин результатов выдачи Гугла, в котором мой сайт оказался с меткой «Перейти к разделу PayPal» и короткой ссылкой.
***
***
В моей статье со скрина якорь стоит на слове PayPal, которое я просто выделила в тесте голубым цветом. Полноценного раздела там нет.
***
Польза от якорных ссылок (ищем подход к поисковым роботам)
Иногда вместо единственной короткой ссылки вниманию ищущего открывается целая табличка. Которая, ясное дело, красиво смотрится и привлекает трафик. Поисковик формирует такие результаты самостоятельно, и получаются они именно на базе якорных ссылок, приклеенных к хорошим тематическим ключевым запросам.
То есть якоря лучше ставить на_текст, чтобы роботу сразу была ясна информационная ценность. Если вам удастся подобрать удачно звучащие ключи, используйте их хоть трижды — и в пункте содержания (куда будут кликать), и в тексте, на котором стоит якорь (куда попадут после кликанья), и внутри тега в качестве уникальной метки.
Не забудьте красиво оформить содержание в начале статьи. Придумайте, как его выделить и выровнять. Пункты должны быть ясными, лучше — короткими. Ключи — повторюсь — использовать можно, но только когда они не кривые и органично вписываются. Чтобы гости вашего сайта наслаждались удобством.
Апдейт (про Турбо)
Если вы пользуетесь технологией «Турбо-страницы» от Яндекса, то обратите внимание: якорные ссылки работают корректно, когда ведут на подзаголовок h2-h6. В прочих случаях могут уводить пользователя с турбо-страницы на ее же полную версию.
Причем Яндекс активно развивает технологию прямо сейчас, так что тут возможны изменения. Поэтому надо будет все тестировать для проверки.
Апдейт
2 (про Гутенберг)
Обратите внимание! В новых версиях Вордпресс в редакторе Гутенберг появился соответствующий функционал. Можно ставить якоря мышкой. Однако и описанный «олдскульный» метод также остается работающим.
В дополнительных свойствах подзаголовков (а с 2022 года — не только подзаголовков, но вообще любых стандартных блоков) можно присваивать id. И ставить ссылку из содержания как обычную, но со значком решетки в начале и с тем самым id вместо адреса.
Смотрите дополнительные настройки подзаголовка. Справа видно, куда надо прописывать метку создаваемого якоря.На втором скрине я переключилась в режим просмотра HTML. Видно, что действительно появился соответствующий атрибут. Тот самый, который прописывался в поле «Якорь», расположенном справа.Теперь отправляемся в содержание (здесь оно сделано списком). Выделяем нужный пункт и ставим ссылкуТот же самый атрибутный текст, но с решеткой — в качестве адреса
Готово 🙂 Работает только в редакторе Гутенберг.
Дополнение-2022
После очередного обновления редактора поле «Дополнительно» для HTML-якоря стало доступным для любых блоков (даже не обязательно текстовых, можно крепить на картинки). Это очень удобно и здорово.
Только учитывайте, что для поисковых роботов важна структура страницы. С SEO-позиций якорь на подзаголовке очевидно выигрывает у якоря на обычном абзаце. Да, ссылка закрепится именно на_блок, на весь абзац, а не на отдельное предложение, фразу или слово. Если хотите на фразу — то делайте через HTML, в режиме редактирования кода.
Якорная ссылка для перехода на другую страницу
При желании можно закрепить якорь таким образом, чтобы ссылка уводила на другую страницу вашего сайта. Просто добавьте адрес нужной вам страницы ПЕРЕД значком решетки, когда будете прописывать эту ссылку.
Получится конструкция «сайт страница #раздел» — и она будет работать.
Вставить якорную ссылку
Вставить якорную ссылку
Якорная ссылка — это гиперссылка на странице, при нажатии на которую посетитель переходит в определенную область на той же странице или на другой странице. Вставка ссылки привязки требует двух частей: создание привязки и привязка к привязке. Это делается через Rich Text Editor.
Добавление ссылки привязки
Удаление анкерной связи
Ссылка на якорную ссылку на другой странице
ПРИМЕЧАНИЕ. Если страница, которую вы редактируете, зарегистрирована и разблокирована, выберите ссылку Заблокировать и изменить , чтобы проверить ее и отредактировать страницу.

Добавление якорной ссылки
Щелкните мышью вокруг текста, на который хотите сделать гиперссылку. Появится панель инструментов со значками на выбор.
Выберите значок Editor . Появится окно редактора форматированного текста.
Поместите курсор перед текстом (или в данном случае заголовком), к которому должна перейти якорная ссылка.
Выберите значок Диспетчер гиперссылок . Появится окно «Вставить ссылку», отображающее вкладку «Гиперссылка».
Выберите вкладку Anchor .
Введите имя якоря в поле Имя.
Выберите OK .
Вы не увидите якорь, который вы только что добавили на страницу.
Выделите текст, который вы хотите связать с только что созданной привязкой. Этот текст обычно располагался вверху страницы, но не всегда.
Выберите значок Диспетчер гиперссылок
. Появится окно «Вставить ссылку», отображающее вкладку «Гиперссылка».
Существующий якорь . Выберите имя якоря, которое вы только что создали, из раскрывающегося списка.
Выберите OK .
Сохраните ваши изменения.

Удаление привязки
Чтобы удалить привязку, выполните следующие действия.
В редакторе форматированного текста выделите текст с гиперссылкой, из которого вы хотите удалить якорную ссылку.
Выберите значок Удалить ссылку , и якорная ссылка будет удалена из текста.
Нажмите кнопку Принять в правом нижнем углу окна редактора форматированного текста.
Сохраните ваши изменения.

Связывание якорной ссылки с другой страницей
Чтобы связать якорную ссылку с другой страницей, выполните следующие действия.
Обратите внимание на расположение страницы, на которую вы хотите сделать ссылку, а также имя целевого якоря.
На странице, которая будет содержать ссылку, выделите текст, который вы хотите сделать кликабельным.
Выберите значок Sitecore Link .
Используйте дерево содержимого, чтобы перейти и выбрать страницу, указанную на шаге 1.
Повторно выделите текст, в который вы только что вставили ссылку, и выберите Диспетчер гиперссылок значок. Появится окно «Вставить ссылку», отображающее вкладку «Гиперссылка».
Добавьте имя целевого якоря в конец URL-адреса в поле URL-адреса. Не забудьте поставить знак фунта стерлингов (
# ) перед именем якоря.
ПРИМЕЧАНИЕ. Имена якорей чувствительны к регистру, поэтому убедитесь, что используемые заглавные буквы соответствуют имени якоря.
Выберите OK .
Нажмите кнопку Принять в правом нижнем углу окна редактора форматированного текста.
Сохраните ваши изменения.
О редакторе документов — Help Scout Support
NEW Мы рады предложить новый редактор документов! Наш новый редактор упрощает редактирование статей для всех, не требуя навыков программирования. В этой статье рассматриваются основы использования редактора Документов для создания и редактирования статей Документов.
Редактор Документов доступен всем пользователям и ролям пользователей с разрешением Редактировать статьи и категории .
Дополнительную информацию об этом см. в разделе Роли пользователей и разрешения.
Ознакомьтесь со статьями о создании и управлении документами, чтобы получить дополнительную информацию о том, как перейти к этому шагу, если вы только начинаете!
В этой статье
Начало работы
Формат Содержание статьи
Ссылки на заголовки
Черновики и публикации
Начать
Щелкните Документы в верхнем меню навигации и выберите коллекцию, чтобы получить доступ к области администрирования Документов. Нажмите на любую статью из любого из этих списков или начните новую статью, и вы попадете в редактор Документов. Просто добавьте свой контент — напечатайте его там или вставьте откуда-то еще, или используйте любую комбинацию этих двух способов.
Вот так просто: вы редактируете статьи в Документах! 🎉

Формат содержания статьи
Отформатируйте текст по мере его ввода или выделите содержимое и отформатируйте его после того, как вы все напечатали или вставили.
Форматировать при вводе
Параметры контекстного меню
Нажмите + (знак плюса) слева от новой строки или введите / (косая черта), чтобы открыть контекстное меню и выбрать параметр форматирования, который будет применяться к тому, что вы собираетесь ввести. Введите имя параметра форматирования для его поиска и/или используйте клавиши со стрелками и клавишу возврата/ввода для навигации по списку с помощью клавиатуры или выберите параметры с помощью мыши.
Цитата
Создать блок текста в кавычках. Нажмите return/enter, чтобы выйти из форматирования цитаты.
Маркированный список
Запуск маркированного списка. Дважды нажмите return/enter, чтобы завершить список.

Выноска
Выберите цвет для создания цветного выделенного блока текста. Дважды нажмите return/enter, чтобы выйти из выноски.
Фрагмент кода
Создает блок форматированного текста кода. Дважды нажмите return/enter, чтобы выйти из блока кода.
Заголовок
Создайте элемент заголовка HTML, от h2 до H6. Возврат/ввод закрывает заголовок, так как заголовки HTML могут состоять только из одной строки.
HTML-блок
Введите свой собственный HTML-код. Ознакомьтесь с разделом Использование HTML в редакторе документов, чтобы получить дополнительную информацию об этом параметре.
Вставить разделитель
Вставить горизонтальную линейку, аналогичную тегу
в HTML.
Вставить изображение
Открывает диалоговое окно файла вашего компьютера для загрузки и вставки изображения. Загрузите файлы PNG, GIF или JPG размером до 10 МБ.

Нажмите на изображение после загрузки, чтобы внести изменения. Верхняя панель инструментов позволяет выровнять изображение или добавить ссылку. Нажмите и перетащите снизу или слева, чтобы изменить размер. Введите подпись, которая будет отображаться вместе с изображением, или нажмите кнопку Alt , чтобы добавить замещающий текст для описания изображения для специальных возможностей.
Нумерованный список
Начать нумерованный список. Дважды нажмите return/enter, чтобы завершить список.
Стол
Вставить таблицу. Нажмите на 3 точки перед строкой или столбцом, чтобы удалить эту строку или столбец. Выделите всю таблицу и нажмите плюс (+), чтобы добавить строку или столбец, или удалить всю таблицу.
Уценка
Редактор документов поддерживает базовый синтаксис Markdown, как описано здесь: Шпаргалка по Markdown: базовый синтаксис

Расширенный синтаксис Markdown недоступен в редакторе документов.
Выделение и форматирование
Выделите текст, который уже есть в статье, чтобы изменить форматирование с помощью панели инструментов или сочетаний клавиш.
Параметры панели инструментов
Кнопка текстового формата предлагает параметры для установки цитаты, неупорядоченного (маркированного) списка, упорядоченного (нумерованного) списка, кода и заголовков с 1 по 6.
Сочетания клавиш
Cmd означает клавишу Command на Mac, а Ctrl означает клавишу Control на ПК с Windows.
Жирный шрифт: Cmd + B / Ctrl + B
Курсив: Cmd + I / Ctrl + I
Подчеркивание: Cmd + U / Ctrl + U
Создать ссылку: просто вставьте ссылку поверх текста или нажмите Cmd + K / Ctrl + K, чтобы открыть диалоговое окно ссылки
В заголовки 1, 2 и 3 автоматически добавляются ссылки привязки, позволяющие вам использовать ссылку для перехода прямо к этому разделу статьи. Примените формат заголовка, и вы увидите, что значок ссылки появляется всякий раз, когда вы наводите на него указатель мыши. Щелкните этот значок, чтобы скопировать адрес ссылки привязки в буфер обмена.

Ссылка создается автоматически и будет выглядеть примерно так: https://jg-clothing-company.helpscoutdocs.com/article/19-shipping-timelines#Domestic-Shipping--N6vvt
Используйте этот адрес для создания оглавления в начале статьи — создайте маркированный список названий каждого раздела и свяжите его со ссылкой в заголовке.
Используйте его, чтобы добавить призыв к действию, чтобы перейти к этому разделу из другого места статьи или другой статьи.
Используйте эту ссылку где угодно — не только в статьях Документов. Вставьте его в электронные письма своим клиентам, чтобы помочь им получить нужный им контент, или сделайте прямую ссылку на этот раздел с любого другого веб-сайта.
Черновики и публикации
Черновики статей автоматически сохраняются при работе в редакторе Документов, и вы увидите зеленую галочку со словом Сохранено вверху. Функция автосохранения обновляет черновик только в редакторе.
Нажмите Предварительный просмотр , чтобы просмотреть статью в том виде, в каком она будет отображаться на вашем сайте Документов, пока вы работаете над черновиком.
Нажмите Опубликовать из новой или неопубликованной статьи или Обновление из опубликованной статьи, чтобы опубликовать черновик на сайте Документов.