И сразу же постараюсь ответить на вопрос из заголовка — для чего нужны дочерние темы?
В качестве примера давайте возьмём стандартную тему WordPress Twenty Twelve — для неё и создадим дочернюю тему.
Я назвал её twentytwelve-child
, но это совсем не обязательно — можете называть как угодно, главное, чтобы название темы не содержало пробелов и русских букв.
style.css
. У меня он начинается с этого:
/*
Theme Name: Twenty Twelve Child
Author: Миша Рудрастых
Author URI: https://misha.agency
Template: twentytwelve
*/
Самым важным в данном случае является параметр Template
— он и определяет то, что эта тема дочерняя. Параметр содержит название директории родительской темы.
Если вы активируете её и перейдёте на сайт, то заметите, что вместо таблицы стилей родительской темы подгружается таблица стилей дочерней темы. Если именно это вам и нужно, то можете пропустить следующий шаг.
functions.php
и добавляет туда хук, который будет подключать таблицу стилей родительской темы на сайт и сразу же за ней — таблицу стилей дочерней темы.
function true_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') ); } add_action( 'wp_enqueue_scripts', 'true_enqueue_styles' );
Как результат — на вашем сайте сейчас будет точная копия родительской темы.
На самом деле всё очень и очень просто — файлы, которые вы создаёте в директории дочерней темы, будут заменять эквивалентные им файлы из родительской темы.
Исключение составляют эти два файла.
functions.php
дочерней темы всегда подключается непосредственно перед functions.php
родительской темы. Что делать, если нужно задействовать функцию после инициализации functions.php
родительской? Используйте хук after_setup_theme
с приоритетом больше 10.Родительская тема | Дочерняя тема |
---|---|
get_template_directory_uri() — возвращает URL родительского шаблона. | get_stylesheet_directory_uri() — возвращает URL текущего шаблона (т е, если функция используется в дочерней теме, то выведен будет URL дочерней темы). |
get_template_directory() — возвращает абсолютный путь к директории родительской темы на сервере. | get_stylesheet_directory() — возвращает абсолютный путь к директории текущей темы на сервере. |
Процесс перевода дочерних тем по сути ничем не отличается от локализации недочерних тем. Про локализацию читайте подробнее здесь.
Дочерние темы отличный выхход из таких ситуаций когда кастомишь тему а она потом слетает. Хотя есть и другие варианты для такого случая.
Люблю работать с дочерними темами =) В любом случае, так безопаснее исходную тему менять и обновления основной более-менее нормально проходят. А то в основном жалуются, что что-то изменил и сайт полетел
Миша, подскажи пожалуйста, под постом (wifika.ru/a-chem-vyi-zaymetes-v-prazdniki.html ,сайт не мой, но шаблон такой же) выводятся соц.сети и как вместо Pinteresta поставить ссылку Вконтакте (поделиться) со счетчиком. Тяжело ли это сделать? Помоги пожалуйста!
p.s. если нужно заплатить, скажи сколько это будет стоить примерно?
Ну, если нужно сделать точно такого же стиля, то там конечно придется поколдовать. Пиши мне на email, могу помочь с этим.
подскажите пожалуйста где и как найти родительскую тему где она находится?? мне нужно в ней поменять чтобы текст на сайте был на всю страницу а у меня он посередине с боков много пустого места
Папка родительском темы совпадает со значением
Template: twentytwelve
в файлеstyle.css
дочерней темы.Здравствуйте. Миша, не сталкивались с таким? Дочернюю тему устанавливаю, все как всегда, стили подгружаются, но вот при публикации постов, нажимаешь публиковать, появляется белый экран, обновляешь браузер, все норм. Аналогично - при установке или удаленни плагинов, страниц и прочего.
Здравствуйте.
В файле
wp-config.php
включите debug mode, может что-то просянится.Попробую попозже. Сейчас времени нет 🙂 Я даже и не подумал. Действительно. Там тема эта sahifa, арабы понамутили. Вообще должны уже готовую заготовку для дочерки в архиве поставлять.
Здравствуй, Миша. А как лучше подключать? Как у тебя в статье, или через @import ? Через @import файл стилей дочерней темы полностью заменяет родительский и родительский уже не подключается родительский style. В варианте с хуком дочерний файл дополняет родительские стили и подкл. оба файла.
Привет!
Через @import вообще не советуют, влияет на производительность.
Здраствуйте! А вы не подскажите как сделать так чтоб для мобильной версии стили дочерней не подключались? Подключены они через @import, по другому не вышло. Заранее спасибо!
Здравствуйте, а через media queries не прокатывает?
Тоесть примерно так? @media screen and (max-width: ..)
Я так подключил. Но выходит какойто баг. Стили через @media screen перебивают некоторые стили в теме при полном экране. Я сначала грешил на !important, но нет. Вот я и думаю, может как то можно сделать чтоб стили там одни а там другие.
Добрый день! Вопрос по поводу дочерней темы WordPress. Попытка создания по схеме, которая описана у Вас в блоге увенчалась лишь частичным успехом: не все оформление меню корректно отображается на странице. Тема называется llorix-one-lite.
Код файлов дочерней темы:
functions.php
style.css
Без последней строчки работает криво во всех бразуерах, с последней строчкой только в Chrome проблема (в IE 11 и Fierfox отображается нормально). Либо javascripts не подгружается либо CSS не весь: фон заголовка окрашивается темно-синим цветом, с черными буквами меню и все сливается, хотя в главной теме цвет фона белый!
Кривое отображение: https://yadi.sk/i/xqEjGP7VqfqDb
Нормальное отображение: https://yadi.sk/i/bQfUQm0JqfqGp
Спасибо!
Добрый день,
так, у меня два вопроса:
1. Задача дочерней темы, на данном этапе подключение стилей и все. Как только дочерняя тема начнет корректно работать, я перейду к следующему этапу: добавление нового кода и новых стилей. Но пока мне нужно сделать так, чтобы дочерняя тема начала правильно отображаться.
2. Не работает именно дочерняя тема, родительская тема работает хорошо, это видно из скриншотов.
Ок, ясно, а код из дочерней темы работает корректно? Пробовали его просто в конец style.css родительской темы вставить?
Пробовал вместо почти "пустого" файла style.css дочерней темы помещать копию файла родительской темы. Не помогло.
Сейчас попробовал добавит код в конец style.css. Не помогло.
Смотрите, без доступа к сайту конечно трудно что-то сказать, но у меня есть два предположения — либо в ваших стилях, которые вы добавляете, что-то не совсем то, либо ваши стили вставляются ДО стилей родительской темы, и склоняюсь я ко второму варианту.
Можете сделать Ctrl + U и скинуть ссылку на скриншот всего кода сайта после подключения дочерней темы?
Большое спасибо, Михаил, очень помогли!
Тема работает, но я не совсем понял, как вы ее исправили. Вот то, что я вытащил из functions.php родительской темы:
вот то что было в начале, и что не работало:
вот, что сделали вы:
Насколько я понимаю вы подключили в начале bootstrap стили, затем... запутался ))
в первой строке: parent-style -> llorix-one-lite-style и добавили array('llorix-one-lite-bootstrap-style')
во второй строке: parent-style -> llorix-one-lite-style и array('parent-style') -> array('llorix-one-lite-style')
parent-style - это переменная, название ее можно было не менять, насколько я понимаю?
$handle(строка) (обязательный)Название файла стилей (идентификатор). Строка в нижнем регистре. Если строка содержит знак вопроса (?): scriptaculous?v=1.2, то предшествующая часть будет названием скрипта, а все что после будет добавлено в УРЛ как параметры запроса. Так можно указывать версию подключаемого скрипта.
можно было бы оставить так?
и почему style.css остался прежним, bootstrap подключается в funcrtions как bootstrap.min.css?
Итак, задача нашей дочерней темы заключалась в том, чтобы подключить свой
style.css
послеstyle.css
родительской темы, сохранив при этом порядок стилей.В WordPress у каждого CSS и JS есть свой идентификатор, из родительской темы нас интересует только
style.css
, которыйllorix-one-lite-style
иllorix-one-lite-bootstrap-style
. Запомним их.Функция get_stylesheet_uri() возвращает URL файла
style.css
текущей темы, будь она родительской или дочерней — не важно, именно поэтому лишь при активации пустой дочерней темы с пустымstyle.css
, сайт уже останется без основных стилей.CSS с ID
llorix-one-lite-style
будет подключаться в любом случае, именно поэтому его лучше переопределить, что я и сделал. Я сделал так, чтобы этот CSS всегда был файлом из родителькой темы.Ну а потом просто подключил CSS дочерней темы с завивимостью от родительского.
Не совсем понятно, Михаил. Кроме первого и последнего абзаца, непонятно.
Добавляем стиль родительской темы:
wp_enqueue_style( 'llorix-one-lite-style', можно назвать parent-style? или нельзя поскольку мы переопределяем handle именно с этим значением?
get_template_directory_uri() . получаем путь родительской темы
'/style.css', добавляем файл style.css
array('llorix-one-lite-bootstrap-style') добавляем handle родительской темы для переопределения
);
Почем CSS с ID llorix-one-lite-style будет подключаться в любом случае? Почему если он будет подключаться в любом случае и при условии, что "style.css, который llorix-one-lite-style И llorix-one-lite-bootstrap-style" llorix-one-lite-style не тянет за собой llorix-one-lite-bootstrap-style?
Окей, по порядку.
Во-первых, в родительской теме есть определённый набор стилей, которые подключаются в определённом порядке. У каждого файла стилей есть свой ID, например
llorix-one-lite-style
. Эти стили будут подключаться в любом случае, потому что они прописаны вfunctions.php
родительском темы. Можно их выковырять разными способами, но в данном случае ни к чему.Во-вторых, как только появляется дочерняя тема, то основной файл стилей
llorix-one-lite-style
уже берётся не из родительской, а из дочерней директории, потому что так работает функция (ссылка в предыдущем комментарии).В-третьих, нафига нужно
llorix-one-lite-style
называтьparent-style
? Дело в том, чтоllorix-one-lite-style
подключится через родителькийfunctions.php
и у нас в итоге будет три файлы стилей, поэтому мы просто переопределим его, да попробуйте в конце концов и посмотрите исходный код, ничего же не случится, если вы попробуете, просто запомните, какой вариант правильный.Ну не знаю, как ещё понятнее объяснить 🙂
Михаил, еще вопрос! Пытаюсь добавить в дочерней теме код в функцию llorix_one_lite_customize_register(). Код должен добавлять в кастомизатор темы новую секцию и чекбокс, который будет скрывать или проявлять header. Если добавить код напрямую в родительскую тему в файл customizer.php, то все работает, но если добавить код в functions.php ничего не работает. Вот добавление кода через хук в functions.php дочерней темы (код который не работает):
последний вопрос больше не актуален. Оказалось что нужно было делать так:
Михаил, еще раз побеспокою ))
оказалось что не все стили подключились, как подключить оставшиеся:
Не понял вопроса)
Михаил, добрый день!
Вопрос по поводу передачи параметров wp.customizer в переменную javascript (jQuery). Интересует передача значений булевой переменной. Была мысль добавить стиль пустышку в html при взведенной переменной. jQuery будет проверять наличие стиля и если находит этот стиль, то выставляет значение свой переменной в True. Думаю это корявый вариант и хотелось сделать более гамотно. Как это можно грамотно организовать не добавляя "мусорные" стили в html страницу? Может быть Json?
Добрый день!
Чтобы не добвлять мусорные стили, можно же просто класс добавить тому же
<body>
?я видимо не так выразился, я это и имел ввиду... хотелось бы от этого избавиться, поскольку, что-нибудь потяжелее булевой переменной так передавать проблематично, да и плодить классы только для передачи переменных... хорошо если таких переменных одна - две... а если передать нужно массив...?
К сожалению мне придётся ответить, что с этим не приходилось сталкиваться самому. Я бы разобрался, что к чему более детально, но время не позволяет.
Но как только решение появится, я оставлю его в комментариях к этому посту.