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

banner-1shag-book250

Как вы знаете, за последние годы я проходила много тренингов, обучающих и работе с сайтом, и партнёрскому маркетингу.  Одним из лучших учителей считаю Евгения Вергуса и его три тренинга: первый – бесплатное обучение построению сайта, второй —  монетизация и развитие сайта, а третье – заработок  с партнёрскими программами. И очень часто я работала вместе со своими наставниками, которых спрашивала, как сделать кликабельное содержание в начале длинной статьи. Увы, мне ответили, что это довольно сложно и проще написать короткие статьи, чем одну длинную. Но всё же я нашла выход и сегодня вам расскажу, как сделать в статье содержание с гиперссылками.

Делаем содержание с гиперссылками

Итак, делаем содержание вот такого типа:

В самом простом содержании не будем делать подпункты, а ограничимся самым простым кликабельным списком.

Для этого переходим в редактирование статьи во вкладке «Текст». Он уже должен быть полностью написан и разбит на пункты, оформленные заголовками 2 или 3.

Обычно содержание статьи пишется после введения, поэтому ставим курсор в нужное место и вставляем вот такой код.

<ol>

                <li><a href=»#R1″>Когда лучше посадить эустому</a></li>

                <li><a href=»#R2″>Как посадить эустому семенами на рассаду</a></li>

                <li><a href=»#R3″>Как посадить эустому в торфяные таблетки</a></li>

                <li><a href=»#R4″>Как посадить эустому на вермикулит</a></li>

                <li><a href=»#R5″>Как посадить эустому в обычный грунт на рассаду</a></li>

                <li><a href=»#R6″>Видео: посадка эустомы в бороздки с песком</a></li>

</ol>

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

Далее просматриваем свою статью и напротив каждого заглавия ставим соответствующее R. Не перепутайте порядок номеров, иначе гиперссылка не сработает в нужное место. Каждому заголовку, который будет в содержании, нужно присвоить свой id.

<h2 id=»R1″>Когда лучше посадить эустому</h2>

Или так:

<h3 id=»R4″>Как посадить эустому на вермикулит</h3>

 

Как видите, размер заголовка (h2 или h3) не влияет в данном случае на структуру содержания. Вместо выделенного красным текста нужно подставить свой. Лично мне проще скопировать вот такой готовый текст с кавычками, чем отыскивать эти /< значки на клавиатуре 🙂

Важно правильно присвоить номера R в соответствии со структурой статьи.

После написания статьи и оформлении содержания с гиперссылками желательно просмотреть запись и покликать все пункты содержания, чтобы удостовериться в том, что всё работает нормально.

В ближайшее будущее буду осваивать более сложный вид кликабельного содержания статьи, в том числе выделенного цветом и в рамочке.

Спасибо, что поделились статьей в социальных сетях.

Обсуждение: 4 комментария

  1. Очень интересно, ведь мы все в этом заинтересованы.

    Ответить
  2. Спасибо! Понятия не имела, как то делать.
    Буду пробовать.

    Ответить
  3. Хороший способ сделать содержание статьи. Однако, и он может иногда подвести. Поскольку на практике, иногда код сбивается, и содержание перестает появляться

    Ответить
    1. Ирина:

      Александр, спасибо за пояснения. У меня пока не очень много таких статей с содержанием, потому что я обычно не пишу объемных статей. Но теперь буду знать, что иногда и он подводит.

      Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

© 2019 Доход из Сети ·  Политика конфеденциальности