Початок роботи з дочірніми темами WordPress?

У цьому посібнику ви дізнаєтесь, як створити дочірню тему WordPress. Якщо ви новачок у WordPress і не знаєте, що таке дочірня тема WordPress, я все поясню.

Теми WordPress — це набір файлів PHP, JavaScript і CSS. Простіше кажучи, за допомогою тем WordPress ви можете змінити зовнішній вигляд свого блогу. Теми WordPress можуть бути дуже потужними.

Преміум-теми WordPress пропонують багато розширених функцій і функцій. Доступні тисячі безкоштовних і преміальних тем WordPress.

Ви можете створити тему WordPress з нуля або створити тему WordPress на основі іншої теми. Кожна версія WordPress постачається з попередньо встановленими темами WordPress, і якщо вам не подобається попередньо встановлена ​​тема WordPress, ви можете встановити іншу тему WordPress або створити дочірню тему.

Чому дочірні теми WordPress?

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

Дочірня тема економить багато роботи та часу. Створення теми WordPress з нуля займає багато часу, а інколи потрібне знання HTML, CSS, PHP. За допомогою дочірніх тем ви можете вносити багато змін.

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

Ви можете безпосередньо редагувати наявні файли теми WordPress, але потім, оновивши, ви втратите всі налаштування. Ось чому вам потрібна дочірня тема.

Що ви можете робити з дочірніми темами WordPress

За допомогою дочірніх тем WordPress ви можете додати скільки завгодно функцій. Тобі вирішувати. Якщо ви хочете змінити розмір або колір шрифту для заголовків або посилань, ви можете зробити це дуже легко за допомогою CSS.

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

Що вам знадобиться:

Тепер ви знаєте, що таке дочірня тема WordPress і чому вам варто створювати дочірні теми. Настав час дізнатися, як створити дочірню тему WordPress.

Це не обов’язково, але рекомендується налаштувати локальну інсталяцію WordPress для розробки та навчання. За допомогою локальної інсталяції WordPress ви можете швидко та дуже легко протестувати свої нові плагіни та теми.

Є багато способів інсталювати WordPress локально. Якщо ви користувач MAC, ви можете використовувати MAMP, користувачі Windows можуть використовувати інсталятор WordPress XAMPP, WAMP або Bitnami.

• Як встановити WordPress за допомогою сервера WAMP
• Як встановити WordPress за допомогою MAMP
• Як встановити WordPress за допомогою Bitnami Stack

Якщо ви абсолютний новачок, ви можете завантажити та встановити стек Bitnami WordPress, щоб створити повнофункціональний веб-сайт WordPress на своєму MAC або ПК.

Я особисто віддаю перевагу серверу WAMP для локальної розробки. Встановити WordPress на WAMP нескладно, ви можете прочитати підручник або переглянути відео, щоб дізнатися, як встановити WordPress за допомогою WAMP, XAMPP або MAMP.

Вам також знадобиться редактор коду для редагування файлів теми. Sublimetext, Brackets, Atom — кілька популярних редакторів коду.

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

Коли ваш локальний сайт WordPress буде готовий, ми можемо почати створювати нашу дочірню тему. Якщо ви використовуєте сервер WAMP, перейдіть до каталогу встановлення WAMP > WWW > WordPress > wp-content > папка тем.

У папці тем WordPress створіть нову папку та назвіть її twentysixteen-child або як завгодно, наприклад InstantShift. Ми збираємося використовувати тему twentysixteen як батьківську. Це означає, що наша дочірня тема буде заснована на темі TwentySixteen.

Для кожної дочірньої теми нам потрібні два файли.

• functions.php
• style.css

У вашій папці теми twentysixteen-child створіть ці два файли. Тепер відкрийте свої файли в текстовому редакторі. Для швидкого доступу ви можете перетягнути папку twentysixteen-child на бічну панель текстового редактора. Відкрийте файл style.css і додайте наступний код.

/*
 Theme Name:   InstantShift
 Description:  Twenty Sixteen Child Theme for InstantShift.
 Author:       Tahir Taous
 Author URI:   http://www.instantshift.com
 Template:     twentysixteen
 Version:      0.1
*/

Наведена вище розмітка потрібна для дочірньої теми. Без таблиці стилів із необхідною розміткою WordPress не зможе розпізнати вашу дочірню тему.

Думаю, все можна зрозуміти. Нема чого пояснювати. Моя дочірня тема називається InstantShift, але ви можете назвати свою дочірню тему як завгодно. Найважливішим є Шаблон: twentysixteen. Це назва нашої батьківської теми. Переконайтеся, що ви правильно його написали.

Якщо ви використовуєте будь-яку іншу тему як батьківську, просто змініть Template: twentysixteen на Template: parent-theme-name.

У заголовок таблиці стилів ми також можемо додати більше інформації, але це не обов’язково. Тепер увійдіть на інформаційну панель WordPress. Перейдіть до Вигляд > Теми. Ви повинні побачити тему InstantShift без жодного знімка екрана, оскільки ми не додали жодного знімка екрана для нашої дочірньої теми.

Наведіть курсор миші на тему InstantShift і натисніть кнопку «Деталі теми». Ось скріншот моєї дочірньої теми.

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

не хвилюйся Це нормально. Ми не можемо побачити стилі, оскільки ми не включили файл таблиці стилів батьківських тем. давайте переконаємося, що таблиця стилів нашої дочірньої теми працює. У файл style.css дочірньої теми додайте наступний код.

body{
     background-color: #E7F5FB;
}

збережіть свій файл style.css, перезавантажте головну сторінку вашого локального сайту WordPress, і ви побачите світло-блакитний колір тла.

Реєстрація таблиці стилів батьківської теми

Ми не хочемо створювати всі стилі з нуля. Ми просто додамо кілька нових стилів із файлом style.css дочірньої теми. Тепер давайте додамо файл stye.css батьківської теми в нашу дочірню тему.

Відкрийте файл functions.php і додайте наступний код у файл functions.php дочірньої теми.

<?php
 
// Parent Theme Styles //
// https://codex.wordpress.org/Child_Themes //
 
function theme_enqueue_styles() {
    $parent_style = 'parent-style';
    ks29so_enqueue_style( $parent_style, get_template_directory_uri(). '/style.css' );
    ks29so_enqueue_style( 'child-style',
        get_stylesheet_directory_uri(). '/style.css',
        array( $parent_style)     );
}
add_action( 'ks29so_enqueue_scripts', 'theme_enqueue_styles' );

Тепер, якщо ви перезавантажите свій локальний сайт WordPress, ви побачите звичайну тему з усіма стилями TwentySixteen.

Це все. Ви успішно створили свою першу дочірню тему. Ви також додали новий колір фону для тіла.

Але ми не створили нашу дочірню тему, щоб просто змінити фон для тіла. Давайте почнемо налаштовувати нашу тему.

Перевизначення стилів батьківської теми

Налаштування заголовка:

За замовчуванням заголовок теми Twenty Sixteen має багато відступів. Давайте змінимо відступ і додамо новий колір фону для заголовка сайту. Додайте наступний код у файл style.css вашої дочірньої теми, збережіть файл і перезавантажте зовнішню частину сайту, щоб побачити зміни.

.site-header {
    padding: 0 4.5455%;
    background: #CDDC39;
    margin-bottom: 2em;
}

Тут ви можете побачити знімок екрана для заголовка сайту до та після додавання наших нових стилів.

Налаштування головної навігації

Тепер давайте змінимо колір фону для елементів головного навігаційного меню. Мені подобається використовувати інструменти розробника Chrome для редагування стилів CSS.

Після редагування веб-сторінок за допомогою інструментів Chrome dev ви можете скопіювати новий код із інструментів Chrome dev і вставити у файл style.css дочірньої теми.

Відкрийте файл style.css дочірньої теми та додайте в нього наступний код.

#menu-header > li {
    background: rgba(185, 202, 22, 0.97);
    margin-right: 4px !important;
    border-radius: 5px;
}

Тут ви можете побачити скріншот нашого нового заголовка. Ми дуже легко налаштували нашу тему за допомогою дочірньої теми.

Заключні слова

Тепер ви знаєте, як можна створювати дочірні теми WordPress. Це дуже просто і легко. Маючи базове розуміння HTML і CSS, ви можете повністю змінити дизайн свого сайту.

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

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