Как сделать краткое содержание статьи на сайте. Понятие якоря в тексте
Всем привет! Чемпионат мира по футболу никак не дает мне покоя, поэтому блог мной этим летом конкретно забросился. Пора написать мега-полезную статью для своих читателей))) Вперед и с песней!
Зачем нужно краткое содержание в начале статьи? Ответ прост: – Для удобства посетителя (читателя) + поисковики любят такие мелочи. Особенно этот план вашей статьи будет очень полезен в объемных постах, которая разделена на множество подразделов и отвечает на массу вопросов.
Перед тем, как вам объяснять, как сделать содержание в статье, необходимо сначала рассказать о понятии «якорь».
Что такое якорь в тексте статьи?
Якорь (текстовый) – это внутренняя ссылка, ведущая при клике в определенное место статьи. Это мое собственное определение этого понятия и я думаю, что оно правильное.
Видите выше ссылку «в середину поста» ? При нажатии на нее вы быстро спускаетесь вниз и оказываетесь действительно в середине статьи. Подобная ссылка «в начало поста» есть и внизу. Как это работает? Не буду лить много воды, а покажу сразу техническую сторону этой кухни.
В визуальном режиме текстового редактора прописываете текст ссылки. Куда вы хотите направить вашего читателя? Такой текст и пишите. Затем переключаетесь в режим HTML или Текст (по новому) и к этому тексту подставляете вот такой код.
То есть из текста вы сделали ссылку, а в свете сегодняшнего урока эта ссылка теперь называется якорем, где name1 — это имя (идентификатор, ID) того элемента (слово, заголовок и т.д), к которому вы посылаете читателя.
Второй шаг. Оставаясь в режиме Текст определите, куда вы будете прикреплять ID. У меня — это предложение «На сегодня все. Пока!», причем оно выделено жирным. Можно его выделить курсивом или подчеркиванием. Просто, как цеплять ID к простому тексту (не выделенному) я не знаю, поэтому, оставаясь в текстовом режиме подставляете к нужному слову, предложению или заголовку вот такой код:
Где id=»name1″ — это и есть наш идентификатор, к которому направляется читатель кликнувший по ссылке «в конец поста».
Надеюсь я понятно разъяснил главную суть понятия якорь и показа, как его сделать.
Теперь вернемся к главной теме урока — Как сделать содержание в статье на сайте
Объясню поподробнее. Зашел посетитель к вам на сайт, на объемную статью с множеством подразделов (в этой статье использую скрины из поста про мобильную версию сайта), а тут “бац”. —
сразу содержание в начале. Удобно, правда? Человек сразу увидел подробный план статьи и сэкономил свое драгоценное время на поиске нужной ему информации. К тому же, большой плюс такого содержания в том, что кликая по этим ссылкам (якорям) посетитель сразу попадает на нужный ему раздел.
Проще, конечно сделать такое содержание списком, простым или сложным, но мы ведь заботимся о своем читателе, (а это большой плюс к юзабилити вашего сайта) и упрощаем ему задачу в поиске нужной ему информации, делая этот список в виде ссылок.
В чем “соль” создания содержания статьи? В принципе – все просто. Главное правильно вникнуть в суть этого процесса 🙂 Чтобы вам было проще понять, как мы будем создавать это содержание, объясню сначала кратко. В тексте статьи (на любом слове, заголовке, подзаголовке) мы создадим так называемый “идентификатор” (имя) и ссылку (якорь) на него, которая будет находиться в начале статьи – в его содержимом. Все… При клике на ссылку мы сразу будем направлены в то место, где находиться наш якорь.
Последовательность действий создания статьи с ее кратким содержанием (планом)Сначала просто напишите хороший пост с применением заголовков (H2-H6), выделением жирным (<strong>), чтобы ваш пост желательно был логичен, имел определенную структуру. Ну а дальше мы создадим наше содержание.
- Шаг № 1 – добавляем идентификаторы (имена, ID) к заголовкам
Определите сначала те части статьи, на которые будете цеплять якоря. Самое логичное – это заголовки в вашей статье. Далее, переключите текстовый редактор в режим Текст (HTML) и найдите тот нужный заголовок. У меня он в той статье выглядит так.
Видите, я добавил идентификатор (имя) перед этим заголовком. Вернее я вставил его между тегами h2, перед названием заголовка. Вот оно
Тоже самое проделайте с остальными своими заголовками, только имена давайте разные. и т.д. Поняли?
- Шаг № 2 – пишем содержимое + делаем из каждого пункта ссылку
То есть, мы к каждому пункту в содержании статьи прицепим наш якорь.
Вы можете в обычном режиме текстового редактора написать содержание статьи, а затем, переключившись в режим Текст (HTML) сделать из каждого пункта ссылку (якорь).
Якорь в содержимом будет выглядеть вот так — <a href=»#name1″>
<li><a href=»#name1″>Мобильная версия сайта при помощи плагинов</a>
То есть в код списка, перед заголовком мы вставляем ссылку такого вида. И в каждом новом пункте нашего списка содержимого должен быть уникальный якорь.
#name1, #name2, #name3 и т.д.
Внимание! Не забудьте, когда будете редактировать код про решетку – #
Я, когда первый раз делал содержимое статьи, пропустил этот символ кода, ну и естественно ссылки не срабатывали.
Смотрите, как выглядит Текст (HTML) код содержимого статьи про мобильную версию сайта.
Это код сложного списка. То есть в нем есть и нумерованный и маркированный.
Упрощаю вам задачу. Просто скопируйте у меня этот код и делайте себе содержание ваших статей. Первая строчка – это код рамки.
Если вы хотите сделать содержание нумерованным списком, то тогда вот такой код:
Если будите создавать содержание из маркированного списка, то код такой:
Друзья, кому был не понятен сегодняшний урок – задавайте вопросы в комментариях. Отвечу всем.
Кто не хочет учиться делать содержимое статьи и кому нужно его просто сделать на заказ – обращайтесь на почту через кнопку Контакты. Помогу за определенную услугу мне 🙂