Создаем тему WordPress на базе статического HTML: Настройка заголовка

2020-10-20

СКАЧАТЬ ДЕМО

Данная статья является 5 из 5 частей цикла «Создаем тему WordPress на базе статического HTML».

На текущий момент вы уже научились создавать тему из статического HTML-файла.

Мы уже сделали следующее:

Добавление мета-тегов в ваш файл заголовка
- Обновление мета-тега charset
- Обновление тега charset
Добавление динамически генерируемых названия и описания сайта
Добавление активного обращения wp_head
Заключение

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

Вы узнаете, как:

Добавить автоматически сгенерированные мета-теги в раздел <head> вместо существующих статических тегов;
Заменить статический заголовок сайта и описание теми, которые вы (или другой пользователь вашей темы) можете изменить через панель администрирования WordPress;
Добавить активное обращение wp_head в файл заголовка для использования плагинами.

Что вам потребуется:

Редактор по вашему выбору;
Браузер для проверки результатов;
Установленный на локальном или удаленном сервере WordPress;
Если вы работаете на локальном сервере, вам потребуется MAMP , WAMP или LAMP, чтобы активировать тему WordPress;
Если вы работаете удаленно, вам потребуется FTP доступ к вашему сайту, плюс права доступа администратора к установленному WordPress.

1. Добавление мета-тегов в ваш файл заголовка

Вам нужно добавить в вашу тему два мета-тега: тег <title> и мета-тег charset.

Обновление мета-тега charset

Найдите следующую строку кода:

<meta charset="utf-8" />

Замените ее на:

<meta charset="<?php bloginfo( 'charset' ); ?>" />

Таким образом, мы сможем автоматически использовать мета-тег кодировки, чтобы устанавливать ее через меню «Настройки» панели администрирования WordPress.

Обновление тега charset

На данный момент наша тема содержит статический тег заголовка, добавленный через следующий код в файле header.php:

Создание темы WordPress Theme - Создание темы WordPress Theme на базе статического файла HTML

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

Удалите приведенный выше код и замените его на:

<?php
global $page, $paged;
wp_title( '|', true, 'right' );
// Добавляем название блога.
bloginfo( 'name' );
// Добавляем описание блога для домашней/главной страницы.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
    echo " | $site_description";
?>

Этот код делает следующее:

Сначала он использует тег шаблона wp_title() для вывода заголовка текущей страницы, используя разделитель с правой стороны;
После этого он использует тег шаблона bloginfo() с параметром 'name' для вывода названия сайта;
Если посетитель находится на домашней странице (что проверяется с помощью тегов условия is_home() || is_front_page()), то ему выводится описание сайта с помощью тега шаблона get_bloginfo() с параметром 'description'.

Сохраните изменения в файле заголовка.

2. Добавление динамически генерируемых названия и описания сайта

Следующий шаг заключается в замене статического заголовка и описания сайта на динамические.

В том же файле header.php, найдите следующий код:

<div class="site-name half left"><!-- название и описание сайта  --></div>
 
<div class="site-name half left">
    <h1 class="one-half-left" id="site-title"><a title="Создание темы WordPress на базе статического html - Главная" rel="home">Создание темы WordPress</a></h1>
    <h2 id="site-description">Создание темы WordPress на базе статического html</h2>
</div>

Замените его следующим кодом:

<div class="site-name half left"><!-- название и описание сайта  --></div>
 
<div class="site-name half left">
    <h1 id="site-title"></h1>
    <h2 id="site-description"></h2>
</div>

Этот код делает следующее:

Заключает в контейнер ссылку на главную страницу в названии сайта с помощью echo home_url();
Отображает заголовок сайта с помощью тега шаблона bloginfo ( ) с параметром 'name';
Отображает описание сайта, используя тег шаблона bloginfo ( ), на этот раз с параметром 'description'

Теперь вы можете изменить заголовок сайта и его описание через панель «Настройки» в панели администрирования WordPress, и они изменятся на каждой странице вашего сайта.

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

Добавление динамически генерируемых названия и описания сайта

3. Добавление активного обращения wp_head

Активное обращение wp_head является важным элементом любой темы WordPress. Оно располагается сразу после закрытия тега </head> в файле header.php. Оно используется многими плагинами для подключения к вашей теме различного функционала.

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

Активное обращение wp_footer действует аналогично и располагается в файле footer.php - мы рассмотрим его в части 8 данной серии статей.

Непосредственно перед закрытием тега </head> добавьте следующий код:

<?php wp_head(); ?>

Теперь сохраните файл. Дело сделано!

Заключение

Мы добавили в нашу тему важные элементы файла header.php, которые должны присутствовать в каждой теме WordPress.

В следующей части этой серии вы узнаете, как добавить меню навигации в файл заголовка, а затем в части 7 я расскажу, как добавить в заголовок виджет. Через него вы сможете добавить контактную информацию или то, что вы хотели бы выводить в заголовке.