Как сделать удобную навигацию по статье с помощью якорей? Как в wordpress поставить якорь
Навигация по странице сайта. Якоря и их применение в WordPress
Все наверное встречали страницы и статьи на сайтах, на которых была бы навигация по ntrcne. Такой подход используется в больших постах, это значительно увеличивает функционал и удобство для ваших посетителей. Для достижения цели используются якоря (анхоры). Навигация по странице сайта иногда играет значительную роль, по этому в статье мы разберем, как устанавливать анхоры для навигации по странице.
Что такое ссылка якорь и как сделать html
Ссылка якорь простыми словами — это ссылка на определенный текст, находящийся на одной и той же странице (возможны якорные ссылки на другие страницы). Другими словами анхоры существуют для создания ссылки, которая прокрутит нашу страницу до определенного, выбранного текста, то-есть создает простую навигацию по странице.
Якоря внедряются для того, что бы читатель сумел найти нужный ему участок текста в статье, не перечитывая все содержание. То-есть, навигация по странице сайта создаеться с помощью ссылки якоря, это в разы уменьшает время потраченное посетителем на прокрутку и поиск информации.
Представьте себе большое руководство или какую нибудь инструкцию, символов эдак на несколько сотен тысяч, без якорей передвижения по ней станет просто немыслимым. Можно часами искать то что нужно. Именно в случаях наподобие этого и приходят на помощь якоря.
Как работает якорь на странице сайта
Якорь работает следующим образом:
- В одном месте мы выделяем нужный нам фрагмент текста, делаем его ссылкой на нужный нам участок страницы.
- В нужном нам участке страницы ставим якорь, на котором остановиться страница при нажатии на ссылку созданной в предыдущем пункте.
На практике все очень просто, находим на странице ссылку на нужный нам участок текста, нажимаем на нее и сразу же оказываемся на той позиции которую мы пожелали увидеть.
Это очень удобно и легко настраивается, убедиться в этом мы сможем разобрав способ использования якорей для создания навигации по тексту.
Навигация по странице сайта, как сделать якорь в тексте
Для того что бы сделать якорь на странице нужно выбрать два фрагмента текста:
- Место которое будет ссылаться на нужный нам текст. Для того что бы создать ссылку-якорь нужно заключить слово или фразу в тег <a> и назначить ему идентификатор. Выглядит это так: <a href= «#1» >текст ссылки </a>;
- текст на который мы будем ссылаться при помощи ссылки созданной ранее. В тег текста («a», «p», «h», «span» и т .д.) нужно поставить нужный нам id. Выглядит это так: <a id= «1»>нужный нам текст</a>.
Давайте попробуем сделать якорь на практике.
К примеру данная ссылка <a href= «#test » > «здесь ссылка» </a>
ссылается на фрагмент текста <a id= «test» > </a> 
«Начало статьи», который находиться сверху статьи. Теперь при нажатии на ссылку, мы увидим начало статьи. Все довольно просто. Ставить якорь нужно не на определенное слово, а именно на позицию слова, то-есть возле нужного слова, тогда проблем не должно возникнуть.
Форматирование и создание якоря нужно проводить только в html редакторе, для WordPress это вкладка «текст» редакторе статьи, для обычного html файла это может быть просто блокнот.
На этом создание якорей на странице закончено, наша навигация по странице сайта создана. Тема довольно простая, но если возникнут вопросы пишите в комментариях обязательно помогу, подскажу.
Рекомендую почитать:
Поделиться ссылкой:
yrokiwp.ru
Как сделать удобную навигацию по статье с помощью якорей?
Иногда бывает необходимым дать ссылку не просто на статью, а на вполне определенную часть этой статьи. Обычно это требуется тогда, когда та, вторая, статья очень обьемная и ваш читатель рискует просто не найти нужную часть или затратить на это много времени. Для этого на сайтах используют специальное средство – якоря.
В статье мы рассмотрим следующие вопросы:
- Что такое якорь (html якорь)?
- Установка якоря внутри статьи
- Установка якоря в другой статье
- Установка якоря в статье на другом сайте
- Упрощаем работу по установке якорей с помощью шорткодов
Содержание статьи
1. Что такое якорь (html якорь)?
Принцип действия якорей простой: в нужном месте статьи вы ставите определенную метку и потом делаете ссылку на нее. Посетитель, кликнув по этой ссылке, сразу попадает в необходимое место второй статьи. Причем, не важно — на каком именно сайте находится эта статья — на этом же или на другом.
Или бывает необходимым сделать план статьи, где, кликнув по какому-то пункту плана, посетитель оказывается именно в этом разделе. Уверен, вы видели подобную организацию статей и сегодня мы с вами этому научимся. Собственно, эта статья именно так и сделана.
Делать мы это будем вручную, т.к. небольшая автоматизация процесса с помощью визуального редактора не решает всех проблем. Кроме того, надо или менять с помощью плагинов визуальный редактор на другой, более продвинутый, или в существующий визуальный редактор добавлять дополнительные кнопки. Но дополнительные плагины только замедляют ваш сайт, а редактирование штатного редактора возможно не во всех темах, поэтому этими способами мы пользоваться не будем.
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 у вас должно быть написано так:
http://www.novichkoff.ru/tak-byl-li-dzh-vashington-polkovodcem.html#a1
5. Упрощаем работу по установке якорей с помощью шорткодов
Работу по установке якорей в статьи можно автоматизировать с помощью шорткодов и плагина AddQuicktag. Вы знаете, я не сторонник большого количества плагинов, но этот плагин реально полезен для очень многих вещей и даже заменяет собой множество других плагинов – путем легкой и быстрой установке шорткодов. О нем я писал раньше и те, кто не читал эту статью, почитайте и установите себе этот плагин.
Заходим на страницу настроек плагина:
Рис.5
Я на скриншоте показаны все необходимые данные, но сейчас напишу и для вас (копируйте, на здоровье).
Строка «Якорь»: начало тега — <a name=””> , конец тега — </a>.
Строка «Якорь-ссылка»: начало тега — <a href="/.html#">, конец тега — </a>.
Немного поясню. Строка «Якорь-ссылка»: написано все, что раньше вам надо было писать руками. Осталось только вставить URL страницы (после слеша) и якорь (после решетки).
Вписав все эти данные, сохраняем изменения и переходим в редактирование любой статьи. Нам потребуется вкладка HTML визуального редактора.
Устанавливаем курсор в нужном месте (у меня – после слова «победы») и кликаем по кнопке «Якорь». У нас сразу станет такая же картина , как на рис 6: кнопка «Якорь» обзавелась слешем, а в тексте появилась первая часть нашего кода. Вписываем между кавычками сам якорь. Потом нажимаем на кнопку «/Якорь» — тег закроется.
Теперь устанавливаем ссылку на наш якорь. Открывает статью в нужном месте, выделяем — как при копировании — любое слово или фразу и нажимаем кнопку «Якорь-ссылка»:
Рис.7
В появившемся коде надо только вписать относительный адрес страницы и указать наш якорь. После этого можно обновлять страницу и проверять работу якоря на сайте.
Мне кажется, что с шоркодами работать гораздо удобнее. А Вам?И еще 2 важных совета:
- вы не сможете проверить работу якорей, если только сохраните статью, а не опубликуете ее на сайте;
- якоря лучше вставить в текст не непосредственно перед началом текста, а чуть выше — читать станет удобнее. Где именно стоит якорь видно по маленькой иконке с якорем в визуальном редакторе.
P.S. Доставка цветов – это невероятно удобно. Представьте, завтра 8 Марта, или день рождения, или годовщина свадьбы, а вы в командировке. Как поздравить любимую женщину? Звонок – это само собой. А если утром — цветы?
www.novichkoff.ru
Как вставить якорь в текс
Все мы знаем, что такое анкор или гиперссылка – иногда расстановка внутренних и внешних ссылок становится смыслом всей работы блоггера, основой его заработка. Но про другую разновидность ссылок мы часто забываем, хотя они крайне полезны. Такие ссылки – якоря – улучшают юзабилити сайта (возможности пользования ресурсом для посетителей). А уж удобство юзабилити – одно из важнейших условий хорошего имиджа нашего блога и в глазах читателей, и в глазах поисковиков (по крайней мере, они постоянно это декларируют!)
Якорь и анкор
Вот как выглядит код гиперссылки или анкора:
<a href= “http://site.ru/post/” title=”текст всплывающий при наведении курсора на нашу ссылку” target=”_blank” >текст ссылки на пост</a>Кстати, здесь мы видим знакомый атрибут title, который нам встречался и в коде для оптимизации изображений. Атрибут target=”_blank” указывает, что ссылка будет открываться в новом окне (чтобы читатель не ушел с текущей страницы, не дочитав ее).
Но бывает, и очень часто, что нам нужно сослаться на какую-то часть текущей публикации. Самый простой пример – ссылка с текстом «наверх», нажав на которую, читатель вернется к заголовку статьи. Возможно у нас в тексте есть списки, перечисления, определения, которые важны для понимания отдельных его частей. Вместо того, чтобы объясняться, мол, вот выше мы писали о том и о том – можно просто поставить якорь, который вернет посетителя к нужному определению.
Пример:
Нажмите на стрелочку, чтобы вернуться к началу этой статьи
Нажмите на стрелочку, чтобы увидеть финал статьи
Другими словами, якорь является ссылкой не на всю страницу целиком, а на ее определенную часть. Часть, которая отмечена якорем, будет отображаться в самом верху страницы, открывшейся по ссылке (или текущая страница «перемотается» так, чтобы нужный фрагмент оказался в самом ее верху).
Как поставить якорь в публикации?
Посмотрим на простейший код, который оформляет текст:
<p>Трам-пам-пам! Здесь у нас текст.</p>
Или это заголовок, например, второго уровня
<h3>Наш заголовок велик и прекрасен</h3>
Чтобы отметить любой элемент текста якорем, нужно дописать следующую часть кода:
<p name=”text”>Трам-пам-пам! Здесь у нас текст.</p>
<h3 name=”text1”>Наш заголовок велик и прекрасен</h3>
<p id=”text”>Трам-пам-пам! Здесь у нас текст.</p>
<h3 id=”text1”>Наш заголовок велик и прекрасен</h3>
Сначала разберемся, что мы написали: name=”text” или id=”text” – это атрибуты, устанавливающие якорь. Вариант id=”…” – более «продвинутый», более валидный, то есть, соответствующий последним стандартам W3C. Для шаблонов, написанных на языке xhtml нужно использовать только его. Но для шаблонов, созданных при помощи html – подойдет и атрибут name=»…» Некоторые предлагают даже записывать так:
<p id=”text” name=”text”>Трам-пам-пам! Здесь у нас текст.</p>
Я считаю последний вариант избыточным. Попробуйте писать id, если не будет работать – меняйте его на name.
Слово text в кавычках – просто пример. Вы можете написать там любые метки, которые будут вам понятны. Требования к таким меткам: они должны быть написаны латиницей и начинаться с буквы. Также, привыкайте всё писать строчными буквами – для xhtml это правило, а для html – хороший тон.
Итак, мы расставили по тексту метки id=”text”, id=”text1”, id=”text2” и т.д. Теперь будем на них ссылаться.
Как сослаться на якорь в текущей публикации?
Если мы в статье хотим сослаться на часть этой же статьи (без перехода на другую страницу блога), то в нужном месте ставим ссылку такого вида:
<p>Вот наш текст со <a id=”#text1”>ссылкой на текст №1</a>.</p>
Выглядеть она будет, как обычная гиперссылка. Но при нажатии перенесет читателя к той части текста, которая была нами отмечена, как id=”text1”.
В примере с картинками код, окружающий картинку, выглядит так:
<a href=”#top”><img scr=»http;//site.ru/…/…/arrow_up.png» /></a>
То есть, вместо атрибута id стоит href.
Как сослаться на фрагмент другой страницы?
Но нередко нам важно ссылаться на части других страниц. Например, в другой публикации содержится важная информация, но она расположена в конце статьи. Если мы ставим обычную гиперссылку – документ откроется с заголовка и читателю придется самому искать в тексте нужную информацию. Будет ли он это делать? Быстро ли найдет важный фрагмент в незнакомом тексте? – Вопросы непростые…
Но мы способны облегчить задачу, которую сами ставим перед посетителем. Он будет благодарен. А сделать это – легко. Прописываем обычную гиперссылку:
<p>Вот наш текст <a href= “http://site.ru/post/#text1” title=”” target=”_blank” >со ссылкой на фрагмент другого поста</a>.</p>Найди 10 отличий!))) Мы подписали название анкора к адресу ссылки. Не забываем предварять эту метку знаком # — именно в ссылке.
Работа с якорями сначала может показаться слишком сложной. Я сама, зная о возможности расстановки таких ссылок, пренебрегала ею. Но какая часть ведения блога является простой? Никто ведь не заставляет нас размечать каждый абзац текста. Но какие-то важные его части, на которые вы планируете часто ссылаться, стоит пометить.
И, вуаля! Теперь читатели непринужденно серфят по нашему блогу – им удобно, им приятно, им совершенно не хочется куда-то уходить…
А что еще нужно блоггеру?! — Ну, разве, чтобы вы делились его постом в социальных сетях и комментировали его!
blogotey.ru
