Заголовок 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 от ненужного кода?».

Похожие записи: Основные функции WordPress – мини-справочник php функций Виджеты для WordPress: создание и удаление виджетов WP Как удалить ненужный код в head WordPress? Правильное подключение скриптов и стилей в WordPress
Добавлено коментариев -  29
  • Иван 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

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

          Ответить
  • Наталья 07.12.2017 00:14

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

    Ответить
    • Евгений 08.12.2017 01:34

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

      Ответить
  • Евгения 08.01.2018 17:55

    Добрый день.

    Пользуюсь темой AccessPress Store 

    Нужно удалить H заголовки у названия сайта и описания + убрать H1 у виджетов.

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

    Может Вы в курсе, где ее еще можно поискать?

    Ответить
    • Евгений 08.01.2018 20:01

      Здравствуйте. Для измения тегов, в которые обернуты название и описание сайта, нужно в папке с вашей темой открыть файл  inc/core/custom-header.php и опуститься в самый низ файла. Для того, чтобы изменить теги заголовков виджетов, нужно в папке с темой открыть файл inc/accesspress-function.php, в этом файле регистрируются все сайдбары, а при регистрации указывается разметка заголовка и контента виджетов. Меняйте на то, что вам нужно, перед изменениями не забудьте сделать бекап, на всякий случай ))

      Ответить
  • Сергей 10.01.2018 22:28

    Бодрого времени суток!

    У меня на WP-сайте не хотят отображаться начало статей, оформленных под заголовки H1, H2  и т.д.

    Вместо них, пустота. Если тэг <h2> убрать, то статья отображается корректно.

    Очень прошу, помогите разобраться с моим рукотворным багом.

    Ответить
    • Евгений 11.01.2018 00:58

      Здравствуйте! Здесь может быть несколько вариантов, например: заголовок присутствует в исходном коде, но он скрывается в CSS или в JS. Первым делом посмотрите исходный код страницы, если заголовок присутствует, то используя «инспектор» в браузере ищите где он скрывается. Если заголовка нет, то он убирается программно, тогда нужно лезть в файлы вашей темы.

      Ответить
  • Екатерина 25.01.2018 16:38

    Здравствуйте! подскажите поэтапно где в Вордпресс добавить Н-2, Н-3

    Ответить
    • Евгений 25.01.2018 16:46

      Здравствуйте! Я не совсем понял вопрос, что значит где добавлять? Где вам нужно, там и добавляйте! Что вы имели в виду?

      Ответить
  • Дмитрий 07.05.2018 19:30

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

    В php совсем ничего не понимаю пока что, это мой первый сайт, как избавиться от дублирования H1, что исправить? Заранее спасибо.

    <?php get_header(); ?>
    
    <div class="mh-wrapper mh-clearfix">
    
    <div id="main-content" class="mh-loop mh-content" role="main">
    
    <?php
    
    mh_before_page_content();
    
    if (have_posts()) {
    
    if (is_home() && !is_front_page()) { 
    
    ?>
    
    <header class="page-header">
    
      <h1 class="page-title">
        <?php single_post_title(); ?>
      </h1>
    
    </header>
    
    <?php
    
    }
    
    mh_magazine_lite_loop_layout();
    
    mh_magazine_lite_pagination();
    
    } else {
    
    get_template_part('content', 'none');
    
    } ?>
    
    </div>
    
    <?php get_sidebar(); ?>
    
    </div>
    
    <?php get_footer(); ?>

    Посмотрев код страницы увидел следующее - 

    В header

    <h1 class="entry-title">Независимость женщины во всем – 10 способов стать свободной</h1>

    и отдельно H1 далее в коде прописан.

    <h1>Независимость женщины – рассмотрим 10 методов взять свою жизнь под контроль</h1>
    Ответить
    • Евгений 07.05.2018 19:53

      Здравствуйте. В первую очередь посмотрите контент самой страницы, может вы случаено обернули какой-то загодовок в H1, если нет, то проверьте файл header.php. Если не найдете, киньте ссылку на сайт.

      Ответить
      • Дмитрий 08.05.2018 11:36

        Здравствуйте, Евгений.

        В header.php про h1 ничего не написано.

        Есть в index.php то, о чем писал выше. 

        <header class="page-header">
        
          <h1 class="page-title">
            <?php single_post_title(); ?>
          </h1>

        Но как это убрать, не знаю, помогите пожалуйста. За мной не заржавеет)

        Ответить
        • Евгений 08.05.2018 16:05

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

          Первый h1 распологается в блоке header перед картинкой (миниатюрой), а второй в после картинки:

          <header class="entry-header mh-clearfix">
              <h1 class="entry-title">Первый h1</h1>
              <!-- Код в header -->
          <header/>
          <!-- Картинка -->
          <figure class="entry-thumbnail">
              <img src="..." alt="..." title="..." />
          </figure>
          <h1>Второй h1</h1>

          Шаблон отвечающий за вывод статьи - это single.php. Открывайте его и убирайте один из двух h1.

          Ответить
          • Дмитрий 08.05.2018 20:35

            Евгений, нашел в файле пробовал разные варианты удаления h1, не получилось. Либо контент страницы не отображается. Либо отображается тайтл, но обычным мелким шрифтом без выделения. И в коде при этом не пойму тайтл он или нет. Как правильно убрать H1 из файла single.php? В моем случае, этот код нашелся в content-single.php

            <?php /* Default template for displaying content. */ ?>
            
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            
            <header class="entry-header mh-clearfix">
            
            <?php
            
            the_title('<h1 class="entry-title">', '</h1>');
            
            mh_post_header(); 
            
            ?>
            
            </header>
            
            <?php dynamic_sidebar('posts-1'); ?>
            
            <div class="entry-content mh-clearfix">
            
            <?php
            
            mh_magazine_lite_featured_image();
            
            the_content(); ?>
            
            </div>
            
            <?php
            
            the_tags('<div class="entry-tags mh-clearfix"><i class="fa fa-tag"></i><ul><li>','</li><li>','</li></ul></div>');
            
            dynamic_sidebar('posts-2'); 
            
            ?>
            
            </article>
            • Евгений 08.05.2018 21:56

              Чтобы убрать первый h1, который идет перед кортинкой, нужно удалить вот эту строку:

              the_title('<h1 class="entry-title">', '</h1>');

              Его вы пишите в админке в поле «заголовок» при создании статьи, но наверно, это будет неправильно.

              Вывода в шаблоне второго заголовока нет, значит вы его вписываете прямо в «тексте» статьи, которой выводится функцией the_content();, или же вписываете в отдельном поле, которое генерируется каким-то плагином. Если вы не разберетесь, можете сделать бекап файлов сайта и кинуть мне архив на почту info@zyubin.ru, тогда я вам точно смогу сказать откуда берется второй h1.

  • Дмитрий 08.05.2018 22:19

    Да, использую плагин Yoast SEO. Помоему понял, получается я заполняю стандартное поле заголовка при написании статьи, а потом еще форму плагина. По умолчанию он берет значение тайтла из стандартной формы вордпресса, если руками не вписать иное. Получается ввожу тайтл 2 раза. Удалил, как Вы подсказали, оставив форму плагина. Вроде все верно, судя по коду. Тайтл нормальный и один остался. Правда теперь он не выводится в начале самой статьи, а виден только в списке новостей, как заголовок и превью. Нормально. Спасибо. Буду экспериментировать. Пора php изучать)

    Ответить
    • Евгений 09.05.2018 03:40

      Все-таки Yoast SEO не должен так работать, он выводит title и мета-теги, а второй h1 непонятно откуда берется, так как title и второй h1 у вас разные!

      Ответить
  • Игорь 25.05.2018 02:14

    Я новичёк, постепенно учусь. Помогите чайнику удалить лишнии теги H1, а лучше заменить на H2, теги H1 идут к каждой статье. Прочитал много статтей и ничего не могу найти. Лишнии Теги H1 я вижу посмотрев код в браезере, а где поменять незнаю. Подскажите может нужно в файловом менеджере что-то нужно отредактировать.

    Ответить
    • Евгений 25.05.2018 16:31

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

      Ответить

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

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