Як створити дочірню тему WordPress – перевірено!

Posted

2 Вересня, 2015

Written By

admin

Підніміть руку ті, хто налаштовував більше 5 WordPress сайтів. Не опускайте руку, якщо ви налаштовували більше 10. Якщо ж ви налаштували більше 20, то напевно знаєте про дочірніх темах. Робота з дочірньою темою – це відмінний спосіб змінити батьківську тему WordPress. За ці роки WordPress теми стали дуже різноманітними, але все одно вимагають настройки.

Припустимо, що ви встановили одну зі стандартних тим, наприклад, TwentySixteen або TwentyFifteen. Ви налаштували її стилі і додали кілька PHP функцій. Але що трапиться, коли розробники випустять нову версію? У вас є тільки два шляхи: завантажити оновлення та втратити все настройки, або залишити стару версію і зробити сайт вразливим.

Кращим варіантом буде створення дочірньої теми для налаштування будь-якої теми.

У цій статті ми розповімо про те, як правильно створювати дочірні теми в WordPress і поділимося кодом child  шаблону. Отже, давайте спочатку дізнаємося більше про концепцію і важливості дочірніх тим в WordPress.

Що таке дочірні теми?

Принцип роботи дочірніх тим базується на батьківсько-дочірніх відносинах. Всі теми WordPress, неважливо платні або безкоштовні, є батьківськими темами. А все дочірні теми переймають свої характеристики у батьківських. Тобто, дочірня тема отримає весь набір функцій від батьківської теми.

Згідно з WordPress Codex :

Дочірня тема – це тема, яка переймає всі функції і дизайн іншої теми, названої батьківської темою. Дочірня тема є способом модифікації вже існуючих тем.

Якщо виходять оновлення батьківської теми, то дочірня тема не змінюється. Змінитися може тільки батьківський контент, а настройки дочірньої теми залишаються такими ж.

Відмінності дочірньої теми від батьківської

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

Ну а зараз давайте розглянемо відмінності дочірньої і батьківської теми:

  • Дочірня тема працює тільки, якщо встановлено обидві теми – батьківська і дочірня. Хоча ви і активуєте дочірню тему пізніше.
  • Дочірня тема має зв’язок виключно зі своєю батьківською темою, ні в якій іншій батьківської теми немає зв’язку з чужої дочірньої темою.
  • Будь-які зміни в батьківській темі ніяк не впливають на дочірню.

Переваги використання дочірньої теми

Сама концепція дочірньої теми – відмінна. Ми пропонуємо використовувати дочірні теми з усіма преміум темами, а професійним розробникам варто включити їх в пакет зі своїми темами.

У дочірніх тим є маса переваг:

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

Компоненти дочірньої теми

Дочірня тема є продовженням батьківської теми, переймаючи всі функції і особливості. Як і обіцяли, ось основний склад дочірньої теми:

  • Директорія дочірньої теми : Це корінь папки, де знаходяться файли дочірньої теми.
  • Файл style.css : В цьому файлі містяться всі властивості стилів вашої дочірньої теми.
  • Файл functions.php : Містить визначення функцій, які викликані в вашій дочірньої темі.

Ви можете додати будь-яку кількість шаблонних файлів, але перераховані вище файли повинні бути в кожної дочірньої темі.

Створення дочірньої теми в WordPress

Ви вже знаєте про декілька функціях і аспектах дочірніх тим WordPress. Ви з’ясували, для чого вони потрібні, а тепер пора обговорити їх назва. Найпростішим способом створення дочірньої теми буде використання плагіна. У бібліотеці WordPress.org ви можете знайти величезну кількість безкоштовних плагінів, які спрощують створення дочірньої теми.

1.  Child Theme Configurator

Плагін Child Theme Configurator створює дочірні теми за пару кліків. З його потужним CSS редактором ви можете налаштувати розширений рівень функціональності. Плагін не тільки ідентифікує, а й змінює необхідні атрибути CSS.

2.  Child Themify

Для створення дочірніх тим ми можемо також порекомендувати плагін Child Themify. Він дуже легкий і створює дочірню тему всього лише натисненням кнопки.

3.  _child Theme Boilerplate

Якщо ви розробник, то вам напевно буде цікаво оцінити готовий шаблон для дочірньої теми. Він називається _child  і був створений для оптимізації процесу створення дочірньої теми в WordPress.

Цей шаблон надає вам інтуїтивну дочірню тему, де для її створення вам потрібно тільки вставити посилання на батьківську тему. Шаблон _child допоміг нам створити професійну дочірню тему. Ви можете знайти цей шаблон на GitHub . А зараз дозвольте нам розповісти про двох готових файлах в цьому шаблоні.

  • style.css
  • functions.php

Файл style.css  містить стандартний хедер з інформацією, яка допомагає WordPress розпізнати його, як таблицю стилів дочірньої теми. Теги для Theme Name  і Template – найважливіші. Ви можете замінити тег Template на відповідний slug батьківської теми і вставити назву дочірньої теми.

Код для style.css :

/**
 * Theme Name: Themename Child
 * Description: Themename Child Theme
 * Theme URI: https://labs.ahmadawais.com/_child/
 * Author: mrahmadawais, WPTie
 * Author URI: http://ahmadawais.com/
 * Template: themename
 * Version: 1.0.0
 */


/* ----------------------------------------------------------------------------
 * Child Theme Style.css styles begin here!
 * ------------------------------------------------------------------------- */

У файлі functions.php є функція, яка називається aa_enqueue_styles () . Вона ставить в чергу таблиці стилів спочатку для батьківської теми, а потім дочірньої. Таким чином стиль дочірньої теми завжди буде залежати від батьківської.

Багато розробників з’єднують батьківську тему з дочірньою в CSS, що уповільнює завантаження сайту тому, що браузеру доводиться завантажувати стилі з батьківської теми, а тільки після цього з дочірньою. Але коли ви ставите в чергу обидві таблиці стилів окремо, браузер може завантажити їх одночасно, що прискорить завантаження вашої сторінки.

Код для functions.php :

<?php
/**
 * Child theme functions
 *
 * Functions file for child theme, enqueues parent and child stylesheets by default.
 *
 * @since   1.0.0
 * @package aa
 */
 
// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
if ( ! function_exists( 'aa_enqueue_styles' ) ) {
    // Add enqueue function to the desired action.
    add_action( 'wp_enqueue_scripts', 'aa_enqueue_styles' );
    
    /**
     * Enqueue Styles.
     *
     * Enqueue parent style and child styles where parent are the dependency
     * for child styles so that parent styles always get enqueued first.
     *
     * @since 1.0.0
     */
    function aa_enqueue_styles() {
        // Parent style variable.
        $parent_style = 'parent-style';
        
        // Enqueue Parent theme's stylesheet.
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
        
        // Enqueue Child theme's stylesheet.
        // Setting 'parent-style' as a dependency will ensure that the child theme stylesheet loads after it.
        wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) );
    }
}

підсумки

Неважливо, чи є ви звичайним користувачем або розробником. Дочірні теми – це відмінний спосіб налаштувати ваші основні теми в WordPress без остраху, що всі зміни злетять після виходу оновлення.

Джерело: wplift.com