Добро пожаловать, друзья!

Навигация в статье с плагином и без

Navigacija-v-stat'eПривет, дамы и господа! Как сделать удобную навигацию по статье? Блок - Содержание.

Навигация в статье подойдёт для тех, у кого большие, длинные сообщения и они разбиты на разделы, то есть, на подзаголовки h2 - h6. Если вы не поняли о чём идет речь, посмотрите например: в  википедия, да и не только на ней, у многих блогеров присутствует блок содержание статьи с заголовками.

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

Навигация по статье как в Википедии:

Navigacija-v-stat'e
Навигация по статье в Вики

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

Навигация в статье с помощью плагинов

Плагин Simple TOC - содержание в сообщениях

Navigacija-v-stat'e
Плагин Simple TOC - таблица содержания в сообщениях

Данный простой плагин очень лёгкий в использование. Этот модуль позволяет легко создать автоматически навигацию по статье, с тегами h2 или h3. После установки и активации плагина, в редакторе WordPress появится кнопка  Simple TOC:

knopka-Simple-TOC
В редакторе TinyMCE WordPress появится кнопка Simple TOC

Пишите статью с подзаголовками h2 или h3, ставите курсор мышки в том месте где должна появится блок содержание записи, обычно в начале сообщения и нажимаете волшебную кнопку. Указываете нужный тег и выбираете авто заголовок TOC (можно пользоваться и другими методами вставки):

Navigacija-v-stat'e
Вставка - содержание статьи

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

Navigacija-po-stat'e Можно перед навигацией вставить такой текст - в статье мы рассмотрим следующие вопросы или что подобное. Едем дальше.

Plagin Table of Contents Generator - содержание статьи

plagin-Table-of-Contents-Generator
Plagin Table of Contents Generator

Тоже простой плагин в использование. Он автоматически создает упорядоченный список содержания статьи, путем сканирования заголовок контент - страницы, с тегами H1 - H6. После установки и активации модуля, в нужном месте вашей статьи нажимаете кнопку в редакторе сообщений и плагин вставляет шорт-код [TOC]:

navigacija-Table-of-Contents-Generator
Плагин вставляет шорт-код [TOC]

Публикуете запись и смотрим, что получается:

soderzhanie-stat'i
Содержание статьи

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

nastrojki-Table-of-Contents-Generator
Table of Contents Generator » Настройки

Идем дальше. Следующий у нас будет просто супер Plugin, до этого были только "цветочки", а теперь пошла "ягода". Встречайте.

Plugin Table of Contents Plus - содержание статьи, навигация в статье как в Википедии

Table-of-Contents-Plus
Plugin Table of Contents Plus

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

soderzhanie-stat'i-kak-v-viki
Блок - Содержание статьи без обтекания текстом

Или так, с обтеканием текстом:

soderzhanie-stat'i-kak-v-vikipedii
Навигация по статье

После установки и активации Table of Contents Plus в разделе "Настройки" появится вкладка TOC+, нажимаете её и переходите к настройкам плагина. Там их великое множество:

nastrojki-plagina-Table-of-Contents-Plus
Настройки Table of Contents Plus

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

nastrojki-Table-of-Contents-Plus
Table of Contents Plus - настройки

Выберите готовый стиль блока или создайте свой (Custom):

nastrojki-stilja-soderzhanie-stat'i
Создание собственного стиля блока

Еще можно произвести дополнительные настройки (скриншот вверху), нажав вкладку Advanced (show), откроется продолжение настроек, где можно отметить с какими тегами формировать содержание статьи, от h2 по h6. Здесь, также укажите нужное расстояние от верха страницы, где останавливать заголовок. После всех настроек навигации в статье, не забудьте нажать кнопку Сохранить настройки. Вот вроде и всё, ах да, если вдруг вы не захотите отображать содержание в определённой статье, перед публикацией её вставьте такой код [no_toc]. И последнее, с помощью данного плагина можно создать карту сайта, но, это уже другая история и другой пост.

Как сделать якорь ссылку. Навигация в статье без плагина

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

Допустим, у вас есть в статье пять заголовков с тегами h2, нам нужно создать в начале статьи или в любом месте записи меню, только в переключив вкладку в редакторе сообщений на  "Текст":

<a href="#1"> Ваш заголовок №1 </a>
<a href="#2"> Ваш заголовок №2 </a>
<a href="#3"> Ваш заголовок №3 </a>
<a href="#4"> Ваш заголовок №4 </a>
<a href="#5"> Ваш заголовок №5 </a>

Теперь, добавляем к каждому заголовку статьи якорь, соответственно нашему созданному содержанию, в нашем случае это цифры из меню 1, 2, 3, 4, 5 без решётки. Выделено красным цветом:

<h2 id="1"> Заголовок h2 номер 1 </h2>
<h2 id="2"> Заголовок h2 номер 2 </h2>
<h2 id="3"> Заголовок h2 номер 3 </h2>
<h2 id="4"> Заголовок h2 номер 4 </h2>
<h2 id="5"> Заголовок h2 номер 5 </h2>

Объясню немного, то есть, начинаете писать статью,например: вступительную часть, затем меню с содержанием статьи с нужными заголовками. Далее, по ходу написания сообщения создаёте или вставляете заголовки с нашими якорями. Работать наша навигация будет после публикации вашего шедевра. После клика по ссылке в содержании, вас отправят на ту часть документа, на которую вы закинули якорь. Вот, как то так. Есть ещё один способ создания навигации по статье с использованием визуального редактора - Вставить/изменить ссылку.

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

<a name=”Якорь метка”></a> или <a name=”Якорь метка”>Ваш текст</a>

В первом случае, якорь не будет виден посетителям, а во втором будет. Вместо "Якорь метка" вы указываете любое имя. Оно может быть произвольным, например, bomba1 или просто букву c цифрой - s1. Вместо слова Ваш текст" можете, что - то написать. Следующий шаг, это нам надо указать ссылки на расставленные анкоры. Как сделать ссылку на якорь? В любом месте статьи, всё таки лучше, как всегда в начале, пишем названия нашего содержания и каждый заголовок по очереди выделяем мышкой, нажимаем в визуальном редакторе кнопку Вставить/изменить ссылку:

Vstavit'-izmenit'-ssylku
Вставить/изменить ссылку

В поле URL обязательно вставляете знак решётка - # и метку якорь, по желанию пишем заголовок который при наведению на ссылку в содержание будет появляться. Нажимаем "Добавить ссылку". Такую же операцию проделываем с каждым пунктом меню (содержание), то есть, делаете ссылку на каждую расставленную метку в статье. На этом у меня всё. Вроде понятно объяснил вам эту не сложную процедуру.

Позвольте друзья откланяться, совсем не надолго. Пока и до новых встреч. Всем удачи.

PS.Читайте продолжение. Ещё один легкий способ.

Комментарии

  • Очень такая штука нравится на сайтах. На самом деле при написании длинного текста вообще вещь незаменимая. Где -то мне попадалось, такое. Здорово. 2

    • Привет!
      Удобно с большими статьями. Можно использовать на странице FAQ, как делают на многих сервисах. Кликнул на интересующий заголовок (вопрос) и прочитал то, что нужно. 🙂

  • Удобная вещь. Сделал через якоря. Недолюбливаю плагины.

  • Здравствуйте!
    Спасибо за полезную информацию.
    Подскажите пожалуйста у плагина Table of Contents Plus есть возможность настройки функции возраста в Содержание?

    • Привет,Олег!
      Нет, нельзя. 🙂

      • Есть один сайт, там похожий модуль стоит, и реализован функционал возврата к оглавлению, ссылку вас скину, сам разобраться не могу. Если напишите на эту тему инструкцию к применению будет неплохо.
        Заранее спасибо!
        1nasledstvo.ru/darenie/darstvennaya-kvartiry-na-nesovershennoletnego-rebyonka.html

        • У вас в комменте написано — возраста в Содержание, а не возврата. Вот я и подумал, что за возраст? Насчет возврата к оглавлению надо глянуть, может где то и есть такая фишка. 🙂

          • Сори, бывают к сожалению опечатки. Но я рад что Вы меня поняли.

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

  • Сергей, здравствуйте!!
    Скажите пожалуйста, в плагине «Table of Contents Plus» как-то можно сделать так, чтобы заголовки в содержании самостоятельно прописывать, а не автоматически они их брали с , и .т.д.?

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

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

Решите задачку: *