Создание темы для CMS WordPress

Создание собственной темы будет настолько простым или сложным, насколько нам это будет необходимо. Иногда необходимо изменить только логотип или цвет, это простой процесс. Нередко тема создается с нуля, чтобы достичь соответствия определенным требованиям или условиям или же чтобы получить нужный дизайн. Какой бы ни была наша цель, сейчас мы рассмотрим основы, необходимые для быстрого создания новой темы и дизайна сайта на основе темы Twenty Eleven.

В примере используется Twenty Eleven, поскольку она поставляется с WordPress, а не потому, что она считается лучшим выбором стартовой темы. На практике, однако, она используется и как стартовая, и как родительская тема для остальных проектов. В будущем тема Twenty Eleven будет рассмотрена как пример совокупности элементов работающей темы. Мы так же сможем тему по-своему, оставив оригинальную существующую Twenty Eleven нетронутой. Основной файл: Style.css Файл style.css WordPress использует, чтобы обращаться к теме. Он необходим, чтобы тема работала. Мы можем создать новую тему, ограничившись листом стиля и шаблонным файлом index.php, хотя этот файл может быть и пустым. Используя мощь иерархии темы, WordPress автоматически замещает недостающие шаблоны, если в теме их нет. Надо понимать, что индивидуальный лист стиля — это то, что позволяет нам начать создание темы. При создании style.css для новой темы первые несколько строк являются критичными. Они предоставляют WordPress информацию для дальнейшего использования в консоли темы и последующего обращения к теме в ядре. Первые строки должны выглядеть так (Листинг – 2.1). Информация о разработчике и о версии темы. Есть и дополнительное необязательное поле для иерархии темы, что мы дальше и опишем. Необходимо убедиться, что имя уникально, для нашей копии. Если нам надо выпустить для публичного использования, бесплатно или за деньги, необходимо попробовать создать уникальное имя, чтобы свести к минимуму проблемы с названиями в директории и других копиях. Кроме того, если наша тема происходит из другой темы (конечно, по лицензионному разрешению), следует сохранить информацию по лицензий и авторским правам на оригинальную тему. После того как мы адресовали эту необходимую информацию WordPress, оставшаяся часть файла традиционно является CSS и предметом для соответствующих правил и структур. Мы делаем копию темы Twenty Eleven, превращая ее в свою собственную. Это не процесс создания дочерней темы. Функциональность дочерней темы мы рассмотрим немного позднее. В некоторых случаях рабочий процесс идет лучше, если новая тема создается путем копирования стартовой темы в новую папку и ее переименования и пересмотра style.css на предмет хорошего отображения нового проекта. Есть плюсы и минусы данной техники, но для некоторых задач она работает хорошо, поскольку основная тема меняется не слишком часто, что гарантирует более сложные методологии. Кроме того, имея в работе тему, мы не захотите менять родительскую тему, вызывая каскад случайных ошибок на успешно работающем сайте. Создание копии работающей темы в новой директории устраняет зависимость от будущего тестирования в браузере, являющегося процедурой с большими затратами времени и человеческих ресурсов (ее еще не автоматизировали). В случае если в родительскую тему были внесены существенные изменения, изменения могут быть перенесены в производные темы шаг за шагом и проверены как необходимо. Создание копии стартовой темы также позволяет делать вручную файл CSS, меняя файлы актуальной темы, а не перезаписывая стили с добавлением дополнительных байтов багажа. Правила CSS записаны в файле style.css, чтобы мы могли превратить минималистический вид в профессионально спроектированную тему, которую создаем. Поскольку работаем над собственной копией Twenty Eleven, так сказать, ее ветвью, есть возможность редактировать тему непосредственно в листе стиля. Index.php Создавая собственную тему, возможно столкнуться с проблемой того, что было первоочередным. Возможно, есть информация о том, как именно контент будет публиковаться на сайте WordPress и как именно он будет структурирован. Но странность в том, что сайт растет естественным образом, и чтобы понять, как изменится дизайн и, соответственно, получить список стилей, нужен контент для отображения. Можно использовать банки файлов контента, чтобы импортировать его на сайт и прогнать через все стили, или же можно начать строить свой сайт. Файл index.php — шаблон вашего сайта по умолчанию. У WordPress есть встроенный движок принятия решений, который определяет, какой тип информации запрошен пользователем, а после этого решает, есть ли для этого типа файл шаблона. Данная иерархия в шаблоне index.php является предустановленной. Если WordPress не находит специального шаблона, он берет index, php. Обычно файл index.php содержит стандартный цикл. Это традиционный формат блога, в котором записи отображаются в обратном хронологическом порядке. Например, вот фрагмент кода из файла (Листинг 2.2). Цикл — это сердце WordPress. Эту концепцию крайне важно понять, поскольку именно таким образом контент выбирается и сортируется для публикации. Можно посмотреть на приведенный ранее фрагмент кода и увидеть, что цикл — лишь небольшая его часть и что контент записей даже не генерируется в HTML. Предыдущий пример использует функцию get_template_part (), появившуюся в WordPress 3.0. Это функция WordPress, схожая с РНР-функциями in elude () и require(), но она более мощная, поскольку заточена под WordPress.

Функция get_template_part() позволяет разработчику темы выудить определенные компоненты кода для повторного использования или для замены в дочерних темах. В предыдущем примере WordPress ищет определенный PHP-файл для генерации записей в HTML. Это сравнительно сложный пример, поскольку в нем функция get_post_format() используется для заполнения второго параметра включения. get_post_format() будет делать именно то, о чем говорит ее название, — возвращать формат записи. Необходимо помнить, что если запись помечена как картинка, функция вернет image, а если она опубликована как обычная запись или помечена как стандартная на панели добавления новой записи, функция вернет false. Функция get_template_part() будет искать шаблон файла в директории текущей темы сначала как особую версию, используя второй параметр, а затем для первой версии, игнорируя второй параметр. Вот что будет, если мы используем следующий код в теме: <?php get_template_part('content', 'index');?> Сначала WordPress ищет файл content-index, php в папке темы и, если не находит его, переключается на content.php. Если создаем дочернюю тему и ни один из названных ранее файлов не найден, WordPress продолжит поиск в папке родительской темы. В примере Twenty Eleven функция get_post_format() работает как переключатель для извлечения нужного шаблона контента, соответствующего формату записи. В теме Twenty Eleven можно заметить, что шаблонов контента много — по одному на каждый тип формата записи. Это позволяет разработчику темы контролировать, как различные форматы записи генерируются в браузере. Другим преимуществом этой тактики является разбиение кода на меньшие фрагменты, которыми проще управлять. Можно заметить, что разбиение на фрагменты облегчает отладку, если возникнут проблемы с изменениями в будущем или потребность в новой функциональности.

Header.php

Может показаться, что файл назван так ошибочно, но это стандартное имя

данного файла, которое ищет WordPress. Файл header.php включает в себя все

выше генерируемой страницы до области контента. Это может вызвать удивление, поскольку правильно сформатированный документ HTML включает в себя собственную информацию <head> со своими особыми требованиями. Файл шаблона header.php включает в себя заголовок HTML, но также и начало документа HTML, а обычно еще и логотип и навигацию сайта, если используем горизонтальную

схему навигации по верху. Он также может включать в себя любые дополнительные элементы, такие как вторичная навигация или область поиска.

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

Создавая файл шаблона заголовка, важно включить функцию WordPress wp_head (). Это зацепка, позволяющая WordPress прикреплять определенную функциональность к заголовку сайта, она также используется плагинами. Функция wp_head () включается в HTML-узел <head> и является критически важной для долгосрочной совместимости и функциональности темы. Так что необходимо убедиться, что она на месте.

Когда выделили раздел «шапки» страниц в отдельный шаблон header.php, то, если создаем тему с нуля, необходимо скорректировать файл index. php таким

образом, чтобы в него вошел этот раздел. Можно использовать традиционное

семейство функций РНР include или require, но у ядра WordPress есть и своя

функция для тем. Она схожа с функцией get_template_part(), но является специфической функцией для шаблона заголовка. Просто необходимо добавить следующий код в верхнюю часть файла index. php (и подчиненные файлы, которые необходимо рассмотреть далее):

<?php get_header()?> Эта функция автоматически включает имя файла header.php из директории текущей темы в текущий файл для генерирования. У функции нет другой дополнительной функциональности сверх РНР include, кроме определения правильного пути include, но она куда более понятна при работе над темой.

При желании можно выделить дополнительные компоненты из файла header, php и включить их обратно с помощью РНР includes. Иногда, если у сайта

особенно длинная или сложная глобальная навигация, она разбивается на несколько шагов для включений. На практике работать с файлами меньшего размера проще в отношении редактирования, поскольку у каждого файла шаблона своя особая функция и сложность отладки снижается.

Footer.php

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

включения навигационных параметров и информации, относящейся к сайту. Самые современные темы, в том числе Twenty Eleven, содержат в «подвале» области виджетов для произвольного контента. Что именно помещать в «подвал», мы решим после анализа структуры сайта, но поскольку он по большей части остается одним и тем же на всех страницах, это первый кандидат на выделение в отдельное включение.

Необходимо убедиться, что включили функцию wp_foot () в шаблон «подвала». Это функция позволяет WordPress включать любую необходимую информацию из активированных плагинов и, как правило, включает закрывающие теги </bodyx/html>.

Как и в случае включения шаблона заголовка, WordPress предлагает схожую функциональность для информации «подвала» с отдельной специальной функцией включения. Необходимо добавить следующий код в нижнюю часть файлов шаблона: <?php get_footer()?>

Sidebar.php

Еще один кандидат для выделения — боковая панель, то есть все, что находится слева или справа от контента. Боковая панель может содержать навигацию по сайту, если выбрана вертикальная схема навигации, или менее важную дополнительную информацию по контенту.

Тема Twenty Eleven позволяет делать левую или правую боковую панель, используя один файл sidebar.php и помещая его с CSS. Однако может быть много

файлов боковых панелей для каждой колонки или специфических боковых панелей на разных страницах.

При работе с боковыми панелями нужно иметь в виду ряд различных проблем. Сначала необходимо решить, сколько боковых панелей необходимо, затем — будут они статичными, с виджетами или гибридными. Наконец, следует определить, как структурирован HTML, чтобы CSS мог помещь боковые панели в нужные места. Затем нужно провести проверку во всех целевых браузерах. Как уже было отмечено, боковые панели Twenty Eleven представляют собой один файл, неважно, правая панель или левая, и полностью виджетированы. Это позволяет делать заготовку файла с относительной легкостью и использовать консоль WordPress для размещения виджетов по необходимости. В файлы шаблонов нужно поместить следующий код, чтобы добавить файл sidebar.php:

<?php get_sidebar();?> Иногда наличие обеих боковых панелей в одном файле неудобно с позиций дизайна или, скорее, CSS. Или же выделили панели в отдельные файлы. В любом случае, можно создать две боковые панели для традиционного размещения слева и справа. Например: <?php get_sidebar('right');?> берет файл sidebar-right.php, как видно в параметрах вызова функции, и помещает его в нужное место. Эта функция опять похожа на функцию get_template_part (), но сделана специально для боковых панелей и куда более читаема в коде.

В современных каркасов тем много боковых панелей, которые отличаются от привычных представлений о том, что боковая панель — это вертикальное пространство справа и слева от контента. У некоторых из таких тем есть дополнительные панели над, под и в центре циклов записи. Наличие нескольких виджетированных областей такого рода наделяет администратора дополнительными возможностями, поскольку теперь он может размещать виджеты WordPress по всей странице.

При работе с боковыми панелями важно соблюдать баланс между виджетированными зонами, — подразумевая то, что они могут контролироваться и управляться создателем контента в консоли, — и жестко кодированными зонами в РНР-файле шаблона. Виджеты могут быть очень мощными, особенно благодаря многочисленным плагинам. Но бывает и так, что работу выполняет PHP-код в файле шаблона, администратору не нужно обновлять контент или же встроенная функциональность WordPress самообновляется.