В предыдущей статье мы создали нашу среду разработки темы 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.

Открыв файл header.php вы должны увидеть следующий код (скриншот). Давайте рассмотрим верхнюю часть:

Создание своей темы WordPress - Header.php

Здесь выводится название языка сайта и его направление – language_attributes();

Кодировка сайта – bloginfo( ‘charset’ );

wp_head() -обязательная строка!, которая выводится перед закрывающим тэгом </head>. С помощью этого хука подключаются стили и скрипты (те, что мы подключили через wp_enqueue_style()) и метатэги (title, description, robots).

Выведем в шапке название сайта и его описание.

Создание своей темы 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.