Как сделать подзаголовок в вордпрессе

Обновлено: 05.07.2024

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

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

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

Contents

WordPress Заголовок

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

В своей простейшей форме - Классической Теме - WordPress Заголовок представяет собой код в файле шаблона wp-content/themes/classic/header.php:

Тема Default WordPress определяет особенности изображений в фоновом режиме и представляет заголовок, как это в wp-content/themes/default/header.php:

Award Winning Themes Темы заголовков продемонстрированые в этой статье, получили награды на 2005 WordPress Themes Contest by Alex King.


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

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

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

Стиль Заголовка

Зеленый оттенок выбран в качестве цвета фона и границы вокруг заголовока, но граница имеет другой оттенок и создает утопленный, теневой эффект. Шрифт Times New Roman задается размером 230% с более широким, чем обычно, межсимвольным расстояние. Отступ к стороне создает отступы для текста внутри заголовка.

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

То же самое относится и к заголовку в Default WordPress теме, за исключением того, что в ней несколько больше стилей, о которых придётся позаботиться. Они находятся внутри header.php в "head" теге и в style.css. Когда имеется большое количество стилей, лучше перемещать всю информацию в таблицу стилей.

Стили, которые контролируют вид заголовка, находятся в пределах h1 , header, headerimg, и description CSS селекторов. Так же, как и для классической темы, можно найти эти ссылки и сделать изменения там, чтобы изменить внешний вид.

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

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

Connections Theme Header

Изменение изображения заголовка

Есть много различных изображений заголовока и дизайнерских решений доступны для редактирования и использовать. стили для заголовка изображения по умолчанию или Кубрика WordPress тема, и любая тема основана на эту тему, являются более сложными, чтобы изменения, чем те, на классические темы. стили находятся в пределах стилей в header.php "голова" раздел, а также в styles.css. Чтобы изменить только ссылки заголовка изображения, откройте файл header.php шаблона и искать стили вроде этого:

ПРИМЕЧАНИЕ: Использование bloginfo возможно только, когда стиль используется вместе с главным файлом шаблона. Теги WordPress шаблон не будет работать в таблице стилей (style.css). Для перемещения этого стиля в таблицу стилей, измените тега шаблона на фактический адрес (URL) из изображения заголовка.

Для изменения файла, заменить "kubrickheader.jpg" с именем нового графического изображения вы загрузили на ваш сайт, чтобы заменить его. Если она находится в другой каталог, изменение, заменив bloginfo () теги с конкретным адресом графического месте.

Сохранить шаблон файл и загрузить его и изображение на Ваш сайт и take a look. Некоторые изменения, возможно, должны быть сделаны для тонкой настройки размещения и вид.

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

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

Red Train Theme Header

Спецификация на заголовок изображения

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

Если вы изменяете тема всего сайта, ширина общую страницу или содержание области должны быть приняты во внимание на размер заголовка изображения. Два наиболее распространенных размеров экрана 1024x768 и 800x600 пикселей. Тем не менее, широкие мониторы набирают силу и веб-дизайнеры теперь нужно готовиться к экран шириной 1280x1024 и 1600x1200.

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

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

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

Искусство заголовка

Новый термин появившийся в области веб-дизайна - Искусственный заголовок(header art). Это изображения заголовка, которые, как правило, сделаны вручную, используя комбинации цветов, форм, символов, изображения и текста. Создания такого заголовка может быть трудным, отнять много вермени у автора. Хотя существуют и свободные Искусственные заголовки, некоторые сайты продают свои ручной искусства заголовка. Хотя фотография может быть уникальным в своем роде и передать необходимые визуальный стиль, ручная работа заголовок легче матча к другим цветам веб-страницы и, как правило, более эстетично из-за его особого характера.

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

Digital Westex's WordPress Header Art имеет большой выбор Искусственных заголовков доступных для бесплатного скачивания специально для WordPress

Копирайт Искусственного Заголовка

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

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

Разработка вашего собственного заголовка

Вы можете разработать свой собственные Искусственный заголовок. Подойдет любое ПО для разработки графического дизайна. Наиболее популярные это: Adobe Photoshop, Adobe Elements, JASC PaintShop Pro, The Gimp and Macromedia Fireworks. ПО для создания графического дизайна должно обладать функциями масштабирования, управления разрешением изображения и его типом при сохранении. Размер вашего Искусственого заголовка должно быть соразмерен с контейнером для этого изображения в заголовке сайта.

Вы можете использовать собственные фотграфии, рисунки, шрифты и любые комбинации изображений для создания вашего Искуственного заголовка. Когда вы закончите, просто сохрание это как jpg, gif, или .jpg файл "для веба". За пояснениями о различии этих типов можете обратиться к статье Sitepoint's GIF-JPG-PNG What's the Difference. Эти файлы сожмут изображение, уменьшая размер файла. Желательно избежать размер файла больше чем 50K, чем больше размертем медленее загрузка сайта.

Fast Track Theme Header

Скрытие текста заголовка

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

Чтобы скрыть заголовок, оставляя его в код, ничего не меняют в файлах шаблона. Только изменения CSS. Добавить Дисплей: нет в CSS селекторы вы не хотите, чтобы появиться. Например, чтобы скрыть текст в h1 селектора:

Создание интерактивного заголовка

Чтобы сделать заголовок интерактивным, вы должны поместить всю графику заголовка в ссылку. Есть два способа сделать это:

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

Чтобы заголовок искусства интерактивными путем внедрения ее в заголовок, в файл шаблона wp-content/themes/classic/header.php вашего WordPress тема, изменять следующие:

на этот сниппет:

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

Вращающееся изображение заголовка

Существует насколько скриптов, которые позволят вам вращать изображения в заголовоке, боковую панель или любой шаблонный файл. Мы рассмотрим использование одного из них - Random Image Rotator. Сохраните скрипт в отдельную папку в которой находятся изображения заголовка которые вы хотите вращать. К примеру, назовите его rotate.php. Используем фоновое изображение которое меняется или вращается с каждой новой загрузкой страницы:

Чтобы действительно сделать это в вашем заголовке, или в другом месте на вашем сайте, добавьте ссылку на изображение в блок header:

RDC Theme Header

Скрипт вращения изображения включает:

Добавление навигации к Вашему Заголовку

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

Это может быть также просто, как отображение вашей категории в верхней части заголовка с помощью одного из Список категории template tags. Давайте посмотрим на пример используя тег list_cats()

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

Блок будет выглядеть вот так:

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

  • Good Navigation Links
  • Dynamic Menu Highlighting
  • Creating Horizontal Menus
  • Styling Lists with CSS
  • wp_list_cats()
  • list_cats()

Советы по созданию Заголовка

Вот некоторые советы и информацию, которая поможет вам выбрать и настроить заголовок вашего WordPress сайта.

  • Если вы используете белый текст, убедитесь, что цвет фона в header и/или headerimg , чтобы продемонстрировать белый текст еще раз, если по некоторым причинам изображение не появляются на экране или пользователь "показывать картинки" выключен. Это позволит вашим белый текст, все еще видны.
  • Если изображение главной особенностью или элемента, положение текста, чтобы она не распространяется на основной предмет изображения.
  • Если текст тяжело читать в отношении занятости области графики, положение текста менее насыщенной области заголовка изображения.
  • Убедитесь, что цвет текста легко видеть, для всех посетителей сайта и не конфликтует с цветами заголовков искусства. Флуоресцентный оранжевый текст на зеленом фоне извести является болезненным.
  • Имейте в виду, что некоторые цветовые различия и моделей в заголовке вашего искусства могут сделать букв текста в текст обложил "исчезают". То же самое относится, если вы вставлять текст в искусстве верхнего или заголовок изображения.

Bold and dramatic headers lend themselves to boldly designed sites, whereas soft and pastel colored sites lend themselves to gentler graphic headers. A site dedicated to punk rock and grunge should have a header look punky and grungy. It is up to you, but think consistency.

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

Заголовки не всегда должны быть с картинками. Не все заголовки должны быть с фотографиями и картинками. Иногда слова более важны, являются ли они против мыть цвета или белом фоне. Беспорядочный заголовок делает сайт ещё более беспорядочным. Избегайте навязчивых объявлений, заграможденной навигации, нечитабельного текста, длинных новостных лент в Заголовоке. Чем проще тем лучше. Следуйте стандартам accessibility в Заголовоке. Мы говорили скрытии текста в Заголовке, но есть нечто больше что вы можете сделать, чтобы убедиться, что ваш заголовок соответствует стандартам доступности. Используйте h1 теги тогда спциальные программы которые читают текст с экрана признать его в качестве заголовка. Использование Alt в ссылках и изображениях. Заголовки могут быть любой высоты, но помните, содержание это главное. Средняя заголовок менее 200 пикселей в высоту, но заголовки диапазоне высот от очень тонких до половины страницы. Помните, что основная причина люди посещают ваш сайт является его содержание, и больше они должны прокрутить вниз мимо вашего заголовка, чтобы добраться до содержимого, менее заинтересованы они, как правило. Справка привести их к содержанию с заголовка. Продумайте "Индивидуальность сайта". Заголовок является частью личности сайта, люди нужна уверенность что они на том же сайте, когда он нажимают ссылку на другую страницу сайта. Рассмыстривайте Заголовок и/или Искусственный заголовок как "брендовый знак" вашего сайта.

Дополнительная информация

Изображения Заголовка

Много WordPress Тем доступны с уже офрмленными заголовками с грфикой, которые вы можетет использовать потому что они доступны бесплатно под лицензиейGPL - General Public License. Или вы можете один и перчисленных ресурсовдоступных в Интернете бесплатно, или разработать собственные картинки.

zagolovki-h1-h3

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

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

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

Правильное распределение заголовков H1 H2 H3 на страницах блога WordPress

В SEO оптимизации и продвижении сайтов мелочей не бывает, и это аксиома. Даже такая, казалось бы, незначительная деталь как favicon (фавикон) для сайта, способна оказать определенное влияние на раскрутку проекта. А правильная расстановка заголовков на web-страницах сайта Вордпресс далеко не мелочь. Я уже писал о тегах заголовков H1-H6 в разрезе изучения основ HTML. В этой публикации я вскользь коснулся, как и где их следует разместить, чтобы обеспечить лояльное отношение к своему проекту со стороны поисковиков. Более того, я почему-то уверен, что корректное расположение заголовков будет играть свою роль в повышении тИЦ и ПР сайта, пусть и косвенную.

Содержание заголовка H1 в шапке блога

Казалось бы, все неплохо. Название сайта заключено в теги H1, что придает ему значимость. Однако, во-первых, заголовок не содержит ключевых слов из семантического ядра, по которому продвигается проект. Во-вторых, название блога является ссылкой, что не есть гуд. Здесь я хочу сделать акцент на то, что все заголовки H1-H3 должны быть “чистыми” (H4-H6 не рассматриваем ввиду их малозначительности), то есть:

  • текст заголовков не может быть анкором ссылки (читайте подробнее, что такое анкор ссылки);
  • к ним не должны применяться никакие классы (class) или идентификаторы (id) CSS.

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

Заголовок статьи, заключенный в теги H1, на блоге WordPress

Кстати, выше приведенные скриншоты были получены при использовании прекрасного инструмента для вебмастеров плагина Web Developer для браузера Firefox (Мазила Фаерфокс - скачать бесплатно). Итак, как я отметил, заголовок H1 обязательно должен венчать написанный на WordPress блоге пост.

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

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

Чтобы обеспечить вывод заголовка статей с использованием тега H1, нужно открыть на редактирование файл single.php текущей темы (если вы слабо представляете себе, о чем речь, советую почитать пост об устройстве темы WordPress) при помощи HTML редактора notepad++ и найти там следующую строчку (или похожую):

Эта функция отвечает за вывод заголовка статьи на страницу. Ставите открывающий и закрывающий теги H1 и дело в шляпе:

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

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

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

вики

Оглавление статьи в ВордПресс без плагина — как сделать содержание на странице вручную

в коде

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

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

на странице

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

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

Table of Contents Plus — содержание материала по тегам заголовков статьи

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

toc

Блок основных настроек плагина.

toc2

  • Width — задаем ширину блока.
  • Wrapping — выбираем с какой стороны будет отображаться содержание: по умолчанию, слева или справа.
  • Font size — задаем размер шрифта.
  • Presentation — выбираем дизайн оглавления из доступных или делаем свой.

toc2

Advanced — блок настроек для опытных пользователей.

  • Lowercase — опция ограничивает название анкоров нижним регистром.
  • Hyphenate — заменяет знак подчеркивания на дефис в именах якорей.
  • Include homepage — добавляет содержание на главную страницу.
  • Exclude CSS file — отключает css плагина, что позволяет использовать свой стиль.
  • Preserve theme bullets — позволяет применить собственный стиль отображения маркеров для неупорядоченного списка.
  • Heading levels — опция позволяет выбирать заголовки, которые попадут в содержание.
  • Exclude headings — позволяет игнорировать заголовки с определенным словом или словосочетанием.
  • Restrict path — дает возможность не выводить оглавление на определенной странице. Для этого в строку вводим ее адрес.
  • Default anchor prefix — префикс якоря по умолчанию.

TOC Плагин Easy Table of Contents для WordPress сайта

Easy ToC не уступает предыдущему плагину: автоматически генерирует блок навигации в статьях, позволяет настроить внешний вид и др. Находим модуль в поиске через админку WordPress, устанавливаем, активируем и переходим к настройкам.

easy

  • Auto Insert — включаем автоматический вывод блока навигации в статью для определенных разделов сайта. Если убрать галочки, содержание отобразится в меню сбоку.
  • Position — определяем положение блока на странице.
  • Show when — задаем минимальное количество подзаголовков, при которых плагин генерирует содержание.
  • С помощью Опций Display Header Label и Header Label — включаем отображение заглавия.
  • Toggle View — позволяем читателю прятать содержание.
  • Initial View — прячем оглавление под спойлер.
  • Show as Hierarchy — включаем древовидную структуру подзаголовков.
  • Counter — выбираем вариант нумерации между десятичными, обычными и римскими цифрами. Или убираем числа вообще.
  • Smooth Scroll — включаем плавную прокрутку.

easy 2

  • Width и Custom Width — задаем ширину блока.
  • Float — включаем обтекание текстом.
  • Font Size — выбираем размер шрифта.
  • Theme — выбираем тему отображения навигации.
  • Custom Theme — настраиваем цветовую схему под себя, по порядку: цвет фона, обводки и заглавия. А также: цвет ссылок в обычном состоянии, при наведении курсора мыши и уже посещенных.

Продвинутые настройки плагина идентичны ToC+. Позволяют настроить анкоры, отключить css, исключить заголовки из навигации и пр. Сохраняем изменения и смотрим результат. Как выглядит содержание, созданное плагином, видно на скриншоте ниже.

Заголовки Wordpress

Отсутствие заголовков в тексте делает его сложным к прочтению. Заголовки WordPress, а также и подзаголовки — это, своего рода, знаки, на которые ориентируется пользователь в тексте.

Они помогают посетителю сайта понять общее содержание и интересна ли будет эта статья или нет. Я расскажу про важность заголовков для Seo и покажу их правильное использование.

Заголовки WordPress и структура текста

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

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

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

Но основное назначение заголовков — быть информативными и создавать более легкий к прочтению текст.

Если вы хотите улучшить структуру статьи, вам необходимо обратить внимание на:

  1. первый абзац вашего текста
  2. первые предложения каждого нового абзаца
  3. заголовки

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

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

Не забудьте поставить ключевое слово (focus) в этом первом абзаце.

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

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

Заголовки WordPress и SEO

Заголовки важны для SEO, хоть и не являются основным фактором ранжирования сайта.

Google, как и живой читатель, любит понятный и информативный контент.

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

Как использовать заголовки h1-h6

Для форматирования текста используются заголовки, по-другому их еще называют тегами, h1, h2, h3, h4, h5, h6.Их можно найти в окне редактора вашей страницы или записи.

заголовки WordPress

H1 — название страницы/записи, т.е. заголовок. И вы должны использовать его ТОЛЬКО один раз.

Другие заголовки можно использовать несколько раз, если это имеет смысл.

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

H2 — его можно использовать 1 или 2 раза во всем тексте. Дело в том, что частая простановка H2 ведет к уменьшению его значимости для поисковиков.

H3 — можно использовать в подзаголовках абзацев. Он также должен содержать те или другие важные ключевые слова.

Что касается H4, H5, H6 — они не так часто используются в тексте.

Но вы также должны соблюдать иерархию: нельзя ставить тег H5 до H4, H6 до H5. Надеюсь, смысл понятен.

Не используйте в заголовках те слова, которые не передают смысл вашей статьи.

Вывод

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

Вам может быть интересно:

Хотите узнать, как задавать рубрики и метки для записей блога? Читайте нашу статью о таксономии WordPress.

Читайте также: