В этом руководстве мы поговорим о 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
Файл темы header.php — тонкости настройки,
