Руководство по разработке детских тем WordPress
Есть ряд причин, по которым разработчики WordPress начинают использовать дочерние темы. Они дают вам возможность настроить уникальный макет поверх другой существующей темы. Это идеально подходит для начинающих, которые хотят поиграть с созданием своих собственных тем.
Кроме того, многие премиальные дизайны будут выпускать новые обновления с течением времени. Если вы вносите изменения в основные файлы тем, они будут перезаписаны при обновлении, но дочерние темы будут отделены и аккуратно спрятаны. Это означает, что вы можете создавать существующие темы премиум-класса и экономить время..
В этом руководстве я хочу представить основные концепции построения дочерней темы WordPress и почему это хорошая идея.
Начиная
Дочерние темы не так сложны, как могут показаться. Преимущества работы с родительской темой означают, что вам не нужно писать весь HTML / CSS с нуля. Дочерняя тема будет автоматически использовать любые файлы шаблонов, которые вы включаете, такие как sidebar.php или же footer.php. Но если они отсутствуют, ваша дочерняя тема будет извлекать те же файлы из родительской темы.
Эта функциональность предлагает огромную свободу в настройке уже существующих шаблонов. Это также отлично подходит для подправки областей вокруг вашего сайта для специальных мероприятий, таких как добавление шаблонов дизайна на Рождество или Новый год.
Ваши необходимые файлы
Вам нужна только одна таблица стилей .css для настройки дочерней темы в WordPress. Вам также необходимо создать новый каталог в / WP-содержание / темы папка, в которой будет размещена ваша детская тема. Обратите внимание, что вы не создание этой папки внутри родительской темы, но рядом с ней в том же каталоге тем.
Разработчики часто включают файлы functions.php и screenshot.png в ту же папку, что и новый CSS-файл. Снимок экрана отображается в панели администратора WordPress, а файл темы функций можно использовать для внесения множества изменений в бэкэнд..
Но сейчас мы должны сосредоточиться на основной таблице стилей. Это обычно называется style.css и включает заголовок комментария с ключевой метаинформацией. Это важно, потому что ваша тема будет отображаться как дочерняя, только если вы включите имя каталога родителя. Ниже приведен пример заголовка комментария:
/ * Название темы: URI дочерней темы Twenty Eleven: http: //example.com/ Описание: дочерняя тема для дизайна Twenty Eleven Автор: Jake Rocheleau URI автора: http: //www.hongkiat.com/blog/ Шаблон: twentyeleven Версия: 0.1 * /
Значение для шаблон должно быть именем каталога для сопровождающей родительской темы. Кроме того, все остальные теги должны быть знакомы со стандартными темами WordPress..
Несмотря на то, что будут использоваться все родительские шаблоны PHP, style.css исходного родителя будет не импортироваться автоматически. Если вы хотите работать с оригинальными стилями, вы должны будете включить его в начало документа style.css вашего ребенка. Ниже приведен пример, включающий тему WP Twenty Eleven.
@import url ("… /twentyeleven/style.css"); Настройка новых стилей
Применение правил CSS к вашей теме так же просто, как редактирование оригинала. Если вы знаете, на какие элементы вы хотите нацелиться, используйте те же селекторы в своей дочерней теме..
Мы могли бы продемонстрировать некоторые действительно простые изменения ссылок и абзацев. Я использовал код из оригинальной темы Twenty Eleven для нацеливания на различные элементы. Иногда необходимо использовать более конкретный селектор, чтобы переопределить старый дизайн.
body padding: 0 1.4em; #page margin: 1.667em auto; максимальная ширина: 900 пикселей; a color: # 5281df; текстовое оформление: нет; семейство шрифтов: Calibri, Tahoma, Arial, без засечек; a: focus, a: active, a: hover text-ornament: underline;
В этих изменениях я уменьшил общий размер тела, а также убрал некоторые отступы с краев. Все эти селекторы можно найти в списке в оригинальном документе .css. Примечательно, что я также изменяю некоторые свойства для всех якорных ссылок, которые включают другой набор шрифтов и выбор цвета.
Важные вещи
CSS имеет специальную декларацию, чтобы пометить приоритет над другими стилями. Синтаксис отображается как !важный начиная с восклицательного знака и заканчивая в конце вашего свойства CSS. Это необходимо, если у вас есть каскадные стили из родительской темы, которые переопределяют ваши собственные пользовательские правила.
color: # 5281df! важный; текстовое оформление: нет; семейство шрифтов: Calibri, Tahoma, Arial, без засечек;
Выше я скопировал свои исходные изменения и отредактировал цвет текста привязки с помощью важного предложения. Это будет иметь приоритет над всеми другими стилями той же глубины селектора. Более определенные элементы (такие как #access li: hover> a) обычно будет содержать свои собственные стили, если цвет был все еще унаследован от нашего оригинального селектора. В этом случае наша родительская тема не устанавливает свойство семейства шрифтов для ссылок привязки, поэтому мы не сталкиваемся с какими-либо проблемами наследования..
Если у вас возникли проблемы с сохранением изменений, попробуйте пометить одну из этих важных отметок в конце заявления о недвижимости. Это не идеальное решение для каждой проблемы наследования, но оно пригодится гораздо чаще, чем вы думаете.
Клонирование functions.php
В отличие от основной таблицы стилей, ваша дочерняя тема автоматически импортирует функции своего родителя. Это означает, что вам не нужно копировать какой-либо код PHP, чтобы он по-прежнему оставался активным в вашей новой теме. Тем не менее, если вы хотите переопределить некоторые функции, вы можете создать другой файл functions.php и записать новый код с любыми изменениями..
В качестве примера я построил функцию, которая анализирует несколько файлов JavaScript при запуске шаблона. Это удалит все более старые версии сценариев jQuery и SWFObject, одновременно добавляя самые последние версии в wp_head площадь.
// помещаем js файлы в очередь для загрузки функции mytheme_js () if (is_admin ()) return; wp_deregister_script ( 'JQuery'); wp_register_script ('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); wp_enqueue_script ( 'JQuery'); wp_deregister_script ( 'SWFObject'); wp_register_script ('swfobject', 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'); wp_enqueue_script ( 'SWFObject'); add_action ('init', mytheme_js); Я должен отметить, что если вы импортируете код из родительского functions.php, вам придется использовать другое имя функции. В противном случае PHP выдаст фатальную ошибку, и вам придется войти на сервер FTP, чтобы исправить ошибку..
Работа с файлами тем
Самая широкая категория тем - это создание пользовательских макетов и типов страниц. По умолчанию ваша дочерняя тема наследует все файлы тем своего родителя. Но у вас есть возможность создавать новые файлы дочерних тем, и WP зарегистрирует их как «основной» шаблон..
Например archive.php а также index.php используются для отображения почтовых архивов и экрана домашней страницы соответственно. Если есть какие-то изменения, которые вы хотите внести и которые требуют редактирования в HTML, то безопаснее будет клонировать родительские файлы и отредактировать их в каталоге дочерней темы..
Пользовательские шаблоны страниц
Пока мы говорим о файлах шаблонов, я также хочу представить часть функциональности WordPress, с которой многие не знакомы. Вы можете создавать шаблоны страниц и публикаций, которые можно будет выбрать из панели администратора при создании нового контента. Даже если родительская тема не имеет нового пользовательского файла шаблона, WordPress все равно будет использовать дочерний файл вместо page.php или же single.php.
Сначала создайте новый файл с именем page-offer.php. Это будет “специальное предложение” Рекламная страница, которая отличается от всех остальных. Здесь вы можете скопировать исходный код страницы или даже создать тему полностью с нуля. Единственный код, который нам нужно сообщить WordPress об этом новом шаблоне, это настройка комментариев в PHP.
Другой альтернативой этому методу является создание пользовательских страниц, названных в честь уникального идентификационного номера. Так что вместо загрузки по умолчанию archive.php для страниц автора вы можете создать файл, такой как автор-ID.php где ID - уникальный идентификатор пользователя WordPress. Хотя эта система более обременительна, так как вам нужно будет создать новый файл шаблона для каждого из авторов на вашем сайте.
Это становится более полезным, если вы можете объединить эти два метода с другими файлами шаблонов. В частности, категории и теги работают хорошо, используя свои собственные файлы темы. Кроме того, если вы ссылаетесь на вложения в вашем контенте, вам следует рассмотреть различные возможные макеты шаблонов для каждого типа MIME. Я включил иерархию шаблонов ниже для простого вложения изображения JPEG:
- image.php
- jpeg.php
- image_jpeg.php
- attachment.php
Полезные инструменты WordPress
Сам WordPress имеет универсальную систему плагинов, которая может управлять множеством настроек. Так как дочерние темы настолько новы, не существует целого натиска сторонних выпусков (пока). Однако есть пара инструментов, которые вы можете использовать, чтобы сократить время разработки..
Очевидным упоминанием является плагин One-Click Child Theme, созданный и протестированный для последней версии WordPress 3.x. Это добавляет ссылку меню в ваш админ “Темы” раздел, чтобы автоматически построить ребенка, используя вашу текущую активную тему. Это фантастика, если вы не хотите связываться с FTP и хотите поиграть с новыми идеями.
Если вы планируете редактировать эти файлы в панели администратора, вам также понравится более четкое выделение синтаксиса. Это не предлагается в WordPress по умолчанию, но вы можете установить расширенный редактор кода для некоторых значительно улучшенных функциональных возможностей. Это делает управление блоками кода PHP и HTML / CSS намного более управляемым.
Дополнительные ресурсы
Наряду со всеми советами в этом руководстве я хочу поделиться набором важных ссылок для разработчиков тем. Уже есть так много замечательных статей и бесплатных детских тем, которые вы можете проверить, чтобы глубже изучить эту тему. Я добавил замечательную коллекцию этих ресурсов ниже:
- 8 бесплатных двадцать одиннадцать детских тем
- WordPress Online Codex »Детские темы
- Как создать дочернюю тему WordPress с помощью хуков и фильтров
- Несколько слов по детской тематике
- Как создавать, изменять и использовать дочерние темы в WordPress
Заключение
Я надеюсь, что процесс создания дочерних тем WordPress станет более понятным после прочтения этой статьи. Я попытался объяснить, как дочерние темы могут наследовать шаблоны CSS и PHP от родительских. Кроме того, очень просто манипулировать конкретными файлами и создавать свои собственные уникальные темы.
.
