Создание дочерней темы wordpress – Почему не применяются стили родительской темы в дочерней в WordPress? — Хабр Q&A

Содержание

Создание дочерней темы вордпресс — пошаговая инструкция

Тематический трафик – альтернативный подход в продвижении бизнеса

Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

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

Если коснуться терминологии, то речь идет об особой теме, принимающей значения другой, которая выступает в качестве родительской. Для чего они создаются? Чтобы модифицировать уже имеющиеся themes ВордПресса и таким образом увеличить их количество.

Чем отличается «дочь»

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

  1. Изменения, внесенные в родительскую модификацию, не касаются дочерней. Из этого следует, что после разработки они независимы друг от друга.
  2. Производная функционирует исключительно при условии установки родителя, при этом ее активация происходит позднее.
  3. Дочерние привязаны только к своей основе и не взаимосвязаны ни с одной, нри с другой.

Удобно ли работать

Дочерняя тема WordPress представляет собой прекрасную идею, обладающую широким перечнем преимуществ. Лично мы бы рекомендовали ее в стандартном комплекте с продуктами премиального сегмента. Перечислим лишь некоторые плюсы:

  1. Они автоматически сохраняют внесенные корректировки. Благодаря этому можно вносить коррективы напрямую в код, без рисков, что настройки собьются или будут утрачены при обновлении.
  2. Работа с ними — прекрасная подготовка для перехода к написанию основного кода для родительских вариантов.
  3. Улучшается рабочий процесс. Имея в распоряжении всего одну тематическую основу, вы можете создавать сайты, различные по сложности и функционалу.

Содержание

Так как это продолжение родительской, набор особенностей и функций здесь идентичен. Главные составляющие:

  1.  Директория (папка/место расположения файловых составляющих).
  2.  «style.css», где прописаны основные и дополнительные свойства.
  3.  «functions.php», где прописано определение функций.

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

Функционирование

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

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

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

Как создать

Сначала проверьте, есть ли у вас в распоряжении все необходимое. А именно доступ к FTP или файловому менеджеру, открытый доступ к самой панели управления ВордПресс. Итак, приступим.

Шаг No1. Создание дочерней темы WordPress

Это достаточно простой процесс. Если будет детально следовать инструкции, его освоит любой пользователь.

Прежде всего создаем папку для дочери в стандартном каталоге. Чтобы в каталоге был порядок и содержимое было систематизировано, лучше назвать папку по образцу «Наименование родителя + окончание child». Для удобства можно добавить наименование того или иного проекта, для которого мы создаем theme. Главное, чтобы название каталога не имело пробелов, в противном случае это может привести к появлению ошибок. Файловый менеджер или FTP-клиент поможет создать новую папку. На сегодняшний день хорошо зарекомендовал себя такой FTP-клиент как FileZilla.

Для примера возьмем за основу «Twenty Seventeen», которая многим знакома. Работать я предпочитаю с Файловым менеджером, поэтому у меня путь до созданной папки выглядит таким образом:

Делаем следующее:

  1. Открываем панель управления и выбираем используемый файловый менеджер.
  2. Открываем папку, где находится WordPress, после этого открываем «wp-content» и в завершении выбираем «themes».
  3. Жмем на «Новую папку» и прописываем наименование создаваемой «дочери», затем жмем «Создать», как показано на рисунке
  4. Открываем созданную папку.
  5. Выбираем «Новый файл» и в строке для ввода имени прописываем «style.css», как это показано ниже.
  6. В завершении нажимаем «Создать».
  7. Внутри пропишите код, идентичный тому, что представлен ниже.
  8. Все стандартные значения нужно изменить на те, которые соответствовали бы создаваемому варианту и домену. Наиболее значимы пункты «Theme name» и «Template», потому что они отсылают к родителю, ссылаются на него. После внесения корректировок сохраните их.
  9. Теперь приступим к работе с «functions.php». Он обязательно вносится в тот же каталог, где находится «style.css». Обратите внимание, что содержание здесь должно отличаться. Поэтому создаем пустой документ или добавляем дополнительные .php функции, которые нужны для функционирования «дочери».
  10. Из панели WordPress переходим во «Внешний вид» и здесь открываем «Theme». Далее выбираем «Активировать».
  11. Открываем наш сайт и видим, что theme отображена неправильно (например, как она отобразилась у меня, можете увидеть на картинке ниже). Ошибки вполне ожидаемы, потому что «functions.php» не выгрузились от родительской.
  12. Опять переходим во «Внешний вид» и открываем редактор, чтобы выбрать «functions.php».
  13. Копируем код, представленный ниже на картинке, и вставляем его в создаваемую «дочь». После этого ВордПресс автоматически загрузит родительский CSS и имеющиеся ошибки будут устранены.
  14. Обновляем (клавиша «Обновить» расположена внизу страницы).
  15. Откройте свой сайт еще раз. Вы видите, что обе темки идентичны. Это произошло, потому что загрузился нужный CSS.

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

Шаг No2. Настройка

Чтобы приступить к работе, видоизменять, дополнять, адаптировать под запросы и требования вашего сайта «дочь», необходимо правильно выполнить настройки. Будем разбираться по порядку.

  1. Сначала нужно настроить внешний вид.

Для этого мы внесем коррективы в «custom.css», который расположен в каталоге. Сделать это можно через FTP-клиента, обычный текстовый редактор, файловый менеджер или специальный редактор ВордПресс (найти его можно, открыв «Внешний вид», после этого «Редактор»). Здесь понадобятся хотя бы минимальные знания правил использования CSS, а также навык проверки через браузер элементов сайта. Например, чтобы изменить цвет фона в «style.css», мы прописываем следующее правило CSS:

На следующей картинке представлено, как изменится дизайн сайта после внесенных корректировок. Фон стал салатовым:

Таким образом можно отредактировать любые имеющиеся элементы на сайте.

2.Работа с функциями.

Применение и работа с «дочерьми» дает и такое преимущество, как возможность ведения двух независимых «functions.php». Напомним, что данные файлы применяются для удаления старых и добавления новых функций. Если они имеются, можно не беспокоиться о сохранности или проблемах в работе документа. Даже если основа обновится, он сохранится в неизменном состоянии.

Для добавления новой опции в файл вписывается и новый PHP-код. Например, код, представленный ниже, удалит опцию поиска WordPress.


Специальные сервисы для облегчения труда разработчика

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

  1.  Child Themify.

Это максимально простой и легкий в использовании плагин с интуитивно понятным интерфейсом. Многие настройки здесь можно выполнять одним нажатием кнопки.

2. Child Theme Configurato.

Здесь также можно сформировать «дочь», причем на это понадобится всего пара кликов. Редактор CSS здесь достаточно мощный, что позволяет выполнять настройки расширенного функционала. Плагин автоматически производит идентификацию ключевых правил CSS и не затрагивает их при редактировании.

3. _child Theme Boilerplate.

Здесь представлены готовые шаблоны для формирования «дочерей». Шаблон назван просто — «_child» — и разработан специально для упрощения работы. Шаблон предлагает интуитивную тему, от вас требуется только указать ссылку на «родителя». Шаблон данного типа позволяет создавать профессиональные варианты — здесь уже созданы 2 готовых файла, стандартные «functions.php» и «style.css».

Первый из них обладает особенной функцией под названием «aa_enqueue_styles()». Опция позволяет создавать очередь таблиц стилей, где сначала идут родительские, а затем дочерние. В результате стиль последних всегда определяется первыми.

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

Вот код, с помощью которого можно добавить данную опцию:

Второй файл имеет базовый хедер, содержащий особую информацию. Данные сведения позволяют WordPress распознать его как таблицу стилей «дочери». Поэтому особенно важно прописать код для «style.css»:


Подытожим

Не имеет значения уровень владения программированием, а также опыт работы с ВордПресс. Создать дочернюю тему WordPress не составит особого труда, при этом нет риска, что настройки удалятся после выхода. Путем написания небольшого кода или внесения изменений в уже написанный и проведения простых действий с каталогом вы можете изменить свой сайт. Главное — соблюдать инструкцию, постепенно переходя от одного пункта к другому. Не забывайте следующее: если появляются обновления для «родителя», «дочери» не изменяются, это правило касается вносимых изменений в контент, настройки и так далее.

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

Быстрое создание дочерней темы wordpress при помощи плагина

Приветствую вас дорогие друзья!

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

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

Навигация по статье:

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

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

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

Обучение фотошоп

Плагин для создания дочерних тем WordPress Child Theme Configuration

Обучение фотошоп

Создавая дочернюю тему при помощи плагина Child Theme Configuration, мы не только упрощаем себе создание дочерней темы, но и еще получаем возможность сохранения настроек родительской темы и еще ряд дополнительных настроек.

В общем плагин очень удобный, давайте уже его установим и попробуем что-нибудь создать.

  1. 1.Как обычно, копируем его название, и в административной части сайта переходим в раздел «Плагины»«Добавить новый». Вставляем название в строку поиска, устанавливаем и активируем плагин.
  2. 2.После активации у нас в разделе инструменты появиться новый пункт, который называется «Child Themes». Кликаем по нему, и у нас открывается страница настроек.
  3. 3.Так как я уже создавала ранее дочернюю тему при помощи данного плагина, у меня здесь на первом шаге доступно несколько опций. Когда вы только установите данный плагин, у вас будет доступна только одна опция «Create New Child Theme». Новая дочерняя тема
  4. 4.Выбираем эту опцию и переходим к следующему, второму шагу. Здесь нам нужно выбрать родительскую тему из раскрывающегося списка и нажать на кнопку «Analyze». После нажатия на эту кнопку плагин отправляет специальные запросы, которые позволяют определить, возможно ли в принципе создание дочерней темы для данной родительской темы. Анализ тем WordPress
  5. 5.Если всё в порядке у нас высветится вот такое сообщение: Подтверждение успешной проверки
  6. 6.Наследующем шаге нам необходимо задать название для нашей дочерней темы. По умолчанию плагин берет название родительской темы и приписывает ему «Child». При желании вы можете задать ей любое другое название, главное, что бы оно было латинскими буквами. Задаем название темы
  7. 7.Далее нам нужно выбрать, где мы будем сохранять новые стили, которые мы будем дописывать. Нам доступно два варианта:
    • Primary Stylesheet (style.css) — мы можем их сохранять в файле style.css нашей темы, как это происходит в большинстве случаев.
    • Separate Stylesheet — создается отдельный файл, в который вы будете вносить свои стили. Данный вариант позволяет вам не переписывать заново стили ранее созданных дочерних тем, а добавлять свои в новый файл.

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

    Выбираем место хранения стилей
  8. 8.Здесь нам необходимо выбрать способ загрузки стилей из родительской темы. Use the WordPress style queue — используется очередь WordPress, когда плагин сам подгружает стили родительской темы.
    • Use @import in the child theme stylesheet — если для вашей темы такой вариант не подходит, и загрузка не происходит, то в этом случае мы можем использовать второй вариант. Разработчики плагина рекомендуют использовать этот способ только тогда, когда первый вариант не подходит.
    • Do not add any parent stylesheet handling – родительские стили вообще не подгружаются.
  9. 9.На этом же шаге можно настроить возможность игнорировать отдельные css-файлы.

    «Ignore parent theme stylesheet» — позволяет полностью игнорируем все стили и привила, которые написаны в файле style.css родительской темы.

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

    Конкретно в данном случае можно отключить следующие файлы:

    bootstrap.css – отвечает за адаптивную сетку, на основе которой свёрстаны страницы темы.

    custom.css — содержит в себе дополнительные настройки отдельных элементов.

    flex-slider.css – отвечает за стилизацию слайдшоу FlexSlider, и если мы не хотим использовать у себя на сайте слайдшоу, или будем использовать для него какой-то отдельный плагин, то нам этот css-файл не нужен, и мы можем поставить возле него галочку, что бы он не подключался.

    font-awesome-css — отвечает за работу с иконочными шрифтами FontAwesome. Если мы не планируем использовать иконочные шрифты, то можно поставить здесь галочку.

    Подключение файлов

    Таким образом, отключая здесь отдельные ненужные нам css-файлы, мы можем существенно сократить код нашей дочерней темы.

  10. 10.На следующем шаге мы можем изменить заголовок темы, официальный сайт, автора , адрес сайта автора, а так же описание. Заполняем информацию о теме

    Все эти параметры у нас отображаются в разделе «Внешний вид»«Темы», при клике на кнопку «Информация о теме».

    Просмотр информации о теме

    В принципе эти все параметры ни как не влияют на работоспособность темы и носят чисто информативный характер.

  11. 11.Следующий, очень важный и интересный шаг позволяет нам скопировать все настройки родительской темы. Копирование настроек родительской темы
  12. 12.Нажимаем на кнопку «Create New Child Theme» и у нас выводится сообщение о том, что наша тема была успешно создана и нам рекомендуют воспользоваться предпросмотром перед ее активацией. Предпросмотр темы

Нажимаем на эту ссылку и у нас открывается стандартный WordPress предпросмотр. Здесь мы можем убедиться что всё корректно работает и активировать тему.
Так же после создания эта дочерняя тема будет отображаться в разделе «Внешний вид»«Темы».

Вот так вот просто создается дочерняя тема.

Функции для копирования дополнительных файлов дочерней темы

По умолчанию при создании дочерней темы плагин создает всего два файла, файл с таблицей стиле style.css и файл функций functions.php. Если же нам необходимо внести изменения в верхнюю часть сайта, за которую отвечает шаблон header.php, или в нижнюю часть сайт, подключить каких-то скрипты, добавить определенные блоки, то нам помимо этих двух файлов нужно будет скопировать еще некоторые файлы родительской темы, и уже потом вносить в них изменения.

Для этого:

  1. 1.Возвращаемся на страницу настроек плагина, и здесь нам нужно будет перейти на вкладку «Files». В перечне всех файлов родительской темы, мы при помощи галочек можем отмечать те файлы, которые нам нужны. Копирование фалов родительской темы
  2. 2.После того как вы все это отметили, нажимаем на кнопку «Copy Selected to Child Theme».
  3. 3.Теперь мы можем вносить изменения в файлы дочерней темы при помощи стандартного встроенного редактора WordPress или подключившись к сайт по FTP.

Так же на странице настроек данного плагина мы можем удалять те файлы, которые у нас не используются. Для этого в блоке «Child Theme Files» нам достаточно просто галочкой отметить те файлы, которые нам не нужны и нажать на кнопку «Delete Selected».

Удаление не нужных файлов

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

Просто нажимаем на кнопку обзор, выбираем то изображение, которое нас интересует, а затем просто нажимаем на кнопку «Upload».

Для удаления ненужных изображений просто ставим возле него галочку, и нажимаем на кнопку «Delete Selected»

Удаление изображений

Далее, на этой же вкладке мы можем изменить скриншот темы, который отображается в разделе «Внешний вид»«Темы».

Замена скриншота темы

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

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

Редактирование CSS-стилей дочерней темы при помощи плагина Child Theme Configurator

Прежде всего, перейдем на вкладку «Child Styles», где отображается файл style.css дочерней темы. Здесь вы можете просматривать содержимое данного файла.

На вкладке «Base Line Style» вы можете просмотреть стили родительской темы.

На вкладке «Web Fonts» можно выполнить подключение дополнительных шрифтов. Например, здесь указано как выполняется подключение шрифта Google Font. Вы можете скопировать пример кода и заменить ссылку на свою. После чего нажимаем здесь на кнопку «Save».

Установка шрифтов

На вкладке «Property/Value», указываются значения различных css-свойств. Например, вы решили изменить css-свойство color или background-color. Вводим название этого свойства в верхнее поле, выбираем его из раскрывающегося списка и у нас на странице отображаются все значения фоновых цветов, которые задаются в теме. Любое из этих значений вы можете изменить.

Замена цветов

После задания настроек нажимаем на кнопку «Save».

Вкладка «Query/Selector» позволяет вам переопределить стили элементов на свои. Вам даже не нужно никаике css-свойства писать. У вас прямо здесь отображается значения всех CSS свойств, указанных для определённого селектора.

Те значения, которые вам нужны, вы вносите в соответствующие поля.

Замена значений стилей

Так же вы можете дописывать здесь новые css-свойства, копировать селекторы, и дописывать им свои значения. После чего обязательно нажимаем на кнопку «Save».

Если изначально у вас эта вкладка пустая, то нужно сначала изменить значения CSS свойств для нужного селектора на вкладке «Property/Value» или вписать его название в поле «Selector» и выбрать нужный блок из раскрывающегося списка.

В принципе все вкладки мы рассмотрели. Как видите настроек здесь очень много. Но если вдруг вам этих возможностей станет мало, то вы всегда можете обновить этот плагин до PRO-версии. Для этого переходим на вкладку «Upgrade» и здесь нажимаем на ссылку «Order Now».

Видеоинструкция

Как научиться продвигать сайты?

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

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

А на сегодня у меня все! Успехов вам и ваших проектам!

С уважением Юлия Гусарь

Дочерние темы (Child Themes) для WordPress

Дочерние темы (Child Themes) для WordPress.

Содержание статьи

Приветствую, дорогие читатели блога WPMaster.KZ. В этой статье, речь пойдет о важности использования дочерних тем на сайтах WordPress. И чтобы понять их важность, нужно в первую очередь понять вообще, что такое дочерние темы и для чего они нужны.

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

А дальше, происходит примерно следующее. Разработчик темы выпускает очередное обновление и у вас на сайте, всё что вы сделали, слетает к чертям. Вы в панике, «куда всё подевалось?», бежите на форумы и бьете изо всех сил тревогу – «Чё делать?». Вам там, естественно, советуют восстановить бэкап сайта и отключить обновление темы. Что вы с превеликим удовольствием делаете и радуетесь, что всё вернулось, как было.

Но, правильно ли это? Зачастую, разработчики не просто так апгрейдят свои творения. В каждом новом обновлении могут быть как просто правки какого-то незначительного кода, так и серьезные изменения. Например, внедряют в поддержку новую версию PHP. Или поддержку новых иконок. Или же поддержку новой версии самого движка WordPress. Очень часто, разработчики закрывают дыры в безопасности своей темы, чтобы через неё нельзя было взломать сайт. Ну и подобные значительные и не значительные правки.

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

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

 

Создание дочерней темы – Инструкция.

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

Обратите внимание!

Не все бесплатные темы поддерживают дочерний функционал. Если ваш шаблон не поддерживает, то рекомендую установить одну из бесплатных премиум тем из моей подборки или же найти тему самостоятельно на wordpress.org. Обычно разработчики указывают, поддерживает ли их тема дочерний функционал или нет.

Итак, для установки нужного плагина, вам как обычно, нужно открыть вкладку Плагины -> Добавить новый и ввести ключевую фразу child в поиск. Нужный нам плагин, находится на первой позиции и называется он Child Theme Configurator.

Плагин дочерней темы Child Theme Configurator Плагин дочерней темы Child Theme ConfiguratorДобавить плагин дочерней темы Child Theme Configurator

Итак, чтобы открыть настройки конфигуратора, нужно перейти в Инструменты -> Child Themes. Далее я покажу пошагово, что конкретно нужно отметить или прописать, для успешного создания. Не пугайтесь, что настройки на английском, я покажу на скринах, что конкретно нужно отметить.

1,2 и 3 пункты:
Создание дочерней темы Child Theme Создание дочерней темы Child ThemeВкладка создания конфигурации дочерней темы

Здесь вам предлагают проанализировать тему и в последующем настроить на основе вашей темы, дочернюю. Во втором пункте выберите нужную вам тему, если у вас несколько и нажмите кнопку Analyze. Практически любая тема из репозитория ВордПресса поддерживает дочернии темы. Рекомендую при выборе тем, обращать внимание, на список поддерживаемых функций. Обычно там упоминают, что тема поддерживает.

 

4 и 5 пункты:
Настройка child theme Настройка child themeПравильная настройка дочерней темы

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

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

 

6 пункт:
Конфигурация дочерней темы Конфигурация дочерней темыПравильная конфигурация дочерней темы

Шестой пункт позволяет выбрать способ подключения к родительской теме. Рекомендую выбирать первый пункт. Он подключит ваш файл стилей через специальную функцию, что является самым быстрым способом на сегодняшний день. Способ подключения через @import крайне не рекомендуется.

 

7 пункт:
Название и описание в дочерней теме Название и описание в дочерней темеДополнительная информация дочерней темы

Здесь, по желанию, вы можете изменить данные о дочерней теме, такие как: описание, версия, автор и название. Если лень, можете не заполнять. Особого значения эти пункты не представляют. Разве что, если вы делаете сайт на заказ, то целесообразно здесь будет написать свой сайт и контакты. Чтобы после вас ребята, могли познакомиться с вами если что. В общем, по желанию.

 

8 и 9 пункты:
Завершение настройки дочерней темы Завершение настройки дочерней темыОбязательная настройка перед первой генерацией

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

Далее нажимаете на кнопку «Create New Child Theme» и ждете, когда ваша дочерняя тема создастся. Это может занять от нескольких секунд, до минуты. Всё зависит от размера темы и количества файлов. Не переходите на другие страницы и не пытайтесь перезагрузить её, иначе получите ошибку. В таком случае, вам придется зайти в папку сайта и удалить файлы, которые плагин успел создать. Потом повторить процедуру установки с самого начала.

 

Настройка Child Themes.

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

Уведомление о созданииУведомление о создании

После того, как вы активировали вашу новую тему, пришло время перейти в каталог с сайтом и посмотреть, что там появилось. Если у вас сайт уже на хостинге находится, переходите в панель управления файлами. Затем выбираете папку с нужным сайтом (если у вас их несколько) и следуете по пути wp-content -> themes. В этой папке появиться отдельная тема, рядом с основной, с названием, которое вы установили в пункте 4.

Папка дочерней темы Папка дочерней темыФайловая система дочерней темы

Если папка появилась, значит всё хорошо. Большую часть пути, вы уже прошли. Осталось добавить необходимые файлы, которые вы хотите редактировать, в дочернюю тему. Для этого вам нужно перейти опять в настройки конфигуратора и выбрать пункт Files:

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

На этой странице представлена информация обо всех файлах, которые смог найти конфигуратор при создании дочерней темы. Выбираете нужные для редактирования файлы и нажимаете кнопку «Copy Selected to Child Theme». Обычно, самые редактируемые файлы в WordPress темах это – header.php и footer.php. Если вам нужно отредактировать или дополнить какой-то другой файл (например поправить комментарии или вывод статей на блоге) то ищите нужный файл и отмечаете его галочкой тоже.

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

Чтобы проверить, что все нужные файлы добавились, переходите опять в менеджер файлов, в папку своего сайта и открывайте новую папку темы-child. Там должны быть все файлы которые вы добавили, а так же стандартные файлы style.css и functions.php. Нашли? Поздравляю, теперь у вас подключена дочерняя тема.

Структура файлов в дочерней теме Структура файлов в дочерней темеБазовый набор файлов в дочерней теме

 

Как пользоваться дочерней темой?

Здесь всё довольно просто! Любые правки по коду, которые вы собираетесь делать на сайте, теперь вы будете делать в дочерней теме. Если вдруг, понадобиться произвести правки в каком-то другом файле, просто скопируйте его в дочернюю тему и творите с ним, всё что хотите. Я рекомендую не удалять полностью плагин конфигуратора, а просто его отключить. Если вдруг понадобиться добавить новый файл, вы его просто включите и добавите.

Почему нельзя это сделать вручную? Можно, но для определенных файлов, должна быть соблюдена вся последовательность адреса. Например, вам нужно отредактировать файл, который находится не в корне темы, а, к примеру, в папке ins. Чтобы файл корректно подключился, просто скопировать не получится. Придется создать в дочерней теме такую же папку и помещать скопированный файл туда. В общем, не всё так просто, нужно соблюдать уровень вложенности. Поэтому, советую пользоваться плагином. Вы его просто отключите, а когда нужно будет скопировать в тему файл, включите, скопируйте и опять выключите. Так он и не будет жрать ресурсы сайта и головняка с копированием будет гораздо меньше.

На сегодня у меня всё. Но на долго я с вами не прощаюсь, увидимся на страницах блога wpmaster.kz.

Так же рекомендую прочитать: Полная оптимизация WordPress по шагам.

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

(Последнее обновление: 10.12.2019)

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

Если вам нравится ваша текущая тема WP, но вы хотите изменить ее функции и внешний вид, правильный способ сделать это — создать и настроить дочернюю тему (Child Theme) ВордПресс. 

Инструкция по созданию дочерней темы WordPressИнструкция по созданию дочерней темы WordPressКак создать дочернюю тему WordPress

Дочерняя тема WordPress

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

Кодекс WordPress

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

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

А тут, происходит обновление темы и все ваши сделанные изменения утеряны. Это означает, что ваш сайт не только возвращается на прежний уровень, но и вся ваша работа летит к чертям. А было бы всё иначе, если бы использовалась дочерняя тема ВордПресс (WP).

Дочерняя тема использует файлы родителя, обращается к ним динамическиДочерняя тема использует файлы родителя, обращается к ним динамическиДочерняя тема WP работает в тандеме с родительской

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

Родительская тема — это полная тема, которая включает в себя все необходимые файлы шаблонов WordPress и ресурсы для работы темы. Все темы, кроме дочерних, считаются родительскими.

Тематический справочник wordpress.org

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

Плагин дочерней темы WordPress

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

Внимание: Чтобы сделать простые изменения CSS на своем веб-сайте, вы можете использовать поле «Дополнительные CSS», вместо создания дочерней темы. Эти изменения, сделанные с помощью поля «Дополнительный CSS», останутся там даже после обновления темы. Но, если вы ищете другие дополнительные изменения, такие как редактирование файлов PHP и другие, необходимо создать дочернюю тему.

Существуют различные плагины, которые помогут вам быстро, легко и безопасно создать дочернюю тему. Наиболее популярными среди них это — Child theme configurator, Child Theme Generator, WP Child Theme Generator, Child Theme Creator by Orbisius, Child Theme Wizard.

Если вдруг, вы захотите попробовать создать дочернею тему вручную, то смотрите официальную пошаговую инструкцию -developer.wordpress.org.

Плагин Child Theme Generator

Child Theme Generator — это бесплатный, простой плагин WordPress для создания дочерних тем. Когда дочерняя тема будет создана, просто удалите плагин.

Создаем дочернюю тему в WordPress с помощью плагинаСоздаем дочернюю тему в WordPress с помощью плагинаГенератор детской темы ВордПресс

Этот плагин создаст дочернюю тему за несколько шагов, быстро и безопасно. Он не будет замедлять работу вашего сайта. Установите плагин стандартным способом, из админки. Введите его название. На странице с результатами поиска, выберите Child Theme Generator :

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

Дождитесь полной установки плагина, а затем активируйте его. Затем перейдите в Настройки, новый пункт: Child-Theme Gen. Русского языка нет, но всё и так понятно. Из выпадающего списка выберите родительскую тему (обязательно):

Создайте дочернюю тему WordPress из родительскойСоздайте дочернюю тему WordPress из родительскойСоздать новую дочернюю тему

Заполните остальные поля (не обязательно). Нажмите кнопку Create new child theme и плагин создаст для вас дочернюю тему. Можете сразу поставить галочку для активации Child темы. А после нажать Finished:

Не забудьте активировать свою созданную дочернюю тему WordPressНе забудьте активировать свою созданную дочернюю тему WordPressДочерняя тема была успешно создана!

Всё, готово. Смотрим Внешний вид — Темы. Дочерняя тема активна:

Создание дочерней темы в WP быстро и безопасноСоздание дочерней темы в WP быстро и безопасно Это дочерняя тема для Kava

В итоге, на сайте или в блоге никаких отличий вы не увидите. Детская тема использует файлы от своего родителя. А так, будут выглядеть папки на хостинге. Родительская тема и созданная детская с дополнением child. Она находится в wp-content / themes вашей установки WordPress:

Новая папка создана в wp-content / themes вашей установки WordPressНовая папка создана в wp-content / themes вашей установки WordPressНовая детская тема

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

Новая папка создана в wp-content / themes вашей установки WordPressНовая папка создана в wp-content / themes вашей установки WordPress

Если нужно сделать изменение на сайте, вы меняете не родительскую тему WordPress, а дочернюю. Теперь все работы производите только в Child theme. Обратите внимание, если вам необходимо редактировать файлы например, single.php, header.php, footer.php или другие, то вам надо скопировать их из папки родительской темы в папку child-theme.

Если файл шаблона (или часть шаблона, такая как header.php) с одинаковым именем существует в родительской и дочерней темах, WordPress будет использовать файл из дочерней темы.

Например, вы захотите удалить из футера (подвала) надпись «Сайт работает на WordPress» и вставить туда свою информацию об авторском праве. Для этого: скопируйте в дочернюю тему файл footer.php, откройте его уже в детской теме.

Найдите строку, которую вы хотите удалить и замените её. Вот, у меня есть инструкция — Как удалить Сайт работает на WordPress.

Как уже написано выше, есть и другие плагины. Например, самый популярный плагин Child Theme Configurator. Более 2 808 184 установок.

Плагин Child Theme Configurator

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

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

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

Анализатор сканирует визуализированную тему и автоматически настраивает вашу дочернюю темуАнализатор сканирует визуализированную тему и автоматически настраивает вашу дочернюю темуСоздание детской темы WP

Анализатор сканирует визуализированную тему и автоматически настраивает вашу дочернюю тему.

Если что, под вкладкой «Справка» в правом верхнем углу страницы есть учебное видео. И также текстовые инструкции:

Учебное видео и инструкции по созданию дочерней темы WPУчебное видео и инструкции по созданию дочерней темы WPПомощь по плагину Child Theme Configurator

Детская тема создана, даже скриншот от родительской установлен:

Плагин для создания дочерней темы ВордПрессПлагин для создания дочерней темы ВордПрессСозданная дочерняя (детская) тема

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

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

Очень простые и удобные плагины для создания дочерней темы WordPress Очень простые и удобные плагины для создания дочерней темы WordPress Показаны результаты для: Child Theme
В заключение

Создание дочерней темы WordPress — безусловно, один из самых безопасных способов изменить шаблон вашего веб-сайта WordPress. Дочерние темы — это простой способ изменить все, что душе угодно, не беспокоясь о потере сделанных изменений при обновлении темы.

Если у вас есть дополнительные вопросы или вам нужна помощь в этом процессе, пожалуйста, оставьте свои комментарии ниже.

Я надеюсь, что вы нашли этот пост полезным.  Удачи и до новых встреч.


Дочерняя тема wordpress — создание и настройка

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

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

Определились? Отлично, теперь рассмотрим как же создать тему-дополнение.

Дочерняя тема wordpress, что нужно что бы создать

Итак, что бы создать дочернюю тему нам нужно сделать несколько простых шагов.

  1. Первым делом нам нужно создать папку для нашей будущей уникальной темы.
  2. Затем создать обычный текстовый документ и сменить его название на style.css, открыть который мы сможем при помощи специального редактора notepad++ или же другого того же типа.
  3. В созданном нами файле нужно будет написать правильное заглавие, так называемую шапку файла.

Давайте проделаем все вышеперечисленные операции вместе и по порядку. Начнем с того, что папку нашей дочерней темы WordPress темы нужно создать внутри wp-content/themes. Название можете придумать какое угодно, это никак не скажется на вашем сайте и нигде не будет видно, для наглядности давайте посмотрим на картинку как это можно сделать:

Создание дочернее темыСоздали? Ок, идем в нашу папку и создаем файл каскадной таблицы стилей style.css. После создания файла открываем его для редактирования.

Создание дочернее темы

Шапка style.css  дочерней темы WordPress

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

 

  • Название дочерней темы, то которое мы придумали для нашей папки, параметр является обязательным для заполнения по этому придумайте адекватное название — «Name».
  • Можно указать адрес вашего сайта на котором будет использована тема — «Theme URI».
  • Описание темы, хоть и биографию свою напишите, не имеет значения — «Description».
  • Имя создателя темы, ваше, вашего соседа или же вымышленное, все зависит от вашего настроения — «Author».
  • Обязательным и точным параметром является название папки родительской темы — «Template».
  • Возможно указать версию вашей дочерней темы например 1.1.5 или что-то в этом роде — «Version».

Разобравшись с нужными нам атрибутами заголовка посмотрим какой пример нам дают на официальном сайте codex.wordpress.org/Дочерние_темы:

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

 

 

 

codex.wordpress.org/Дочерние_темы

 

Разница между дочерней темой WordPress и созданной уникальной темой.

Следует понимать разницу между дочерней темой и полностью написанной с нуля темой WordPress. Дочерняя тема WordPress лишь вносит изменения и дополнения в использованную нами за основу тему для WordPress. Как же прикрутить наш стиль к стилю родителя? Для этого существует команда. которая стоит выше всех остальных, иначе подключение не получится. Выглядит она так: @import url(«www/mysite.ru/twentyten/style.css»). Выходит что мы берем исходный стиль и пишем дополнения и изменения. Дочерняя тема стоит ниже родительской, по этому сначала грузится родительская, а уж потом поверх мы проводим изменения нашей дочерней, которая и воспроизводится.

Как активировать дочернюю тему WordPress?
После того как наша дочерняя тема wordpress создана, заходим с админ панели во вкладку /Внешний вид/Темы/ где находим название нашей только что созданной темы и активируем её, переходим на наш сайт и смотрим что мы наделали, а по мы ничего не изменили только цвет ссылки в id-elementa.

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

Что и как можно изменить с помощью дочерней темы можно прочитать тут.

Рекомендую почитать:

Дочерние темы в WordPress

И сразу же постараюсь ответить на вопрос из заголовка — для чего нужны дочерние темы?

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

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

В качестве примера давайте возьмём стандартную тему WordPress Twenty Twelve — для неё и создадим дочернюю тему.

  1. Первым шагом создаем директорию дочерней темы: Директория дочерней темы

    Я назвал её twentytwelve-child, но это совсем не обязательно — можете называть как угодно, главное, чтобы название темы не содержало пробелов и русских букв.

  2. Следующим шагом — работа со style.css. У меня он начинается с этого:
    /*
     Theme Name:   Twenty Twelve Child
     Author:       Миша Рудрастых
     Author URI:   https://misha.blog
     Template:     twentytwelve
    */

    Самым важным в данном случае является параметр Template — он и определяет то, что эта тема дочерняя. Параметр содержит название директории родительской темы.

  3. На этом этапе дочерняя тема появится в админке вашего сайта. Дочерняя тема в админке сайта

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

  4. Создаём в папке с дочерней темой 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' );

    Как результат — на вашем сайте сейчас будет точная копия родительской темы.

  5. Также иногда бывает нужно пересохранить меню Внешний вид > Меню и настройки темы.

Как работают дочерние темы?

На самом деле всё очень и очень просто — файлы, которые вы создаёте в директории дочерней темы, будут заменять эквивалентные им файлы из родительской темы.

style.css и functions.php

Исключение составляют эти два файла.

  • Если вы задействовали у себя хук, о котором я писал чуть выше, то файл дочерняя таблица стилей будет загружаться в дополнение к таблице стилей родительской темы.
  • 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() — возвращает абсолютный путь к директории текущей темы на сервере.

Локализация

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

Миша

В последние годы я долго не знал, что мне делать с сайтом misha.blog, ведь он практически не приносит никакого профита, но недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *