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

  1. Налаштування WordPress: Ви могли б робити це неправильно
  2. Що таке дочірні теми і як їх використовувати?
  3. Коли слід використовувати дочірню тему
  4. Основна настройка дочірньої теми
  5. Створення папки в wp-content / themes
  6. Створення таблиць стилів
  7. Активація дочірньої теми
  8. Створення файлу functions.php
  9. Спадкування батьківських стилів
  10. Налаштування дочірньої теми в WordPress
  11. Реалізація призначених для користувача стилів
  12. Перевизначення файлів батьківської теми
  13. Робота з файлами шаблоном
  14. Використання functions.php
  15. Використання в темі хуков
  16. разом
П латформа WordPress є магнітом для тих, хто хоче взяти справу в свої руки, хто хоче взяти повний контроль над своїм веб - сайтом і хочуть бути незалежними в управлінні ними. WordPress робить це насправді легко і може повністю налаштувати веб - сайт. Якщо у вас є трохи знань HTML, CSS і / або PHP, то немає нічого, що ви не можете змінити.

Я маю на увазі, просто порівняти типової теми Twenty Fifteen and Twenty Fourteen . Важко повірити, що вони працюють на тій же платформі, чи не так? Тому, цілком природно для вас хотіти адаптувати зовнішній вигляд вашого сайту, щоб відповідати своїм уподобанням. Я сумніваюся, що є користувачі WordPress, які не думають постійно про це. Проте, виникає проблема.

Налаштування WordPress: Ви могли б робити це неправильно

При спробі внести зміни в веб-сайт, величезна кількість людей вважають за краще редагувати безпосередньо тему. Це означає, що вони змінюються або додають файли в папку їх поточної теми . Це створює ряд проблем.

Найбільшим недоліком є те, що будь-які зміни, внесені в тему, таким чином, будуть втрачені, як тільки тема оновлюється розробником. Як наслідок, користувачі або не зможуть зберегти свою тему в актуальному стані (що погано для безпеки) або втратять всі налаштування, які вони зроблять.

У будь-якому випадку, ситуація далека від ідеалу.

Набагато краще ідея полягає в тому, щоб використовувати дочірню тему . Це дозволяє зробити будь-яке число змін на веб-сайті, не торкаючись вихідних файлів теми.

Звучить непогано? Відмінно, тому що в цій статті ми детально розглянемо, що таке дочірні теми в WordPress, як їх створювати і як використовувати їх, як правильно налаштувати свій веб-сайт.

Що таке дочірні теми і як їх використовувати?

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

Проте, будь-яка така тема може бути батьком теми, деякі з них краще підходять для цієї мети, ніж інші. Наприклад, є frameworks спеціально зроблені для настройки дочірньої теми.

Що таке дочірня тема? У backend WordPress дочірня тема поводиться як звичайна тема. Ви можете знайти і активувати її в розділі "Зовнішній вигляд" → "Теми", так само, як і будь-яку іншу тему.

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

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

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

Є численні переваги дочірньої теми:

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

Дочірня тема може містити папки зображення, JavaScript , CSS , Файли шаблонів і багато іншого. Ви можете включити налаштувань стільки, скільки хочете.

Насправді, дочірньої темі потрібно тільки три речі: папки, файли таблиці стилів і functions.php . От і все. І то, ці два файли можуть навіть в значній мірі бути порожніми.

Коли слід використовувати дочірню тему

Таким чином, завжди треба створювати дочірню тему, коли ви хочете внести будь-які зміни в веб-сайт WordPress? Ні.

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

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

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

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

Примітка:

Наступні дії можуть бути виконані безпосередньо на сервері за допомогою FTP - клієнта . Проте, я рекомендую спочатку налаштувати все локально, а потім стиснути папку дочірньої теми і встановити її як звичайну тему через меню «Тема». Це дозволить зробити все це набагато простіше.

Створення папки в wp-content / themes

Як уже згадувалося, дочірня тема потребує трьох речах: свою власну папку, таблиці стилів і файл functions.php. Ми почнемо з папки.

Як і будь-яка інша тема, дочірні теми знаходяться в папці wp-content / themes вашої установці WordPress. Таким чином, перейдемо туди і створимо нову папку для вашої дочірньої теми.

Найкращою практикою є надання папки вашої теми, то ж ім'я батьківської теми і додати -child. Оскільки ми використовуємо тему twentyfifteen, ми назвемо нашу папку twentyfifteen-child.

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

Створення таблиць стилів

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

Створення таблиці стилів легко: Просто створіть новий текстовий файл і назвіть його style.css. Готово! Проте, для того, щоб вона працювала, нам доведеться вставити наступний код, так званий "заголовок таблиці стилів," на самому початку файлу (код люб'язно надано WordPress Codex):

/ * Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child * /

Ось що означає кожен рядок:

  • Theme name
    Це ім'я, яке буде відображатися для вашої теми в бекенда WordPress.
  • Theme URI
    Посилання вказує на веб - сайт або демонстрацію сторінки теми. Це як правило посилання автора, яка має бути присутня для того, щоб тема могла бути прийнятою в каталог WordPress.
  • Description
    Це опис вашої теми буде відображатися в меню теми при натисканні на кнопку "Theme Details."
  • Author
    Це ім'я автора - це ви в цьому випадку.
  • Author URI
    Ви можете помістити адресу вашого сайту тут, якщо ви хочете.
  • Template
    Ця частина має вирішальне значення. Тут йде ім'я батьківської теми, а це означає його ім'я папки. Майте на увазі, що він чутливий до регістру, і якщо ви не ставите в потрібну інформацію, ви отримаєте повідомлення про помилку, так що двічі перевірте!
  • Version
    Показує версію вашої дочірньої теми. Як правило, всі починають з 1,0.
  • License
    Це ліцензія вашої дочірньої теми. Теми в каталозі WordPress, як правило, доступний за ліцензією GPL; ви повинні дотримуватися тієї ж ліцензії, що і ваша батьківська тема.
  • License URI
    Це адреса, де вказується посилання на вашу ліцензію теми. Знову ж, дотримуватися того, що говорить ваш батько тема.
  • Tags
    Теги допомагають іншим знайти вашу тему в каталозі WordPress. Таким чином, якщо ви дозволите деякі, переконайтеся, що вони актуальні.
  • Text domain
    Ця частина використовується для інтернаціоналізації і зробити теми перекладні. Це повинно відповідати "слимака" вашої теми.

Якщо ви відчуваєте себе трохи перевантаженим (вже? ), Ви може бути щасливі знати, що не вся інформація насправді потрібно. Насправді, все, що вам дійсно потрібно, це назва теми і шаблон.

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

/ * Theme Name: Twenty Fifteen Child Theme Description: A child theme of the Twenty Fifteen default WordPress theme Author: AndreyEx Template: twentyfifteen Version: 1.0.0 * /

Активація дочірньої теми

Після того, як ви створите папку і таблиці стилів, перейдіть в розділ "Зовнішній вигляд" → "Теми" в адмінки WordPress і знайдіть там дочірню тему. При натисканні на кнопку "Theme Details", ви побачите вміст заголовка таблиці стилів. Ось і вся інформація.

Добре, тепер натисніть на кнопку з написом "Activate." Гарна робота! Ваша тема активована. Проте, якщо ви подивитеся на свій веб-сайт, він буде виглядати наступним чином:

Не хвилюйтеся, все нормально. Ви не облажались. Отримайте ваше обличчя з паперового пакета. Причина, чому ваш сайт є порожнім, тому що він не має ще яких-небудь стилів

Ми просто хотіли показати вам, що, в теорії, маючи таблицю стилів і папку досить, щоб створити дитячу тему. І якщо вона заробила у вас, то ви вже зробили це! Однак, давайте займемося покращенням.

Створення файлу functions.php

Далі йде файл functions.php. Ви, напевно, чули про цей файл і раніше, але давайте перейдемо до створення.

Файл functions.php дозволяє змінювати і додавати функціональні можливості і можливості для веб - сайту WordPress. Він може містити як PHP і вбудовані функції WordPress. Крім того, ви можете створювати свої власні функції.

Коротше кажучи, functions.php містить код, який докорінно змінює вигляд і поведінку веб - сайту.

Створення файлу так само легко, як і створення таблиці стилів, якщо не легше. Все, що вам потрібно, це текстовий файл з ім'ям functions.php, а потім вставити наступний код:

<? Php // * Вставити код тут

Серйозно, це все. Просто додайте після відкритого тега php. Звичайно, ви могли б написати якусь - то інформацію в заголовку (не забудьте прокоментувати, що б WordPress не намагався виконати його). Додайте його в папку вашої теми.

Тепер, дозвольте мені сказати, ще: у вас немає необхідності functions.php. Якщо ви не плануєте використовувати PHP, щоб змінити вашу тему, то ви можете цілком обійтися і без нього. Таблиця стилів і інші файли можуть бути достатні для вас.

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

Спадкування батьківських стилів

Таким чином, ви, напевно, знаєте, що ваш веб-сайт до сих пір в основному тексті. Прийшов час змінити цю ситуацію. Як? Я покажу вам.

Та як ви використовуєте батьківську тему, ви, ймовірно, мають гарне уявлення про майбутню структуру вашого сайту. Для нашого прикладу, Twenty Fifteen, ми хочемо, дістатися до цієї точки:

Щоб потрапити сюди, вам потрібно буде успадковувати інформацію в таблицю стилів вашої батьківської теми. Є два способи зробити це.

Одним з них є за допомогою CSS і правила @import. Скопіювавши код нижче в ваш файл style.css, ви говорите своїй дочірній темі, використовувати інформацію, що міститься в таблиці стилів вашої батьківської темі, при показі вашого контенту.

@import url ( "../ twentyfifteen / style.css");

Майте на увазі, однак, що це старий спосіб успадкування батьківських стилів і більше не рекомендується. Причиною цього є продуктивність.

Якщо вам необхідно імпортувати кілька таблиць стилів (який не є розумним способом), то за допомогою @import змусить їх завантаження послідовно. Це може сповільнити час завантаження сторінки на кілька секунд, що не дуже добре.

По - друге, рекомендований спосіб завантаження таблиці стилів батька - і причина, чому ми створили functions.php раніше - це використання wp_enqueue_style (). Ця функція WordPress безпечно додає файли таблиці стилів до теми WordPress.

У нашому випадку, відповідний код виглядає трохи щось на зразок цього:

add_action ( 'wp_enqueue_scripts', 'enqueue_parent_styles'); function enqueue_parent_styles () {wp_enqueue_style ( 'parent-style', get_template_directory_uri (). '/ style.css'); }

Обов'язково, вставити цей код на початку вашого файлу functions.php і зберегти його (пам'ятаєте, щоб завантажити файл, використовуйте підключення до FTP ). Тепер перевірте ваш файл; він повинен виглядати наступним чином:

Чи задоволені, чи не так? Вітаю, ви зробили це! Ви створили свою першу дочірню тему в WordPress.

Тим не менш, ви можете заперечити, справедливо, що вона виглядає точно так само, як батьківська тема. Отже, який сенс дочірньої теми?

Не хвилюйтеся. Далі ви дізнаєтеся, як налаштувати дочірню тему виглядати саме так, як ви хочете.

Якщо ви хочете, отримати все, ви могли б додати тему зображення. Це зображення буде відображатися в меню теми в WordPress.

Все, що вам потрібно зробити, це створити PNG - файл, з ім'ям screenshot.png, і помістити його в папку вашої теми (в нашому випадку twentyfifteen-child). Переконайтеся в тому, щоб помістити його в каталог верхнього рівня, а не в підкаталозі, таких як images.

Рекомендований розмір 880 × 660 пікселів, хоча він буде показаний, як 387 × 290. Великі розміри необхідні, що зображення відображалася добре на екранах з високою роздільною здатністю.

Інші формати зображення, такі як JPEG і GIF також працюватимуть, але рекомендується PNG. Ви можете зробити це зараз або чекати, поки ви закінчите настроювання теми, тому що зображення, як правило, скріншот дизайну теми.

Налаштування дочірньої теми в WordPress

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

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

Реалізація призначених для користувача стилів

Один з найпростіших способів зробити зміни у вашій темі, це за допомогою CSS. Це дозволяє налаштувати кольору, розміри, шрифти та інші елементи, основні конструкції.

Якщо ви досвідчені в CSS, ви могли б насправді змінити весь макет вашого сайту. Проте, введення таких різких змін, як правило, робляться по-різному. Ми повернемося до цього.

На даний момент, все, що вам потрібно знати, це що style.css на місці, ви можете перевизначити будь-які стилі в батьківській темі шляхом додавання коду таблиці стилів дочірнього теми.

Важливо: Якщо ви вказали стилі батьківського темою у вашій файлі style.css, то не забудьте додати будь-які призначені для користувача стилі нижче в заяві @import, як в наступному фрагменті коду. (Хоча ви знаєте, що ви повинні використовувати functions.php, чи не так?)

/ * Theme Name: Twenty Fifteen Child Theme Description: A child theme of the Twenty Fifteen default WordPress theme Author: AndreyEx Template: twentyfifteen Version: 1.0.0 * / // Custom styles go here

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

Проте, скажімо, ви не шанувальник, і хочете відкоригувати тему. Ніякої шкоди в цьому немає. У цьому випадку, ви будете використовувати такий інструмент як Firebug, щоб з'ясувати, як повинні бути змінені стилі. Ми зробили приблизно так:

.entry-header {padding: 0 10%; } .Entry-title, .widecolumn h2 {font-size: 3.8rem; line-height: 1.2208; margin-bottom: 1.2208em; } .Entry-content, .entry-summary {padding: 0 11% 11%; }

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

.entry-header {padding: 0 7%; } .Entry-title, .widecolumn h2 {margin-bottom: 0.7em; } .Entry-content, .entry-summary {padding: 0 7% 10%; }

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

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

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

Для кожного файлу теми, присутнього в батьківському каталозі, WordPress перевіряє, чи присутній в дочірньої темі відповідний файл і, якщо так, то використовувати його. Це означає, що файл header.php в батьківській темі перекриє її еквівалент в батьківській папці.

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

Наприклад, якщо ми беремо content.php з папки теми Twenty Fifteen і відкриємо його за допомогою редактора, серед інших речей, ми знайдемо наступний код:

<? Php // Post thumbnail. twentyfifteen_post_thumbnail (); ?&gt; <Header class = "entry-header"> <? Php if (is_single ()): the_title ( '<h1 class = "entry-title">', '</ h1>'); else: the_title (sprintf ( '<h2 class = "entry-title"> <a href="%s" rel="bookmark">', esc_url (get_permalink ())), '</a> </ h2> '); endif; ?> </ Header> <! - .entry-header ->

Давайте подивимося, що відбувається, коли ми змінимо порядок коду:

<Header class = "entry-header"> <? Php if (is_single ()): the_title ( '<h1 class = "entry-title">', '</ h1>'); else: the_title (sprintf ( '<h2 class = "entry-title"> <a href="%s" rel="bookmark">', esc_url (get_permalink ())), '</a> </ h2> '); endif; ?> </ Header> <! - .entry-header -> <? Php // Post thumbnail. twentyfifteen_post_thumbnail (); ?>

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

Звичайно, він міг би використовувати деякі стилі, але ви отримали ідею. Ви можете використовувати цей метод, щоб зробити всі зміни на вашому сайті. Тільки не забудьте дати дочірньої темі ту ж структуру папок у вигляді дерева в якості батька. Наприклад, якщо файл, який ви хочете змінити знаходиться в папці з ім'ям page-templates в батьківській темі, то ви можете створити папку з таким же ім'ям в каталозі вашого дочірньої теми і помістити туди файл.

Робота з файлами шаблоном

Ми дізналися, що ми можемо переписати будь-який файл у батьківській темі, поміщаючи копію в папці дочірньої теми і його налаштування. Однак, іспользивать файли, які існують тільки в дочірній темі також можливо. Файли шаблонів є хорошим прикладом цього.

Скажімо, ми хочемо побудувати шаблон повної ширини сторінки для нашої дочірньої теми. Я буду першим, щоб визнати, що тема двадцять п'ятнадцять не піддається презентації повного екрану, але давайте зробимо це в будь-якому випадку для демонстраційних цілей.

Щоб створити сторінку повної ширини в двадцять п'ятнадцять, нам потрібно зробити чотири речі: створити власний шаблон сторінки, призначений для користувача заголовок і файл колонтитула, а потім додати деякі індивідуальні CSS. Давайте почнемо з шаблону сторінки.

Для нашого призначеного для користувача шаблону сторінки, ми просто скопіюємо файл page.php з батьківської теми, перейменуємо його у custom-full-width.php і помістимо його в папку з ім'ям page-templates в нашої дочірньої темі.

Тепер, давайте введемо пару змін в коді, так що це буде виглядати наступним чином:

<? Php / * * Template Name: Custom Full Width * Description: Page template without sidebar * / get_header ( 'custom'); ?> <Div id = "primary" class = "content-area"> <main id = "main" class = "site-main" role = "main"> <? Php // Початок циклу while (have_posts ()) : the_post (); // Включимо шаблон контенту сторінки. get_template_part ( 'content', 'page'); // Якщо коментарі відкриті, або у нас є хоч один коментар, завантажимо шаблон коментаря. if (comments_open () || get_comments_number ()): comments_template (); endif; // Закінчення циклу endwhile; ?> </ Main> <! - .site-main -> </ div> <! - .content-area -> <? Php get_footer ( 'custom'); ?>

Єдине, що ми зробили тут, це ввели заголовок, який говорить WordPress, що це шаблон сторінки, де ми змінили get_header і get_footer, так що вони будуть включати в себе два файли з іменами header-custom.php і footer-custom.php.

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

Тепер прийшов час створити наш користувальницький заголовок і нижній колонтитули в файлі теми. По-перше, перейдіть до батьківської темі, і скопіюйте header.php і footer.php в папку дочірньої теми, і перейменуйте їх в header-custom.php і footer-custom.php, відповідно.

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

<? Php / ** * The template for displaying the header * * Displays all of the head element and everything up until the "site-content" div. * * @Package WordPress * @subpackage Twenty_Fifteen * @since Twenty Fifteen 1.0 * /?> <! DOCTYPE html> <html <? Php language_attributes (); ?> Class = "no-js"> <head> <meta charset = "<? Php bloginfo ( 'charset');?>"> <Meta name = "viewport" content = "width = device-width"> < link rel = "profile" href = "http://gmpg.org/xfn/11"> <link rel = "pingback" href = "<? php bloginfo ( 'pingback_url');?>"> <! - [if lt IE 9]> <script src = "<? php echo esc_url (get_template_directory_uri ());?> / js / html5.js"> </ script> <! [endif] -> <? php wp_head ( ); ?> </ Head> <body class = "full-width-body" <? Php body_class (); ? >> <div id = "page" class = "hfeed site"> <a class="skip-link screen-reader-text" href="#content"> <? Php _e ( 'Перейти до змісту', ' twentyfifteen '); ?> </a> <header id = "masthead" class = "site-header full-width" role = "banner"> <div class = "site-branding full-width"> <? Php if (is_front_page () && is_home ()):?> <h1 class = "site-title"> <a href="<?php echo esc_url( home_url('/') ); ?> "rel =" home "> <? php bloginfo ( 'name'); ?> </a> </ h1> <? Php else:?> <P class = "site-title"> <a href="<?php echo esc_url( home_url('/') ); ?> "rel = "home"> <? php bloginfo ( 'name'); ?> </a> </ p> <? Php endif; $ Description = get_bloginfo ( 'description', 'display'); if ($ description || is_customize_preview ()):?> <p class = "site-description"> <? php echo $ description; ?> </ P> <? Php endif; ?> <Button class = "secondary-toggle"> <? Php _e ( 'Меню і віджети', 'twentyfifteen'); ?> </ Button> </ div> <! - .site-branding -> </ header> <! - .site-header -> <div id = "content" class = "site-content full -width ">

Ми зробили кілька речей тут. Ми дали елемент <body> призначеного для користувача класу, названий full-width-body. Ми також додали full-widthкласс до site-header, site-branding і site-content, таким чином, що ми можемо призначити їм призначені для користувача CSS.

В якості останнього кроку, ми позбулися всіх елементів бічній панелі (як в sidebar і виклику get_sidebar), тому що ми не хочемо, щоб вони показувалися на нашій сторінці з повною шириною.

Єдина зміна, яку ми зробили в footer-custom.php, це додали клас full-width до елементу footer, наприклад, так:

<Footer id = "colophon" class = "site-footer full-width" role = "contentinfo">

Все, що залишилося зробити, це ввести деякий код в нашій таблиці стилів:

.full-width-body :: before {display: none; } .Site-content.full-width {float: none; margin: 0 auto; } .Site-header.full-width {background-color: #fff; box-shadow: 0 1px 0 rgba (0, 0, 0, 0.15); margin: 0; padding: 2% 0; } .Site-branding.full-width {margin: 0 auto; width: 58.8235%; } .Site-footer.full-width {float: none; margin: 0 auto; }

Та да! А ось наша сторінка з повною шириною:

Вона може використовувати деякі полірування, але давайте бути задоволені на даний момент.

Використання functions.php

Ми торкнулися файлу functions.php. Цей файл можна використовувати для включення PHP і вбудовані функції WordPress в вашій темі. Це дасть вам багато можливостей для налаштування.

Примітка:

Файл functions.php в дочірньої темі завантажений на додаток до файлу з тим же ім'ям в батьківській темі. Насправді, він виконується безпосередньо перед батьківської темою на відміну від style.css, який замінює вихідний файл. Отже, не копіюйте весь вміст файлу functions.php вашої батьківської теми в файл у вашій дочірньої теми. Швидше за все, використовувати останній для зміни функції в батьківській темі.

Давайте повернемося до налаштування нашої дочірньої теми. У цьому прикладі я хочу додати віджет - зону в футере сайту. Щоб зробити це, нам спочатку потрібно зареєструвати віджет в нашому файлі functions.php.

<? Php register_sidebar (array ( 'name' => 'Footer Widget', 'id' => 'footer-widget', 'before_widget' => '<div class = "footer-widget">', 'after_widget' = > '</ div>'));

Примітка:

Тег <? Php на початку файлу functions.php. Не вмикайте його, якщо він вже є!

Це зробить новостворений віджет область відображатися в нашому футере. Проте, для того, щоб можна було використовувати на веб - сайті, нам потрібно додати наступний код в footer.php:

<? Php if (is_active_sidebar ( 'footer-widget')): dynamic_sidebar ( 'footer-widget'); endif; ?>

Ще раз, ми скопіюємо файл footer.php з теми двадцять п'ятнадцять батьківської теми і вставимо його в нашу дочірню тему. На цей раз, однак, ми залишимо його ім'я, як є.

Після цього нам потрібно додати виклик до нашого нового віджету колонтитула, так що це буде виглядати наступним чином:

<? Php / ** * The template for displaying the footer * * Contains the closing of the "site-content" div and all content after. * * @Package WordPress * @subpackage Twenty_Fifteen * @since Twenty Fifteen 1.0 * /?> </ Div> <! - .site-content -> <footer id = "colophon" class = "site-footer" role = "contentinfo"> <div class = "site-info"> <? php if (is_active_sidebar ( 'footer-widget')): dynamic_sidebar ( 'footer-widget'); endif; ?> <? Php / ** * Fires before the Twenty Fifteen footer text for footer customization. * * @Since Twenty Fifteen 1.0 * / do_action ( 'twentyfifteen_credits'); ?> <a href="<?php echo esc_url( __('https://andreyex.ru/','twentyfifteen') ); ?> "> <? Php printf (__ ( 'Створення сайтів% s', 'twentyfifteen'), 'AndreyEx'); ?> </a> </ div> <! - .site-info -> </ footer> <! - .site-footer -> </ div> <! - .site -> < ? php wp_footer (); ?> </ Body> </ html>

Мінімальна зміни необхідні у файлі style.css:

.footer-widget {margin: 2% 0; }

Тепер, коли ми додаємо віджет пошуку в нашій новій області віджетів, на першій сторінці буде виглядати наступним чином:

Не так уже й важко, чи не так?

Використання в темі хуков

Кращий спосіб змінити дочірню тему за допомогою functions.php є використання гачків . Якщо ви ніколи не чули про тематичних гачків перед цим, думати про них як про маленьких якорів в файлах теми, яка дозволяє додавати зміст, функції та інші речі прямо там, без необхідності редагувати ядро ​​самих файлів.

Є два типи гачків: action гачків і filter гачків. Дія гачків дозволяють додавати призначені для користувача функції до існуючих функцій. Фільтр гачків, як спосіб змінити функції, присутні в розташуванні гачка.

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

Давайте напишемо невелику функцію:

function custom_footer_widget () {if (is_active_sidebar ( 'footer-widget')): dynamic_sidebar ( 'footer-widget'); endif; }

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

Перевагою цього є те, що тепер ми можемо додати всю функцію до гака в основних файлах нашої батьківської теми, без необхідності редагування самого файлу. В цьому випадку ми орієнтуєтеся на twentyfifteen_credits в файлі батьківської теми. Він відповідає за колонтитул ( "Створення сайтів AndreyEx") в темі двадцять п'ятнадцять, і він з'являється в footer.php наступним чином:

do_action ( 'twentyfifteen_credits');

Все, що потрібно, щоб додати нашу нову функцію для області віджету на цей гачок ще одна лінія в functions.php нашої дочірньої теми:

add_action ( 'twentyfifteen_credits', 'custom_footer_widget');

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

Примітка:

Якщо ви прямуєте і йдете по маршруту functions.php, не забудьте видалити змінений файл footer.php з вашої дочірньої теми; В іншому випадку область віджет буде відображатися двічі.

Набагато більше можна зробити за допомогою гачків в дочірньої темі. Деякі структури забезпечують тематичні навантаження на гачки, так що ви можете змінити що - або безпосередньо з functions.php .

Проте, ця тема виходить за рамки даної статті. Якщо ви зацікавлені в отриманні додаткової інформації, деякі відмінні ресурси можна знайти в Інтернеті.

разом

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

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

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

Крім того, ви отримуєте першокласну освіту в створення теми в WordPress . Не так уже й погано, вірно?

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

Який ваш досвід в створенні дочірніх тем для WordPress? Чи є у вас що - небудь додати? Все, що ви могли б зробити по-іншому? Будь ласка, поділіться в коментарях.

Если ви нашли помилки, будь ласка, віділіть фрагмент тексту и натісніть Ctrl + Enter.

Важко повірити, що вони працюють на тій же платформі, чи не так?
Звучить непогано?
Що таке дочірні теми і як їх використовувати?
Що таке дочірня тема?
Вже?
Як?
Отже, який сенс дочірньої теми?
Php, чи не так?
Twentyfifteen_post_thumbnail (); ?
Gt; <Header class = "entry-header"> <?