Файл темы header.php — тонкости настройки

В этом руководстве мы поговорим о 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

Алексей Шевченко

редактор wpcafe

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/