GoGetLinks - сервис покупки продажи вечных ссылок. Минимальная цена за ссылку от 250 рублей (2017 год). Жесткие требования к качеству сайтов (Памятка)

SEO сервисы
6 Март

Создание оглавления к статье WordPress

Автор: West Blogger, 2015 год. 116

Поставил таки недавно новенький сайт. Оказалось основной его недостаток состоит в том, что колонка основного контента слишком узкая. Если статья содержательная, от 2000-3000 символов, то полоска прокрутки становиться достаточно маленькой и портянка получается знатная. Поэтому решил создать оглавление к статьям WordPress, для улучшения навигации по сайту. А для этого, как водится, нужно использовать Стили CSS и списки. Итак, поехали.

Понятное дело, что создание оглавления к статье WordPress можно организовать с помощью ссылок якорей. Наглядный пример смотрим на сайте Садовского, который стоит уже более 10 лет, и АГСиться не собирается :) (http://digits.ru/articles/promotion/strategy.html)

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

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

Создать нумерованный и нет список в WordPress

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

HTML код списка

Далее нужно воспользоваться стилями css для создания рамки блока со списком. Открываем в админке вкладку «Внешний вид» —> «Редактор» и справа ищем список стилей (style.css) для нашей темы. С новой строки вставляем следующий код для создания стиля нашего оглавления. Параметры цвета, отступов, фона ставим под себя.

Код для Style.css

В статье WordPress создаем список с несколькими пунктами, идем во вкладку HTML, сверху и снизу списка добавляем блок див

code div

Далее разберемся с якорями. Ссылка на якорь выглядит так: http://site.ru#punkt Все что после решетки это якорь, до это урл вашей страницы. Для того чтобы определить, куда перенести читателя при нажатии, нужно вставить пустую ссылку с именем якоря <a name=»punkt»> в нужное место в тексте.

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

Готовый код рамки с оглавлением

Итог работы можно увидеть вначале статьи.

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

Связанные по заголовку статьи:

  • Нет связанных по заголовку статей...

Почитайте также похожие посты:

  1. Ротатор картинок WordPress Сегодня наткнулся на плагин ротатора картинок для wordpress блога. Посмотрел,...
  2. Как вставить html, php код в пост WordPress блога Вчера понадобилось вставить html код в пост WordPress моего блога,...
  3. Как вывести в сайдбаре список постов из одной категории — WordPress Пару дней назад мне понадобилось вывести в сайдбаре список с...
  4. Создаем собственный шаблон на WordPress Многие качают, так называемые фри шаблоны wordpress. И в принципе,...
  5. Преимущества CMS WordPress Любой человек, только только решивший поставить свой сайт в сети...


Категория: Создаем блог - Комментариев (0)
»

Комментариев нет.

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

Наверх


30.01.09 - 21.08.2017 © West Blogger. All rights reserved.