Файл: Практическая работа 2 Создание темы WordPress Цели работы Научиться создавать минимальную структуру темы для cms wordPress.docx

Таким образом, изменив путь подключения файла default.css на /assets/css/default.css мы подключим этот файл с использованием относительных путей расположения файла, при помощи стандартной функции WordPress.

Но к сожалению, в темах WordPress, так не делается. Все подключения файлов и описание функциональных возможностей шаблона WordPress происходит в отдельном файле темы с именем «functions.php». Создайте такой файл в корне проекта и откройте его для редактирования, а подключение файлов «default.css», «layout.css» и «media-queries.css» из файла «header.php» удалите совсем.

В данном файле мы должны добавить новый «экшн» привязанный к стандартному событию WordPress «wp_enqueue_scripts» и добавить во время его выполнения выполнение собственной функции, которую также описываем в файле «functions.php» (Рисунок 2.11).

Рисунок 2.11 – Добавление «экшена» и выполнение собственной функции при выполнении стандартного события WordPress

Помимо этого, созданное нами подключение к выполнению стандартного события WordPress должно знать после чего ему необходимо выполниться. В нашем случае событие «wp_enqueue_scripts» должно выполниться в момент срабатывания хука «wp_head», и выполнение этого хука мы должны добавить в файл «header.php» перед закрытие тега «head» (Рисунок 2.12).

Рисунок 2.12 – Выполнение хука «wp_head» в файле «header.php»

В итоге, после правки файлов «header.php» и «functions.php», файл «default.css» должен корректно подключиться к разрабатываемой теме. Подключение файлов «layout.css» и «media-queries.css» аналогично, а вот подключение главного файла стилей темы незначительно отличается. Так как в корне каждой темы WordPress имеется файл style.css, для указания пути к этому файлу существует отдельная функция – get_stylesheet_uri. Итоговый код подключения всех файлов стилей к проекту темы приведен на рисунке 2.13.

Рисунок 2.13 – Итоговый код подключения внешних файлов стилей к проекту темы для CMS WordPress в файле «functions.php»

---

Подобным образом подключаются и внешние файлы скриптов для разрабатываемой темы. Отличия заключаются в том, что они будут выполняться в момент выполнения хука «wp_footer», который мы должны разместить в файле «footer.php» перед закрытием тега «body» (Рисунок 2.14).

Рисунок 2.14 – Вызов хука «wp_footer» в файле «footer.php»

Также помимо вызова события, мы должны добавить новый экшн, выполняющийся при выполнении хука «wp_footer», с выполнением нашей собственной функции, которая в свою очередь подключит необходимые нам файлы скриптов. В итоге файл «functios.php» примет вид, изображенный на рисунке 2.15.

Рисунок 2.15 – Итоговый файл «functions.php» с функциями подключения необходимых файлов стилей и скриптов выполняющихся при событиях «wp_head» и «wp_footer»

Особое внимание необходимо уделить факту отключения встроенной в WordPress версии jquery и подключения версии, идущей вместе со сверстанным макетом. На рисунке 2.15 это произведено в 14-16 строках кода. А вот файл библиотеки jquery-migrate наоборот подключен из состава библиотек, включенных в состав WordPress (строка 17 кода, изображённого на рисунке 2.15).

Также обратите внимание на то, что файл «modernizr.js» подключен первым в списке скриптов. В свою очередь в верстке он был подключен в секции «head». Это подключение было сохранено переносе в файл «header.php» и от него необходимо избавиться, удалив соответствующие строки кода в файле «header.php».

В заключении работы посмотрите код сайта во встроенном отладчике браузера и проверьте отсутствие ошибок подключения файлов стилей и скриптов.

Произведите установку CMS WordPress для выполнения самостоятельных работ и для этой установки произведите создание темы на основе макета выбранного для реализации проекта. При проведении работ произведите разбивку индексного файла макета верстки на составные части (файлы index.php, header.php, footer.php). При разбиении помните, что чаще всего содержимое файлов header.php и footer.php будет повторяться на каждой странице сайта, а содержимое файла index.php будет уникальным для главной страницы будущего сайта.

---

Произведите правильное подключение файлов стилей и скриптов к проекту (в файле functions.php) не забыв в конце работ проверить функциональную работоспособность сайта и отсутствие ошибок в консоли браузера.

Контрольные вопросы:

1. 
   Что входит в минимальную структуру темы оформления CMS WordPress?
   
2. 
   Каковы варианты подключения файлов стилей и скриптов к разрабатываемой теме и какой вариант является правильным?
   
3. 
   Каковы параметры документа, отображающего скриншот главной страницы сайта в консоли администратора?
   

Какие виды хуков существуют в CMS WordPress

---