Как создать тему для WordPress. Часть 2: настройка header.php

Это второй урок из серии о том, как создать собственную тему для WordPress. Из него вы узнаете, какие функции должны быть в файле header.php.

Запись обновлена 6 сентября 2015 года

В этом уроке подразумевается, что вы уже выполнили шаги из части 1.

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

Языковые атрибуты html

Добавим определение языка пользователя для нашей темы. К тегу html, допишем следующее:

1	<html <?php language_attributes(); ?>>

Настройка title

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

1	<title>Simple Blog Home</title>

и заменим ее на динамический вывод:

<title>

<?php

wp_title( ‘|’, true, ‘right’ );

</title>

wp_title добавляет заголовок текущей страницы.

Определение кодировки

Также сделаем автоматическое определение кодировки. Замените строку

1	<meta charset=“UTF-8”>

на

1	<meta charset=“<?php bloginfo( ‘charset’ ); ?>“ />

Добавим wp_head

Теперь, перед закрывающим тегом head, добавим функцию wp_head, которая будет загружать стандартные скрипты, стили, мета-теги и другую важную информацию:

1	<?php wp_head(); ?>

Удаляем ненужное

После добавления wp_head, нам больше не нужны другие мета-теги, кроме тега определения кодировки, поэтому если они есть, удалим их:

1 2	<meta name=“description” content=“” /> <meta name=“keywords” content=“” />

Тег body

Кроме этого, нужно добавить стандартные классы для тега body. Сейчас он у нас выглядит так:

<body>

Добавим классы через функцию body_class();

1	<body <?php body_class(); ?>>

На этом мы закончили с редактированием файла header.php (в дальнейшем нужно будет вынести скрипты и стили в файл functions, но давайте сначала сделаем основной функционал). Можно переходить к файлу index.php. О том, как его настроить, вы узнаете из следующего урока.

Исходный код урока доступен здесь.

Чтобы не пропустить следующий урок, подписывайтесь на RSS блога, или присоединяйтесь в фейсбуке!