Заголовок H1 в WordPress

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

Распространенной ошибкой является неправильное обертывание тегом H1 логотипа с названием и описанием сайта. При этом тег отображается не только на главной странице, но и на всех остальных. Название и описание задается в настройках админки во вкладке «общие».

Название и описание сайта

Исходный код данного блока будет примерно таким.

Исходный код блока

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

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

<h1 id="logo">
  <a href="<?php echo home_url(); ?>" title="<?php bloginfo('name'); ?>">
    <img src="<?php bloginfo('template_url') ?>/images/logo.png" alt="<?php bloginfo('name'); echo ' - '; bloginfo('description'); ?>" />
  </a>
</h1>

Для того, чтобы H1 выводился только на главной странице с последними записями, нужно добавить условие и условный тег is_home().

<?php if( is_home() ){ ?>
<h1 id="logo">
  <a href="<?php echo home_url(); ?>" title="<?php bloginfo('name'); ?>">
    <img src="<?php bloginfo('template_url') ?>/images/logo.png" alt="<?php bloginfo('name'); echo ' - '; bloginfo('description'); ?>" />
  </a>
</h1>
<?php } else {?>
<div id="logo">
  <a href="<?php echo home_url(); ?>" title="<?php bloginfo('name'); ?>">
    <img src="<?php bloginfo('template_url') ?>/images/logo.png" alt="<?php bloginfo('name'); echo ' - '; bloginfo('description'); ?>" />
  </a>
</div>
<?php } ?>

При таком условии, на всех страницах, кроме главной, логотип будет обернут в обычный <div> и дублирование тега H1 не произойдет.

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

Не забывайте делать бекап сайта при внесении изменений в код. На этом статью о выводе тега H1 в WordPress буду заканчивать, если остались вопросы, задавайте в комментариях. Рекомендую прочитать статью «Как очистить head в WordPress от ненужного кода?».

Добавлено коментариев  -    4

  1. Иван

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

    1. Евгений

      Здравствуйте. Да, можно. Данное решение реализуется средствами jQuery.
      Простейший пример будет таким:

      <script>
      	//Выбираем первые 10 символов
      	var a = $('h1').html().substring(0, 10);
      	//Выбираем все символы после десятого
      	var b = $('h1').html().substring(10);
      	//Выводим заголовок, помещая каждую часть в span, и задаем нужные стили 
      	$('h1').html('<span style="color:#000;">' + a + '</span>' + '<span style="color:#c4a700;">' + b + '</span>');
      </script>

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

  2. Олег

    Здравствуйте! не пойму в чем проблема, но у меня показывает анализ с pr-cy.РУ, что якобы H1 повторяется 6 раз.

    сайт: tvoizakon.ru

    Помогите разобраться пожалуйста.

    1. Евгений

      Здравствуйте! Я посмотрел ваш исходный код, все у вас нормально, h1 отображается один раз. На главной в него обернут логотип, на страницах записей логотип обернут в тег div, а в h1 заголовок статьи, все так и должно быть. Дело может быть в том, что данные проверки в этом сервисе обновляются один раз в сутки, попробуйте проверить через сутки.

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