Як зробити зручну навігацію по статті за допомогою якорів

У статті ми розглянемо такі питання:

1. Що таке якір (html якір)?

2. Встановлення якоря всередині статті

Замість слова ЯКОРЬ ви вказуєте якесь ім'я. Воно може бути пов'язано з темою статті (або фрагмента статті) або бути довільним, наприклад, а1. Краще писати тематичний якір - при можливому майбутньому редагуванні статті вам самим потім буде набагато легше розбиратися з її структурою.

Замість слова «текст» можете щось вказати, а можете не вказувати, тоді ваш якір буде писатися таким чином:

Зрозуміло, що цей якір для відвідувачів буде не видно, на відміну від першого варіанта написання.

Власне, ось цим і обмежується функціонал кнопок для додавання якоря: з'являється вікно, куди треба вписати текст якоря. Другу частину роботи вам все одно доведеться робити вручну.

До речі, і це важливо: коли пишіть лапки в коді вказуйте їх в латинській розкладці клавіатури, а не російської, тобто треба так - "", а не так - «». Інакше WordPress сам додасть ще додаткові лапки.

Рис.1 (Всі скріншоти клікабельні)

Потім встановлюєте якір на другий розділ - робите посилання, на третій розділ і т.д.

3. Установка якоря в іншій статті

Відразу ж - попередження: зараз я буду говорити про встановлення якоря в іншій статті в межах одного сайту.

Відкриваєте статтю для редагування, знаходите потрібний її фрагмент, куди ви хотіли б відправити читача і встановлюєте якір точно так же, як написано вище.

Нам треба дещо дописати:

Має вийти так:

Натискаємо кнопку «Додати посилання». Переходимо на сайт, перевіряємо.

4. Встановлення якоря в статті на іншому сайті

У вікні для додавання посилання в графі URL у вас має бути написано так:

5. Спрощуємо роботу по установці якорів за допомогою шорткодов

Роботу по установці якорів в статті можна автоматизувати за допомогою шорткодов і плагіна AddQuicktag. Ви знаєте, я не прихильник великої кількості плагінів, але цей плагін реально корисний для дуже багатьох речей і навіть замінює собою безліч інших плагінів - шляхом легкої і швидкої установки шорткодов. Про нього я писав раніше і ті, хто не читав цю статтю, почитайте і встановіть собі цей плагін.

Заходимо на сторінку налаштувань плагіна:

Я на скріншоті показані всі необхідні дані, але зараз напишу і для вас (копіюйте, на здоров'я).

Рядок «Якір»: початок тега - . кінець тега - .

Встановлюємо курсор в потрібному місці (у мене - після слова «перемоги») і натискаємо на кнопку «Якір». У нас відразу стане така ж картина. як на рис 6: кнопка «Якір» обзавелася слешем, а в тексті з'явилася перша частина нашого коду. Вписуємо між лапками сам якір. Потім натискаємо на кнопку «/ Якір» - тег закриється.

Мені здається, що з шоркодамі працювати набагато зручніше. А вам?
І ще 2 важливих ради:

Схожі записи по цій темі:

11 thoughts on "Як зробити зручну навігацію по статті за допомогою якорів? "

Всередині статті подужала, як і куди вставити анкор. А ось з однієї статті на іншу поки зависла. Начебто все роблю, КАМК написано, а при переході по цьому анкор помилка 404. Завтра продовжу. Якщо довго мучіться- що небудь вийде.

Добридень! Допоможіть чайникам.

Підкажіть, як зробити якір: перехід з однієї сторінки на статтю на іншій сторінці. Робила по Вашій інструкції - не виходить. Що я роблю не так?

Я хочу з моєї сторінки «перукарня» при кліці на слова «нарощування волосся», щоб клієнт переходив на статтю «нарощування волосся» в рубриці «гарне волосся». Для цього перед першими словами статті «нарощування волосся» в рубриці «гарне волосся» я прописала якір

Ірина, а навіщо тут якір? Зробіть звичайне посилання на потрібну сторінку. А фотографія на якір не впливає.

Добрий день.Напісано докладно, як раз для чайників, теж використовую якоря.Ещё йде плюсом до перелинковке страніц.Плагін ні такої встановлений який светуете Ви, встановив, будемо пробовать.У Вас невелика помилка в тексті, І ще 2 важливі (й) ради: Дякую удачі. Верстка сайту

Степан, спасибі за підказку. І вам щасти!

Тільки що додала на сайт 2 своїх перших якоря. Статті великі, вони так і просилися. Дякую за таке докладний і зрозумілий опис!

Будь ласка, Світлана. Бажаю успіхів!

У мене на сайті статті по 1500-2500 слів, а ну знайди потрібний абзац - голову зломиш? А тут мишкою клацнув по посиланню - і ти в потрібному місці. Просто пісня!

А викладено як! Просто, дохідливо, все розкладено по поличках - ну прямо для таких як я ( «особливо обдарованих»). Поважаю таких вчителів.

Одним словом, спасибі, Сергій, за дуже потрібну статтю.

З повагою, Борис

Борис, спасибі і Вам: після таких слів хочеться писати більше і частіше.

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

Вибачте, у вас тут очепатка! невелика - "якоря краще вставити в текст не безпосередньо перед початком Чекста-. а трохи.

Дякую за підказку, Поліна.

Схожі статті