Делаем динамический h1

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

Для внесения изменений открываем файл header.php вашего шаблона:

/wp-content/themes/ваша_тема/header.php

Находим фрагмент кода, где осуществляется вывод заголовка в тегах h1. Чтобы быстро найти его нажмите Ctrl+F и введите “h1” для поиска.

Вот пример кода из моего шаблона:

Здесь сначала проверяется наличие лого-изображения, если его нет, тогда выводится название сайта в тегах h1 и его описание в тегах h2.

При таком коде, если у нас нет лого-изображения и выводятся указанные h1 и h2, то в случае открытия какой-нибудь статьи у нас получается двойное использование тегов h1 (в h1 заключено название сайта и название статьи). Такая ситуация крайне не желательна!

Чтобы избежать дублирования h1, внесем следующие изменения в код:

Функция is_single(), которую мы использовали – проверяет участвовал ли в формировании страницы файл single.php (как вы помните именно этот файл создает страницы статей). Если single.php был задействован, значит текущая страница – это статья и в ней уже используется h1, поэтому мы убираем h1 и h2 и помещаем название блога и его описание в блоки span (можно использовать div вместо span). Во всех других ситуациях название сайта остается в тегах h1, а описание – в тегах h2.

Чтобы не изменился внешний вид заголовков без тегов h1, h2 – мы задали новым блокам классы class=”blog_name” и class=”blog_descr” и в файле style.css прописываем для них такие же свойства как и у заголовков h1 и h2 соответственно. Т.е. для класса blog_name копируем свойства и их значения из #header h1, а для класса blog_descr – берем из #header h2.

Итого, мы изменили файлы header.php и style.css. Если результат тестирования на локальном компьютере соответствует нашим ожиданиям, то копируем указанные файлы на сервер хостинг-провайдера.

Теперь у нас на страницах статей в h1 заключено название статьи, а на всех остальных страницах тегами h1 обрамлено название нашего любимого и неповторимого блога!

Таким образом, реализовано динамическое применение тегов h1.

Желаю всем больше динамики и меньше статики! =)

Понравилась статья? Не забудьте поделиться с друзьями и коллегами:

Вы можете пропустить чтение записи и оставить комментарий. Размещение ссылок запрещено.

2 комментария к записи “Делаем динамический h1”

  1. Leonard

    Добрый день. Спасибо за статью. Просьба может подскажете, как сделать чтобы логотип сайта все-таки был в теге H1 только на главной, а на других страницах просто ссылкой, просьба поподробнее если можно. Спасибо!

  2. Мариша

    Спасибо за такую подробную статью. Вроде все сделала, как написано. Теперь буду ждать, когда обновится сайт, чтобы проверить, появился ли H1.

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

Для размещения кода в комментарии используйте теги <pre> </pre>, например:


Подписаться, не комментируя