Здравствуйте, уважаемые друзья. Сегодня пойдёт речь о наболевшей для меня проблеме, а именно о заголовках h1. В общем, вы уже знаете, что установив тему WordPress её ещё и дорабатывать, придётся под свои нужды. И это нормально, дизайн подправить, если необходимо объединить элементы дизайна в CSS-спрайты, может, размеры шрифтов подправить, да перечислять можно долго. Так в чём проблема?

Какие проблемы с заголовками h1 были на моём блоге

Суть в том, что все эти доработки не должны слетать при обновлении темы. У меня же, как только обновил тему, так и давай всё заново настраивать. Но фишка в другом, элементы дизайна – это цветочки, а подлянка заключается в том, что у меня после этих обновлений перестали работать древовидные комментарии и постоянно меняются местами заголовки h1 и h2. А вы знаете, что поисковики не жалуют сайты, где тег h1 отсутствует или слишком часто используется.

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

А также установить логотип.

В моей теме тоже всё это есть. Заголовок прописывается тегом h1, а описание сайта тегом h2. А если установить логотип, то он будет обозначен как заголовок и внесёт в тег h1.

И вроде бы всё хорошо – на главной странице заголовок сайта имеет тег h1, а заголовки статей h2. А вот в статьях и страницах тоже изначально было так. Причём это не в одной моей теме, во многих темах WordPress заголовки статей и страниц прописаны в теге h2 – что по правилам SEO неверно.

Я этот момент подправил – в статьях и страницах заголовки изменил на h1, а заголовок сайта на h2.

Но вот прошло обновление, визуально я заметил только проблемы с дизайном. Исправил и не о чём не волнуюсь. Через какое-то время прошло ещё обновление и вдобавок к дизайну перестали работать древовидные комментарии. Ну, это то, что я заметил визуально.

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

Но после последнего обновления на самом деле всё оказалось хуже – произошла подмена тегов h1 и h2. А точнее, изображение, которое я использовал в качестве логотипа, и которое было заключено в тег h1, — тег просто исчез (на главной странице). Так на главной странице вообще не осталось тега h1. Зато в статьях и страницах заголовок сайта обрёл тег h1. И соответственно заголовок сайта, и заголовок статьи были обозначены тегом h1. Перебор!

А ещё эта путаница повлияла на микроразметку – пропал заголовок сайта.

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

Как изменить тег заголовка h1 в зависимости от условий

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

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

Итак, приступаем к реализации задуманного.

Как известно, практически во всех темах шаблон состоит из нескольких блоков и такие блоки, как шапка (header.php), подвал (footer.php), сайтбар (sidebar.php) подключаются как отдельные элементы к основной странице (index.php), статьям (single.php), страницам (page.php).

Следовательно, заголовок и описание сайта находятся в шапке (header.php). И нужно лишь прописать условие, которое будет менять тег h1 в зависимости от того какая страница открывается.

А для этого открываем административную панель WP – «Внешний вид» — «Редактор» — «Заголовок (header.php)».

Нужно найти строчку кода с тегом h1, в некоторых случаях это может быть и тег h2. Во всяком случае, нужно обращать внимание на содержимое этих строк. Изначально в моей теме было так.

Заголовок сайта.

<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

Описание сайта.

<h2><?php bloginfo('description'); ?></h2>

Вот это и нужно будет подправить. В описание сайта можно только добавить код микроразметки, а вот с заголовком сайта поработаем.

Итак, перед строкой кода с заголовком h1 вставляем вот этот код:

<?php if (!is_single () && !is_page ()) :?>

Это условие обозначает: Если (if) открыта «не» (!) статья (is_single) и (&&) «не» (!) страница (is_page) – заголовок сайта будет обозначен тегом h1.

А после строки с кодом h1 нужно закрыть условие, этим кодом:

<?php endif; ?>

В итоге у вас должно получиться вот так:

<?php if (!is_single () && !is_page ()) :?>
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php endif; ?>

А теперь по аналогии добавляем ещё одно условие, сразу после первого:

<?php if (is_single () || is_page ()) :?>
<h2><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h2>
<?php endif; ?>

Это условие обозначает: Если (if) открыта статья (is_single) или (||) страница (is_page) – заголовок сайта будет обозначен тегом h2.

Обратите внимание, я изменил тег заголовка во втором условии с h1 на h2.  Так же можно заменить h1 на абзац (р) или блоки div, span. Это важно!

Сохраняем файл и проверяем.

Как должно быть после внедрения условий

Открываете любую страницу сайта, далее просмотр исходного кода (CTRL+U) и ищите тег h1 (CTRL+F) – на странице должен быть один тег h1.

На главной странице, рубриках, поиске и так далее заголовок сайта должен быть обозначен тегом h1, а все заголовки статей и так далее h2, h3…

При открытии статьи или отдельной страницы, заголовок сайта меняется на h2.  Если вы изменили на предыдущем шаге h2 на p, div, span — значит и изменения у вас будут соответствующие. Только не забудьте прописать стили для этих элементов.

Здесь очень важно проверить в файлах single.php и page.php чтобы заголовки статей и страниц обозначались тегом h1. Если у вас не так, откройте эти файлы и исправьте циферку.

Подведение итогов

Этим решением я избавился от конфликта с тегами заголовков h1 и h2 и восстановил работоспособность микроразметки. Всего-то пару строк кода, а какое удобство.

Друзья, у кого подобная ситуация берите на вооружение.

И в завершение видеоурок по теме. Я покажу на своём блоге, как этот метод работает.

А у меня на этом сегодня всё. Всем желаю хорошего настроения и до встречи в новых статьях и видеоуроках.

С уважением, Максим Зайцев.