Руководство к: Разработка тем для WordPress


Есть ряд причин, по которым разработчики WordPress начинают использовать дочерние темы. Они дают вам возможность настроить уникальный макет поверх другой существующей темы. Это идеально подходит для начинающих, которые хотят поиграть с созданием своих собственных тем.

Кроме того, многие премиальные дизайны будут выпускать новые обновления с течением времени. Если вы вносите изменения в основные файлы тем, они будут перезаписаны при обновлении, но дочерние темы будут отделены и аккуратно спрятаны. Это означает, что вы можете создавать существующие темы премиум-класса и экономить время.

В этом руководстве я хочу представить основные концепции создания дочерней темы WordPress и почему это хорошая идея.

Начиная
Дочерние темы не так сложны, как могут показаться. Преимущества работы с родительской темой означают, что вам не нужно писать весь HTML / CSS с нуля. Дочерняя тема будет автоматически использовать любые файлы шаблонов, которые вы включаете, такие как sidebar.php или footer.php. Но если они отсутствуют, ваша дочерняя тема извлечет те же файлы из родительской темы.

Эта функциональность предлагает огромную свободу в настройке уже существующих шаблонов. Он также отлично подходит для подправки областей вокруг вашего сайта для специальных мероприятий, таких как добавление шаблонов дизайна на Рождество или Новый год.
Ваши необходимые файлы
Вам нужна только одна таблица стилей .css для настройки дочерней темы в WordPress. Вам также необходимо создать новый каталог в папке / wp-content / themes, в котором будет размещена ваша дочерняя тема. Обратите внимание, что вы создаете эту папку не внутри родительской темы, а рядом с ней в том же каталоге тем.

Разработчики часто включают файлы functions.php и screenshot.png в ту же папку, что и ваш новый файл CSS. Снимок экрана отображается в вашей админ-панели WordPress, а файл темы функций можно использовать для внесения множества изменений в бэкэнд.

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

/ *
Название темы: Двадцать одиннадцать детей
URI темы: http: //example.com/
Описание: Детская тема для дизайна Twenty Eleven
Автор: Джейк Рошло
URI автора: http: //www.hongkiat.com/blog/
Шаблон: двенадцатилетний
Версия: 0.1
* /

Значение для шаблона должно быть именем каталога для сопровождающей родительской темы. Кроме этого, все остальные теги должны быть знакомы для стандартного оформления WordPress.
Новейшая демо 2011 двадцать одиннадцатая темаХотя будут использоваться все родительские шаблоны PHP, стиль оригинального родительского style.css не будет импортирован автоматически. Если вы хотите работать с оригинальными стилями, вы должны будете включить его в начало документа style.css вашего ребенка. Ниже приведен пример, включающий тему WP Twenty Eleven.

@import url (“../ twentyeleven / style.css”);

Настройка новых стилей
Применение правил CSS к вашей теме так же просто, как редактирование оригинала. Если вы знаете, на какие элементы вы хотите нацелиться, используйте те же селекторы в своей дочерней теме.

Мы могли бы продемонстрировать некоторые действительно простые изменения ссылок и абзацев. Я использовал код из оригинальной темы Twenty Eleven для нацеливания на разные элементы. Иногда необходимо использовать более конкретный селектор, чтобы переопределить старый дизайн.

тело {
набивка: 0 1,4em;
}
#page {
маржа: 1.667em авто;
максимальная ширина: 900 пикселей;
}

{
цвет: # 5281df;
текстовое оформление: нет;
семейство шрифтов: Calibri, Tahoma, Arial, без засечек;
}
фокус,
а: активный,
a: hover {
текстовое оформление: подчеркивание;
}

В этих изменениях я уменьшил общий размер тела, а также убрал некоторые отступы с краев. Все эти селекторы можно найти в списке в оригинальном документе .css. Примечательно, что я также изменяю некоторые свойства для всех якорных ссылок, которые включают другой набор шрифтов и выбор цвета.
Важные вещи
У CSS есть специальное объявление, чтобы пометить приоритет над другими стилями. Синтаксис отображается как! Важный, начиная с восклицательного знака и заканчивая в конце вашего свойства CSS. Это необходимо, если у вас есть каскадные стили из родительской темы, которые переопределяют ваши собственные пользовательские правила.

{
цвет: # 5281df! важно;
текстовое оформление: нет;
семейство шрифтов: Calibri, Tahoma, Arial, без засечек;
}

Выше я скопировал свои исходные изменения и отредактировал цвет текста привязки с помощью важного предложения. Это будет иметь приоритет над всеми другими стилями той же глубины селектора. Более определенные элементы (такие как #access li: hover> a) обычно будут содержать свои собственные стили, если цвет все еще не унаследован от нашего исходного селектора. В этом случае наша родительская тема не устанавливает свойство семейства шрифтов для ссылок привязки, поэтому мы не сталкиваемся с какими-либо проблемами наследования.
CSS! Синтаксис важных свойствЕсли у вас возникли проблемы с сохранением изменений, попробуйте пометить одну из этих важных отметок в конце заявления о недвижимости. Это не идеальное решение для каждой проблемы наследования, но оно пригодится гораздо чаще, чем вы думаете.
Клонирование 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 по умолчанию для страниц авторов, вы можете создать файл, например author-ID.php, где ID – это уникальный идентификатор WordPress ID пользователя. Хотя эта система более обременительна, так как вам нужно создать новый файл шаблона для каждого из авторов на вашем сайте.

Это становится более полезным, если вы можете объединить эти два метода с другими файлами шаблонов. В частности, категории и теги работают хорошо, используя свои собственные файлы темы. Кроме того, если вы ссылаетесь на вложения в вашем контенте, тогда вы захотите рассмотреть различные возможные макеты шаблонов для каждого типа пантомимы. Я включил иерархию шаблонов ниже для простого вложения изображения JPEG:

  • image.php
  • jpeg.php
  • image_jpeg.php
  • attachment.php

Дополнительные ресурсы
Наряду со всеми советами в этом руководстве я хочу поделиться набором важных ссылок для разработчиков тем. Уже есть так много замечательных статей и бесплатных детских тем, которые вы можете проверить, чтобы глубже изучить эту тему. Я добавил замечательную коллекцию этих ресурсов ниже:
Вывод
Я надеюсь, что процесс создания дочерних тем WordPress станет более понятным после прочтения этой статьи. Я попытался объяснить, как дочерние темы могут наследовать шаблоны CSS и PHP от родительских. Кроме того, очень просто манипулировать конкретными файлами и создавать свои собственные уникальные темы.

Релиз WordPress 3.0 включает гораздо более интегрированную поддержку дочерних тем. Настало время перейти к разработке WP. Попробуйте эти уловки на своем собственном сайте и посмотрите, сможете ли вы создать дополнительную дочернюю тему. Кроме того, если в прошлом вы создавали какие-либо замечательные детские темы, мы с удовольствием их проверим. Дайте нам знать ваши мысли и предложения в области комментариев.


0 Comments

Добавить комментарий