Заголовок 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 endif; ?>

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

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

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

Похожие записи:
Добавлено коментариев - 11
  • Иван 11.01.2017 11:17

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

    Ответить
    • Евгений 11.01.2017 15:54

      Здравствуйте. Да, можно. Данное решение реализуется средствами 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>

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

      Ответить
  • Кира 05.10.2017 13:58

    Добрый день. Подскажите, пожалуйста, есть ли решение моей проблемы. У меня title на главной оформлена как h1, на всех остальных — p. Из-за этого название выводится разным шрифтом и размером. При этом изменить размер главной в css легко. На остальных не получается. Что именно мне нужно искать в css?

    Ответить
  • Кира 05.10.2017 14:03

    Забыла кое-что. В первом случае название определяется как h1.site-title (и его легко найти в css), во втором — p.site.title (и тут непонятно, что именно менять и где).

    Ответить
    • Евгений 05.10.2017 14:09

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

      h1.site-title, p.site-title{
        font-family: Arial;
        font-size: 30px;
        /*Все необходимые правила*/
      }
      Ответить
      • Кира 05.10.2017 15:54

        Спасибо огромное за помощь, Евгений.

        Ответить
        • Евгений 05.10.2017 15:59

          Пожалуйста! Рад что помог вам.

          Ответить
  • Николай 10.11.2017 12:15

    Здравствуйте!

    Случайно удалил название сайта. Как мне восстановить его? В коде ничего нет, все исчезло.

    Ответить
    • Евгений 10.11.2017 12:26

      Здравствуйте. Если я вас правильно понял, то вы удалили название сайта в файле header.php, за вывод названия сайта отвечает bloginfo('name');.

      Прото вставте там где нужно вывести название:

      <?php bloginfo('name'); ?>
      Ответить
      • Николай 10.11.2017 13:24

        Спасибо большое, Евгений. Все получилось.

        Ответить
        • Евгений 10.11.2017 13:27

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

          Ответить

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

Нажимая на кнопку «Добавить», я даю согласие на обработку своих персональных данных в соответствии с политикой конфиденциальности