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

Содержание

Краткий обзор темы блоков

С введением WordPress 6.0 команда WordPress полностью сосредоточилась на блочных темах, чтобы сделать проектирование и настройку веб-сайтов проще, чем когда-либо, практически без программирования. Темы блоков используют «Редактор блоков», также известный как «Редактор блоков Гутенберга», который позволяет пользователям перетаскивать элементы дизайна на веб-страницу. Эта функция делает WordPress намного более конкурентоспособным по сравнению с разработчиками сайтов и конструкторами тем, тем более что WordPress абсолютно бесплатен и уже используется более чем на 60% из 10 миллионов лучших веб-сайтов в Интернете.

Одним из последних преимуществ блочных тем является возможность легко создать новую дочернюю тему для любой блочной темы, которую вы используете для дизайна своего веб-сайта. Например, если вы используете тему TwentyTwentyThree по умолчанию, которая поставляется с WordPress 6.2, вы можете быстро создать для нее дочернюю тему, не погружаясь в файлы вашего сайта с помощью FTP-клиента.

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

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

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

Упрощенный WordPress: курс «Как создать мощный веб-сайт» от Davies Media Design

Создайте дочернюю тему для темы вашего блока

Теперь, когда некоторые из вас достаточно раздражены тем, что я объясняю, зачем вам нужны дочерние темы, давайте перейдем к тому, как на самом деле создавать эти дочерние темы при работе в WordPress в 2023, 2024 и последующих годах.

Для начала войдите в свою панель управления WordPress и перейдите в «Плагины»> «Добавить новый» (красная стрелка на изображении выше).

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

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

После того, как плагин завершит установку, кнопка «Установить сейчас» станет синей с надписью «Активировать». Нажмите кнопку «Активировать» (красная стрелка на изображении выше).

Как только плагин будет успешно активирован, вы попадете в рабочую область «Плагины» WordPress и увидите сообщение «Плагин активирован» вверху (зеленая стрелка на изображении выше). Отсюда перейдите к «Внешний вид»> «Создать тему блока» (красная стрелка).

Оказавшись в рабочей области «Создать блочную тему», выберите переключатель «Создать дочернюю тему Twenty Twenty-Three» (или любое другое название темы, для которой вы создаете дочернюю тему — красная стрелка на изображении выше).

В правой части окна появится куча текстовых полей. Только самое верхнее текстовое поле с надписью «Имя темы» (синяя стрелка) является обязательным. Остальные все опциональны. Что касается имени вашей темы, то стандартной практикой является называть дочернюю тему «TwentyTwentyThree-child», если, например, ваша родительская тема называется «TwentyTwentyThree».

Я также добавил краткое описание в поле «Описание темы», а также добавил название своей компании в поле «Автор» и свой основной веб-сайт в поле «URI автора». Все остальное я оставил со значениями по умолчанию (включая флажки, которые вы увидите, прокручивая страницу вниз).

Нажмите кнопку «Создать» (зеленая стрелка).

Это автоматически запустит загрузку zip-файла, содержащего вашу дочернюю тему. Вы можете оставить имя файла в том виде, в котором оно отображается (красная стрелка на изображении выше). Нажмите «Сохранить», чтобы сохранить файл на свой компьютер (синяя стрелка).

ZIP-файл будет загружен на ваш компьютер. На панели загрузок в нижней части браузера щелкните стрелку рядом с завершенной загрузкой (зеленая стрелка) и нажмите «Показать в папке» (красная стрелка), чтобы открыть загруженный zip-файл в окне проводника (если вы при использовании Windows — на MAC откройте загрузку в проводнике).

Держите это окно проводника открытым и выберите zip-файл, содержащий вашу дочернюю тему (зеленая стрелка) — это понадобится нам на следующем шаге.

Вернитесь в WordPress и перейдите в раздел «Темы» в разделе «Внешний вид» (красная стрелка на изображении выше). Нажмите кнопку «Добавить новую» в верхней части рабочей области «Темы» (синяя стрелка).

В рабочей области «Добавить темы» вы увидите поле в середине окна с кнопкой «Выбрать файл» (красная стрелка). Вы можете либо нажать эту кнопку и выбрать только что загруженный zip-файл для дочерней темы, либо открыть окно проводника, к которому мы переходили ранее, и перетащить zip-файл в любое место внутри этого поля.

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

Теперь вы увидите файл темы двадцать двадцать триребенка.zip, указанный внутри поля (зеленая стрелка), и появится кнопка «Установить сейчас» (красная стрелка). Нажмите «Установить сейчас», чтобы начать установку дочерней темы.

Вы попадете в новое окно, и ваша дочерняя тема начнет установку на ваш сайт. Дайте установке некоторое время и не обновляйте страницу во время установки (это может сломать ваш сайт). После завершения установки дочерней темы вы увидите сообщение «Тема успешно установлена». (обведено зеленым на изображении выше).

Под этим сообщением об успехе находится ссылка с надписью «Активировать». Нажмите на эту ссылку, чтобы активировать дочернюю тему на своем сайте.

После успешной активации темы вы вернетесь в рабочую область «Темы». Вверху появится сообщение «Новая тема активирована. (обведено зеленым на изображении выше). Вы увидите, что первая тема в списке теперь выглядит как пустая тема, обозначенная фоном в виде шахматной доски, который обычно представляет прозрачность в мире дизайна. В нижней части этого предварительного просмотра темы вы увидите надпись «Активный: TwentyTwentyThree-ребенок» (красная стрелка).

Это означает, что вы успешно установили дочернюю тему! Предварительный просмотр прозрачной темы отражает тот факт, что ваша дочерняя тема содержит только настройки темы, а все остальные элементы стиля и дизайна отображаются в родительской теме (в данном случае в теме «TwentyTwentyThree»). Убедитесь, что вы не удалили родительскую тему, так как это испортит ваш сайт. Кроме того, убедитесь, что вы поддерживаете родительскую тему в актуальном состоянии (по соображениям безопасности), щелкнув любые ссылки/уведомления об обновлении, которые появляются для темы.

Вы можете просмотреть свой текущий сайт с включенной дочерней темой, щелкнув ссылку «Посетить сайт», которая появляется в сообщении об успешном завершении (синяя стрелка на изображении выше).

В этом случае вы увидите, что мой сайт просто отображается как тема TwentyTwentyThree по умолчанию (моя родительская тема — я не вносил никаких изменений в тему TwentyTwentyThree до того, как приступил к этому руководству). Это означает, что дочерняя тема успешно установлена!

Вот и все для этого урока. Вы можете проверить мои другие Справочные статьи WordPress на моем сайте или погрузитесь глубже в WordPress с моим WordPress для начинающих 2023 — Мастер-класс по WordPress без кода.

Davies Media Design Бесплатные креативные приложения Информационный бюллетень по электронной почте

Подпишитесь на информационный бюллетень DMD

Подпишитесь, чтобы получать новые учебные пособия, обновления курсов и последние новости о ваших любимых бесплатных приложениях для творчества!

Вы успешно подписались!

Pin It на Pinterest