Як створити просту WordPress-тему на основі Twenty Eleven
У процесі програмування вам хочеться, щоб кожен компонент базувався на інших компонентах якнайменше; це дозволяє повторно застосовувати ті самі компоненти в незмінному стані.
Відмінним прикладом є WordPress щодо створеннянових тем оформлення. Тут дизайн та контент повністю розділені. Ви можете змінити тему, але контент залишиться незмінним.
Завантажити вихідні
WordPress використовує у створенні нових темзагальні принципи та фрагменти коду, на основі яких можна розробляти нові теми.
Замість того, щоб модифікувати вже існуючу тему (і ризикувати втратою всіх зроблених змін при оновленні існуючої теми), ми можемо створити дочірню тему, яка відокремить усі наші зміни від основної теми.
У цьому посібнику я розповім вам про те, як створити просту дочірню тему.
Що таке дочірня тема?
Наведу витримку ізWordPress Codex :
Коротко, "дочірня тема " означає те, що ми можемо створити нову тему на базі існуючої "батьківської " без необхідності модифікувати файли. Ми можемо внести правки вCSS, додати тип публікацій, що настроюється, створити свою добірку функцій. Це також рекомендований спосіб створення нової теми на основі існуючої.
Крім створення "дочірніх тем", є ще2 інших способу створення тем.
Перший спосіб – це просто модифікація нашої теми. Однак якщо ми підемо цим шляхом, то при наступному оновленні версії теми всі зроблені зміни будуть втрачені.
Дочірня тема WordPress - це тема, яка ґрунтується у своїй функціональності наіншій темі, яка називається "батьківської ". При цьому дочірня тема дозволяє вам вносити зміни до її коду та розширювати цю функціональність.
У цьому посібнику користувача ми створимо дочірню тему на основі теми, що пропонується за умовчанням -Twenty Eleven.
Крок 1. Файли встановлення / обов'язкові
Для початку нам потрібно оновити WordPress до версії3.2+ абозавантажити тавстановити темуTwenty Eleven, яку ми помістимо в окрему папку. У/wp-content/themes/ створюємо папкуtwentyeleven-child. Туди ми можемо додавати файли нашої дочірньої теми.
Ось єдиний обов'язковий файл, який потрібен для створення дочірньої теми:style.css. У ньому ми й пропишемо, що наша тема буде дочірньою. Створимо файлstyle.css у папціtwentyeleven-child і вставимо в нього наступний код:
Ще одна примітка, перш ніж ми розпочнемо створення кастомізованогоCSS.
Наша дочірня тема та її файлstyle.css повністю "перепишуться " поверх батьківської. Тому після того, як ви вкажете інформацію про тему, перший рядок коду повинен імпортувати кодбатьківського файлу CSS:
Тепер ми готові вносити зміни добатьківського CSS. Поки ми збираємося тут зробити кілька досить простих змін, я рекомендував би використовуватиFirefox зFirebug абоGoogle Chrome Developer Tools, які вам допоможуть у вирішенні цього завдання. А тепер додайте наступний код у файлstyle.css під рядком@import :
Крок 2. Functions.php
Якби мені запропонували проранжувати файли теми для WordPress у міру їх важливості, то я поставив би файлиstyle.css іindex.php на перше місце, т.к. вонивам потрібні, щоб тема працювала. На другому місці я б поставив functions.php.
Файлfunctions.php дозволяє вам додати функціональність, що настроюється, до вашої теми: типи публікацій, меню, підтримку превью-картинок, додаткові бічні панелі, модифікації циклу і багато іншого.
Хочаfunctions.php необов'язковий для дочірньої теми, він таки є найкращим способом додати власну функціональність до вашої нової теми. І на відміну відstyle.css, який переписується поверх "батьківського" файлуstyle.css, файл дочірньої темиfunctions.php завантажуватиметьсядо завантаження аналогічного файлу з "батьківської" теми.
Ми створимо блок віджету для заголовка сторінки і перекриємо одну звбудованих функцій з теми Twenty Eleven. Для початку додамо місце для віджету. Створимоfunctions.php і додамо наступний код:
Цей код створитьблок віджета, який ми в наступному кроці додамо у верхню частину сторінки.
Тепер ми маємо "переробити " одну з вбудованих функцій теми Twenty Eleven. Творці Twenty Eleven зробили процес відключення та "випереджального виконання" функцій у дочірніх темах досить простим, оскільки спочатку відбувається перевірка, чи немає функції з таким самим ім'ям.
Давайте подивимося на приклад того, як виглядає той код, який нам доведеться змінити вtwentyeleven/functions.php :
Зауважте, як перший рядок відповідає за перевірку того, чи є функція під назвоюtwentyeleven_posted_on(). Помістивши функцію з цим ім'ям у файл нашої дочірньої темиfunctions.php, ми виконаємо цю функцію до того, як аналогічна буде виконана в батьківській темі.
Примітка для розробників нових тем:
Додатинаступний код у файлfunctions.php :
Знову ж таки - хоча ми не робили жодних істотних змін, в основному, ми змогли показати, як правильно виконати функцію в дочірній темі перед виконанням основної функції. А тепер давайте перейдемо безпосередньо дофайлів самого шаблону.
Крок 3. Файли шаблону
Останнє, на чому ми зупинимося в цьому уроці, – це файли шаблону для дочірньої теми. Припустимо, що нам треба змінитишапку (header) сайту або цикл для єдиного посту або додати сторінку з архівом публікацій. Все це та багато іншого можна реалізувати за допомогою дочірніх тем.
Ми просто назвемо файли теми, як зазвичай, тим самим ім'ям, як і той файл, який ми хочемо замінити з батьківської теми. Ці файли, наприкладstyle.css, будуть виконуватися перед аналогічними батьківськими файлами.
Ми змінимошапку та створимо шаблон нової сторінки. Почнемо зшапки. Створимо файлheader.php, скопіюємо код із файлуtwentyeleven/header.php і вставимо його в наш новийheader.php. Як тільки ми це зробимо, нам потрібно замінити рядки104 та109 ( ) викликом функції:
А тепер додамо наступний код у файлfunctions.php :
Цей код допоможе нам відображативіджети у шапці (якщо вони є); а якщо їх немає, то в цьому блоці буде відображатися рядок пошуку. І нарешті, нам треба трохи поправитиCSS, щоб наша шапка "подружилася " з віджетами. Додамо трохи кодуstyle.css :
Цей код допоможе зробити область пошуку та віджетв одному стилі. Але будьте пильні: цей метод не 100%. Він просто показує, як можна редагувати файли шаблону в дочірній темі. Ось що вийшло в результаті:
Коли ми створюємо нову сторінку, ми можемовикористовувати шаблон "Welcome ". Ми додамо своє повідомлення у верхню частину сторінки. Весь ваш файл буде виглядати якось так:
Пам'ятайте, що між секціями#primary та#content ми додали секцію з класомwelcome. Перейдемо тепер у файлstyle.css і там трохи попрацюємо надCSS :
В результаті вийшло ось що:
Варто згадати, що є спосіб і краще, щоб зробити це: для цього треба додати налаштовується поле в шаблон . Але, як я вже говорив раніше, хотілося весь процес зробити простіше, щоб зосередитися на створенні дочірньої теми.
Звичайно, ми торкнулися лише основних моментів у створенні дочірньої теми; до мого завдання входило познайомити вас з тим, як можна створити нову тему.
Варто додати, що створюючи дочірню тему, ви прив'язуватимете свої файли та зображення до неї, а для цього треба використовувати
оскільки остання функція викликає папку з головною, а чи не дочірньою, темою.