Сайт о телевидении

Дочерняя тема WordPress - это тема, которая расширяет функционал другой темы, называемой родительской темой, и позволяет вам изменять или дополнять функционал родительской темы. Эта статья рассказывает как создать простую дочернюю тему, и объясняет что вы можете с ней сделать. Как пример родительской темы используется Twenty Ten, новая тема по умолчанию в .

Внимание! Если информация ниже вам покажется сложной для понимания, то можно воспользоваться более актуальным и быстрым способом создания дочерней темы с помощью плагина Child Theme Configurator

Создать дочернюю тему очень просто. Создайте папку, положите в нее соответствующим образом написанный файл style.css и дочерняя тема готова! С небольшим понятием о HTML и , вы можете изменить эту очень простую дочернюю тему - меняя внешний вид и верстку родительской темы, но не меняя ее файлов. Таким образом, когда родительская тема обновляется, ваши изменения сохраняются.

П латформа WordPress является магнитом для тех, кто хочет взять дело в свои руки, кто хочет взять полный контроль над своим веб – сайтом и хотят быть независимыми в управлении ими. WordPress делает это на самом деле легко и может полностью настроить веб – сайт. Если у вас есть немного знаний HTML, CSS и/или PHP, то нет ничего, что вы не можете изменить .

Я имею в виду, просто сравнить темы по умолчанию, Twenty Fifteen and Twenty Fourteen . Трудно поверить, что они работают на той же платформе, не так ли? Поэтому, вполне естественно для вас хотеть адаптировать внешний вид вашего сайта, чтобы соответствовать своим предпочтениям. Я сомневаюсь, что есть пользователи WordPress, которые не думают постоянно об этом. Тем не менее, возникает проблема.

Настройка WordPress: Вы могли бы делать это неправильно

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

Самым большим недостатком является то, что любые изменения, внесенные в тему, таким образом, будут потеряны , как только тема обновляется разработчиком. Как следствие, пользователи либо не смогут сохранить свою тему в актуальном состоянии (что плохо для безопасности) или потеряют все настройки, которые они сделают.

В любом случае, ситуация далека от идеала.

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

Звучит неплохо? Отлично, потому что в этой статье мы подробно рассмотрим, что такое дочерние темы в WordPress , как их создавать и как использовать их, как правильно настроить свой веб-сайт.

Что такое дочерние темы и как их использовать?

Когда речь идет о дочерних темах, сначала мы должны говорить о родительских темах . Тема становится родительской, только когда кто – то строит дочернюю тему для нее. До тех пор, это просто тема, которую вы найдете в каталоге WordPress. Каждая тема включает в себя все файлы, необходимые для родительской темы.

Тем не менее, любая такая тема может быть родителем темы, некоторые из них лучше подходят для этой цели, чем другие. Например, есть frameworks специально сделаны для настройки дочерней темы.

Что такое дочерняя тема? В backend WordPress дочерняя тема ведет себя как обычная тема. Вы можете найти и активировать ее в разделе “Внешний вид” → “Темы”, так же, как и любую другую тему.

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

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

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

Преимущества дочерние темы

Есть многочисленные преимущества дочерней темы:

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

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

На самом деле, дочерней теме нужно только три вещи: папки, файлы таблицы стилей и . Вот и все. И то, эти два файла могут даже в значительной степени быть пустыми.

Когда следует использовать дочернюю тему

Таким образом, всегда ли надо создавать дочернюю тему, когда вы хотите внести какие-либо изменения в веб-сайт WordPress? Нет.

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

Тем не менее, если вы планируете ввести большие изменения , такие как произвести капитальный ремонт дизайна, несколько изменений шаблона или что – нибудь еще из этой величины, то дочерняя тема, безусловно, решение.

Основная настройка дочерней темы

Хорошо, теперь, когда мы знаем, что такое дочерняя тема и что они могут сделать для нас, давайте рассмотрим, как создать шаг за шагом. Для нашего примера, мы будем использовать Twenty Fifteen, последняя тема по умолчанию для WordPress. Не волнуйтесь, это очень легко, и вы получите ее в кратчайшие сроки.

Примечание:

Следующие действия могут быть выполнены непосредственно на сервере с помощью . Тем не менее, я рекомендую сначала настроить все локально, а затем сжать папку дочерней темы и установить ее как обычную тему через меню «Тема». Это позволит сделать все это гораздо проще.

Создание папки в wp-content/themes

Как уже упоминалось, дочерняя тема нуждается в трех вещах: свою собственную папку, таблицы стилей и файл functions.php . Мы начнем с папки.

Как и любая другая тема, дочерние темы находятся в папке wp-content/themes вашей установке WordPress. Таким образом, перейдем туда и создадим новую папку для вашей дочерней темы.

Наилучшей практикой является предоставление папки вашей темы, то же имя родительской темы и добавить -child . Поскольку мы используем тему twentyfifteen , мы назовем нашу папку twentyfifteen-child .

Вы можете использовать любое имя, которое вы хотите; просто убедитесь, что не включает пробелы, потому что это может привести к ошибкам.

Создание таблиц стилей

Теперь, когда мы имеем нашу папку, мы будем нуждаться в таблице стилей. В случае, если вы не знаете, таблица стилей содержит код, который определяет дизайн сайта. Темы могут иметь несколько таблиц стилей, но мы будем довольствоваться одной на данный момент.

Создание таблицы стилей легко: Просто создайте новый текстовый файл и назовите его style.css . Готово! Тем не менее, для того, чтобы она работала, нам придется вставить следующий код, так называемый “заголовок таблицы стилей,” в самом начале файла (код любезно предоставлено WordPress Codex):

/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */

Вот что означает каждая строка:

• Theme name
  Это имя, которое будет отображаться для вашей темы в бэкэнде WordPress.
• Theme URI
  Ссылка указывает на веб – сайт или демонстрацию страницы темы. Это как правило ссылка автора, которая должна присутствовать для того, чтобы тема могла быть принятой в каталог WordPress.
• Description
  Это описание вашей темы будет отображаться в меню темы при нажатии на кнопку “Theme Details.”
• Author
  Это имя автора – это вы в этом случае.
• Author URI
  Вы можете поместить адрес вашего сайта здесь, если вы хотите.
• Template
  Эта часть имеет решающее значение. Здесь идет имя родительской темы, а это означает его имя папки. Имейте в виду, что он чувствителен к регистру, и если вы не ставите в нужную информацию, вы получите сообщение об ошибке, так что дважды проверьте!
• Version
  Отображает версию вашей дочерней темы. Как правило, все начинают с 1,0.
• License
  Это лицензия вашей дочерней темы. Темы в каталоге WordPress, как правило, выпускается под лицензией GPL; вы должны придерживаться той же лицензии, что и ваша родительская тема.
• License URI
  Это адрес, где указывается ссылка на вашу лицензию темы. Опять же, придерживаться того, что говорит ваш родитель тема.
• Tags
  Теги помогают другим найти вашу тему в каталоге WordPress. Таким образом, если вы включите некоторые, убедитесь, что они актуальны.
• Text domain
  Эта часть используется для интернационализации и сделать темы переводимые. Это должно соответствовать “слизняка” вашей темы.

Если вы чувствуете себя немного перегруженным (уже? ), Вы может быть счастливы знать, что не вся информация на самом деле требуется. На самом деле, все, что вам действительно нужно, это название темы и шаблон.

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

/* Theme Name: Twenty Fifteen Child Theme Description: A child theme of the Twenty Fifteen default WordPress theme Author: AndreyEx Template: twentyfifteen Version: 1.0.0 */

Активирование дочерней темы

После того, как вы создадите папку и таблицы стилей, перейдите в раздел “Внешний вид” → “Темы” в и найдите там дочернюю тему. При нажатии на кнопку “Theme Details”, вы увидите содержимое заголовка таблицы стилей. Вот и вся информация.

Хорошо, теперь нажмите на кнопку с надписью “Activate.” Хорошая работа! Ваша тема активирована. Тем не менее, если вы посмотрите на свой веб-сайт, он будет выглядеть следующим образом:

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

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

Создание файла functions.php

Файл functions.php позволяет изменять и добавлять функциональные возможности и возможности для веб – сайта WordPress. Он может содержать как PHP и встроенные функции WordPress. Кроме того, вы можете создавать свои собственные функции.

Короче говоря, functions.php содержит код, который коренным образом меняет вид и поведение веб – сайта.

Создание файла так же легко, как и создание таблицы стилей, если не легче. Все, что вам нужно, это текстовый файл с именем functions.php , а затем вставить следующий код:

Давайте посмотрим, что происходит, когда мы изменим порядок кода:

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

Конечно, он мог бы использовать некоторые стили, но вы получили идею. Вы можете использовать этот метод, чтобы сделать все изменения на вашем сайте. Только не забудьте дать дочерней теме ту же структуру папок в виде дерева в качестве родителя. Например, если файл, который вы хотите изменить находится в папке с именем page-templates в родительской теме, то вы можете создать папку с таким же именем в каталоге вашего дочерней темы и поместить туда файл.

Работа с файлами шаблоном

Мы узнали, что мы можем переписать любой файл в родительской теме, помещая копию в папке дочерней темы и его настройку. Однако, использывать файлы, которые существуют только в дочерней теме также возможно. Файлы шаблонов являются хорошим примером этого.

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

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

Для нашего пользовательского шаблона страницы, мы просто скопируем файл page.php из родительской темы, переименуем его в custom-full-width.php и поместим его в папку с именем page-templates в нашей дочерней теме.

Теперь, давайте введем пару изменений в коде, так что это будет выглядеть следующим образом:

Единственное, что мы сделали здесь, это ввели заголовок, который говорит WordPress, что это шаблон страницы, где мы изменили get_header и get_footer , так что они будут включать в себя два файла с именами header-custom.php и footer-custom.php .

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

Теперь пришло время создать наш пользовательский заголовок и нижний колонтитулы в файле темы. Во- первых, перейдите к родительской теме, и скопируйте header.php и footer.php в папку дочерней темы, и переименуйте их в header-custom.php и footer-custom.php , соответственно.

До сих пор наша страница выглядела так же, как и раньше. Это время для настройки. Давайте начнем с нашего пользовательского заголовка.

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

После этого нам нужно добавить вызов к нашему новому виджету колонтитула, так что это будет выглядеть следующим образом:

© Copyright All rights reserved.

& lt ; ? php * The template for displaying the footer * Contains footer content and the closing of the #main and #page div elements. * @package WordPress * @subpackage Twenty_Thirteen * @since Twenty Thirteen 1.0 ? & gt ; & lt ; / div & gt ; & lt ; ! -- #main --> & lt ; footer id = "colophon" class = "site-footer" role = "contentinfo" & gt ; & lt ; ? php get_sidebar ("main" ) ; ? & gt ; & lt ; div class = "site-info" & gt ; & lt ; p & gt ; & amp ; copy ; Copyright & lt ; ? php echo date (Y ) ; ? & gt ; & lt ; ? php bloginfo ("name" ) ; ? & gt ; All rights reserved . & lt ; / p & gt ; & lt ; / div & gt ; & lt ; ! -- . site - info -- & gt ; & lt ; / footer & gt ; & lt ; ! -- #colophon --> & lt ; / div & gt ; & lt ; ! -- #page --> & lt ; ? php wp_footer () ; ? & gt ; & lt ; / body & gt ; & lt ; / html & gt ;

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

Добавление нового функционала в дочернюю тему

В интернете можно найти много руководств по копированию и вставке кусков кода в файл темы functions.php.

Добавление фрагментов кода в родительский файл functions.php означает, что ваши изменения будут перезаписаны, вне зависимости от того будет ли апдейт родительской темы. Именно поэтому всегда рекомендуется работать в дочерней теме и добавлять все коды в ее файл functions.php.

Давайте создадим файл в папке дочерней темы и назовем его functions.php. В этом примере я хочу добавить кусок кода, который изменит стандартное изображение в хедере на свое изображение.

Я уже создал изображение хедера и миниатюру, редактируя стандартное изображение в хедере темы Twenty Thirteen. Следующий шаг – загрузить их в дочернюю тему по адресу inside / images / headers / folder .

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

Если вы второй раз смотрите на WordPress и третий раз наступили на грабли с обновлением темы - читайте дальше.

Итак, для чего нужны дочерние темы? Я уже частично ответил на этот вопрос. С определенной периодичностью в ядре WordPress, плагинах и темах обнаруживаются дыры (в плане безопасноти). Как правило толковые ребята, занимающиеся разработкой тем, плагинов и самой CMS, выпускают обновления. Все Ваши кастомизации пропадают в тот момент, когда вы устанавливаете эти обновления. Особенно плохо становится в ситуации с глубоко-модифицированной темой. Очень плачевно - при отсутствии резервной копии.

Для того что бы не терять все свои модификации - лучше не делать их в файлах главной темы.

Мне удалось найти в закромах WordPress со старой версией темы Twenty Twelve. Ее и буду использовать для примера.

1. Создаем папку дочерней темы:

mkdir wp-content/themes/twentytwelve-child

2. Для работы темы нужно два файла:

• style.css
• functions.php

Создадим их:

touch wp-content/themes/twentytwelve-child/style.css
touch wp-content/themes/twentytwelve-child/fnctions.php

3. Имя темы задается в style.css. Минимальный набор кода для style.css:

/* Theme Name: Twenty Twelve Child Template: twentytwelve Author: the WordPress team Version: 1.0 Text Domain: twentytwelve-child */ @import url("../twentytwelve/style.css")

Последняя строка подгружает стили из материнской темы.

В этот момент тема появляется в списке тем в админке WordPress и выглядит вот так:

Скопируйте screenshot.png из материнской темы для того что бы появилось изображение. По желанию его можно подредактировать:

cp wp-content/themes/twentytwelve/screenshot.png wp-content/themes/twentytwelve-child/

Теперь список тем выглядит вот так:

После этого тему можно активировать и она даже заработает.

Осталось сложить все модифицированые файлы в папку дочерней темы. Дело в том, что WordPress приоритизирует скрипты/файлы из папки дочерней темы над файлами/скриптами материнской темы. Если же какой-то из файлов не найден в папке дочерней темы - он берется из материнской.

Стандартная тема выглядит вот так:

Давайте немного моифицируем ее для наглядности. Я скопировал файл header.php из материнской темы, поменял в нем отображение меню (над заголовком) и убрал отображение описания блога. При этом оригинальный header.php остался нетронутым. Получилось вот так:

Как мы видим сработал header.php из папки дочерней темы.

Засада только со стилями. Если Вы объявите новый стиль отображения, на пример, ширину зоны текста в файле style.css дочерней темы - он не сработает.

Для того, что бы он сработал нужно создать отдельный файл стилей и подключить его:

touch wp-content/themes/twentytwelve-child/custom.css

Внесите в него код из спойлера.site:

Site { margin: 0 auto; max-width: 90%; overflow: hidden; }

К сожалению директива @import url работает только один раз в файле style.css, поэтому второй файл стилей подключить не удасться.

В WordPress стили подключаются функией wp_enqueue_style() в файле functions.php.

Создаем первую кастомную функцию в functions.php дочерней темы, которая будет возвращать папку или uri дочерней темы:

Function get_child_template_directory_uri() { return dirname(get_bloginfo("stylesheet_url")); }

После этого мы можем смело использовать get_child_template_directory_uri() в других кастомных функциях.

Теперь подключаем custom.css:

Function child_styles() { wp_enqueue_style("twentytwelve-child-style", get_child_template_directory_uri() . "/custom.css"); } add_action("wp_enqueue_scripts", "child_styles",12);

При необходимости можно копировать строчку и добавлять другие css файлы. Все будет работать.

Думаю не нужно объяснять, почему файл functions.php должен начинаться с

Кстати цыфра в add_action() определяет приоритет. 12 - самый крутой action, подразумевается, что стили, которые были подключены с помощью его, будут брать верх над стандартными из материнской темой.

По аналогии со стилями можно добавлять и другие функции, без вариантов их потерять при обновлении.

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

(Visited 1 223 times, 1 visits today)

Дочерние темы в WordPress позволяют вносить изменения в существующие темы, причём таким образом, что подобные изменения не потеряются при обновлении исходной (или родительской) темы. Кроме внешнего вида, дочерние темы позволяют изменять разметку, и даже функционал родительской темы, расширяя её под свои собственные нужны.

Поддержка дочерних тем (child themes) в WordPress появились ещё давно, но большинство пользователей на сегодняшний день всё равно предпочитают вносить изменения в код исходной темы напрямую. В этой статье мы расскажем о том, как работают дочерние темы в WordPress, и почему именно с помощью дочерних тем следует вносить любые изменения в существующие темы.

Что такое дочерняя тема

Дочерняя тема в WordPress — это тема, которая наследует внешний вид и весь функционал родительской (исходной) темы. Такое наследование позволяет легко изменять и дополнять отдельные участки родительской темы, не изменяя при этом саму исходную тему. Благодаря этому подходу обновление родительской темы не повлияет на подобные изменения.

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

Как создать дочернюю тему

Самая простая дочерняя тема состоит из одного файла style.css , в котором указывается имя дочерней темы, и название директории с родительской темой. В этом же файле часто указывается ссылка на таблицу стилей родительской темы с помощью CSS директивы @import .

В качестве примера мы создадим дочернюю тему My Child Theme и будем использовать стандартную тему Twenty Twelve в качестве родительской.

Сперва убедитесь в том, что родительская тема существует — найдите директорию twentytwelve в wp-content/themes . Затем создайте новую директорию в wp-content/themes и назовите её my-child-theme . В этой новой директории создайте файл style.css и вставьте в него следующий заголовок:

/** * Theme Name: My Child Theme * Template: twentytwelve */ @import url("../twentytwelve/style.css");

С помощью этого заголовка мы определили название нашей новой темы, а так же указали родительскую. Директива @import в данном случае подгружает все стили из темы Twenty Twelve, поверх которых мы будем вносить наши изменения. Без этой директивы, наша дочерняя тема будет наследовать только шаблоны (разметку) родительской темы, а не стиль.

После этого ваша директория с темами должна выглядеть примерно следующим образом:

Зайдя в раздел Внешний вид → Темы, вы увидите, что ваша новая тема уже доступна для активации.

Если вы её активируете и перейдёте на главную страницу вашего сайта, вы увидите, что ваша дочерняя тема выглядит в точности как стандартная тема Twenty Twelve.

Работа со стилями

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

Body { background: red; } a { color: green; }

Таким образом вы можете изменять стили любых элементов родительской темы, а найти необходимый элемент вы можете легко с помощью средств разработчика в браузере Google Chrome или с помощью расширения Firebug для браузера Firefox.

Работа с шаблонами

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

Текст подвала

Таким образом мы заменили текст в подвале темы Twenty Twelve на наш собственный.

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

Вы так же можете создавать новые файлы шаблонов, которые отсутствуют в родительской теме, и WordPress будет подключать их согласно иерархии шаблонов . Например, если в родительской теме отсутствует файл page.php, вы можете создать файл с таким именем в вашей дочерней теме и WordPress его подключит при отображении какой-либо страницы.

Стоит так же отметить, что подобным образом изменять можно не все файлы родительской темы. Например, вы не сможете изменить файл, который был вызван PHP функцией include или require .

Работа с functions.php

Если у вас возникли вопросы по внесении изменений в существующие темы WordPress — оставьте комментарий и мы обязательно вам ответим.