Как сделать краткое содержание статьи на сайте. Понятие якоря в тексте
Всем привет! Чемпионат мира по футболу никак не дает мне покоя, поэтому блог мной этим летом конкретно забросился. Пора написать мега-полезную статью для своих читателей))) Вперед и с песней!
Зачем нужно краткое содержание в начале статьи? Ответ прост: – Для удобства посетителя (читателя) + поисковики любят такие мелочи. Особенно этот план вашей статьи будет очень полезен в объемных постах, которая разделена на множество подразделов и отвечает на массу вопросов.
Перед тем, как вам объяснять, как сделать содержание в статье, необходимо сначала рассказать о понятии «якорь».
Что такое якорь в тексте статьи?
Якорь (текстовый) – это внутренняя ссылка, ведущая при клике в определенное место статьи. Это мое собственное определение этого понятия и я думаю, что оно правильное.
Видите выше ссылку «в середину поста» ? При нажатии на нее вы быстро спускаетесь вниз и оказываетесь действительно в середине статьи. Подобная ссылка «в начало поста» есть и внизу. Как это работает? Не буду лить много воды, а покажу сразу техническую сторону этой кухни.
В визуальном режиме текстового редактора прописываете текст ссылки. Куда вы хотите направить вашего читателя? Такой текст и пишите. Затем переключаетесь в режим HTML или Текст (по новому) и к этому тексту подставляете вот такой код.
<a href="#name1">в конец поста</a>
То есть из текста вы сделали ссылку, а в свете сегодняшнего урока эта ссылка теперь называется якорем, где name1 — это имя (идентификатор, ID) того элемента (слово, заголовок и т.д), к которому вы посылаете читателя.
Второй шаг. Оставаясь в режиме Текст определите, куда вы будете прикреплять ID. У меня — это предложение «На сегодня все. Пока!», причем оно выделено жирным. Можно его выделить курсивом или подчеркиванием. Просто, как цеплять ID к простому тексту (не выделенному) я не знаю, поэтому, оставаясь в текстовом режиме подставляете к нужному слову, предложению или заголовку вот такой код:
<strong id="name1">На сегодня все. Пока!</strong>
Где id=»name1″ — это и есть наш идентификатор, к которому направляется читатель кликнувший по ссылке «в конец поста».
Надеюсь я понятно разъяснил главную суть понятия якорь и показа, как его сделать.
Теперь вернемся к главной теме урока — Как сделать содержание в статье на сайте
Объясню поподробнее. Зашел посетитель к вам на сайт, на объемную статью с множеством подразделов (в этой статье использую скрины из поста про мобильную версию сайта), а тут “бац”!!! —
сразу содержание в начале. Удобно, правда? Человек сразу увидел подробный план статьи и сэкономил свое драгоценное время на поиске нужной ему информации. К тому же, большой плюс такого содержания в том, что кликая по этим ссылкам (якорям) посетитель сразу попадает на нужный ему раздел.
Проще, конечно сделать такое содержание списком, простым или сложным, но мы ведь заботимся о своем читателе, (а это большой плюс к юзабилити вашего сайта) и упрощаем ему задачу в поиске нужной ему информации, делая этот список в виде ссылок.
В чем “соль” создания содержания статьи? В принципе – все просто. Главное правильно вникнуть в суть этого процесса 🙂 Чтобы вам было проще понять, как мы будем создавать это содержание, объясню сначала кратко. В тексте статьи (на любом слове, заголовке, подзаголовке) мы создадим так называемый “идентификатор” (имя) и ссылку (якорь) на него, которая будет находиться в начале статьи – в его содержимом. Все… При клике на ссылку мы сразу будем направлены в то место, где находиться наш якорь.
Последовательность действий создания статьи с ее кратким содержанием (планом)
Сначала просто напишите хороший пост с применением заголовков (H2-H6), выделением жирным (<strong>), чтобы ваш пост желательно был логичен, имел определенную структуру. Ну а дальше мы создадим наше содержание.
- Шаг № 1 – добавляем идентификаторы (имена, ID) к заголовкам
Определите сначала те части статьи, на которые будете цеплять якоря. Самое логичное – это заголовки в вашей статье. Далее, переключите текстовый редактор в режим Текст (HTML) и найдите тот нужный заголовок. У меня он в той статье выглядит так.
Видите, я добавил идентификатор (имя) перед этим заголовком. Вернее я вставил его между тегами h2, перед названием заголовка. Вот оно
id="name1"
Тоже самое проделайте с остальными своими заголовками, только имена давайте разные. id=»name1″, id=»name2″, id=»name3″ и т.д. Поняли?
- Шаг № 2 – пишем содержимое + делаем из каждого пункта ссылку
То есть, мы к каждому пункту в содержании статьи прицепим наш якорь.
Вы можете в обычном режиме текстового редактора написать содержание статьи, а затем, переключившись в режим Текст (HTML) сделать из каждого пункта ссылку (якорь).
Якорь в содержимом будет выглядеть вот так — <a href=»#name1″>
<li><a href=»#name1″>Мобильная версия сайта при помощи плагинов</a>
То есть в код списка, перед заголовком мы вставляем ссылку такого вида. И в каждом новом пункте нашего списка содержимого должен быть уникальный якорь.
#name1, #name2, #name3 и т.д.
Внимание! Не забудьте, когда будете редактировать код про решетку – #
Я, когда первый раз делал содержимое статьи, пропустил этот символ кода, ну и естественно ссылки не срабатывали.
Смотрите, как выглядит Текст (HTML) код содержимого статьи про мобильную версию сайта.
Это код сложного списка. То есть в нем есть и нумерованный и маркированный.
Упрощаю вам задачу. Просто скопируйте у меня этот код и делайте себе содержание ваших статей. Первая строчка – это код рамки.
<div style="border: 1px dotted black; padding: 5px 5px 0 15px; margin: 5px;"> <strong>Содержание статьи:</strong> <ol> <li><a href="#name1">Мобильная версия сайта при помощи плагинов</a> <ul> <li><a href="#name2">Базовые настройки плагина</a></li> <li><a href="#name3">Темы и расширения</a></li> <li><a href="#name4">Параметры темы</a></li> <li><a href="#name5">Настройка меню</a></li> </ul> </li> <li><a href="#name6">Мобильная версия сайта при помощи специальных сервисов</a> <ul> <li><a href="#name7">Настройка дизайна, стилей, заголовков и страниц</a></li> <li><a href="#name8">Подсказка</a></li> </ul> </li> </ol> </div>
Если вы хотите сделать содержание нумерованным списком, то тогда вот такой код:
<div style="border: 1px dotted black; padding: 5px 5px 0 15px; margin: 5px;"> <strong>Содержание статьи:</strong> <ol> <li><a href="#name1">Мобильная версия сайта при помощи плагинов</a> </li> <li><a href="#name2">Базовые настройки плагина</a> </li> <li><a href="#name3">Темы и расширения</a> </li> <li><a href="#name4">Параметры темы</a> </li> <li><a href="#name5">Настройка меню</a> </li> </ol> </div>
Если будите создавать содержание из маркированного списка, то код такой:
<div style="border: 1px dotted black; padding: 5px 5px 0 15px; margin: 5px;"> <strong>Содержание статьи:</strong> <ul> <li><a href="#name2">Базовые настройки плагина</a> </li> <li><a href="#name3">Темы и расширения</a> </li> <li><a href="#name4">Параметры темы</a> </li> <li><a href="#name5">Настройка меню</a> </li> <li><a href="#name6">Мобильная версия сайта при помощи специальных сервисов</a> </li> <li><a href="#name7">Настройка дизайна, стилей, заголовков и страниц</a> </li> <li><a href="#name8">Подсказка</a> </li> </ul> </div>
Друзья, кому был не понятен сегодняшний урок – задавайте вопросы в комментариях. Отвечу всем.
Кто не хочет учиться делать содержимое статьи и кому нужно его просто сделать на заказ – обращайтесь на почту через кнопку Контакты. Помогу за определенную услугу мне 🙂
Надеюсь, что сегодняшний урок был вам полезен.
На сегодня все. Пока!
Ваш Fomik…
Алекс спасибо за подробное описание как сделать краткое содержание статьи в самом начале. И за шпаргалки в виде html отдельное спасибо, мне проще скопировать и вставить, чем самой прописать коды.
[Ответить]
Алекс Fomik Reply:
Июль 11th, 2014 at 11:13 пп
Пожалуйста Бурул. Какое у вас редкое имя! Первый раз такое встречаю…
Заходите почаще за полезной инфой!
[Ответить]
Привет!
Да, для объемных постов удобная штука! =)
Много кликов по adsense?
[Ответить]
Алекс Fomik Reply:
Июль 11th, 2014 at 11:15 пп
Не Владик — кот наплакал(((
Ты же видишь посещалку — вот и думай…
[Ответить]
Vlad Reply:
Июль 11th, 2014 at 11:26 пп
Иногда и при большой посещалке — кот наплакал!
[Ответить]
Алекс Fomik Reply:
Июль 17th, 2014 at 2:06 дп
Ну, да, и такое бывает)))
[Ответить]
Алекс Fomik Reply:
Июль 17th, 2014 at 2:06 дп
ЧМ то смотрел? За кого болел в конце чемпионата и в финале?
[Ответить]
Vlad Reply:
Июль 21st, 2014 at 11:25 пп
Я же писал где-то у тебя, что футбол по ТВ не смотрю… =)
[Ответить]
Алекс Fomik Reply:
Июль 23rd, 2014 at 10:37 дп
Ты вообще его не смотришь или где-то по другим каналам?)))
[Ответить]
Vlad Reply:
Июль 23rd, 2014 at 11:32 дп
Иногда могу посмотреть, а так в общем нет!
Мне было интересно смотреть когда делал ставки — там присутствовал азарт, но я тебе об где-то писал…
[Ответить]
Алекс, спасибо за столь подробное и толковое разъяснение! Попробую у себя применить этот урок, только немножко позднее. На блог ставлю закладку 🙂
[Ответить]
Алекс Fomik Reply:
Август 12th, 2014 at 6:58 пп
Ярослав, всегда — пожалуйста! Рад, что моя статья вам поможет разобраться в этом вопросе…
[Ответить]