Как установить дочернюю тему WordPress: руководство
Привет всем!
Долгое время собирался и вот наконец собрался. Очень долго))) Но свершилось!
В этой статье мы подробнее поговорим о дочерних темах WordPress и о том, почему вы должны их использовать. Затем мы поговорим о некоторых ситуациях, в которых имеет смысл создать дочернюю тему, и я научу вас, как это сделать.
Одна из лучших вещей об использовании WordPress — его почти бесконечная настраиваемость. Тем не менее, есть некоторые протоколы, которым вы должны следовать, прежде чем нырять под капотом. В противном случае настройки могут работать неправильно.
Вот где дочерние темы приходят на помощь. Это функция WordPress, позволяющая безопасно настраивать темы и сохранять все настройки. Как только вы научитесь их использовать, ваша жизнь станет намного проще, особенно если вы проводите много времени, играя со стилями и поведением вашей темы.
Что такое дочерняя тема WordPress (и почему вы должны их использовать)
Дочерняя тема WordPress работает так же, как обычная на поверхности. После активации она будет работать так же, как и любая другая ваша тема. Разница в том, что дочерние темы имеют «родителя», от которого они наследуют все свои атрибуты.
Например, представьте, что вы используете тему «Twenty Seventeen» на своем блоге. Вы можете создать дочернюю тему для нее в любой момент, которая будет выглядеть и работать точно так же. Однако вы можете настроить каждый аспект работы дочерней темы, не затрагивая ее родительскую тему. Вот как это может работать в вашу пользу:
Вы можете безопасно обновлять свои темы. При обновлении темы также теряются все изменения, внесенные в ее код в процессе. Однако если вы используете дочернюю тему и обновляете ее родительский элемент, эту проблему можно обойти.
Легче отслеживать изменения, внесенные в тему. Многие темы WordPress включают десятки файлов и сотни строк кода. Внесение любых изменений в них — независимо от того, насколько они малы — может быть сложным, потому что легко потерять эти настройки. С дочерней темой вы можете вносить изменения в содержимое ее ядра и по-прежнему поддерживать порядок.
Давайте обобщим то, что мы узнали до сих пор, используя пример.
Если вы создадите дочернюю тему для Twenty Seventeen, WordPress распознает ее как другой элемент. Однако дочерняя тема унаследует все родительские стили и функции. WordPress затем загрузит любые изменения, которые переопределяют его конфигурацию по умолчанию. Если это так, он будет отображать их вместо стандартных файлов Twenty Seventeen.
Это звучит сложно, но на самом деле это просто, как только вы узнаете, как создать и увидеть это все в действии.
Когда имеет смысл использовать дочернюю тему WordPress
Если вы планируете внести изменения в тему, создайте для нее дочерний элемент. Тем не менее, если вы полностью удовлетворены тем, как ваша тема работает и выглядит, вы можете использовать ее как есть.
Вы также можете использовать пользовательские/дополнительные возможности CSS WordPress, если требуются только изменение CSS. Это намного проще, чем создание дочерней темы, и может быть сделано непосредственно из настройщика.
Если вы все еще не знаете, стоит ли использовать дочернюю тему или нет, вот несколько примеров ситуаций, в которых это имеет смысл:
Если вы собираетесь внести какие-либо изменения — постоянные или временные — в функциональность или стиль вашей активной темы.
Если вы используете тему, которая получает постоянные обновления (что хорошо!) и вы не хотите потерять настройки во время процесса.
Чтобы проверить изменения, которые вы можете реализовать в активной теме, используйте безопасную среду.
Любой из этих сценариев является хорошей причиной для ежедневного использования дочерних тем. Тем не менее, если вы собираетесь создать ее в основном для тестовых целей, вы также можете рассмотреть вопрос о настройке промежуточного веб-сайта.
Как создать дочернюю тему WordPress (за 5 шагов)
Если вы впервые настраиваете дочернюю тему WordPress, вам обязательно нужно сделать резервную копию своего сайта. Не бойтесь — процесс очень прост.
Кроме того, прежде чем мы перейдем, вы должны знать, какую тему вы хотите использовать в качестве родителя в этом сценарии. Если вы просто делаете это для тестирования, не стесняйтесь выбирать одну из тем WordPress по умолчанию на данный момент.
Шаг 1. Создайте папку для дочерней темы
Первый шаг, конечно, самый простой. Каждая тема, устанавливаемая на веб-сайте, имеет свою собственную папку в специальном каталоге тем на сервере. Чтобы начать работу, мы создадим новый подкаталог для нашей новой дочерней темы.
Есть много способов взаимодействия с файловой структурой вашего сайта — например, через вашу панель — но мы частично защищаем протокол передачи файлов (SFTP) из-за его простоты использования. Для доступа к сайту по FTP вам потребуется специальный клиент. Я рекомендую использовать FileZilla, так как его легко использовать даже новичкам, и он находится в постоянном развитии. Если вы не знакомы с использованием FTP, вам также необходимо освежить свои навыки, прежде чем приступать к выполнению этих шагов.
После установки зайдите в каталог вашего сайта, используя свои учетные данные SFTP. Этот каталог чаще всего отображается как «public_html», но на некоторых хостингах по умолчанию используется домен, который вы добавили (zacompom.ru).
Войдите в каталог и перейдите в wp-content/themes/. Внутри вы найдете отдельную папку для каждой темы WordPress.
Теперь щелкните правой кнопкой мыши в любом месте каталога тем, выберите параметр «Создать каталог», а затем задайте имя для новой папки:
Папка дочерней темы может иметь любое имя. Тем не менее, для практических целей я рекомендую дать ей название, которое вы можете легко узнать, например, «twentyseventeen-child» (или что-то еще, в зависимости от того, какова ее родительская тема).
Когда у вас есть готовая папка для дочерней темы, вы готовы перейти к шагу номер два.
Шаг 2. Создайте таблицу стилей дочерней темы
Как вы, возможно, знаете, таблицы стилей — это файлы CSS, которые придают вашим страницам большую часть визуального стиля. Каждая тема имеет свою уникальную таблицу стилей и ваша дочерняя тема не исключение. Помните, что по умолчанию ваша дочерняя тема будет наследовать все стили родительского элемента. Однако вы можете переопределить их, добавив новый код в файл style.css, который вы собираетесь создать.
Хотя файл style.css вашей дочерней темы пригодится вам в будущем, он также выполняет важную задачу прямо сейчас. Он просто говорит WordPress: «Эй, я тоже тема, загрузи меня вместе с остальными!»
Чтобы это произошло, вам нужно вернуться в каталог своей дочерней темы и получить к нему доступ.
Прямо сейчас папка должна быть пустой. Щелкните правой кнопкой мыши в любом месте внутри и выберите опцию «Создать новый файл». Когда FileZilla предложит вам выбрать имя, введите style.css и подтвердите свое решение.
Наконец, нам нужно добавить короткий фрагмент кода в этот файл. Щелкните правой кнопкой мыши по нему и выберите «Просмотр/Редактирование». Эта опция загрузит копию файла на ваш компьютер и откроет ее, используя ваш локальный редактор. Когда файл открыт, вам нужно вставить следующий текст:
/*
Theme Name: Twenty Seventeen Child
Theme URI: https://zacompom.ru/twenty-seventeen-child/
Description: Your first child theme!
Author: Yurich
Author URI: https://zacompom.ru
Template: twentyseventeen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: child theme
Text Domain: twenty-seventeen-child
*/
На первый взгляд это кажется большой информацией, но для работы с дочерней темой нужно только одно поле: «Template». В приведенном выше примере вы можете видеть, что мы использовали «twentyseventeen», то есть имя каталога темы Twenty Seventeen. Если вы используете другую тему в качестве родительской, вам нужно заменить это значение именем ее папки (а не полным именем темы).
Вы также захотите выбрать заголовок и описание, которые имеют смысл для вашей дочерней темы, так как вы увидите оба на вкладке темы WordPress. Что касается остальных полей, значения можно заменить на что угодно.
Двигаемся дальше, после того, как вы установили правильное значение «Template» и настроили код, вы можете сохранить изменения в своем файле style.css и закрыть текстовый редактор. Теперь FileZilla спросит вас, хотите ли вы заменить файл на вашем сервере на локальную копию, которую вы только что изменили. Скажите «Да» и получите доступ к своей панели управления WordPress. Если вы посмотрите на вкладку «Темы», вы должны увидеть новое дополнение.
На этом этапе вы можете активировать свою дочернюю тему, но она все равно не будет работать должным образом, так как мы не сказали WordPress, что она должна наследовать функциональность своего родителя. Пока не активируйте тему — мы позаботимся о наследовании на следующем шаге.
Шаг 3. Настройте дочернюю тему, чтобы унаследовать стиль своего родителя
К настоящему времени вы должны были создать папку и файл style.css для вашей новой дочерней темы. В рамках последней мы включили информацию, обозначив ее как тему. Следующий шаг — убедиться, что ваша дочерняя тема наследует стиль и функции своего родителя.
Для этого мы будем использовать файл functions.php, который позволяет вам указывать WordPress добавлять новые функции. В этом файле мы добавим сценарий, чтобы поставить в очередь таблицу стилей вашей родительской темы (а не ту, которую мы только что создали). После этого ваша дочерняя тема будет готова для использования.
Для начала вернитесь в каталог вашей дочерней темы. Внутри создайте новый файл functions.php, как вы это делали с style.css во время второго шага.
Теперь откройте файл с помощью опции «View/Edit» в FileZilla и вставьте следующий код:
add_action ('wp_enqueue_scripts', 'enqueue_parent_styles');
function enqueue_parent_styles () {
wp_enqueue_style ('parent-style', get_template_directory_uri (). '/style.css');
}
В этом случае нет необходимости заменять какие-либо значения кода. Один и тот же код будет работать независимо от того, какую родительскую тему вы используете, поскольку вы уже определили это с помощью файла style.css.
Короче говоря, этот фрагмент кода сообщает WordPress, что он должен загрузить таблицу стилей вашей родительской темы, которая является последней частью головоломки, необходимой для работы вашей дочерней темы.
Теперь сохраните изменения в вашем файле functions.php и закройте его. Обязательно согласитесь, когда FileZilla спросит вас, хотите ли вы заменить файл functions.php вашего сайта, и все! Теперь ваша дочерняя тема готова к своему грандиозному дебюту.
Шаг 4. Активируйте свою новую дочернюю тему
Чтобы использовать свою дочернюю тему, вернитесь в панель управления WordPress и перейдите во вкладку «Внешний вид — Темы». Внутри должна быть одна тема без показанного изображения — ваша дочерняя тема.
Нажмите кнопку «Активировать» рядом с названием темы и откройте свой веб-сайт, все как обычно. Если вы выполнили предыдущие три шага к посту, ваш сайт должен выглядеть точно так же, как и до того, как мы начали.
Не стесняйтесь быстро осмотреться, чтобы проверить, все ли работает правильно. Если ответ «Да» (что и должно быть), вы готовы перейти ко второй части этого урока, где мы поговорим о том, как использовать вашу новую дочернюю тему.
Однако перед этим давайте сделаем один быстрый пит-стоп и добавим изображение в вашу дочернюю тему.
Шаг 5. Добавьте изображение в вашу дочернюю тему
Просто для ясности — когда мы говорим о избранном изображении темы, мы имеем в виду графическое изображение, которое отображается над ее именем на вкладке «Темы». Вот несколько примеров.
Новоиспеченные дочерние темы не поставляются с этими изображениями, поэтому вам нужно предоставить такую тему для загрузки в WordPress. К счастью, это очень простой процесс. Все, что вам нужно сделать, это добавить изображение .png с именем «screenshot.png» в каталог вашей дочерней темы.
WordPress отобразит это изображение с разрешением 387×290 пикселей. Однако вы, вероятно, захотите сохранить его, используя более высокое разрешение, чтобы оно хорошо отображалось на больших экранах. В любом случае, вы можете использовать любое изображение в качестве скриншота вашей темы.
При этом ваша вкладка «Темы» должна выглядеть потрясающе, поэтому пришло время вернуться к делу.
Но перед этим я бы хотел продолжить разговор о изображении темы. Я займу вас не на долго.
Если вы занимаетесь разработкой темы WordPress (и не только), я уверен, что вам приходилось несколько раз искать это рекомендуемое имя, формат и размер скриншота темы WordPress.
Я часто нахожу себя в поиске по размеру скриншота темы, иногда просто чтобы убедиться, что я все правильно делаю. Так что это только для моей справки, но не стесняйтесь делать закладки и использовать эту страницу, если она вам поможет.
Вот краткая информация о скриншоте темы WordPress.
Рекомендуемый размер экрана темы WordPress
Согласно Кодексу WordPress для разработки тем, рекомендуемый размер скриншота темы составляет 1200 пикселей в ширину и 900 пикселей в высоту.
Обратите внимание, что на некоторых веб-сайтах все еще упоминается старый рекомендуемый размер низкого разрешения 880×660 пикселей. Это было давно обновлено в кодексе WordPress, чтобы отразить новый рекомендуемый размер 1200×900 пикселей.
В кодексе также упоминается, что снимок экрана обычно отображается в меньшем размере, но более высокое разрешение изображения позволяет просматривать его на дисплеях HiDPI.
Также обратите внимание, что на адаптивном экране «Управление темами» показан скриншот, верхняя и нижняя часть скриншота могут быть не полностью видны. Поэтому рекомендуется держать основную графику в центре изображения.
Название скриншота темы — screenshot
Скриншот темы WordPress, пожалуй, самый простой для запоминания. Просто назовите его как «screenshot».
Я знаю, что вы можете легко запутаться, но всегда помните это как скриншот, а не называйте его как другие альтернативы, такие как изображение или фото.
Формат скриншота темы — .png
Еще одна вещь, о которой стоит позаботиться о скриншоте — это формат, который вам понадобится для сохранения скриншота темы WordPress.
Рекомендуемый скриншот темы в формате .png.
В то время как другие форматы .jpg, .jpeg и .gif могут быть допустимыми расширениями и форматами файлов для скриншота темы, они официально не рекомендуются Кодексом WordPress.
Загрузить скриншот в папку тем
Если вы новичок и хотите изменить снимок экрана вашей темы, отображаемый на экране «Управление темами» на панели инструментов WordPress, вы можете создать файл снимка экрана, как это рекомендовано выше, и загрузить его в каталог тем.
Вам понадобится программа FTP, такая как Filezilla или Atom, и ваши данные для входа FTP. После того, как вы вошли в систему с помощью программы FTP, перейдите в каталог «Themes» и загрузите файл screenshot.png. Вам нужно будет заменить существующий файл скриншота.
Подводя итог, рекомендуемый размер скриншота темы WordPress должен быть 1200х900 пикселей, сохраненный в каталоге вашей темы как screenshot.png.
4 подсказки, чтобы получить максимум от ваших дочерних тем WordPress
На этом этапе у вас должна быть полностью рабочая тема. Что еще более важно, у вас также есть четкое понимание того, как работает весь процесс и почему необходим каждый шаг в его создании. Это означает, что мы можем сразу начать играть с вашей дочерней темой, используя только что созданные вами файлы!
1. Добавить пользовательские стили
Как вы уже знаете, каждая дочерняя тема WordPress автоматически наследует стили своего родителя. Тем не менее, они также имеют свои собственные таблицы стилей. Любые настройки, которые вы добавляете в файл style.css вашей дочерней темы, затем переопределяют стили их родителей, если между ними есть конфликт.
Настроить стиль вашей темы с помощью CSS просто, если вы знаете, каковы ее элементы. Даже если вы этого не сделаете, вы можете легко узнать об этом с помощью веб-инспектора, такого как Chrome DevTools, который включен в ваш браузер. Просто щелкните правой кнопкой мыши по элементу, который вы хотите изменить, и выберите опцию «Inspect» (Просмотреть код).
Теперь исходный код страницы будет отображаться в столбце справа от вас, включая определенный класс для проверяемого элемента:
Вооружившись этой информацией, вы можете получить доступ к файлу style.css вашей дочерней темы и добавить необходимый код для его настройки. Затем вы можете сохранить изменения в своем файле style.css, и все готово. Вернитесь на сайт вашего сайта и посмотрите, как выглядит ваша тема.
2. Научитесь перезаписывать файлы родительской темы
Минуту назад мы говорили о том, как style.css вашей дочерней темы автоматически переопределяет код родительской темы. То же самое относится и к любому другому файлу, два из которых находятся между родительской и дочерней темой.
Представьте, например, что вы решили создать дочернюю тему по теме «Twenty Seventeen». Родитель, в этом случае, имеет файл footer.php в своей папке темы:
Если вы создадите файл footer.php в своей дочерней теме, WordPress автоматически загрузит его. Платформа делает это, пока оба файла имеют одинаковую структуру дерева папок. В этом случае, так как файл footer.php вашей родительской темы расположен в верхней части каталога «Twenty Seventeen», то же самое должно сохраняться для его аналога:
Пока оба файла имеют одинаковое имя, WordPress сделает все остальное. Используя этот трюк, вы сможете изменить любой аспект функциональности вашей темы. Кроме того, если вы когда-нибудь что-то сломаете, вы можете просто удалить нарушающий файл из каталога вашей дочерней темы и начать все сначала.
3. Создайте пользовательские шаблоны страниц
Всякий раз, когда вы создаете новую страницу в WordPress, вы можете выбрать, какой шаблон использовать вместе с ней. Некоторые из наиболее распространенных примеров включают макеты полной ширины или с боковыми панелями.
Вы можете добавить новый макет к любой теме, к которой хотите, хотя процесс немного сложнее.
4. Используйте hooks (хуки) темы
В WordPress хуки — это триггеры, которые позволяют вам добавлять пользовательский код, когда что-то происходит, или настраивать работу ваших файлов. Это то, что вы можете сделать, изменив свои файлы, но использование хуков намного чище, поскольку они существуют отдельно.
Однако изучение того, как создавать хуки, выходит за рамки этой статьи.
Короче говоря, вы можете добавить хуки к вашей дочерней теме, используя ее собственный файл functions.php. Таким образом, любые сделанные вами изменения остаются независимыми от родительской темы.
И в заключении
Сначала создание дочерних тем WordPress могут быть пугающим. Создание первой темы требует, чтобы вы засучили рукава, но после того, как вы это сделаете, вы поймете, что процесс не так сложен. Кроме того, добавление настроек к вашей дочерней теме должно предоставить вам лучшее понимание того, как работает WordPress, который может открыть много дверей. Кто знает? В какой-то момент вы даже можете создать свою собственную тему.
Если вам что-то не понятно из статьи — не стесняйтесь, спрашивайте в комментариях. Я постараюсь ответить на все ваши вопросы.
До скорых встреч.
Это делается очень просто)
Если вам это надо, напишите мне или в комментариях и я вам помогу
Здравствуйте. Мало что понял, честно говоря, не силён в этом. Мне вот хотелось бы, чтобы одна из страниц имела совсем другую тему, либо свою тему, но с несколько другими стилями. Можно как-то это сделать? И еще. третий пункт статьи: «3. Создайте пользовательские шаблоны страниц», не нашел этого у себя. Спасибо.
Полезная рекомендация, спасибо! Буду пользоваться для себя и клиентов
Это кому как нравится)
Благодарю за полезную информацию!
Вы переносите стили родительской темы через функцию «function enqueue_parent_styles (), но можно же просто вверху файла style.css дочерней темы написать:
@import url(«../theme_name/style.css»);
, где theme_name — имя родительской темы.
Вроде бы так проще, нет? Или в вашем способе что-то лучше/быстрее работает?
Здравствуйте, Юрий!
Да, можно делать несколько шаблонов)))
Замедлит не сильно, я думаю, если не будете каждую страницу создавать с помощью построителей страниц и будете оптимизировать картинки. Я не люблю премиум темы, потому что они очень громоздкие. Обычно я сам делаю шаблоны — они получаются легкими.
Здравствуйте,
Получается, что можно делать несколько дочерних тем. Правильно?
Надеюсь, что работа сайта с дочерней темой не сильно замедлит загрузку страниц.