Принцип действия якорей простой: в нужном месте статьи вы ставите определенную метку и потом делаете ссылку на нее. Посетитель, кликнув по этой ссылке, сразу попадает в необходимое место второй статьи. Причем, не важно — на каком именно сайте находится эта статья — на этом же или на другом.
Или бывает необходимым сделать план статьи, где, кликнув по какому-то пункту плана, посетитель оказывается именно в этом разделе. Уверен, вы видели подобную организацию статей и сегодня мы с вами этому научимся. Собственно, эта статья именно так и сделана.
Делать мы это будем вручную, т.к. небольшая автоматизация процесса с помощью визуального редактора не решает всех проблем. Кроме того, надо или менять с помощью плагинов визуальный редактор на другой, более продвинутый, или в существующий визуальный редактор добавлять дополнительные кнопки. Но дополнительные плагины только замедляют ваш сайт, а редактирование штатного редактора возможно не во всех темах, поэтому этими способами мы пользоваться не будем.
2. Установка якоря внутри статьи
Итак, прежде всего нам необходимо как-то отметить то место, КУДА будут переходить читатели. В этом месте нам сделать метку, т.е. установить якорь. Открываем вкладку HTML в визуальном редакторе и в нужном месте пишем такой код:
<a name=«ЯКОРЬ»>текст</a>
Вместо слова ЯКОРЬ вы указываете какое-то имя. Оно может быть связано с темой статьи (или фрагмента статьи) или быть произвольным, например, а1. Лучше писать тематический якорь – при возможном будущем редактировании статьи вам самим потом будет намного легче разбираться с ее структурой.
Вместо слова «текст» можете что-то указать, а можете не указывать, тогда ваш якорь будет писаться таким образом:
<a name=”ЯКОРЬ”></a>
Понятно, что этот якорь для посетителей будет не виден, в отличие от первого варианта написания.
Собственно, вот этим и ограничивается функционал кнопок для добавления якоря: появляется окно, куда надо вписать текст якоря. Вторую часть работы вам все равно придется делать вручную.
Кстати, и это важно: когда пишите кавычки в коде указывайте их в латинской раскладке клавиатуры, а не русской, т.е. надо так – “ ”, а не так –«». Иначе WordPress сам добавит еще дополнительные кавычки.
Посмотрим, как сделать в статье ссылку на анкор. Например, в плане статьи надо сделать ссылку на якорь соответствующего раздела. Конечно, статья должна быть уже написана – так удобнее.
Делаем весь пункт плана ссылкой: выделяем его мышью и жмем на кнопку визуального редактора «Вставить/редактировать ссылку». Появляется окно, где надо заполнить графы.
Рис.1 (Все скриншоты кликабельны)
Напоминаю, что сейчас мы рассматриваем установку якорей внутри одной статьи. Ссылки на якоря в других статьях или на других сайтах делаются немного по другому.
Итак, нам надо указать адрес ссылки (графа URL). Сначала пишется знак решетки — #, а потом пишется якорь. Я написал #1razdel. Потом, по желанию, пишите заголовок ссылки и нажимаете кнопку «Добавить ссылку».
Потом устанавливаете якорь на второй раздел – делаете ссылку, на третий раздел и т.д.
3. Установка якоря в другой статье
Сразу же – предупреждение: сейчас я буду говорить об установке якоря в другой статье в пределах одного сайта.
Открываете статью для редактирования, находите нужный ее фрагмент, куда вы хотели бы отправить читателя и устанавливаете якорь точно так же, как написано выше.
Потом открываете ту статью, с которой будет идти ссылка, и оформляете ссылку обычным порядком. Единственное отличие – в адресе (URL) ссылки:
Рис.2
Нам надо установить относительный путь к нашему анкору. Конечно, можно устанавливать и абсолютный, но это ни к чему: лишняя работа. Как узнать относительный адрес страницы?
Чуть выше визуального редактора расположена строчка «Постоянная ссылка». Чтобы увидеть ее полностью, кликнем по кнопке «Редактировать»:
Рис.3
Все, что написано в окошке и есть относительный адрес нашей страницы. Копируем текст из окошка и вставляем в графу всплывающего окна «Добавить/ редактировать ссылку»:
Рис.4
Нам надо кое-что дописать:
Поставить слэш (косую черту) перед названием статьи, этим мы укажем, что это относительный путь, т.е. в пределах сайта;
Завершить написание адреса, указав расширение — .html ;
Написать наш якорь — #ИмяЯкоря (у меня а1).
Должно получиться так:
/tak-byl-li-dzh-vashington-polkovodcem.html#a1
Нажимаем кнопку «Добавить ссылку». Переходим на сайт, проверяем.
4. Установка якоря в статье на другом сайте
Для установки якоря на другом сайте в любой статье делаем все точно так же, как написано выше, только в URL ссылки указываем абсолютный адрес, начиная с http://.
В окне для добавления ссылки в графе URL у вас должно быть написано так:
5. Упрощаем работу по установке якорей с помощью шорткодов
Работу по установке якорей в статьи можно автоматизировать с помощью шорткодов и плагина AddQuicktag. Вы знаете, я не сторонник большого количества плагинов, но этот плагин реально полезен для очень многих вещей и даже заменяет собой множество других плагинов – путем легкой и быстрой установке шорткодов. О нем я писал раньше и те, кто не читал эту статью, почитайте и установите себе этот плагин.
Заходим на страницу настроек плагина:
Рис.5
Я на скриншоте показаны все необходимые данные, но сейчас напишу и для вас (копируйте, на здоровье).
Строка «Якорь»: начало тега — <a name=””> , конец тега — </a>.
Строка «Якорь-ссылка»: начало тега — <a href="/.html#">, конец тега — </a>.
Немного поясню. Строка «Якорь-ссылка»: написано все, что раньше вам надо было писать руками. Осталось только вставить URL страницы (после слеша) и якорь (после решетки).
Вписав все эти данные, сохраняем изменения и переходим в редактирование любой статьи. Нам потребуется вкладка HTML визуального редактора.
Рис.6
Устанавливаем курсор в нужном месте (у меня – после слова «победы») и кликаем по кнопке «Якорь». У нас сразу станет такая же картина , как на рис 6: кнопка «Якорь» обзавелась слешем, а в тексте появилась первая часть нашего кода. Вписываем между кавычками сам якорь. Потом нажимаем на кнопку «/Якорь» — тег закроется.
Теперь устанавливаем ссылку на наш якорь. Открывает статью в нужном месте, выделяем — как при копировании — любое слово или фразу и нажимаем кнопку «Якорь-ссылка»:
Рис.7
В появившемся коде надо только вписать относительный адрес страницы и указать наш якорь. После этого можно обновлять страницу и проверять работу якоря на сайте.
Мне кажется, что с шоркодами работать гораздо удобнее. А Вам?
И еще 2 важных совета:
вы не сможете проверить работу якорей, если только сохраните статью, а не опубликуете ее на сайте;
якоря лучше вставить в текст не непосредственно перед началом текста, а чуть выше — читать станет удобнее. Где именно стоит якорь видно по маленькой иконке с якорем в визуальном редакторе.
P.S. – это невероятно удобно. Представьте, завтра 8 Марта, или день рождения, или годовщина свадьбы, а вы в командировке. Как поздравить любимую женщину? Звонок – это само собой. А если утром — цветы?
