В предыдущей статье мы создали нашу среду разработки темы WordPress, в этой статье мы пойдем на один шаг вперед и создадим шапку (header) в теме WordPress.
Для того, чтобы научиться делать свою тему на WordPress или “натягивать” свою верстку на движок можно использовать несколько подходов. Самый простой – взять стандартную тему WP и разобрать, как и что в ней работает, копируя в свою тему нужные части готового кода. Такой себе копипаст.
После установки темы, которую мы создали в предыдущей статье с помощью underscores, откройте свой сайт WordPress в браузере. Вы должны увидеть сломанный сайт без стиля, когда вы закончите читать эту статью, вы увидите, что верхняя часть (шапка) вашей темы WordPress полностью настроена. Обычно в эту часть входят – логотип, меню, описание и название сайта.
Вот так выглядит сайт сейчас
Файлы, используемые при создании верхней части сайта.
Нам понадобятся следующие файлы:
- 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
//www.lenakso.top/font-awesome/4.7.0/css/font-awesome.min.css');
wp_enqueue_style( 'bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap
//www.lenakso.top/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() . '//www.lenakso.top/js/navigation.js', array(), '20151215', true );
wp_enqueue_script( 'scripts', get_template_directory_uri() . '//www.lenakso.top/js/scrypt.js', array ('jquery'), '', true );
wp_enqueue_script( 'test-skip-link-focus-fix', get_template_directory_uri() . '//www.lenakso.top/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 вы должны увидеть следующий код (скриншот). Давайте рассмотрим верхнюю часть:
Здесь выводится название языка сайта и его направление — 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>
- if(is_front_page() && is_home()) — это условие проверяет, является ли текущая страница домашней. Если текущая страница-Домашняя страница, используйте <h1>, чтобы показать имя блога, иначе использует тег <р> для отображения имени блога.
- esc_url( home_url( ‘/’ ) ) — эта функция используется для извлечения URL-адреса сайта.
- get_bloginfo( ‘description’, ‘display’ ) — дает описание сайта или слоган сайта.
- bloginfo( ‘name’ ) – выводит название сайта, которое прописано в настройках.
- bloginfo(‘description’) – описание сайта из настроек.
- wp_nav_menu() — эта функция отображает меню навигации. То, какие пункты будут отображаться в меню можно настроить в админ-панели. Внешний вид- меню.
Любое меню должно быть зарегистрировано в файле function.php.
Так как мы использовали Underscores в качестве основы, там уже зарегистрировано одно меню.
Зарегистрируем свое меню в function.php, например для отображения навигации на мобильных устройствах. В function.php пропишем такие строки:
/* MOBILE MENU */ register_nav_menus( array( 'primary' => esc_html__( 'Primary-mobile', 'test' ), ) );
Теперь заходим во Внешний вид- меню, придумаем название своего меню и задаем область его отображения.
Чтобы вывести это меню на сайте нужно также воспользоваться фнкцией 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.
Вот и все, наша шапка готова, дальше можно менять стили в ней по своему усмотрению, добавлять произвольные поля и кастомизировать на свой вкус.
В следующей статье рассмотрим, как подключать footer (подвал) и sidebar.
Для большинства пользователей WordPress — это черный ящик. Вы помещаете Read more
Если вы веб-разработчик и создаете веб-сайты с помощью HTML и Read more
Понимание того, как использовать функцию wp_query может поднять ваши навыки Read more
В моей последней статье я писала о создании пользовательских типов Read more
Эта статья научит вас, как реализовать пользовательские типы записей WordPress. Read more
functions.php файл шаблона функций в WordPress действительно является двигателем вашей Read more