Анатомия темы WordPress

Это глава из мультимедийного руководства по разработке WordPress «Up and Running: A Practical Guide to WordPress Development», которое выходит 16 июня. Полный пакет включает в себя полную электронную книгу, более 50 обучающих видеороликов по разработке тем и плагинов, и интервью с 13 лучшими в мире разработчиками WordPress. Предзакажите сейчас на upandrunningwp.com со скидкой 20%!

Основные выводы:

• Тема WordPress состоит из набора последовательных частей. Важнейшие части не дочерней темы включают style.css , functions.php и несколько типов файла шаблона PHP (например, header.php , footer.php и index.php ).
• Как основной источник стиля CSS темы, style.css диктует внешний вид темы. В разделе комментариев в верхней части style.css также регистрируются имя темы, автор и т. д.
• functions.php вы добавляете презентационные функции в свою тему. С помощью functions.php вы добавите таблицы стилей CSS, файлы JavaScript, навигационные меню, области виджетов и другие функции.
• Файлы шаблонов можно условно разделить на: «всегда используемые» файлы шаблонов ( header.php и footer.php , а sidebar.php , если применимо); файлы в иерархии шаблонов WordPress (например, index.php , single.php и page.php ); и «части шаблона» (неполные фрагменты, извлеченные из других файлов шаблонов, чтобы уменьшить количество повторений).
• Темы могут быть произвольно большими и сложными; но это те части, которые наиболее важны и предсказуемы.

Эта короткая глава вращается вокруг большой диаграммы. Зачем ждать? Вот:

Не паникуйте! Вы поймете это достаточно скоро. В оставшейся части этой главы мы объясним каждую часть диаграммы более подробно.

Что в имени?

WordPress решает, как обращаться с файлами тем, основываясь на их имени.

Первое, на что следует обратить внимание, это то, что каждый файл на диаграмме имеет специальное имя. functions.php , style.css , index.php — ни один из этих файлов не назван случайно, и ни одно из их имен не является произвольным.

WordPress решает, как обращаться с файлами тем, основываясь на их имени. Он имеет специальную обработку, написанную для functions.php , но не для functionz.php . Поэтому, если вы загрузите набор инструкций как functions.php , WordPress их интерпретирует; но если вы загрузите те же инструкции, что и в functionz.php , WordPress по умолчанию просто полностью проигнорирует этот файл и его инструкции.

стиль.css

style.css является основным источником визуального оформления темы.

style.css — это основной источник стилей CSS для темы. Таким образом, это основной источник визуального оформления темы — от выбора шрифтов и цветов до того, работает ли тема на адаптивной сетке.

Так, например, если вы введете следующий CSS в style.css вашей темы:

p {
color: blue;
}

… тогда все, что находится в абзаце, в любом месте вашего сайта , пока работает ваша тема, станет синим. Действительно круто, правда?

style.css вы будете выполнять основную часть своей работы, чтобы ваши темы выглядели так, как вы хотите.

Этот вид визуального контроля означает, что в style.css нужно проделать много работы — именно здесь вы будете выполнять основную часть своей работы, чтобы ваши темы выглядели так, как вы хотите.

style.css — это также то, как вы регистрируете свою тему.

style.css также есть раздел комментариев, в котором регистрируются данные темы — имя темы, автор, родительская тема, если таковая имеется, и т. д. Это выглядит следующим образом:

/*
Theme Name: Pretend Theme
Author: WPShout
Author URI: http://wpshout.com/
Version: 0.1
Description: A very pretend theme for WordPress learners
[Other comment-block information goes here, too]
*/

WordPress читает эти комментарии, чтобы получить информацию о вашей теме. Итак, небольшой блок комментариев выше — и ничего более причудливого или более технического — это то, что заставляет вашу тему появляться в списке тем вашего сайта в разделе « Внешний вид »> « Темы » в области администрирования WordPress:

Вы можете увидеть пример реальных регистрационных данных темы в строках с 1 по 6 style.css на большом рисунке Анатомия темы WordPress.

functions.php

functions.php вы добавляете пользовательские функции в свою тему. Это может быть ужасно много, в том числе:

• Добавление таблиц стилей CSS (включая сам style.css ) и файлов JavaScript
• Регистрация областей навигационного меню и областей виджетов
• Определение пользовательских размеров изображений, которые вы хотите использовать на своем сайте.
• Фильтрация содержимого вашей страницы

functions.php «общается» с остальной частью WordPress в первую очередь через хуки WordPress (также называемые хуками действий и фильтров), которые позволяют добавлять функциональность в нужных местах. Мы углубимся в работу functions.php в разделе «Основные концепции тем WordPress»: 3. Добавление функциональности с помощью functions.php , и мы узнаем больше об хуках в хуках WordPress (действиях и фильтрах): что они делают и как они работают.

Файлы шаблонов PHP

Файлы шаблонов сайта WordPress определяют разметку сайта. Без них на странице буквально ничего нет.

Основную часть файлов темы составляют файлы шаблонов PHP. Если functions.php — это мозг темы, а style.css — ее одежда, а файлы шаблонов — ее собственно тело.

Файлы шаблонов — это файлы ,code>.php, которые содержат смесь разметки HTML и кода PHP. (Проверьте этот рисунок, и вы увидите, как они выглядят.)

Файлы шаблонов создают разметку двумя способами

Вместе эти файлы определяют разметку сайта: фактический HTML-код, отображаемый браузером при посещении вашего сайта. Они делают это двумя способами.

1. HTML

Во-первых, файлы шаблонов печатают HTML непосредственно в браузере, как это делает обычный файл .html . Все, что не находится внутри <!--?php?--> , не является PHP: это просто HTML, который идет прямо на страницу. Итак, если header.php темы включает в себя немного HTML, например следующее:

<body class="site-body">

Это именно то, что браузер увидит на каждой веб-странице WordPress, которая включает header.php , а это должно быть все.

2. PHP

Файлы шаблонов действительно творят чудеса, используя PHP, который компилируется или превращается в HTML. В качестве простого примера наш тот же файл header.php может вместо этого содержать следующий код:

<body class="<?php echo 'site-body'; ?>">

Добавленный PHP просто повторяет (печатает) строку site-body прямо на странице. Таким образом, сервер выполнил дополнительную обработку PHP на своей стороне, но браузер по-прежнему видит тот же старый HTML.

Как вы понимаете, файлы шаблонов темы крайне важны: без них на странице буквально ничего нет.

«Всегда используемые» файлы шаблонов

header.php и footer.php обычно используются везде в теме, потому что большинству сайтов требуется одинаковый верхний и нижний колонтитулы на разных страницах.

Некоторые файлы шаблонов используются на каждой веб-странице сайта. Основные примеры — header.php и footer.php .

Эти файлы используются так часто, что в WordPress есть специальные функции для включения их в другие файлы шаблонов: get_header() и get_footer() . Вызванные таким образом, без параметров, эти функции просто захватывают header.php и footer.php и помещают их туда, где была вызвана функция.

Почему эти файлы используются повсеместно? Это потому, что большинству сайтов нужны одинаковые верхний и нижний колонтитулы на разных страницах. Если на одной странице есть логотип вашей компании и основное навигационное меню, вполне вероятно, что вы захотите, чтобы и на других страницах было то же самое. То же самое верно и для нижнего колонтитула в нижней части страницы.

Следует отметить, sidebar.php также является своего рода файлом такого типа, потому что часто бывает так, что большинство типов веб-страниц на сайте используют одну боковую панель — возможно, за исключением страниц полной ширины, предназначенных для отображения типа страницы. сообщения. sidebar.php также есть собственная функция get_sidebar() .

Файлы в иерархии шаблонов WordPress

Настоящее волнение возникает в таких файлах, как index.php , single.php и page.php . Эти файлы определяют, какая разметка будет отображаться для различных типов данных публикации .

Перефразируя это, WordPress знает , какую страницу использовать для каких данных публикации. Например:

• Если запрашиваемая веб-страница включает в себя запись типа страницы (например, ваша страница «О нас»), WordPress, скорее всего, будет использовать page.php для создания этой веб-страницы.
• Если запрошенная веб-страница представляет собой отдельный пост типа Post (например, вы просматриваете определенный пост в блоге), WordPress, скорее всего, будет использовать single.php для его создания.
• Если вы просматриваете все сообщения типа Post, которые вы написали в 2014 году, WordPress, скорее всего, будет использовать archive.php для создания этой веб-страницы.

Это магия иерархии шаблонов WordPress , которую мы подробно рассмотрим в разделе «Основные концепции тем WordPress»: 1. Иерархия шаблонов.

Эти файлы шаблонов основаны на цикле

Все эти файлы шаблонов «в иерархии шаблонов» имеют нечто очень важное: они построены вокруг The Loop, одного из абсолютных основных принципов разработки WordPress.

Мы углубимся в цикл в основных концепциях тем WordPress: 2. Обработка сообщений с помощью цикла. Петля действительно крутая, поэтому, если вы новичок, держите свои носки, чтобы Петля их не сорвала!

Части шаблона

Допустим, в index.php и page.php есть абсолютно одинаковые разделы. Должны ли мы повторить этот код в обоих этих файлах?

На самом деле DRY — «Не повторяйся!» — боевой клич хороших программистов. Повторение вызывает всевозможные проблемы. Что, если вы хотите что-то изменить в повторяющемся разделе? Теперь вам нужно изменить его в двух местах. Что, если вы забудете изменить его в одном месте или сделаете ошибку в одном файле, но не в другом? Теперь ваш код не синхронизирован, а ваш сайт глючит. (Теперь: что, если вы повторите один и тот же код двадцать раз? Вам придется повторять каждое сделанное изменение двадцать раз и надеяться, что вы «уловили их все».)

Части шаблона берут часть файла шаблона, которая может повторяться, и перемещают их в новый файл. Таким образом, и index.php , и page.php могут просто ссылаться на одну и ту же часть шаблона, а не писать ее дважды по отдельности; и если вы хотите изменить этот раздел, вы меняете его только один раз.

Теперь вы знаете анатомию своей темы

Это то, что нужно действительно понимать о теме WordPress. Даже слишком большая тема ThemeForest будет построена вокруг этого основного скелета, поэтому поймите, как эти части взаимосвязаны, и у вас будет много возможностей для понимания тем WordPress.

Закончив этот урок анатомии, следующие три главы углубятся в четыре важнейших принципа программирования, которые объясняют, как работает тема:

1. Иерархия шаблонов WordPress
2. Петля
3. functions.php
4. Хуки WordPress

Вперед!