Как сделать содержание (оглавление) статьи в WordPress. Содержание статьи вордпресс


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

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

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

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

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

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

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

Инструкция

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

Шаг первый

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

<h3>Подзаголовок 1</h3> <h4>Подзаголовок 2</h4>

где:

id="name1", id="name2" - это идентификаторы

Шаг второй

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

<a href="#name1">Подзаголовок 1</a> <a href="#name2">Подзаголовок 2</a>

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

Смотреть

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

Вот так идентификаторы к частям текста:

Как сделать оглавление для статьи

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

<div> <strong>Содержание статьи:</strong> <ol> <li><a href="...">...</a></li> </ol> </div>

Если содержание нужно со вложенными пунктами (вложенным списком), то берите вот этот код:

<div> <strong>Содержание статьи:</strong> <ol>      <li><a href="...">...</a></li>          <ul>              <li><a href="...">...</a> </ul> </ol> </div>

Выглядит это так:

Kak sdelat' soderjanie dlya stat'i na saite

На сегодня все. Удачи!

P.S. Идентификаторы можете присваивать не только тегам H, но и любым другим! К примеру спискам (ul, ol) или просто нужному абзацу <p> Суть уловили?

aimblog.ru

Как сделать содержание статьи сайта или блога на WordPress?

Всем привет!

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

Ищешь заработок в Интернете? Записывайся на бесплатный онлайн курс «СПЕЦИАЛИСТ ПО ИНТЕРНЕТ-РЕКЛАМЕ» и получи удаленную профессию рекламщика в Яндекс Директ за 10 дней!

Введение

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

Ранее я как-то не придавал этому особого внимания, хотя, вероятно, что зря.

Сейчас объясню почему.

Почему важно наличие содержания статьи в WordPress?

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

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

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

Пришло время приступить непосредственно к рассмотрению самой последовательности действий по реализации поставленной задачи.

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

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

Больше дела — меньше слов. Переходим к технической части.

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

В данной статье для примера мы будем прописывать идентификаторы для заголовков h3-h6 (ведь h2 по идее должен быть заголовком самой статьи). Использовать все уровни заголовков в статье или только некоторые из них — решать вам, на суть метода это никак не влияет.

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

<h3>заголовок 1</h3>

<h3>заголовок 1</h3>

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

На самом деле в данной статье мы рассматриваем частный случай, и прописывать идентификаторы можно не только для заголовков, но и для некоторых других тегов (ol, ul, p).

Идем далее. После присваивания заголовкам идентификаторов нам необходимо оформить само содержание статьи.

Если совсем кратко, то вызвать список выбранных разделов статьи нам поможет код:

1 2 3 4 5 6 <ol> <li><a href="#идентификатор 1">заголовок 1</a></li> <li><a href="#идентификатор 2">заголовок 2</a></li> ... <li><a href="#идентификатор n">заголовок n</a></li> </ol>

<ol> <li><a href="#идентификатор 1">заголовок 1</a></li> <li><a href="#идентификатор 2">заголовок 2</a></li> ... <li><a href="#идентификатор n">заголовок n</a></li> </ol>

Если же нужно оформить содержание, в котором помимо пунктов фигурируют также подпункты, то в данном случае нам нужен несколько другой код:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <ol> <li><a href="#идентификатор 1">заголовок 1</a></li> <ul> <li><a href="#идентификатор 1`">подзаголовок 1</a> </ul> <li><a href="#идентификатор 2">заголовок 2</a></li> <ul> <li><a href="#идентификатор 2`">подзаголовок 2</a> </ul> ... <li><a href="#идентификатор n">заголовок n</a></li> <ul> <li><a href="#идентификатор n`">подзаголовок n</a> </ul> </ol>

<ol> <li><a href="#идентификатор 1">заголовок 1</a></li> <ul> <li><a href="#идентификатор 1`">подзаголовок 1</a> </ul> <li><a href="#идентификатор 2">заголовок 2</a></li> <ul> <li><a href="#идентификатор 2`">подзаголовок 2</a> </ul> ... <li><a href="#идентификатор n">заголовок n</a></li> <ul> <li><a href="#идентификатор n`">подзаголовок n</a> </ul> </ol>

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

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

Код для содержания, не содержащего подпункты:

1 2 3 4 5 6 7 8 9 <div> <strong>Содержание статьи:</strong> <ol> <li><a href="#идентификатор 1">заголовок 1</a></li> <li><a href="#идентификатор 2">заголовок 2</a></li> ... <li><a href="#идентификатор n">заголовок n</a></li> </ol> </div>

<div> <strong>Содержание статьи:</strong> <ol> <li><a href="#идентификатор 1">заголовок 1</a></li> <li><a href="#идентификатор 2">заголовок 2</a></li> ... <li><a href="#идентификатор n">заголовок n</a></li> </ol> </div>

Код для содержания, содержащего подпункты:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <div> <strong>Содержание статьи:</strong> <ol> <li><a href="#идентификатор 1">заголовок 1</a></li> <ul> <li><a href="#идентификатор 1`">подзаголовок 1</a> </ul> <li><a href="#идентификатор 2">заголовок 2</a></li> <ul> <li><a href="#идентификатор 2`">подзаголовок 2</a> </ul> ... <li><a href="#идентификатор n">заголовок n</a></li> <ul> <li><a href="#идентификатор n`">подзаголовок n</a> </ul> </ol> </div>

<div> <strong>Содержание статьи:</strong> <ol> <li><a href="#идентификатор 1">заголовок 1</a></li> <ul> <li><a href="#идентификатор 1`">подзаголовок 1</a> </ul> <li><a href="#идентификатор 2">заголовок 2</a></li> <ul> <li><a href="#идентификатор 2`">подзаголовок 2</a> </ul> ... <li><a href="#идентификатор n">заголовок n</a></li> <ul> <li><a href="#идентификатор n`">подзаголовок n</a> </ul> </ol> </div>

Заключение

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

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

С уважением, Владимир Денисов!

expromtom.ru

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

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

Сегодня мы рассмотрим, как сделать содержание для записи и страницы в WordPress.

Содержание статьи, в которой я научу вас делать такие содержания:

Зачем делать автоматическую прокрутку страницы

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

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

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

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

Создание и настройка содержания страницы

Для создания содержания страницы кодом HTML мы будем использовать якоря гиперссылок. Это две части HTML-кода: первая является ссылкой на якорь (вместо адреса вписываем решетку и названия якоря), вторая часть — сам якорь (тег а с параметром name, в который мы вписываем имя якоря). Имена якорей можно придумывать любые, лучше, чтобы они подходили по смыслу, но не страшно, если их имена будут и бессмысленными.

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

Пример

1 <a href="#name1">Первая часть кода</a>

<a href="#name1">Первая часть кода</a>

oglav

1 <a name="name1"></a>Конец кода

<a name="name1"></a>Конец кода

oglav2

Первая часть HTML-кода – это сам подзаголовок в нашем оглавлении, а вторая – место в тексте, до которого автоматически будет прокручена страница.

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

1 2 <a href="#name2">Ваш подзаголовок</a> <a name="name2"></a>Место, до которого будет выполнена автоматическая прокрутка страницы

<a href="#name2">Ваш подзаголовок</a> <a name="name2"></a>Место, до которого будет выполнена автоматическая прокрутка страницы

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

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

P.S. Теперь, как и обещала, фото. Еще одна оптическая иллюзия — комната Эймса. С виду обычная комнатка, а такие чудеса:)

комната Эймса

pro-wordpress.ru

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

Иногда мы пишем длинные записи, считается, что их любит поисковая система Гугл и Яндекс тоже индексирует. Не всегда длинные тексты любят посетители или их может интересовать лишь часть вопроса. Для удобства читателей хорошо сделать содержание статьи в wordpress. Чтобы оглавления второго и третьего порядка стали ссылками, с переходами по тексту.содержание статьи 

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

Содержание статьи с плагином Table pf Contents Plus /TOC+/

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

Вкладка настроек общая

вкладка настроек общая

Мне нужно установить содержание только к длинным статьям — выбираю post.

Содержание статьи -настройки внешнего вида для блока

внешний вид

 Дополнительные настройки

дополнительно 

Нажимая на «show» /в скобках/, увидим новую большую вкладку.

Вкладка карты блога

Table pf Contents Plus /TOC+/ может генерировать файл карты, для категорий и страниц, без статей. Имеется вкладка для такой настройки здесь не производила, у меня давно установлена карта  другого автора.

Записи без вывода автоматического содержания

шорт код

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

Поделиться новостью в соцсетях

 

Об авторе: Ксенья Юрьевна Бастрикова Активные ссылки сайта регулируем самостоятельно « Предыдущая запись Пользовательский поиск Google ищет и рекламирует Следующая запись »

moylubimiblog.ru

Как опубликовать статью на свой сайт Wordpress. Видео инструкции

Добро пожаловать! Я рада вашему визиту!

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

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

СОДЕРЖАНИЕ СТАТЬИ:

1. Как опубликовать статью на сайт WordPress

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

Публикация статей на сайт WordPress

Чтобы добавить статью есть 2 способа. Вы можете выбрать для себя тот, который будет для Вас проще.

Первый способ – когда Вы просматриваете сайт, находясь в админке сайта. Нажимаете Добавить. И затем на – Запись:

Консоль Вордпресс

2й способ, когда Вы находитесь в админке. Нажимаете Консоль – Записи – Добавить новую.

Пуликация статьи wordpress

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

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

Статья в word

Копирую заголовок в поле для заголовка.

wordpress Заголовок статьи

ВАЖНО! Перед тем, как вставлять текст статьи, необходимо нажать на иконку Вставить как текст. Надо запомнить: если копируешь текст из ворда, то надо активировать эту функцию. Если этого не сделать в тексте вставляется лишний код (он не отображается в закладке Визуально, но отображается в закладке Текст)

wordpress Вставить как текст

И только после этого скопировать текст статьи из ворда в поле для статьи.

wordpress Вставить текст в статью

На всякий случай кликаем на закладку Текст (справа от закладки Визуально), чтобы убедиться, что в текст не вставился лишний код. Видим (см скрин ниже), что кода нет, всё ОК.

wordpress Закладка Текст

Не забываем ставить галочку возле соответствующей Рубрики. В моем случае – напротив Рубрики Бизнес в цифровую эпоху. И нажимаем Сохранить (кнопка в правом верхнем углу).

Как видите, всё максимально просто и удобно.

2. Пробежимся по иконкам редактирования текста статьи

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

wordpress оптимизация статьи

В видео детально описано, как пользоваться этими иконками для публикации статьи на сайте WordPress. Видео подготовлено мастером по сайтостроению Александром Козловым, я обучалась на его тренинге StartUp 3.0.

3. Как вставить видео в статью

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

4. Как загрузить изображение в статью

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

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

5. Как выполнить сео оптимизацию изображений при публикации

Это ещё один важный момент, который надо усвоить. В этой полезной статье коротко и чётко описано, что надо знать о сео оптимизации картинок при публикации: как правильно называть файл, как заполнять поля Атрибут Alt и Атрибут Title при публикации картинок

6. Как оптимизировать изображение — уменьшить вес картинки

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

7. ОЧЕНЬ ВАЖНО! Как при публикации статьи ПРАВИЛЬНО ЗАПОЛНИТЬ поля плагина All in one seo pack? 

А теперь самое главное, что нужно правильно сделать при публикации статьи. Итак, Вы написали приветствие, содержание статьи, текст статьи, опубликовали картинки и видео. А теперь надо помочь поисковым системам Гугл и Яндекс отыскать Вашу статью и показать её потенциальным читателям, которые ищут именно ту информацию, которая есть в Вашей статье. В этом всем помогает супер важный плагин All in one seo pack. Установка его обязательна для каждого сайта или блога!

После его установки под каждой Вашей новой статьёй появятся поля Title (Заголовок) и Description (Описание). Крайне важно эти поля ПРАВИЛЬНО заполнять для каждой статьи! От этого будет зависеть, как Ваш сайт или блог будет продвигаться. Но сначала давайте установим плагин.

При помощи этого видео установите и настройте плагин All in one seo pack. All in one seo pack настройка:
3 главных правила заполнения мета тегов Title и Description
  1. Указывайте главный ключевой запрос (например, «как правильно публиковать статью») в начале TITLE. 
  2. Ставьте этот же главный ключевой запрос («как правильно публиковать статью») в начале мета-тега Description. Это lобеспечит его подсветку в сниппете, что увеличит кликабельность в выдаче.
  3. Этот же ключ («как опубликовать статью») ставьте в начале заголовка статьи (тег h2). Не забывайте, что на одной веб-странице должен быть только один тег h2.

all in one seo pack настройка

Как заполнять Description

Внимание: у каждой статьи Вашего сайта должен быть уникальный  h2 (название, заголовок статьи), TITLE, Description. URL страницы должен содержать главный ключевой запрос в транслите, например alenakraeva.com…kak-opublikovat-statyu (это произойдет автоматически после публикации статьи, если у Вас в названии статьи стоит главный ключевой запрос и при этом установлен плагин RUS-to-LAT). Чем короче URL, тем лучше.

Из этого короткого видео Вы можете узнать, как заполнять мета теги Title и Description на практике:

РЕЗЮМЕ

Предлагаю подвести итог по серии публикаций, посвященных самому главному блогерскому делу — умению правильно писать статьи, которые бы нравились и посетителям, и поисковым системам. В 3-х статьях мы рассмотрели:

  1. теоретическую сторону по правильному написанию статей (с точки зрения копирайтинга)
  2. техническую сторону, как писать сео статьи с использование программ (пошаговая инструкция)
  3. практическую сторону, как опубликовать готовую статью (инструкции и видео)

Всем желаю получать удовольствие при написании статей. Если видите, что не получается писать и публиковать по 1 статье в день, не отчаивайтесь. Смело идите на биржи контента, где Вы по очень доступной цене сможете заказать уникальный контент для Вашего сайта 1) либо заказать копирайтинг статьи (статья с нуля по техзаданию), 2) либо рерайт готовой статьи, которая Вам понравилась в интернете (стоит дешевле). 3) или вообще купить готовую статью (стоит ещё дешевле, чем рерайт). Вот ссылки на те биржи, где цена-качество имеют оптимальное соотношение: eTXT, Адвего, Textsale, Work-zilla.

Как заказывать статьи можете посмотреть на примере биржи eTXT в этом видео. Этот вебмастер заказывает качественный контент для своих сайтов по 30 руб за 1000 знаков.

До встречи на страничках блога!

Алёна Краева

P.S.

Коллеги, пишите вопросы в комметариях

Также не забудьте  поделитесь инфо в соц сетях.

И не забывайте о подписке — форма подписки под статьёй!

 

alenakraeva.com


Смотрите также

Prostoy-Site | Все права защищены © 2018 | Карта сайта