
Что такое хедер сайта
Прямой перевод – «шапка». Находится в верхней части, может быть оформлена по общему стилю или индивидуально. Основные элементы:- название;
- слоган;
- логотип компании;
- контактные данные;
- навигация
Содержимое header WordPress

Добавление метатегов в хедер осуществляется при помощи текстового редактора (рекомендуется Notepad++). В их список входят: head, title, meta, script, link. Как пример, рассмотрим наиболее полный файл без лишних элементов. Дальнейшее внедрение дополнительного функционала зависит от потребностей отдельного заказчика.
Кодовая часть
Необходимо добавить следующие строки в верхнюю часть 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.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 следует прописать код:
<!doctype html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<!--=== META TAGS ===-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="description" content="description">
<meta name="keywords" content="keywords">
<meta name="author" content="Your 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 -->
|
Подробно рассмотрев пример, указанный выше, разделим его на несколько важных элементов, обязательных в файле:
- doctype; (Тип документа)
- языковые атрибуты (ранее использовались условия для браузеров старых версий, однако современный вариант упускает этот момент);
- список метатегов;
- фавикон, RSS, пингбек;
- заголовок;
- при необходимости функции «wp_enqueue_script» и «wp_enqueue_style».
Важно: В сети можно встретить рекомендации добавляйть комментарии к строкам, ведь – это сократит время поиска нужных кодов. На самом деле, с точки зрения поисковой эффективности – это мусор на который можно сократить страницу. Мы рекомендуем не злоупотреблять комментариями и прибегать к ним в крайних случаях.
Работа с function.php
Указанный ранее код уже помещен в функциональный файл. Некоторые элементы позволяют нам сократить затраты ресурсов сервера на обработку запросов путем создания константы THEME_DIR. Это изложено в первой строке, где сохраняется директория шаблона. Является важным элементом оптимизации темы. Некоторые вебмастера идут сложным путем, вызывая повторные запросы через «get_template_directory_uri()».
Следующая строка избавляет от генератора метатегов, который демонстрирует текущую версию шаблона пользователям (включая злоумышленников).
/*--- REMOVE GENERATOR META TAG ---*/;
remove_action('wp_head', 'wp_generator');
|
Добавление CSS
Теперь необходимо добавить тег link в header.php – для этого создается функция:
// 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_styles».
- Вызов «add_action», если происходит событие «wp_enqueue_scripts».
/** REGISTER css/screen.cs **/;
wp_register_style( 'screen-style', THEME_DIR . '/css_path/screen.css', array(), '1', 'all' );
wp_enqueue_style( 'screen-style' );
|
Для регистрации таблицы стилей используется «wp_register_style», она требует список параметров:
- Выбор доступного имени.
- Указание пути к файлу (в данной ситуации используется константа THEME_DIR).
- Вписываются условия, необходимые файлы для предварительной загрузки, название стилей.
- используемая версия.
- Медиа-атрибут тега link.
Далее, вызывается «wp_enqueue_style» и передается имя стиля, который будет применен. Для добавления нескольких образцов в header WordPress можно повторно копировать строки, а также изменять имеющиеся параметры.
Добавление скриптов
Применяя данный код происходит добавление скриптов:
// 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' );
div class="line-5">
/** 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_style» – отличается лишь 5 пункт, в котором определяется, будет ли добавлен вызов через «wp_head» (значение fals) или «wp_footer» (значение true).
Через «wp_enqueue_script» указывается имя скрипта для интеграции. Для большего количества образцов необходимо повторно скопировать код, изменить параметры, имя и директорию.
Header WordPress
Стандартный файл содержит набор тегов и функций, используемых по умолчанию. Рассмотрим их особенности и функционал.
<html>
Устанавливаются языковые атрибуты или добавляются классы в соответствии с версией браузера (больше не применяется).
<html <?php language_attributes(); ?> class="no-js no-svg">
|
Добавление метатегов в хедер является важной операцией, поскольку браузеру передается важная информация для правильного отображения темы.
Строка отключающая использование браузером Quirks Mode – данный режим плохо сказывается на разметке:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta charset="<?php bloginfo( 'charset' ); ?>" />
|
<meta name="description" content="description">
<meta name="keywords" content="keywords">
|
<link>
Добавление favicon для сайта:
<link rel="shortcut icon" href="<?php echo THEME_DIR; ?>/path/favicon.ico" />
|
Ссылка RSS-ленты:
<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>
Высокая важность. Изменяет стандартный заголовок, улучшая SEO-параметры:
<title><?php wp_title(); ?> - <?php bloginfo( 'name' ); ?></title>
|
- wp_head WordPress – используется для добавления кода из плагинов, скриптов, библиотек;
- get_header WordPress – выполняет подключение файла шаблона (для каждой страницы отдельное имя).