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

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

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

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

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

 

Делаем содержание в статье сайта на Вордпресс

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

Затем всё можно оформить в рамку, выделенную подходящим цветом.

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

В текстовом редакторе WordPress выделяем нужный заголовок, находим на панели значок «Якорь» (смотрите скрины) — жмём на него. В новом, появившемся окне произвольно прописываем название якоря, это и будет наша ссылка, обязательно копируем её иначе потом придётся переходить в HTML  редактор «Текст» и находить её там.

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

Итак, якорь для одного из разделов статьи готов, теперь его нужно привязать к соответствующей фразе в блоке «Содержание»

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

В принципе здесь всё просто — Выделяем нужную фразу «Содержания» и вставляем как обычную ссылку содержимое из буфера обмена (Ctrl+V)  Есть лишь один важный момент — Перед ссылкой нужно прописать символ решётки  (Shift+3) при английской раскладке.

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

Вот и всё, уже это будет отлично работать, можно оставить так. Желательно лишь выделить содержание от остального текста инструментами редактора.

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

Изменяем дизайн блока «Содержание»

Для этого нам понадобится перейти из визуального в HTML  редактор нажав кнопку «Текст». Здесь нужно найти созданное меню.

Теперь понадобится вот такой, уже готовый HTML код. Я узнал его от Дениса Повага о котором немного рассказывал на вот этой странице.  Этот код выделит наше «Содержание» рамкой  с жёлтым фоном. Просто скопируйте его и применяйте.

<div syile=»background: #ffffa0; border: 1px solid #e5e597; padding: 8px 10px; font-size: 16px;»>здесь пункты содержания</div>    (ВНИМАНИЕ! ВАЖНО! Заметил, что в двух местах, кавычки в коде, после публикации, сами подменяются на треугольные скобки. Если будете пользоваться предложенным кодом то нужно внести правку. Должно быть так, кавычки перед «background …….. и после 16px;» вместо треугольных скобок которые вы видите. Смотрите следующее изображение, там всё верно! Нужно просто заменить скобки на кавычки!)

Итак: нужно скопировать этот код, вставить его в свою запись, внести правку, а текст вашего содержания, вместе со всеми относящимися к нему атрибутами кодов, поместить перед закрывающимся тегом  </div> в этом коде.

В моём случае это получилось так.Переходим в визуальную часть редактора и смотрим, что получилось. Теперь наше Меню выглядит так;

Можно ли изменить цвет фона, толщину бордюра, размер? Легко! Давайте обратим внимание на информацию в коде, изменив которую можем корректировать дизайн по своему желанию.

Как изменить фон и размеры

(A)- background: #ffffa0; — Это цвет фона изменив значение #ffffa0 мы изменяем цвет. Существуют сайты для визуального подбора кода палитры цвета. Например вот этот   Выбираем нужный цвет, копируем полученный код и вставляем его вместо значения  #ffffa0 ( Важно соблюдать все  пробелы, точки с запятой и т.д.) Подменяем только значение цвета —   Обновляем страницу и любуемся новой палитрой меню.

Подобным образом подменяем значения в других пунктах. Они означают: Б  — заменив 1 на большее значение мы увеличим ширину бордюра.  В  — Код Цвета бордюра  Г и Д — Влияют на  расстояние от края рамки до текста и  размеры.

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

Но мне так конечно не нужно, это лишь для примера.

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


Как сделать содержание в статье блога на wordpress без плагинов: 4 комментария

    • 29.03.2017 в 10:30
      Permalink

      Спасибо, Павел!
      В этом деле я только учусь. А судя по Вашему сайту Вы уже опытный человек.

      Ответ
  • 20.04.2017 в 02:54
    Permalink

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

    Ответ
    • 20.04.2017 в 08:48
      Permalink

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

      Ответ

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

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