Как сделать краткое содержание статьи на сайте. Понятие якоря в тексте

Всем привет! Чемпионат мира по футболу никак не дает мне покоя, поэтому блог мной этим летом конкретно забросился. Пора написать мега-полезную статью для своих читателей))) Вперед и с песней!

Зачем нужно краткое содержание в начале статьи? Ответ прост: – Для удобства посетителя (читателя) + поисковики любят такие мелочи. Особенно этот план вашей статьи будет очень полезен в объемных постах, которая разделена на множество подразделов и отвечает на массу вопросов.

в середину поста

Перед тем, как вам объяснять, как сделать содержание в статье, необходимо сначала рассказать о понятии «якорь».

Что такое якорь в тексте статьи?

Якорь (текстовый) – это внутренняя ссылка, ведущая при клике в определенное место статьи. Это мое собственное определение этого понятия и я думаю, что оно правильное.

Видите выше ссылку «в середину поста» ? При нажатии на нее вы быстро спускаетесь вниз и оказываетесь действительно в середине статьи. Подобная ссылка «в начало поста» есть и внизу. Как это работает? Не буду лить много воды, а покажу сразу техническую сторону этой кухни.

В визуальном режиме текстового редактора прописываете текст ссылки. Куда вы хотите направить вашего читателя? Такой текст и пишите. Затем переключаетесь в режим 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…

в начало поста

Понравилась статья - поделись с друзьями!