Учебное пособие по темам WordPress для начинающих — Часть 6: Тема Functions.php
Сегодня мы узнаем, где и как добавить код вне шаблонов в нашей теме. functions.phpМы делаем это, добавляя файл темы. Попутно мы также узнаем, как правильно добавлять таблицы стилей и скрипты.
Файл functions.php темы
Теме нужно где-то разместить код, который не является частью шаблонов. Всегда есть куча кода, который нужно добавить всем темам, чтобы поддерживать функциональность. Например, включение функции избранных изображений WordPress (вы заметили, что она отсутствует?), поддержка меню, виджетов, добавление таблиц стилей и скриптов (правильный способ) и многое другое.
Этот файл functions.php. WordPress автоматически и всегда загружает этот файл, если он существует в вашей теме. Он всегда загружен как в админке, так и в интерфейсе.
Добавляем файл functions.php в нашу тему
Давайте создадим новый пустой файл в корневой папке нашей темы и назовем его functions.php.
В этом файле сразу начните с открывающего тега PHP (<?php) и не включайте закрывающий тег. Файл functions.phpпредназначен для кода PHP, а не HTML. Ваша тема может сломаться (или даже просто вести себя странно), если в этом файле есть символы или символы новой строки вне тегов PHP. Очевидно, что вы можете вырваться из тегов PHP для вывода HTML, но это должно быть сделано внутри функций или хуков. Позвольте мне объяснить это с помощью эксперимента.
Давайте проверим этот файл, чтобы увидеть, как он работает. Внутри functions.phpнапишите эхо какого-то фиктивного текста:
<?php
echo 'This is an experiment';Обновите свой интерфейс. Появляется фиктивный текст. Но если вы проверите или просмотрите исходный код HTML, вы увидите, что текст появляется перед открытием файла <html>. Это делает полностью недействительным HTML!
Перейдите в панель администратора и нажмите «Обновить». Он делает то же самое и там (он может быть скрыт за панелью администратора, но он есть в HTML).
Как видите, любой код в ваших functions.phpшаблонах загружается раньше всего остального. Поэтому, как правило, любой вывод (HTML вне тегов PHP или echo) должен находиться внутри функций, которые будут запускаться в нужное время, обычно привязанные к действиям или фильтрам.
Вспомните, как мы узнали и добавили хуки в части 3 руководства по темам WordPress для начинающих. Мы запускаем код на хуке, прикрепляя к хуку функцию с помощью add_action(). Давайте проверим что-нибудь еще; давайте сделаем функцию, привязанную к хуку, который мы уже определили в наших шаблонах; wp_footer.
В functions.phpremove echoмы добавили для тестовых целей и вместо этого пишем:
<?php
add_action('wp_footer', 'wptutorial_print_footer');
function wptutorial_print_footer() {
echo 'This sentence will appear in footer!';
}Нажмите «Обновить» во внешнем интерфейсе и убедитесь, что строка отображается точно в том месте, которое вы определили wp_footer, прямо перед закрытием </body>. Также обратите внимание, что это ничего не выведет в admin. Это потому, что wp_footerэто хук, который запускается только во внешнем интерфейсе.
Давайте проделаем наши первые правильные операции в functions.php!
Примечание. В PHP невозможно иметь две функции с одинаковыми именами. Это включает в себя имена функций в WordPress, вашей теме и любом активированном плагине! Следуйте рекомендациям и добавляйте к своим функциям префикс вашей темы, как в приведенном выше примере: «wptutorial_<function_name>«. Это значительно снижает вероятность фатального сбоя WordPress из-за идентичных имен функций.
Примечание 2: Неважно, в каком порядке вы добавляете функции и хуки в файл functions.php. Помните, что хуки в любом случае запускаются на определенных контрольных точках, а не в том порядке, в котором они находятся functions.php. Единственное исключение, если вы включаете другие файлы или инициализируете свои собственные классы.
Правильный способ добавления стилей и скриптов по сравнению с неправильным
Некоторые из вас, возможно, помнят из части 3, где мы добавили wp_headхук в наш файл header.php. После того, как мы это сделали, WordPress смог загрузить свои стили и скрипты, включая панель администратора. Вы можете подумать, что для того, чтобы добавить наши таблицы стилей, нам нужно сделать функцию, привязанную к таблице стилей, wp_headи вывести ее <link>для таблицы стилей… Обычно вы были бы правы!
Однако в WordPress есть особый способ добавления скриптов и стилей. В основном это делается для управления порядком загрузки и предотвращения загрузки дубликатов библиотек. Например, вы, как автор темы, можете добавить Javascripts, которые зависят от jQueryбиблиотеки. Затем вам нужно убедиться, что jQueryон загружается перед вашими файлами. Но WordPress и любые плагины имеют одинаковую потребность — убедиться, что jQueryони загружаются перед их скриптами. Вы не можете загружать jQueryбиблиотеку несколько раз, потому что это вызывает проблемы. Таким образом, в WordPress есть способ управлять порядком загрузки скриптов и таблиц стилей.
Добавление таблиц стилей (правильный способ)
Для добавления любых стилей и любых javascripts мы используем хук под названием wp_enqueue_scripts. Да, вы используете этот хук и для стилей, несмотря на его название. Добавление скриптов и стилей называется «постановкой в очередь» — то есть поставить в очередь. Давайте поставим в очередь (добавим) нашу таблицу стилей, используя функцию wp_enqueue_style в нашем файле functions.php:
<?php
add_action('wp_enqueue_scripts', 'wptutorial_enqueue_scripts');
function wptutorial_enqueue_scripts() {
wp_enqueue_style('theme-main-style', get_stylesheet_directory_uri().'/style.css');
}Функция wp_enqueue_styleпринимает как минимум два параметра. Первое — это уникальное имя (дескриптор или «идентификатор слага»), а второе — местоположение файла. Дескриптор должен быть уникальным, так как это идентификатор, который WordPress использует для определения наличия дубликатов.
Что касается возврата пути к вашей теме, здесь доступно множество функций. Выше я использовал get_stylesheet_directory_uri(), который возвращает URL-адрес папки вашей темы, а затем я добавил остальную часть пути к нашей таблице стилей.
PS: WordPress предлагает отдельную функцию для возврата полного URL-адреса вашей темы style.css: get_stylesheet_uri(). Я использовал другую функцию выше, так как она более полезна для ознакомления. Вы будете использовать его для любых других файлов, которые вам нужно поставить в очередь.
Функция wp_enqueue_styleпринимает более полезные параметры, такие как зависимости (какие другие файлы css должны быть загружены раньше) и номер версии (полезно для целей кэширования).
Обновите интерфейс и убедитесь, что ваша таблица стилей загружена в <head>тег!
Если вы один из тех, кому не терпится сделать свою тему красивее при ее кодировании, вот ваш шанс. Я рекомендую вам приступить к определению вашего HTML, классов и оболочек и добавить некоторые стили в ваш файл style.css. Мы добавим больше контента, который потребует стилизации, по мере продвижения в этой серии руководств.
Добавление скриптов (правильный способ)
Давайте посмотрим, как мы добавляем javascripts в нашу тему. Это делается с помощью одного и того же хука (так что вы можете поместить все это в одну функцию). Но для скриптов мы используем немного другую функцию.
Чтобы поставить сценарий в очередь, вы используете wp_enqueue_script(). Параметры такие же, как wp_enqueue_style(). Первый — уникальный дескриптор, а второй — путь к скрипту. Третий (необязательный) — это массив зависимостей. В качестве четвертого (необязательного) параметра вы устанавливаете номер версии. И, наконец, в-пятых (необязательно) вы определяете, должен ли скрипт загружаться в <head>теге или в конце файла </body>.
WordPress поставляется с большим количеством уже включенных библиотек. Они не всегда все загружены, но доступны, если они вам нужны. Если вы хотите добавить скрипт общей библиотеки, сначала проверьте, есть ли он в WordPress. Примерами являются jQuery, все модули пользовательского интерфейса jQuery, Underscore и Backbone.
Если вы добавите один из встроенных скриптов WordPress в качестве зависимости, вам не нужно ставить этот скрипт в очередь! Сделаем это на практике.
Создайте папку assetsи внутри нее подпапку jsв папке нашей темы, а затем добавьте новый пустой main.jsфайл. Допустим, этому сценарию требуется jQueryбиблиотека, поэтому мы устанавливаем ее как зависимость. Мы знаем, что WordPress поставляется с jQueryпакетами, и его дескриптор — jquery. Мы поставим наш скрипт в очередь следующим образом:
<?php
add_action('wp_enqueue_scripts', 'wptutorial_enqueue_scripts');
function wptutorial_enqueue_scripts() {
wp_enqueue_style('theme-main-style', get_stylesheet_directory_uri().'/style.css');
wp_enqueue_script('theme-main-script', get_stylesheet_directory_uri().'/assets/js/main.js', ['jquery']);
}Если вы обновите внешний интерфейс и проверите исходный код, вы увидите, что ваш скрипт main.jsдобавлен, а также jQueryзагружена библиотека. И jQueryзагружается раньше вашего файла!
Теперь вы узнали, как добавлять стили и скрипты. Для добавления дополнительных файлов добавляйте wp_enqueue_style()или wp_enqueue_script()для каждого нового файла.