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

Файл темы header
header.php
Один из ключевых файлов темы WordPress, который отвечает за подключение стилей, встроенных функций и скриптов. Благодаря ему происходит передача всех необходимых данных для поочередного запуска модулей и структуры сайта браузеру. Не требует постоянной настройки.

Что такое хедер сайта

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

Содержимое header WordPress

Содержимое 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' );
Используются «wp_enqueue_script» и «wp_enqueue_style» согласно рекомендациям руководства по WordPress. Очередность действий:
  • Создание «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' ); ?>" />
Параметры, улучшающие SEO-показатели ресурса (описание, ключевые слова):
  <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 – выполняет подключение файла шаблона (для каждой страницы отдельное имя).

Заключение

Таким образом осуществляется настройка header WordPress. Файл требует вмешательства только на начальном этапе подготовки темы. Повторное использование необходимо при подключении дополнительных функций, скриптов или таблиц стилей. Рассмотрены основные теги и их предназначение. Разработчики постоянно модернизируют платформу для минимизации человеческих действий в редактировании подобных файлов. Для безопасности, не рекомендуется использовать сторонние и непроверенные скрипты.
Tags: