Создание своей темы WordPress — Header.php
В предыдущей статье мы создали нашу среду разработки темы WordPress, в этой статье мы пойдем на один шаг вперед и создадим шапку (header) в теме WordPress.
Для того, чтобы научиться делать свою тему на WordPress или “натягивать” свою верстку на движок можно использовать несколько подходов. Самый простой – взять стандартную тему WP и разобрать, как и что в ней работает, копируя в свою тему нужные части готового кода. Такой себе копипаст.
После установки темы, которую мы создали в предыдущей статье с помощью underscores, откройте свой сайт WordPress в браузере. Вы должны увидеть сломанный сайт без стиля, когда вы закончите читать эту статью, вы увидите, что верхняя часть (шапка) вашей темы WordPress полностью настроена. Обычно в эту часть входят – логотип, меню, описание и название сайта.
Вот так выглядит сайт сейчас
Файлы, используемые при создании верхней части сайта.
Нам понадобятся следующие файлы:
Что делает каждый из файлов.
header.php используется для отображения верхней части темы WordPress. Этот файл содержит код для отображения изображения, заголовка сайта, слогана сайта и меню. Эта часть одинакова (или почти одинакова) для всех страниц, поэтому ее выносят в отдельный файл, который потом можно легко и просто подключить к любой странице одной строкой кода:
Но если для какой-то страницы шаблона нужно использовать другую шапку, можно создать новый файл шапки, и назвать, например, header-new.php
А потом вызвать его при помощи стандартной функции:
functions.php
Этот файл содержит основные функции вашей темы. Он используется для изменения поведения по умолчанию в WordPress, здесь вы можете определить свои собственные функции.
Этот файл содержит стили для нашей темы 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.
Открыв файл header.php вы должны увидеть следующий код (скриншот). Давайте рассмотрим верхнюю часть:
Здесь выводится название языка сайта и его направление — language_attributes();
Кодировка сайта — bloginfo( ‘charset’ );
wp_head() -обязательная строка!, которая выводится перед закрывающим тэгом . С помощью этого хука подключаются стили и скрипты (те, что мы подключили через wp_enqueue_style()) и метатэги (title, description, robots).
Выведем в шапке название сайта и его описание.
- if(is_front_page() && is_home()) — это условие проверяет, является ли текущая страница домашней. Если текущая страница-Домашняя страница, используйте , чтобы показать имя блога, иначе использует тег для отображения имени блога.
- 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() имеет множество параметров. В нашем примере это
‘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
Файл темы header.php тонкости настройки
Один из ключевых файлов темы WordPress, который отвечает за подключение стилей, встроенных функций и скриптов. Благодаря ему происходит передача всех необходимых данных для поочередного запуска модулей и структуры сайта браузеру. Не требует постоянной настройки.
Что такое хедер сайта?
Прямой перевод – «шапка». Находится в верхней части, может быть оформлена по общему стилю или индивидуально. Основные элементы:
- название;
- слоган;
- логотип компании;
- контактные данные;
- навигация
Используя правильную компоновку навигационных элементов, привлекательный дизайн и краткую информацию о деятельности сайта, можно значительно улучшить поведенческие факторы, включая первое впечатление посетителей. Header.php находится в корневой директории выбранного шаблона.
Содержимое header WordPress
Добавление метатегов в хедер осуществляется при помощи текстового редактора (рекомендуется Notepad++). В их список входят: head, title, meta, script, link. Как пример, рассмотрим наиболее полный файл без лишних элементов. Дальнейшее внедрение дополнительного функционала зависит от потребностей отдельного заказчика.
Кодовая часть
Необходимо добавить следующие строки в верхнюю часть functions.php:
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 ()
wp_register_script (‘html5-shim’, ‘http://html5shim.googlecode.com/svn/trunk/html5.js’, array(‘jquery’ ), ‘1’, false );
/** REGISTER HTML5 OtherScript.js **/
wp_register_script( ‘custom-script’, THEME_DIR . ‘/js_path/customscript.js’, array( ‘jquery’ ), ‘1’, false );
В header.php следует прописать код:
Подробно рассмотрев пример, указанный выше, разделим его на несколько важных элементов, обязательных в файле:
- 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 – для этого создается функция:
wp_register_style( ‘screen-style’, THEME_DIR . ‘/css_path/screen.css’, array(), ‘1’, ‘all’ );
Используются «wp_enqueue_script» и «wp_enqueue_style» согласно рекомендациям руководства по WordPress. Очередность действий:
| /** 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 можно повторно копировать строки, а также изменять имеющиеся параметры.
Добавление скриптов
Применяя данный код происходит добавление скриптов:
wp_register_script (‘html5-shim’, ‘http://html5shim.googlecode.com/svn/trunk/html5.js’, array(‘jquery’ ), ‘1’, false );
wp_enqueue_script( ‘html5-shim’ );
div>
/** REGISTER HTML5 OtherScript.js **/
wp_register_script( ‘custom-script’, THEME_DIR . ‘/js_path/customscript.js’, array( ‘jquery’ ), ‘1’, false );
Процесс аналогичен подключению стилей, но используются другие функции («wp_register_script» и «wp_enqueue_script»). Для первой необходимы схожие параметры, как для «wp_register_style» – отличается лишь 5 пункт, в котором определяется, будет ли добавлен вызов через «wp_head» (значение fals) или «wp_footer» (значение true).
Через «wp_enqueue_script» указывается имя скрипта для интеграции. Для большего количества образцов необходимо повторно скопировать код, изменить параметры, имя и директорию.
Header WordPress
Стандартный файл содержит набор тегов и функций, используемых по умолчанию. Рассмотрим их особенности и функционал.
Устанавливаются языковые атрибуты или добавляются классы в соответствии с версией браузера (больше не применяется).
Добавление метатегов в хедер является важной операцией, поскольку браузеру передается важная информация для правильного отображения темы.
Строка отключающая использование браузером Quirks Mode – данный режим плохо сказывается на разметке:
Указание кодировки для правильного отображения шрифтов:
Параметры, улучшающие SEO-показатели ресурса (описание, ключевые слова):
Добавление favicon для сайта:
Высокая важность. Изменяет стандартный заголовок, улучшая SEO-параметры:
Список стандартных и наиболее применяемых функций:
- wp_head WordPress – используется для добавления кода из плагинов, скриптов, библиотек;
- get_header WordPress – выполняет подключение файла шаблона (для каждой страницы отдельное имя).
Заключение
Таким образом осуществляется настройка header WordPress. Файл требует вмешательства только на начальном этапе подготовки темы. Повторное использование необходимо при подключении дополнительных функций, скриптов или таблиц стилей. Рассмотрены основные теги и их предназначение. Разработчики постоянно модернизируют платформу для минимизации человеческих действий в редактировании подобных файлов. Для безопасности, не рекомендуется использовать сторонние и непроверенные скрипты.