Как сделать оглавление (содержание, меню) для статьи на сайте

Как сделать содержание (оглавление, меню) для статьи на сайте?

Обновлено 11.06.17

Как сделать содержание (оглавление, меню) для статьи на сайте?

Оценок еще нет

Краткое содержание (оглавление) в статье с кликабельными ссылками-якорями – очень полезная плюшка, как для читателей, так и для владельца блога.

Такое меню в статьях вы, наверное, уже неоднократно встречали у меня на SEO Блоге Лентяйки и на других сайтах. Сложно ли сделать такую фишку? Очень просто!

Преимущества краткого содержания в статье

Содержание статьи решает сразу несколько задач.

  • Читатель с первого взгляда может понять, о чем статья, и решит ли она его проблему.
  • Читателю удобно перемещаться по смысловым блокам текста.
  • Внимание посетителя может зацепить какой-нибудь пункт меню в оглавлении, и он задержится на странице.
  • В содержании статьи можно использовать ключевые фразы, под которыми продвигается статья. Нередко фрагмент краткого содержания попадает в сниппет поисковой выдачи. И смотрится он там очень эффектно!

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

Все очень просто. У меня на рабочем столе компьютера хранится текстовый файл с кодами, которыми я часто пользуюсь.

Там хранится код для вывода содержания статьи. Вот он.

    Содержание       

  1. Пункт меню 1
  2.       

  3. Пункт меню 2
  4.       

  5. Пункт меню 3
  6.       

  7. Пункт меню 4
  8.       

  9. Пункт меню 5
  10.       

  11. Пункт меню 6
  12.       

  13. Пункт меню 7

Я его просто вставляю в начале статьи в редакторе WordPress в режиме HTML. При переключении между визуальным редактором и HTML редактором он никуда не пропадает.

Вместо «пункт меню 1» и «пункт меню 2» я просто пишу подзаголовки статьи. Если нужно, то удаляю лишние пункты оглавления или добавляю новые.

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

Код якоря рядом с подзаголовком такой:

Просто вставляю этот код якоря перед той строчкой, к которой хочу перенести читателя моего повествования.

Из чего состоит этот код содержания статьи? Он представляет собой HTML запись, служащую для вывода списка с цифрами.

Стандартный нумерованный список выводят так:

    список с цифрами       

  1. пункт 1
  2.       

  3. пункт 2
  4.       

  5. пункт 3
  6.       

  7. пункт 4
  8.       

  9. пункт 5

Для списка оглавления задан конкретный стиль с помощью идентификатора:

    Это значит, что в файл style.css нужно добавить конкретное правило отображения блока с оглавлением статьи. Тогда у сдержания статьи появится приятный фон и любые финтифлюшки, какие вы захотите. Чуть ниже, я объясню, как это сделать.

    В каждом конкретном пункте меню содержится ссылка на ярлык:

    Каждой ссылке на ярлык соответствует конкретный ярлык в тексте:

    Резюме:

    В режиме HTML редактора вы вставляете код для вывода содержания статьи, а потом по тексту в этом же режиме разбрасываете ярлыки.

    Вроде все просто объяснила. Если есть вопросы – задавайте в комментариях.

    Если все понятно, то нам осталось только настроить стиль содержания статьи.

    Как сделать красивое содержание статьи: прописываем стили

    Открываете в админке WordPress «Внешний вид» – «Редактор».

    Листаете файл style.css.

    Там, где описываются стили нумерованных и маркированных  списков, вставляете код, описывающий правила стиля оглавления статьи.

    У меня на блоге такие правила:

    ol#sod{ padding: 0px 20px 10px 51px; margin: 0.5em 0 0em 1em; color: #2E2E2E; list-style-type: none; background: #CCFFFF; border-left: #66FFCC 4px solid; display: inline-block; } ol#sod li{} ol#sod li:before{ font-weight:normal !important }

    Для вашего дизайна вы можете прописать другие правила: изменить цвет, отступы, шрифты, – все, что захотите.

    Если вам нужно подобрать код нужного вам цвета, то можете посмотреть мою «Таблицу безопасных HTML цветов». Безопасными цвета называются потому, что они одинаково хорошо, без искажений, отображаются во всех браузерах пользователей.

    Если вы совсем ничего не понимаете в style.css, то просто вставьте код стиля меню статьи в конец файла. Он все равно будет работать.

    В общем, вы сохранили файл style.css, отредактировали статью и обновили страницу на сайте. Получилось у вас красивое содержание статьи? Расскажите мне в комментариях! Мне будет приятно, что я кому-то помогла сделать краткое оглавление статьи в блоге.

    Ну, а если вам понравилось наводить красоту у себя на сайте, то вы еще можете поколдовать с дизайном:

Источник: https://foxyforex.ru/sozdanie-saita/kak-sdelat-soderzhanie-stati-na-sajte

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

Искренне всех приветствую. Вчера сделал в этом посте содержание в виде ссылок на важные части поста, как буквально через несколько часов на почту получил 154 письма с вопросом КАК я это сделал.

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

Зачем в статье делать содержание? — смотрите, вы написали большую (огромную статью-мануал), статью, которая имеет несколько логических частей и которая отвечает на несколько (десятков или сотен) разных вопросов, человек зашел на статью и сразу увидел о чем статья, увидел что он в ней найдет и какие он сможет получить ответы изучив статью. За секунду посетитель четко осознал о чем речь в статье. Он увидел план статьи!

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

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

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

Уровень урока — легко. Только иногда лень это делать

[sc:adsense850 ]

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

Инструкция

Содержание будем делать в самом конце перед публикацией поста. Сначала, как обычно, полностью пишем статью. Оформляем. Чтобы статья имела логику и структуру, используем теги H2-H6. После того, как написали статью, приступаем к созданию содержания.

Шаг первый

Для того чтобы каждый пункт в содержании был ссылкой на определенную часть статьи нужно переключить редактор в режим HTML и тегам заголовка (h2-h6) присвоить ID (идентификатор с именем. Имя может быть любое, но каждому следующему тегу уникальное). Т.е., например:

Подзаголовок 1

Подзаголовок 2

где:

id=”name1″, id=”name2″ – это идентификаторы

Шаг второй

Теперь в содержании указываем ссылку на нужный нам ID. Адрес ссылки будет иметь вид:

Подзаголовок 1 Подзаголовок 2

Вот так у меня выглядит содержание в предыдущем посте в WordPress редакторе в режиме HTML:

Можете просто забрать вот этот код, и подставлять значения под свои статьи (вставлять идентификаторы и анкоры ссылок):

Источник: http://aimblog.ru/xitrosti-i-fishki-wordpress/kak-sdelat-soderzhanie-dlya-stati-na-sajte.html

Как быстро сделать содержание для статьи с помощью плагина и без него

Здравствуйте, мои дорогие читатели. Рад вас видеть. В одной из своих предыдущих статей я говорил, что не лишним будет сделать оглавление, если объем статьи от 6000 символов и более.

Но, как это осуществить, не поделился. Сегодня я всё-таки расскажу вам, как сделать содержание для статьи в wordpress. Хотя эта информация будет полезна не только тем, кто создал сайт на CMS Вордпресс. Просто редактор вордпресса существенно упрощает задачу правки кода статьи.

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

С помощью плагина

Я являюсь сторонником того, что на блоге нужно использовать минимальное количество плагинов. Они грузят блог, усложняют код и так далее. У меня сейчас активировано 17 плагинов и есть еще 7 неактивных. Я считаю, что это много. А у вас сколько?

Для нашей задачи тоже существует решение в виде специального плагина.

Хоть я и не сторонник этого подхода, но хотя бы упомянуть о нем я обязан. Есть такой плагин Table of Contents Plus.

Можете установить его, если моя инструкция вам не понравитсяВ его настройках задается расположение оглавления и внешний вид. Я ради эксперимента ставил себе на блог это расширение, но мне не понравилось, у меня получается лучше

В качестве его недостатков хочу отметить следующее:

  1. Он будет выводить оглавление каждый раз, когда достигнуто минимальное количество заголовков. Меня это не устраивает. По-моему содержание не всегда уместно
  2. Внешний вид может не подойти под конкретный дизайн блога
  3. Возможен конфликт со стилями темы

Без плагина

После того как статья полностью готова и уже ждет, когда я ее опубликую или запланирую на будущее, я приступаю к этому интересному процессу. А процесс этот можно разбить на три маленьких действия:

  1. Создаю нумерованный список из всех заголовков в начале статьи. Место можете выбрать абсолютно любое
  2. Вставляю ссылки в каждый пункт. Для первого пункта – ссылка #1, для второго — #2, для третьего — #3 и так далее.
  3. Перехожу в режим «текст». Перед первым заголовком вставляю код . Для следующих заголовков меняется только цифра.

Чтобы быстрее находить заголовки в коде, я пользуюсь поиском. Нажимаю Ctrl+F и в строке поиска ввожу h2. У меня, как правило, заголовки находятся в теге h2.

Если вернуться в визуальный режим, то в тексте будут видны так называемые якоря.

Кстати для тех, кто понимает хоть немножко в коде, показываю, как выглядит оглавление в режиме «текст»:

Источник: https://abdullinru.ru/blogovedenie/kak-sdelat-soderzhanie-dlya-stati.html

Содержание для статьи сайта

Здравствуйте, дорогие друзья! Решил сегодня поделиться информацией о том, как сделать содержание на сайте. На мой взгляд, это очень актуальный вопрос в сегодняшнее время, где очень высокое место в продвижении сайта, занимают поведенческие факторы. Использование оглавления в статье поможет Вашему сайту в конкурентной борьбе за место в топе выдачи поисковых систем.

Содержание:

Для чего нужно содержание на сайте

Содержание в статье прежде всего нужно для удобства пользователя. Он может быстро понять главные моменты в статье. Если пользователь не желает читать статью полностью, оглавление с легкостью поможет ему переместиться в нужный фрагмент. В очень длинной статье, мне кажется, не добавить содержание вообще будет считаться издевательством над пользователем.

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

Для того чтобы добавить содержание нам нужно будет разобраться немножко в коде html. Не пугайтесь, это будет совсем не трудно, разберется даже ребенок. Итак, приступим.

Чтобы сделать оглавление на сайте нам понадобится всего лишь три тега:

    ,

  • , . Тег
      обозначает ненумерованный список,

    • — элемент списка и — ссылка. Вот как будет выглядеть структура оглавления:
      • Пункт 1
      • >Пункт 2
      • >Пункт 3

      Здесь атрибут href будет переводить нас в нужный фрагмент страницы. В какой именно мы узнаем чуть позже. В качестве значения атрибута href нужно указать знак «#» и значение атрибута id адресуемого элемента. Здесь «#» указывает на то, что мы будем переходить к элементу содержащий атрибут id, внутри одной страницы.

      Теперь добавляем атрибуты id к нашим заголовкам.

      Заголовок 1

      Заголовок 2

      Заголовок 3

      Всё, наше содержание готово.

      Создание оглавления в WordPress

      В WordPress содержание делается немного проще, т.к. создавать список мы будем с помощью стандартного визуального редактора. В визуальном редакторе жмем на кнопочку «маркированный список» и перечисляем пункты содержания.

      Далее переходим на вкладку «Текст» и просто расставляем теги и атрибуты id, как было указано выше.

      Вот Вы и узнали, как сделать содержание на сайте. Немного рутинный процесс, но после того, как набьете руку, это будет занимать мало времени. Вопросы и пожелания оставляйте в комментариях. До скорой встречи!

      С уважением, Евгений Кузьменко.

      Посмотрите также следующие статьи:

      Тегиwordpressкак сделатьоглавлениесайтсодержание

      Источник: http://EKuzmenko.ru/wordpress/kak-sdelat-soderzhanie-na-sajte.html

      Как сделать содержание в Ворде: пошаговая инструкция

      Каждый студент во время своей учебы хотя бы раз, но напишет реферат или курсовую. Разумеется, в конце еще ожидает и дипломная работа. Согласно ГОСТ, в ней обязательно должно быть оглавление. В данной статье мы рассмотрим, как в Ворде сделать содержание, поскольку не все учащиеся знают об этой возможности редактора.

      Для чего нужно содержание

      Некоторые делают обычную таблицу, в которой вручную проставляют все заголовки и подзаголовки.

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

      Всё придется переделывать заново и искать изменения. Это очень долго и сложно. Более того, некоторые по незнанию начинают проставлять многоточие вручную.

      Намного проще и удобнее выбрать автоматический режим. В этом случае составление оглавления будет занимать несколько секунд, поскольку для того чтобы создать такой элемент, достаточно сделать несколько кликов. Рассмотрим этот процесс более внимательно. Первым делом откроем документ, в котором много различных глав и для удобной навигации нужно настроить интерактивный список контента.

      Нумерация страниц

      Перед тем как настраивать содержание, необходимо вставить нумерацию. Для этого нужно сделать следующее.

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

      Создание содержания

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

      1. Вначале нужно поставить курсор перед первой буквой среди всей вашей текстовой информации.
      1. Затем нужно набрать на клавиатуре сочетание клавиш Ctrl+Enter. В результате этого вы сможете добавить пустой лист.
      1. Поднимаемся к началу документа. Затем переходим на вкладку «Ссылки». Нажимаем на иконку «Оглавление». В появившемся меню выбираем пункт «Автособираемое оглавление 1» (можно выбрать и второй вариант – всё равно будет правильно).
      1. Скорее всего, вы получите вот такой результат. Дело в том, что для того чтобы составить грамотное содержание, нужно оформить названия разделов (в нашем случае – названия стихов) стилями заголовков.

      Если этого не сделать, редактор Microsoft Word попытается проставить пункты оглавления в автоматическом режиме на свое усмотрение. В данном случае он выбрал то, что было оформлено жирном текстом, а мог включить в список что-то другое.

      Настройка заголовков

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

      1. Кликните на любое название стиха (нужно сделать так, чтобы этот текст был активный и его можно было редактировать).
      2. Обратите внимание на то, что у него выбрано оформление для обычного текста.
      1. Для того чтобы это исправить, нужно кликнуть на иконку стиля «Заголовок 1» (предварительно поставив курсор в нужное место).
      1. После этого нужно снова вернуться к оглавлению. Сделайте правый клик мыши по этому элементу. В появившемся контекстном меню выберите пункт «Обновить поле».
      1. Затем вас спросят, что именно нужно отредактировать. Выберите пункт «Обновить целиком». Для сохранения настроек нажмите на кнопку «OK».
      1. Теперь всё станет красиво и аккуратно. Но только там, где мы исправили заголовок.
      1. Для того чтобы остальные пункты были такими же, придется оформлять точно так же и всё остальное. То есть ко всем остальным названиям необходимо привязать стиль «Заголовок 1». Затем повторите описанные выше действия по обновлению содержания. После этого вы увидите следующее.

      Согласитесь, что вручную сделать такой ровный и аккуратный список не получится. Каждая точка стоит на своем месте и ничего не съехало. В таком документе работать намного приятнее.

      Многоуровневое оглавление

      В описанном выше случае использовались все заголовки первого уровня. Рассмотрим пример, в котором будут и подзаголовки. Для этого необходимо вставить в текст все недостающие элементы.

      1. Добавьте в свой вордовский документ заголовок второго уровня. Для этого достаточно кликнуть на соответствующий стиль на панели инструментов.
      1. Затем, чтобы вывести новый пункт в содержании, мы снова сделаем правый клик мыши по этому объекту. В контекстном меню выбираем пункт «Обновить поле».
      1. Далее нажимаем на кнопку «OK».
      1. Сразу после этого в содержании появятся новые подзаголовки.

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

      Как правильно писать заголовки

      В процессе работы с контентом, как правило, часть текста поднимается вверх, а другая уходит дальше. В результате этого внизу листа могут появляться «голые» заголовки (названия). Это выглядит некрасиво. Нужно чтобы после них оставалась хотя бы одна строка.

      Помимо этого, также неправильно ставить первый стих на странице с содержанием. Исправить данную проблему несложно. Для этого сделаем несколько простых шагов.

      1. Убираем с первой страницы всё, помимо содержания. Затем делаем так, чтобы не было заголовков в конце страницы во всем документе. После этого снова делаем правый клик мыши. В появившемся меню выбираем пункт «Обновить поле».
      1. Но на этот раз выбираем вариант «Обновить только номера страниц». Для сохранения нажимаем на кнопку «OK».
      1. В результате этого изменятся только цифры, но не само содержание.

      С другой стороны, можно было бы выбрать пункт «Обновить целиком». В случае нашего примера ничего не изменится. Но если бы вы вносили какие-то изменения вручную, то всё это исчезло бы.

      Например, некоторые любят выравнивать слово «Оглавление» по центру или написать что-то дополнительно от себя. Другие пользователи, наоборот, могут убрать некоторые пункты из содержания.

      Настройка положения

      Редактор Word может вставить содержание в нужное место и без вашей помощи. Для этого нужно сделать следующее.

      1. Перейти на вкладку «Ссылки».
      2. Открыть меню «Оглавление».
      3. Сделать правый клик по какому-нибудь оглавлению (неважно, где именно вы будете его собирать).
      4. Затем выбрать любой из предложенных вариантов.

      Свойства оглавления

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

      1. Повторяем всё то, что описано выше.
      2. Только на этот раз выбираем пункт «Изменить свойства».
      1. В результате этого появится следующее окно.
      1. Здесь можно изменить:
        • имя;
        • коллекцию;
        • категорию (можно создать свой шаблон);

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

      Как пользоваться содержанием

      Данный элемент предназначен не только для красоты или удобства в печатном виде. При работе с документом для быстрого перехода к нужной главе достаточно кликнуть на любой пункт, предварительно зажав кнопку Ctrl. То есть вы должны понимать, что за каждой строчкой скрывается гиперссылка.

      Ручное оглавление

      Если автоматический режим вас не устраивает, то всё можно сделать самостоятельно. Это делается следующим образом.

      1. Перейдите на вкладку «Ссылки». Откройте пункт меню «Оглавление». Выберите тип «Ручное оглавление».
      1. В результате этого вы увидите следующее.

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

      Настраиваемое оглавление

      Но есть и третий вариант – полуавтоматический режим. Такое содержание собирается следующим образом.

      1. Снова переходим на вкладку «Ссылки».
      2. На этот раз в меню «Оглавление» выбираем соответствующий пункт.
      1. В результате откроется следующее окно.
      1. Здесь вы можете:
        • включить или отключить гиперссылки;
      • включить или отключить отображение номеров страниц;
      • включить или отключить отображение страниц по правому краю листа;
      • настроить уровни заголовков;
      • указать формат оформления;

      Параметры

      Для более детальной настройки необходимо кликнуть на кнопку «Параметры».

      Вследствие этого откроется следующее окно.

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

      Если внесенные изменения вам не нравятся или вы что-то испортили, вы всегда можете нажать на кнопку «Сброс».

      Стиль

      Для редактирования внешнего вида пунктов меню нужно нажать на кнопку «Изменить».

      В результате этого появится окно, в котором вы сможете внести изменения в любое нужное оглавление. Для этого необходимо:

      1. Выбрать нужный пункт.
      2. Посмотреть описание.
      3. Если оно вас не устраивает, кликнуть на кнопку «Изменить».
      1. Сразу после этого появится окно «Изменение стиля». Здесь вы сможете настроить основные параметры.
      1. Для более тонкой настройки необходимо кликнуть на меню «Формат».
      1. Сразу после этого вы увидите следующие пункты.
      1. К самым нужным относятся:
      1. Для сохранения изменений на каждой стадии необходимо нажимать на кнопку «OK».

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

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

      1. Откройте вкладку «Ссылки».
      2. Кликните на меню «Оглавление».
      3. Выберите пункт «Удалить оглавление».
      1. Благодаря этому оно сразу исчезнет.

      Также есть второй способ. Для этого сначала нужно всё выделить.

      Затем нажать на кнопку Delete или Backspace. Но если оглавление большое, то намного удобнее использовать первый метод.

      Заключение

      В данной статье была рассмотрена кропотливая работа с содержанием. Благодаря этому вы сможете создать именно то, что хотите, а не использовать готовые шаблоны редактора Microsoft Word.

      Если у вас что-то не получается, возможно, в вашем тексте отсутствуют заголовки. Как исправить данную проблему, было описано ранее.

      Видеоинструкция

      Для тех, у кого остались какие-нибудь вопросы, ниже прилагается видеоролик с подробными комментариями к описанной выше инструкции.

      Источник: https://os-helper.ru/office/kak-sdelat-soderzhanie-v-word.html

      Как сделать содержание в статье блога – все способы!

      Здравствуйте дорогие друзья! Сегодня я расскажу о том, как сделать содержание (оглавление) в статье блога на WordPress. Посмотреть, что это такое и как работает, можете в этом посте прямо под этими строками.

      Из этой статьи вы узнаете:

      В первую очередь конечно это делается для удобства пользователей, ведь содержание сайта – это как оглавление в книге, благодаря ему посетитель быстро сориентируется на блоге и выберет интересующие для себя пункты. У него перед глазами план.

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

      Содержание в статье улучшает юзабилити, а так же поведенческие факторы блога, которые в свою очередь играют важнейшую роль в продвижении ресурсов. В общем, полезная штука и уже многие используют её у себя на сайтах.

      Всё очень просто. Для начала вам нужен вот этот код:

      Из этой статьи вы узнаете:Первый подзаголовокВторой подзаголовокТретий подзаголовокЧетвертый подзаголовокПятый подзаголовок

      Его нужно скопировать и вставить в статью в текстовом редакторе админки wordpress в режиме «Текст».

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

      Например, у меня первый подзаголовок «Для чего нужно содержание на сайте», соответственно первая строчка кода будет выглядеть так:

      Для чего нужно содержание на сайте<\p>

      Итак, с этим разобрались. Мы с вами сейчас сделали только каркас (основу оглавления вначале поста), теперь нам нужно сделать эти пункты активными, т.

      е. чтобы при нажатии на содержание нас перекидывало на нужные разделы в статье.

      Для этого там же в режиме «Текст» ищем наш подзаголовок (который у нас находится в тексте), и заключаем каждый из них в эти теги:

      Первый подзаголовок<\p>Первый подзаголовок<\p>Первый подзаголовок<\p>Первый подзаголовок<\p>Первый подзаголовок<\p>

      Проделываем это со всеми нужными нам подзаголовками. Т.е. мы присоединяем эти теги к заголовкам к примеру h2, тем самым активизируя ссылки в оглавлении.

      В данном случае a1 который присвоен к первому пункту — это так называемый якорь, благодаря которому, нажимая на ссылку, мы оказываемся на нужном пункте. a2 присваивается ко второму, а 3 к третьему подзаголовку и т.д.

      Если же вы «не дружите» с Html, то плагины вам в помощь – они сделают всё за вас. Например плагин Simple Tos. С помощью него вы сделаете автоматическое содержание в статье. Выглядеть это будет так:

      После установки и активации, в редакторе WordPress появится кнопка Simple TOC.

      Написали пост, в котором у вас есть подзаголовки h2 или h3, поставили курсор мыши в то место, где хотите чтобы отображалось оглавление и нажимаете эту кнопку.

      Потом в появившемся окошке выбираете Auto TOC heading, вписываете нужный тег, например h2 и жмёте Insert (Вставить). Вот и всё! Теперь плагин автоматически все заголовки h2 соберёт и выведет их в содержании статьи. Посетитель нажмёт на нужный заголовок и попадёт в нужное место.

      Таким образом, если вы внимательно читали статью, то у вас непременно получилось сделать содержание в статье.

      С уважением, Анна Фёдорова.

      Источник: http://sozdamblog.ru/vedenie-bloga/kak-sdelat-soderzhanie-v-state-bloga-vse-sposoby.html

      Как сделать содержание статьи в WordPress с помощью плагина и вручную?

      Автор: Alexander Wayne

      16 августа 2018 в 13:02

      Добрый день, дамы и господа!

      Сегодня я решил рассказать вам о том, как сделать содержание статьи в WordPress. Реализовать это можно двумя разными способами: как вручную, так и с помощью плагина. В этом материале мы рассмотрим оба способа. Итак, начнем.

      Зачем нужно содержание?

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

      Структура заголовков статьи – очень важный аспект при написании текстов. Если вы просто оставите полотно текста без каких-либо разделений на смысловые части, то вашим пользователям будет крайне неудобно читать такой текст. Они просто не будут понимать что к чему и, скорее всего, просто не станут читать ваше произведение искусства.

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

      Заголовки важны и при SEO-продвижении. Так, например, ключ, который содержится в главных заголовках (H1) и подзаголовках (H2), обязательно будет учитываться всеми известными поисковыми системами.

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

      Оглавление помогает сразу видеть все эти заголовки, а значит и составные части вашего текста.

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

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

      Также оглавление может решить проблему долгого поиска нужного абзаца и долгой прокрутки. Вам более не придется насиловать колесико мышки, чтобы прокрутить текст на добрую тысячу слов вниз. Можно будет просто кликнуть на нужную ссылку в начале текста – и вы на месте. Достаточно удобно, не правда ли?

      Кстати говоря, среди СЕО-специалистов всех видов и мастей бытует мнение, будто содержание статей в ВордПресс помогает поисковикам лучше ранжировать материалы. Это значит, что сайт с оглавлением будет иметь некоторое преимущество перед аналогичным конкурентом. Насколько это правда судите сами, но я склонен верить этому по нескольким причинам. Дополнительные ключи в тексте – одна из них.

      Содержание в статьях WP с помощью плагина

      Наиболее простым и в то же время популярным способом реализации содержания в статьях WordPress является его создание с помощью плагина Table of Contents Plus. Его очень легко установить прямо из админки ВордПресс, используя каталог плагинов.

      Просто перейдите в Плагины – Добавить новый, после чего введите название искомого плагина в окно поиска. Сразу после этого вы должны кликнуть по кнопке “Установить” и по завершению установки просто активировать TOC Plus. Звучит просто, не правда ли?

      Как видите, при таком поисковом запросе внутри каталога на первом месте высвечивается чуть менее популярный плагин – Easy Table of Contents. Он обладает абсолютно такими же функциями, поэтому вы можете попробовать и его, при желании, конечно же.

      Теперь, когда TOC Plus установлен и активирован, нам нужно понять, как им пользоваться. Переходим в настройки плагина, где видим примерно такую картину.

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

      Чуть ниже вы можете установить текст заголовка и кнопок “Скрыть”/”Показать”. Там же доступны настройки внешнего вида, плавной прокрутки и расширенных параметров.

      С помощью последних вы легко и непринужденно сможете установить стоп-слова (заголовки с оглавлением этих слов не будут показаны), параметры вложенности (H1 – H6), префиксы для якорей и многое другое.

      Среди прочего в расширенных параметрах есть опция, которая отвечает за наличие в оглавлении только строчных букв. Комбинируя эту настройку с определенным шаблоном внешнего вида, вы сможете добиться, чтобы оно выглядело по-настоящему красиво на вашем ресурсе. Я думаю, что нет нужды рассказывать о настройке TOC подробнее. Благодаря русскоязычному интерфейсу вы легко осилите это и сами.

      С помощью этого плагина можно легко создать оглавление материалов в автоматическом режиме. Даже подстроить некоторые весьма важные параметры, что позволит сделать его интерактивным и полезным для читателей вашего сайта.

      Как я уже говорил, создание содержания возможно не только с помощью TOC Plus. В каталоге представлено большое количество разных вариантов, с помощью которых можно это сделать.

      Тот же Easy Table of Contents тоже пользуется популярностью у сообщества вебмастеров. И хоть активных установок там пока не так много, можно с уверенностью сказать, что данный плагин почти ничем не уступает Table of Contents Plus.

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

      Установка вручную

      Вы также можете сделать содержание вручную, используя для этих целей только HTML.

      В принципе, это не так уж и сложно, нужно лишь слегка попотеть и вручную добавить якоря к каждому заголовку в вашем тексте.

      Когда статей не так много, это не страшно, но когда их сотни и тысячи… Тут-то и могут возникнуть проблемы. Решать все равно вам, я же просто расскажу вам об этом способе более подробно.

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

      После этого, в произвольном месте вашего материала вы должны разместить такой код:

      Источник: https://iklife.ru/sozdanie-sajta/blog/kak-sdelat-soderzhanie-stati-v-wordpress.html

      Как создать содержание на WordPress

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

      Оглавление (содержание) статьи заметно облегчает пользователю задачу по поиску нужной информации.

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

      Добавление содержания вручную

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

      Сперва необходимо создать оглавление вручную в виде списка в начале статьи.

      Теперь зададим ссылку (якорь) для каждого пункта только что созданного оглавления. Для этого выделяем поочередно пункты, нажимаем на кнопку «Вставить/изменить ссылку» в панели редактора и задаем каждому пункту номер в поле “URL”.

      Обратите внимание, что номера (ссылки) необходимо проставлять, используя знак решетки (#). Таким образом, каждому пункту присваивается свой номер (#1, #2, #3 и так далее).

      Теперь, когда каждый пункт меню (оглавления) представлен в виде кликабельной ссылки, необходимо указать, с каким конкретно местом в тексте он связан. Для этого нужно перейти в режим редактирования html-кода (текст) и проставить следующий код перед каждым заголовком:

      Вместо [номер] необходимо подставить цифру, соответствующую пункту меню, и разместить этот код перед соответствующим ему заголовком в тексте (в данном случае

      ):

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

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

      При этом само содержание будет представлено в виде простых ссылок – каким вы его и создали. Если же вы захотите добавить к содержанию оформление, в этом случае необходимо поместить его в контейнер c уникальным идентификатором, которому предварительно задать стиль в файле style.css.

      Автоматический вывод содержания при помощи плагинов

      Ручное добавление содержаний к каждой статье – утомительное занятие. Автоматизация процесса просто необходима, если оглавление требуется к каждой статье на сайте. Использование плагинов в данном случае заметно облегчит вам жизнь. Особенно, если вы не сильны в программировании.

      Плагинов для автоматического создания содержания на WordPress достаточно много. Остановимся самых популярных.

      Table of Contents Plus

      Table of Content Plus (TOC+) – самый популярный и удобный плагин для вывода содержания статьи.

      С его помощью оглавление будет выводиться автоматически, вам нужно только установить, при каких условиях это будет происходить. Чтобы определить параметры вывода, нужно перейти в настройки и выбрать пункт меню «TOC+».

      Здесь вашему вниманию откроется небольшой перечень параметров (на английском языке).

      Для настройки содержания вам понадобится только первый раздел — Main Option (основные опции).

      Рассмотрим данные опции подробнее.

      Position

      положение оглавления на странице (before first heading – перед первым заголовком, after first heading – после первого заголовка, top – в начале статьи, bottom – в конце статьи).

      Show when [количество] or more headings are present

      показывать содержание, когда в тексте присутствует определенное количество заголовков. Т. е. сколько заголовков должно быть в статье, чтобы для навигации по ней выводилось содержание. С помощью этой опции вы сможете «отсеять» мелкие статьи, чтобы оглавление присутствовало только тогда, когда оно действительно необходимо.

      Auto insert for the following content types

      автоматически выводить (содержание) для следующих типов контента (post – запись, page – страница). В списке возможно наличие других пунктов (например, галереи, контактные формы и пр.

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

      В таком случае содержание будет выводиться в том месте, где вы разместите шорткод [toc].

      Heading text

      содержит в себе небольшой перечень опций. Во-первых, название самого оглавление, которое нужно вписать в поле Contents. Show title on top of the table contents – показывать заголовок содержания сверху.

      Ставя галочку возле “Allow the user to toggle the visibility of the table of contents”, вы позволяете читателю самому управлять видимостью содержания.

      Вместо show и hide вы можете указать собственные надписи — например, «показать» и «скрыть», соответственно. В таком случае посетитель на сайте сможет открывать и закрывать оглавление по собственному желанию.

      Если вы планируете скрыть содержание изначально, то поставьте галочку напротив пункта Hide the table of contents initially.

      Show hierarchy

      показывать иерархию, т.е. при наличии заголовков разных уровней (h2, h3 и так далее) будет сохранена древовидная структура в содержании. Если опция не активирована, то заголовки будут находиться в оглавлении на одном уровне.

      Number list items

      нумерация пунктов оглавления. Каждый пункт будет пронумерован по порядку.

      Enable smooth scroll effect

      активировать эффект плавной прокрутки (до нужного пункта содержания).

      Далее мы видим раздел настроек Appearance (внешний вид). Собственно, этот раздел и определяет внешний вид вашего содержания.

      Width
      ширина блока. Можно указать как фиксированную ширину в пикселях, так и относительную в процентах (от общей ширины статьи).

      Wrapping
      положение (слева или справа) на странице.

      Font size
      размер шрифта (в процентах, пунктах или дюймах).

      Presentation
      дизайн/стиль блока. Можно выбрать вариант из имеющихся, а можно создать свой стиль, выбрав пункт Custom – в этом случае перед вами откроется еще одно меню, где можно самостоятельно задать цвет фона, рамки, заголовка, ссылок. Таким образом, плагин дает возможность создать содержание, которое идеально впишется в любой дизайн сайта.

      Если перечисленных настроек вам недостаточно, то данный плагин содержит еще один перечень настроек, скрытый в разделе Advanced.

      Но вообще ранее описанных настроек на самом деле вполне достаточно, и без особой надобности этот раздел редактировать не стоит.

      Для применения настроек не забудьте нажать кнопку Update Options в самом низу страницы.

      Другие плагины

      У плагина TOC+ существуют также менее популярные аналоги. Например, Easy Table of Contents, второй по популярности плагин для создания содержаний, имеет примерно такой же функционал, даже настройки этих плагинов практически ничем не отличаются.

      Менее популярные плагины (Simple Table of Content, CM Table Of Contents и другие), к сожалению, содержат много недоработок и не так просты в использовании, как их ранее упомянутые конкуренты.

      Поэтому если вы ищете простое решение в виде плагина, то можно воспользоваться самым распространенным из них, и вы не прогадаете.

      Автоматический вывод содержания посредством кода

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

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

      Источник: https://WPSchool.ru/kak-sozdat-soderzhanie-na-wordpress/

      Как сделать оглавление или список содержимого статьи

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

      О важности создания оглавлений в статье

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

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

      К примеру, при запросе: «Как сделать оглавление или список содержимого статьи» пред его взором открывается исчерпывающий мануал на 6000 зн.

      , который вероятнее всего он, не задумываясь, закроет и найдет разъяснение в более удобной и конкретной форме.

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

      Создание списка содержимого к статье средствами HTML

      Первый способ базируется на обычных html тегах. Для внесения корректировок необходимо авторизироваться в админ-панели вашего сайта и перейти в материалы. Несмотря на то, что рассказывать я буду на примере CMS Joomla, представленный мною ниже код подойдет и для пользователей WordPress, Drupal и т.д.

      Вполне реально создать различные списки в плане маркировки. Для реализации нумерованного списка с цифрами в начале оглавления нужно прописать тег

        , который является блочным элементом.

        Для маркированного списка существует тег

          . Разницы между ними особо никакой нет, поэтому выберите тот, который считаете более привлекательным и подходящим для вашего сайта.После небольшого отступления продолжим создание списка содержимого.Сначала необходимо внести корректировку к заголовкам h2 – h6. На сайте под управлением Joomla удобнее всего работать с текстовым редактором JCE, поэтому я рекомендую вам его установить. О том, как это сделать написано вот в этой статье. И так, войдя в материалы, нужно зайти в какую-то конкретную статью, после чего выбрать в правом верхнем углу редактора кнопку «Code», отвечающую за отображение HTML кода. Пред вашим взором предстанет что-то наподобие того, что можно увидеть на ниже опубликованном скриншоте.Это отрывок html кода со статьи «Страница ошибки 404 для Joomla».Понятное дело если это ваше первое знакомство с кодом, вы будете неприятно удивлены, поскольку ранее знакомый тест обратится в массу непонятных элементов в виде тегов, атрибутов и символов. Но ничего страшного, со временем практикуясь, ваше удивление обернется в постепенно закрепляющиеся познания.Внизу картинки я выделил h2 заголовок, заключенный в соответственный одноименный открывающийся

          и закрывающийся

          тег, оснащенный якорем для гиперссылок. Помимо этого к нему прописаны некоторые стили, а именно: font-size – размер шрифта; color – цвет заголовка.Оставляю для вас готовый рабочий код, который при желании можно подправить. Само собою разумеющееся в представленном коде необходимо подставить свой заголовок вместо моего.Предположительно все заголовки подкорректированы, а значит, дело остается за малым.Как можно увидеть с того же самого скриншота, расположенного вверху, чтобы список содержимого статьи находился возле картинки, необходимо его вставить после закрывающегося тега<\p>. На скриншоте для большей наглядности я выделил, куда именно нужно вставить нижепривведенный код.

          Оформление содержимого посредством использования CSS стилей

          Так как во внедренном коде, отвечающем за вывод оглавлений, используются определенные CSS свойства, грешно не поговорить и о них.- float: centr – стиль определяющий место расположения оглавления. В нашем случае задана позиция «центр». При желании можно задать right (справа) либо left (слева).- border: 1px dashed gray – свойство, отвечающее за отображение рамки. В нашем случае отображается пунктирная (dashed) серая (gray) рамка (border). Кроме того можно изменить рамку на: dotted (точечную), solid (сплошную), ridge (рельефную) или double (двойную).- padding: 5px 5px 0px 2px – данной командой задаются отступы от тела списка содержимого к рамке.

          Создание оглавлений в Joomla

          Второй способ предусматривает использование специального плагина для Joomla. В свою очередь я противник использования плагинов и пользуюсь ими только при крайней необходимости, поэтому этот способ для меня является менее привлекательным. Для реализации отображения оглавлений можно использовать расширение Auto Toc.Для сравнения я сделал скриншот обоих списков содержимого статьи. Вверху находится содержимое, созданное с помощью расширения. Как можно заметить плагин подхватывает автоматически указанные в нем заголовки и выводит их в качестве оглавлений.Среди его недостатков огромное количество исходящих ссылок, что не есть хорошо в плане продвижения и оптимизации.Как всегда, выбор остается за каждым из нас. Спасибо за внимание и до скорых встреч на страницах Stimylrosta.

    Источник: https://stimylrosta.com.ua/verstka-sajta/html-putevoditel-dlya-novichkov/61-kak-sdelat-oglavlenie-ili-spisok-soderzhimogo-stati

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

    Здравствуйте, дорогой читатель in4wp.ru — на связи опять я, скромный автор блога. Сегодня я бы хотел обсудить с вами со всеми такой несложный, но крайне важный вопрос : как сделать оглавление (содержание) статьи на вашем блоге, тем более этот вопрос важен, когда у вас длиннющая статья, типа этой.

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

    Но сначала, по традиции оффтоп: меня второй день валит вирусня на хостинге. Кто сможет помочь? Я сейчас разбираюсь в этой теме и скоро напишу статейку. Так что не пропусти — подпишись!

    Ну а мы переходим дальше.

    Как создавать оглавление статьи средствами HTML?

    Да, знания HTML все-таки нужны. И чем дальше в лес, в смысле, чем больше развивается IT индустрия — тем больше нужно будет знать, чтобы хотябы оставаться на плаву.

    Но не будем о грустном 🙂

    Итак, зачем нам HTML ? Всё очень просто. Я раньше делал в первых статьях своих (например этой или этой) — делал следующее:

    Есть такое понятие в HTML — якорь! Это может быть даже пустой тег. Вот например.

    И всё, внутри этого параграфа даже писать ничего не нужно.

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

    Как только все якоря проставлены — осталось создать само содержание статьи — это также делается через HTML прямо в текстовом редакторе самой статьи.

    Я делал это так:

    Мой кусок кода

    style=”list-style-type:decimal;”

    style=”list-style-type:decimal;”

    дает приказ показывать список в виде цифр по порядку. Вы ведь знаете, что обычно тег

  • дает список с точками слева. Так вот вместо этих точек будут цифры.

    Ниже мы видим список пунктов. Причем в ссылке

    Пункт 1

    Пункт 1

    Мы видим не саму ссылку, а лишь ссылку на нужный якорь на этой же странице. После нажатия на подобную ссылку, у вас ссылка страницы примет вид:

    http://ваш_сайт/урл_страницы#yakor1

    http://ваш_сайт/урл_страницы#yakor1

    Вот живой пример:

    Интервью с Максимом Войтиком (автор блога seoslim.ru).

    Эта ссылка ведет на интервью с Максимом Войтиком, причем именно на вопрос о том , когда он приедет ко мне в гости. Перейди — узнаешь.

    Вот и всё, на seo оптимизацию это никак не влияет. Если вы переидете по подобной ссылке с другого сайта — вам откроется эта страница и сразу перекинет к этому абзацу, где стоит этот якорь.

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

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

    На самом деле вариант с HTML вставками — вполне рабочий. Его можно использовать. Но блин, так много времени отнимает.

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

    Не буду ходить вокруг да около, давайте к делу.

    Идем в файл functions.php и вписываем туда функцию:

  • Источник: http://in4wp.ru/kak-sdelat-oglavlenie-stati-bloga/

Ссылка на основную публикацию