В предыдущей статье мы создали нашу среду разработки темы WordPress, в этой статье мы пойдем на один шаг вперед и создадим шапку (header) в теме WordPress. Для того, чтобы научиться делать свою тему на WordPress или “натягивать” свою верстку на движок можно использовать несколько подходов. Самый простой – взять стандартную тему WP и разобрать, как и что в ней работает, копируя в свою тему нужные части готового кода. Такой себе копипаст. После установки темы, которую мы создали в предыдущей статье с помощью underscores, откройте свой сайт WordPress в браузере. Вы должны увидеть сломанный сайт без стиля, когда вы закончите читать эту статью, вы увидите, что верхняя часть (шапка) вашей темы WordPress полностью настроена. Обычно в эту часть входят – логотип, меню, описание и название сайта. Вот так выглядит сайт сейчас Создание своей темы WordPress - Header.php Файлы, используемые при создании верхней части сайта. Нам понадобятся следующие файлы:
  • header.php
  • functions.php
  • style.css

Что делает каждый из файлов.

header.php header.php используется для отображения верхней части темы WordPress. Этот файл содержит код для отображения изображения, заголовка сайта, слогана сайта и меню. Эта часть одинакова (или почти одинакова) для всех страниц, поэтому ее выносят в отдельный файл, который потом можно легко и просто подключить к любой странице одной строкой кода:
<?php get_header(); ?>
Но если для какой-то страницы шаблона нужно использовать другую шапку, можно создать новый файл шапки, и назвать, например, header-new.php А потом вызвать его при помощи стандартной функции:
<?php get_header( ‘ new ‘ ); ?>
functions.php Этот файл содержит основные функции вашей темы. Он используется для изменения поведения по умолчанию в WordPress, здесь вы можете определить свои собственные функции. style.css Этот файл содержит стили для нашей темы WordPress.

Подключение стилей, скриптов и шрифтов

Предположим, у вас есть готовая верстка с подключенными стилями и скриптами. Создадим в корне темы, там, где находится index.php папку для стилей. Скопируем все файлы .css из папки шаблона верстки в только что созданную папку с нашей темой test (кроме главного файла style.css, который всегда должен находится на одном уровне с index.php). Теперь открываем файл style.css верстки и копируем его содержимое. Открываем тот же файл в папке с темой и добавляем в него все, что скопировали из исходника (то, что было можно удалить). Аналогично создадим папку для скриптов. Копируем все файлы .js из папки js исходного шаблона, в только что созданную папку темы. Теперь используя функцию wp_enqueue_style подключаем нужные css файлы и шрифты. Открываем файл functions.php – внизу, там, где подключен скрипт вставляем. function test_style() { wp_enqueue_style( ‘font’,  ‘https://fonts.googleapis.com/css?family=Oswald’); wp_enqueue_style( ‘font-awesome’, ‘https://maxcdn.bootstrapcdn.com /font-awesome/4.7.0/css/font-awesome.min.css’); wp_enqueue_style( ‘bootstrap’, ‘https://maxcdn.bootstrapcdn.com/bootstrap /4.0.0/css/bootstrap.min.css’); wp_enqueue_style( ‘test_style’, get_stylesheet_uri() ); } add_action( ‘wp_enqueue_scripts’, ‘test_style’ ); здесь мы подключили шрифты, фавиконки, стили bootstrap. Главный файл style.css подключается в конце – wp_enqueue_style( ‘test_style’, get_stylesheet_uri() ); Подключаем скрипты, используя функцию wp_enqueue_script. function test_scripts() { wp_enqueue_script( ‘jQuery ‘, get_template_directory_uri() . ‘/js/jQuery 3.3.1.js’, array (‘jquery’), ”, true ); wp_enqueue_script( ‘test-navigation’, get_template_directory_uri() . ‘/js/navigation.js’, array(), ‘20151215’, true ); wp_enqueue_script( ‘scripts’, get_template_directory_uri() . ‘/js/scrypt.js’, array (‘jquery’), ”, true ); wp_enqueue_script( ‘test-skip-link-focus-fix’, get_template_directory_uri() . ‘/js/skip-link-focus-fix.js’, array(), ‘20151215’, true ); if ( is_singular() && comments_open() && get_option( ‘thread_comments’ ) ) { wp_enqueue_script( ‘comment-reply’ ); } } add_action( ‘wp_enqueue_scripts’, ‘test_scripts’ ); array (‘jquery‘) – означает, что данный скрипт зависит от jquery и подгрузится после него.
‘test_style’, test_scripts -вместо test пишите название своей темы!
Теперь должны подключиться стили и скрипты верстки. Проверяйте подключение на сайте с помощью F12. Более детально о правильном подключении скриптов читайте в этой статье.

Header.php

Рассмотрим из чего состоит файл header.
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
 <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="profile" href="https://gmpg.org/xfn/11">
 <?php wp_head(); ?>
</head>
Открыв файл header.php вы должны увидеть следующий код (скриншот). Давайте рассмотрим верхнюю часть: Создание своей темы WordPress - Header.php Здесь выводится название языка сайта и его направление – language_attributes(); Кодировка сайта – bloginfo( ‘charset’ ); wp_head() -обязательная строка!, которая выводится перед закрывающим тэгом </head>. С помощью этого хука подключаются стили и скрипты (те, что мы подключили через wp_enqueue_style()) и метатэги (title, description, robots). Выведем в шапке название сайта и его описание.
<!-- Site title -->
<div class="site-title-box col-md-4">
<p class="site-title">
<?php
if ( is_front_page() && is_home() ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
<?php else : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
<?php
endif;
?>
<i class="fa fa-bars menu-toggle" aria-controls="primary-menu" id="menu-toggle" aria-expanded="false"></i>
</p>
</div>
<p class="site-description"><?php bloginfo('description'); ?> </p>
Создание своей темы WordPress - Header.php
  1. if(is_front_page() && is_home()) – это условие проверяет, является ли текущая страница домашней. Если текущая страница-Домашняя страница, используйте <h1>, чтобы показать имя блога, иначе использует тег <р> для отображения имени блога.
  2. esc_url( home_url( ‘/’ ) ) – эта функция используется для извлечения URL-адреса сайта.
  3. get_bloginfo( ‘description’, ‘display’ ) – дает описание сайта или  слоган сайта.
  4. bloginfo( ‘name’ ) – выводит название сайта, которое прописано в настройках.Создание своей темы WordPress - Header.php
  5. bloginfo(‘description’) – описание сайта из настроек.
  6. wp_nav_menu() – эта функция отображает меню навигации. То, какие пункты будут отображаться в меню можно настроить в админ-панели. Внешний вид- меню.Создание своей темы WordPress - Header.php
Любое меню должно быть зарегистрировано в файле function.php. Так как мы использовали Underscores в качестве основы, там уже зарегистрировано одно меню. Создание своей темы WordPress - Header.php Зарегистрируем свое меню в  function.php, например для отображения навигации на мобильных устройствах. В  function.php пропишем такие строки: /* MOBILE MENU */ register_nav_menus( array( ‘primary’ => esc_html__( ‘Primary-mobile’, ‘test’ ), ) ); Создание своей темы WordPress - Header.php Теперь заходим во Внешний вид- меню, придумаем название своего меню и задаем область его отображения. Чтобы вывести это меню на сайте нужно также воспользоваться фнкцией wp_nav_menu ( $args ) где $args – это параметры меню. Сама функция wp_nav_menu() имеет множество параметров. В нашем примере это <?php wp_nav_menu( array( ‘theme_location’ => ‘Primary’, ‘menu_id’ => ‘primary-menu’ ) ); ?> ‘theme_location’ — это ключ, с помощью которого мы зарегистрировали меню ранее в файле functions.php. ‘menu_id’ – id самого меню (тега ul). Более подробно обо всех параметрах можно почитать в кодексе WordPress. Вот и все, наша шапка готова, дальше можно менять стили в ней по своему усмотрению, добавлять произвольные поля и кастомизировать на свой вкус. Создание своей темы WordPress - Header.php В следующей статье рассмотрим, как подключать footer (подвал) и sidebar.