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

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

как сделать содержание статьи

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

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

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

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

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

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

В визуальном режиме текстового редактора прописываете текст ссылки. Куда вы хотите направить вашего читателя? Такой текст и пишите. Затем переключаетесь в режим HTML или Текст (по новому) и к этому тексту подставляете вот такой код.

<a href="#name1">в конец поста</a>

То есть из текста вы сделали ссылку, а в свете сегодняшнего урока эта ссылка теперь называется якорем, где name1 — это имя (идентификатор, ID) того элемента (слово, заголовок и т.д), к которому вы посылаете читателя.

Второй шаг. Оставаясь в режиме Текст определите, куда вы будете прикреплять ID. У меня — это предложение «На сегодня все. Пока!», причем оно выделено жирным. Можно его выделить курсивом или подчеркиванием. Просто, как цеплять ID к простому тексту (не выделенному) я не знаю, поэтому, оставаясь в текстовом режиме подставляете к нужному слову, предложению или заголовку вот такой код:

<strong id="name1">На сегодня все. Пока!</strong>

Где id=»name1″ — это и есть наш идентификатор, к которому направляется читатель кликнувший по ссылке «в конец поста».

Надеюсь я понятно разъяснил главную суть понятия якорь и показа, как его сделать.

Теперь вернемся к главной теме урока — Как сделать содержание в статье на сайте

Объясню поподробнее. Зашел посетитель к вам на сайт, на объемную статью с множеством подразделов (в этой статье использую скрины из поста про мобильную версию сайта), а тут “бац”!!! —

soderzanie-statyi2

сразу содержание в начале. Удобно, правда? Человек сразу увидел подробный план статьи и сэкономил свое драгоценное время на поиске нужной ему информации. К тому же, большой плюс такого содержания в том, что кликая по этим ссылкам (якорям) посетитель сразу попадает на нужный ему раздел.

Проще, конечно сделать такое содержание списком, простым или сложным, но мы ведь заботимся о своем читателе, (а это большой плюс к юзабилити вашего сайта) и упрощаем ему задачу в поиске нужной ему информации, делая этот список в виде ссылок.

В чем “соль” создания содержания статьи? В принципе – все просто. Главное правильно вникнуть в суть этого процесса 🙂 Чтобы вам было проще понять, как мы будем создавать это содержание, объясню сначала кратко. В тексте статьи (на любом слове, заголовке, подзаголовке) мы создадим так называемый “идентификатор” (имя) и ссылку (якорь) на него, которая будет находиться в начале статьи – в его содержимом. Все… При клике на ссылку мы сразу будем направлены в то место, где находиться наш якорь.

Последовательность действий создания статьи с ее кратким содержанием (планом)

Сначала просто напишите хороший пост с применением заголовков (H2-H6), выделением жирным (<strong>), чтобы ваш пост желательно был логичен, имел определенную структуру. Ну а дальше мы создадим наше содержание.

  • Шаг № 1 – добавляем идентификаторы (имена, ID) к заголовкам

Определите сначала те части статьи, на которые будете цеплять якоря. Самое логичное – это заголовки в вашей статье. Далее, переключите текстовый редактор в режим Текст (HTML) и найдите тот нужный заголовок. У меня он в той статье выглядит так.

soderzanie-statyi3

Видите, я добавил идентификатор (имя) перед этим заголовком. Вернее я вставил его между тегами h2, перед названием заголовка. Вот оно

id="name1"

Тоже самое проделайте с остальными своими заголовками, только имена давайте разные. id=»name1″, id=»name2″, id=»name3″ и т.д. Поняли?

  • Шаг № 2 – пишем содержимое + делаем из каждого пункта ссылку

То есть, мы к каждому пункту в содержании статьи прицепим наш якорь.

Вы можете в обычном режиме текстового редактора написать содержание статьи, а затем, переключившись в режим Текст (HTML) сделать из каждого пункта ссылку (якорь).

Якорь в содержимом будет выглядеть вот так  — <a href=»#name1″>

<li><a href=»#name1″>Мобильная версия сайта при помощи плагинов</a>

То есть в код списка, перед заголовком мы вставляем ссылку такого вида. И в каждом новом пункте нашего списка содержимого должен быть уникальный якорь.

#name1, #name2, #name3 и т.д.

Внимание! Палец вверх Не забудьте, когда будете редактировать код про решетку – #

Я, когда первый раз делал содержимое статьи, пропустил этот символ кода, ну и естественно ссылки не срабатывали.

Смотрите, как выглядит Текст (HTML) код содержимого статьи про мобильную версию сайта.

soderzanie-statyi

Это код сложного списка. То есть в нем есть и нумерованный и маркированный.

Упрощаю вам задачу. Просто скопируйте у меня этот код и делайте себе содержание ваших статей. Первая строчка – это код рамки.

<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… Пламенный привет

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


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



Просмотр

Подпишитесь на обновления блога по почте :

Количество читателей блога


К записи "Как сделать краткое содержание статьи на сайте. Понятие якоря в тексте" 12 комментариев Самый активный комментатор в конце месяца получает денежный приз.

  1. Бурул:

    Алекс спасибо за подробное описание как сделать краткое содержание статьи в самом начале. И за шпаргалки в виде html отдельное спасибо, мне проще скопировать и вставить, чем самой прописать коды.

    [Ответить]

    Алекс Fomik Reply:

    Пожалуйста Бурул. Какое у вас редкое имя! Первый раз такое встречаю…
    Заходите почаще за полезной инфой!

    [Ответить]

  2. Vlad:

    Привет!

    Да, для объемных постов удобная штука! =)

    Много кликов по adsense?

    [Ответить]

    Алекс Fomik Reply:

    Не Владик — кот наплакал(((
    Ты же видишь посещалку — вот и думай…

    [Ответить]

    Vlad Reply:

    Иногда и при большой посещалке — кот наплакал!

    [Ответить]

    Алекс Fomik Reply:

    Ну, да, и такое бывает)))

    [Ответить]

    Алекс Fomik Reply:

    ЧМ то смотрел? За кого болел в конце чемпионата и в финале?

    [Ответить]

    Vlad Reply:

    Я же писал где-то у тебя, что футбол по ТВ не смотрю… =)

    [Ответить]

    Алекс Fomik Reply:

    Ты вообще его не смотришь или где-то по другим каналам?)))

    [Ответить]

    Vlad Reply:

    Иногда могу посмотреть, а так в общем нет!

    Мне было интересно смотреть когда делал ставки — там присутствовал азарт, но я тебе об где-то писал…

    [Ответить]

  3. Ярослав:

    Алекс, спасибо за столь подробное и толковое разъяснение! Попробую у себя применить этот урок, только немножко позднее. На блог ставлю закладку 🙂

    [Ответить]

    Алекс Fomik Reply:

    Ярослав, всегда — пожалуйста! Рад, что моя статья вам поможет разобраться в этом вопросе…

    [Ответить]

Оставить свой комментарий