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

Вы также можете ознакомиться с этой информацией, посмотрев наш видео урок:

Шаг 1. Введение

В этом файле у нас не только логотип и меню, есть еще также тег head и много других тегов, например: link, script, meta и title.

Я написал пример файла header.php. Я постарался создать максимально полный файл, но не стесняйтесь комментировать это руководство с советами по поводу содержимого.

Помните, что ваша "шапка" – это контент, который отображается на всех страницах вашего сайта. Например, логотип и меню показываются на всех страницах, так что они будут добавлены в header.php.

Если элемент отображается только на конкретной странице, вам нужно еще раз подумать, нужно ли добавлять этот элемент в файл вашей шапки.

Давайте же приступим к работе, я надеюсь, вам понравится!

Шаг 2. Готовый Код

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

Для начала, вставьте эти строки в верх вашего файла functions.php: (помните, что вам нужно будет отредактировать пути к вашим файлам CSS и JavaScript)

define("THEME_DIR", get_template_directory_uri());
/*--- REMOVE GENERATOR META TAG ---*/
remove_action('wp_head', 'wp_generator');

// ENQUEUE STYLES
	
function enqueue_styles() {
	
	/** REGISTER css/screen.css **/
	wp_register_style( 'screen-style', THEME_DIR . '/css_path/screen.css', array(), '1', 'all' );
	wp_enqueue_style( 'screen-style' );
		
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
	
// ENQUEUE SCRIPTS
	
function enqueue_scripts() {
	
	/** REGISTER HTML5 Shim **/
	wp_register_script( 'html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array( 'jquery' ), '1', false );
	wp_enqueue_script( 'html5-shim' );
		
	/** REGISTER HTML5 OtherScript.js **/
	wp_register_script( 'custom-script', THEME_DIR . '/js_path/customscript.js', array( 'jquery' ), '1', false );
	wp_enqueue_script( 'custom-script' );
		
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

Теперь в файл header.php добавьте эти строки: (помните, что вам нужно будет отредактировать пути к вашим файлам CSS и JavaScript)

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
<head>

	<!--=== META TAGS ===-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<meta name="description" content="Keywords">
	<meta name="author" content="Name">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	
	<!--=== LINK TAGS ===-->
	<link rel="shortcut icon" href="<?php echo THEME_DIR; ?>/path/favicon.ico" />
	<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS2 Feed" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

	<!--=== TITLE ===-->	
	<title><?php wp_title(); ?> - <?php bloginfo( 'name' ); ?></title>
	
	<!--=== WP_HEAD() ===-->
	<?php wp_head(); ?>
	 
</head>
<body <?php body_class(); ?>>

<!-- HERE GOES YOUR HEADER MARKUP, LIKE LOGO, MENU, SOCIAL ICONS AND MORE -->

<!-- DON'T FORGET TO CLOSE THE BODY TAG ON footer.php FILE -->

В шапке "должны" быть некоторые вещи. Этот шаблон, который я сделал, делает следующее: (в следующих шагах я поговорю о каждом конкретном)

  • доктайпы;
  • условия для IE8, 7, 6;
  • мета теги для того, чтобы тема правильно воспринималась;
  • фавиконка, RSS и пингбек;
  • заголовок;
  • следуя официальным правилам WordPress, добавления скриптов и стилей с помощью функций wp_enqueue_script и wp_enqueue_style;
  • Оптимизированный с помощью констант код без тега Meta Generator (для безопасности);
  • чистый и откомментированный код.

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

Шаг 3. Файл functions.php

Давайте поговорим о файле functions.php, мы добавили следующие строки в файл:

define("THEME_DIR", get_template_directory_uri());
/*--- REMOVE GENERATOR META TAG ---*/
remove_action('wp_head', 'wp_generator');

// ENQUEUE STYLES
	
function enqueue_styles() {
	
	/** REGISTER css/screen.cs **/
	wp_register_style( 'screen-style', THEME_DIR . '/css_path/screen.css', array(), '1', 'all' );
	wp_enqueue_style( 'screen-style' );
		
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
	
// ENQUEUE SCRIPTS
	
function enqueue_scripts() {
	
	/** REGISTER HTML5 Shim **/
	wp_register_script( 'html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array( 'jquery' ), '1', false );
	wp_enqueue_script( 'html5-shim' );
		
	/** REGISTER HTML5 OtherScript.js **/
	wp_register_script( 'custom-script', THEME_DIR . '/js_path/customscript.js', array( 'jquery' ), '1', false );
	wp_enqueue_script( 'custom-script' );
		
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

Первая строка создает константу THEME_DIR, которая хранит директорию шаблона. Мы создаем эту константу для того, чтобы оптимизировать тему. Если вы посмотрите в наш файл header.php, вы увидите, что нам нужно использовать директорию несколько раз, мы используем ее также в файле functions.php, чтобы вывести путь к теме. Если мы постоянно вызываем get_template_directory_uri(), мы просто создаем запросы. Создавая константу и используя ее, мы экономим ресурсы процессора, поскольку мы вызываем функцию только один раз.

/*--- REMOVE GENERATOR META TAG ---*/
remove_action('wp_head', 'wp_generator');

Эта строка удаляет тег Meta Generator, поскольку этот тег показывает всем установленную версию WordPress. Эта информация может позволить злоумышленнику узнать баги вашей версии и использовать их.

Добавление вашего CSS

// ENQUEUE STYLES
	
function enqueue_styles() {
	
	/** REGISTER css/screen.cs **/
	wp_register_style( 'screen-style', THEME_DIR . '/css_path/screen.css', array(), '1', 'all' );
	wp_enqueue_style( 'screen-style' );
		
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );

Здесь мы создали функцию для добавления тегов link в header.php. Официальное руководство WordPress указывает, что лучший способ добавления стилей (.css) и скриптов (.js) – это использование функций wp_enqueue_script и wp_enqueue_style. Больше об этом можно узнать в здесь.

Сначала мы создаем функцию под названием enqueue_styles и затем мы вызываем функцию add_action. Эта строка говорит WordPress, что он должен вызвать нашу функцию, когда происходит событие ‘wp_enqueue_scripts’, что происходит при нашем вызове wp_head() в header.php!

Внутри нашей функции у нас следующие строки:

	/** REGISTER css/screen.cs **/
	wp_register_style( 'screen-style', THEME_DIR . '/css_path/screen.css', array(), '1', 'all' );
	wp_enqueue_style( 'screen-style' );

Сначала мы зарегистрируем нашу таблицу стилей и добавим ее в очередь WordPress.

Мы используем функцию wp_register_style, чтобы зарегистрировать стиль. Эта функция требует следующее:

  • Параметр #1: Имя, которое вы можете выбрать, что-то вроде mystyle, mediaqueries
  • Параметр #2: Путь к файлу, обратите внимание, что мы здесь используем константу THEME_DIR.
  • Параметр #3: Здесь вы пишете ваши зависимости, названия файлов стилей, которые нужно загрузить перед этим файлом.
  • Параметр #4: Версия.
  • Параметр #5: Медиа-атрибут для тега link.

Затем мы вызываем функцию wp_enqueue_style и передаем в качестве параметра имя нашего стиля, который будет добавлен.

Чтобы добавить в файл больше стилей, просто скопируйте эти две строки и измените имя, директорию и другие параметры.

Добавление скриптов

Теперь мы рассмотрим функцию, которая добавляет наши скрипты.

// ENQUEUE SCRIPTS
	
function enqueue_scripts() {
	
	/** REGISTER HTML5 Shim **/
	wp_register_script( 'html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array( 'jquery' ), '1', false );
	wp_enqueue_script( 'html5-shim' );
		
	/** REGISTER HTML5 OtherScript.js **/
	wp_register_script( 'custom-script', THEME_DIR . '/js_path/customscript.js', array( 'jquery' ), '1', false );
	wp_enqueue_script( 'custom-script' );
		
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

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

Чтобы добавить скрипты, мы используем функции wp_register_script и wp_enqueue_script. Функция wp_register_script требует следующих параметров:

  • Параметр #1: Имя, которое вы можете выбрать, что-то вроде jquery, dojo, и т.п.
  • Параметр #2: Путь к файлу, обратите внимание, что мы здесь используем константу THEME_DIR.
  • Параметр #3: Здесь вы пишете ваши зависимости, названия файлов скриптов, которые нужно загрузить перед этим файлом.
  • Параметр #4: Версия.
  • Параметр #5: Здесь вы говорите, будет этот скрипт добавлен в вызове функции wp_head() (обычно в header.php) или wp_footer() (обычно в footer.php). Если вы передадите false, он будет загружен в wp_head(). Если вы передадите true, будет загружен в wp_footer().

Затем мы вызываем функцию wp_enqueue_script и передаем в качестве параметра имя нашего скрипта, который мы хотим добавить.

Чтобы добавить больше скриптов в ваш файл, просто скопируйте эти две строки и измените имена, директорию и другие параметры.

Шаг 4. header.php

Сначала я перечислю здесь ссылки на библиотеки, которые мы можем использовать в этом шаблоне, я уже использую jQuery и HTML5 Shim в этом шаблоне, но вы можете добавить другие.

  • jQuery – библиотека для добавления симпатичных эффектов в вашу тему, я думаю, вы неверное знаете эту библиотеку, она уже включена в WordPress по умолчанию.
  • Modernizr – эта библиотека позволяет вам знать точно возможности, которые поддерживает браузер пользователя.
  • HTML5 Shim – эта библиотека позволяет браузерам, у которых нет своей встроенной поддержки разметки HTML5, поддерживать ее.
  • Respond.js – позволяет браузерам, у которых нет встроенной поддержки CSS3 медиа-запросов, начать их поддерживать.

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

Doctype

В этом шаблоне мы используем стандартный доктайп HTML5:

<!doctype html>

Тег <html>

<!--[if lt IE 7]> <html class="no-js ie6 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->

В этой части, мы использовали некоторые условия для IE , которые добавляют класс в соответствии с версией IE, или не добавляет ничего, если браузер не IE 8 или ниже (Firefox, IE9, Chrome и другие).

Это действительно удобно потому, что вы можете создать правило внутри CSS файла, чтобы оно подействовало на объект, если браузер IE 7:

/* RUNS ON ALL BROWSERS */
#mymenu { 
	width: 400px;
}
/* RUNS ONLY ON IE7 */
.ie7 #mymenu {
	width: 200px;
}

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

Теги <meta>

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

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Эта строка подтверждает, что браузер не будет использовать Quirks Mode, это очень полезно, так как этот режим может поломать разметку.

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

Эта строка сообщает браузеру кодировку, чтобы избежать неизвестных символов.

<meta name="description" content="Keywords">
<meta name="author" content="Name">

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Этот тег удаляет/сбрасывает любое увеличение мобильным устройством, по типу iPad и iPhone, очень удобно, если вы работаете с гибкой разметкой.

Теги <link>

<link rel="shortcut icon" href="<?php echo THEME_DIR; ?>/path/favicon.ico" />

Эта строка добавляет фавиконку для вашей страницы, добавляет немного профессионального вида вашему сайту.

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS2 Feed" href="<?php bloginfo('rss2_url'); ?>" />

Ссылка на RSS ленту вашего сайта.

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

Ссылка на пингбек URL вашего сайта.

Тег <title>

<title><?php wp_title(); ?> - <?php bloginfo( 'name' ); ?></title>

Тег заголовка очень важен, поскольку он заменяет заголовок по умолчанию и улучшает ваши позиции в поисковых системах.

wp_head()

<?php wp_head(); ?>

Это очень важная функция, вы обязательно должны вызвать эту функцию! С помощью этой функции WordPress добавляет код из плагинов, JavaScript библиотек и т.д.

Источник: WP.tutsplus.com

Вам понравился материал?

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

28 комментариев

сначала новые
по рейтингу сначала новые по хронологии

Доброе время! А как создать дополнительный файл header? Например, если я хочу, чтобы на сингл-записях вместо картинки сайта выводилось изображение записи и вместо названия сайта (так в используемой теме) стояло название статьи? Создал файл header-featureimage.php, в файле single.php вместо get_header() написал get_header('featureimage'), но WP его не видит, загружает стандартную шапку.
Что и где надо прописать, чтоб видел?

Автор, привет! Всем привет!
Как убрать слово Архивы в title (который в head) ?
ТХ:
— WordPress Версия 4.8
— тема Twenty Fifteen
На данный момент всё обновлено до последней версии.
При просмотре страницы категории (рубрики) в title в начале написано Архивы … , а затем название категории (рубрики).
Как убрать?
Заранее благодарю за ответ!

Нужно найти файл category.php или archive.php среди файлов темы и в его коде найти html, который отвечает за вывод заголовка таким образом и отредактировать.

Добрый день!
Отличная статья, помогла разобраться в некоторых вопросах.
Посмотрите, сделал с помощью неё дополнительные фишки на сайте:
aquasilver .ru

мессир

Я мало что понял, но хочу спросить - это руководство подходит для замены дефолтного хедера на кастомный в теме, которая изначально таких манипуляций по дашборду не поддерживает? У меня тема Tirpitz, если что. И я уже задолбался пытаться хедер менять :) Не могу никак свою картинку туда засунуть

андрей

не подходит. у тебя между социальными кнопками и поиском есть как раз место под баннер.

Theme Preview
Previewing Another WordPress Blog

Владимир

Спасибо. Очень помогли в решении проблемы с генерацией заголовка и описания страницы

Михаил

Здравствуйте.Можете ли Вы растолковать новичку.Я создал блог на Wordpress с определённой тематикой и рубриками. Зарегистрирован в одной из СРА (СиПиЭй) сети и хочу гнать трафик через свой блог на сайт оффера для продвижения.Но, как мне сообщили в СРА сети-нужно вставить свой логин моего аккаунта этой СРА сети на шапку или подвал блога, или в контент, но честно-я не понял, как это делается.Может Вы разъсните мне подробнее? С уважением Михаил.

Пытаюсь перенести верстку на WP. Подскажите, можно ли как-то div, оборачивающий всю страницу открыть в header.php а закрыть в footer.php? Если утрировать, такая верстка: https://jsfiddle.net/z8k7ckth/

Добрый день, подскажите, вставил в хэдэр код: , но сайт для мобильных устройств всё равно не "ужимается", уже всё перепробовал, подскажите в чём мой косяк?
mummysblog.ru

не могу вставить код meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"

Добрый день, скажите пожалуйста, если я использую много раз get_template_directory_uri (), не выгоднее ли по ресурсам прописать вручную путь к шаблону?

Лучше стараться избегать использования прямых УРЛов в коде. Да и выгоды тут все равно не будет.

Т.е, если использовать 3 - 4 get_template_directory_uri (), выгоды совсем никакой? Ведь есть куча статей, в которых говорят, что лучше ставить прямые урлы.

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

Уехал код. Замените &lt, &gt и прочую чушь на нормальные символы. За статью спасибо.

В этой статье нашел тонкости, которых раньше не знал, спасибо за статью.

Ещё опечатка: /** REGISTER css/screen.cs **/

Ошибка: написано /** REGISTER HTML5 OtherScript.js **/

HTML5 Shim обычно подключается для IE через условные комментарии. Но если делать "как надо", библиотека подгружается всеми браузера. Смысл?

А в общем-то идея замечательная. Продолжаю ковыряться )

длдло дло жло жо

вопрос:
1. при обновлении темы, вы опять изменяете файлы?

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

Прикольная форма комментариев

Да ниче так

потрясающе, спасибо большущее. куча прекрасной новой информации!

Очень подробная и хорошая инструкция. Спасибо большое!