Керівництво по розробці тем WordPress для дітей

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

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

У цьому посібнику я хочу представити основні концепції побудови дочірньої теми WordPress і чому це така гарна ідея.

Починаємо

Дитячі теми не такі складні, як можуть здаватися. Переваги відпрацювання батьківської теми означає, що вам не потрібно писати весь HTML / CSS з нуля. Дочірня тема автоматично використовуватиме будь-які файли шаблонів, які ви включаєте, наприклад sidebar.php або footer.php. Але якщо вони відсутні, то ваша дочірня тема буде витягувати ті ж самі файли з батьків.

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

Необхідні файли

Для налаштування дочірньої теми в WordPress потрібна лише одна таблиця стилів .css. Також потрібно створити новий каталог у списку / wp-content / themes папку, в якій буде розміщуватися тема вашої дитини. Зверніть увагу, що ви не є створення цієї папки всередині батьківської теми, але праворуч поряд з нею в одному каталозі тем.

Розробники часто включають функції .php та screenshot.png в ту ж папку, що й новий CSS-файл. Знімок екрана відображається у вашій адміністративній панелі WordPress, а файл тематичних функцій може використовуватися для тонн змін у сервері.

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

 / * Назва теми: Тема URI для двадцяти одинадцяти дітей: http: //example.com/ Опис: Дитяча тема для дизайну Twenty Eleven Автор: Jake Rocheleau Автор: URI: http: //www.hongkiat.com/blog/ Шаблон: Версія: 0,1 * / 

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

Незважаючи на те, що всі батьківські шаблони PHP будуть використовуватися, стиль parent.css вихідного батька буде ні імпортувати автоматично. Якщо ви хочете відпрацьовувати оригінальні стилі, ви повинні включити їх у верхній частині документа style.css вашої дитини. Нижче наводиться приклад, включаючи тему WP Twenty Eleven.

 url @import ("… / twentyeleven/style.css"); 

Налаштування нових стилів

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

Ми могли б демонтувати з деякими дійсно простими змінами до посилань і абзаців. Я використовував код з оригінальної теми «Двадцять одинадцять» для націлювання на різні елементи. Іноді необхідно використовувати більш конкретний селектор, щоб перевизначити стару конструкцію.

 тіло padding: 0 1.4em;  #page margin: 1.667em auto; max-width: 900px;  a color: # 5281df; текст-прикраса: немає; сімейство шрифтів: Calibri, Tahoma, Arial, sans-serif;  a: фокус, a: активний, a: hover text-decoration: underline;  

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

Важливі речі

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

 a color: # 5281df! важливо; текст-прикраса: немає; сімейство шрифтів: Calibri, Tahoma, Arial, sans-serif;  

Вище я скопіював свої початкові зміни та відредагував колір прив'язки важливим пунктом. Це має перевагу над усіма іншими стилями однієї глибини селектора. Більш визначені елементи (такі як #access li: hover> a), як правило, мають власні стилі, якщо колір ще був успадкований від нашого оригінального селектора. У цьому випадку наша батьківська тема не встановлює властивість font-family на якірних посиланнях, тому ми не стикаємося з проблемами успадкування.

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

Клонування функцій.php

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

Як приклад я побудував функцію, яка аналізує декілька файлів JavaScript, коли ініціюється шаблон. Це дозволить видалити всі старіші версії jQuery і сценаріїв SWFObject, одночасно додаючи останні версії до wp_head області.

 // файли черги js для функції навантаження mytheme_js () if (is_admin ()) return; wp_deregister_script ('jquery'); wp_register_script ('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); wp_enqueue_script ('jquery'); wp_deregister_script ('swfobject'); wp_register_script ('swfobject', 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'); wp_enqueue_script ('swfobject');  add_action ('init', mytheme_js); 

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

Робота з файлами теми

Найбільш широка категорія тематизації - це створення власних макетів і типів сторінок. За замовчуванням ваша дочірня тема успадковує всі файли тематики батьків. Але у вас є можливість створення нових файлів дочірніх тем, і WP зареєструє їх як "основний" шаблон.

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

Спеціальні шаблони сторінок

Хоча ми говоримо про файли шаблонів, я також хочу представити частину функціональності WordPress, з якою багато хто не знайомий. Можна створювати шаблони сторінок і публікацій, які можна вибрати з панелі адміністрування під час створення нового вмісту. Навіть якщо батьківська тема не має нового власного файлу шаблону, WordPress буде використовувати дитину замість a page.php або single.php.

Спочатку створіть новий файл з назвою page-offer.php. Це буде a “особлива пропозиція” рекламна сторінка, яка тематизована інакше, ніж всі інші. Тут ви можете скопіювати код оригінальної сторінки або навіть створити тему повністю з нуля. Єдиний код, який ми повинні дати WordPress знати про цей новий шаблон є коментар установки в PHP.

Іншою альтернативою цьому методу є створення користувацьких сторінок, названих за унікальним ідентифікаційним номером. Тому замість завантаження за замовчуванням archive.php для сторінок автора можна створити такий файл, як author-ID.php де ID - це унікальний ідентифікаційний номер WordPress користувача. Хоча ця система є більш податковою, оскільки потрібно створити новий файл шаблону для кожного з авторів на вашому сайті.

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

• image.php
• jpeg.php
• image_jpeg.php
• attachment.php

Корисні інструменти WordPress

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

Очевидна згадка - це тематичний плагін для однієї клавіші, створений і протестований для останньої версії WordPress 3.x. У ваш адміністратор додано посилання на меню “Теми” розділ для автоматичного створення дитини за допомогою поточної активної теми. Це фантастично, якщо ви не хочете, щоб зіпсувати з FTP і шукаєте, щоб грати з деякими новими ідеями.

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

Додаткові ресурси

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

• 8 Безкоштовні двадцять одинадцять дитячих тем
• WordPress Online Codex »Дитячі теми
• Як побудувати WordPress Дитячі теми, використовуючи гачки і фільтри
• Кілька слів про дитячі теми
• Як створювати, змінювати і використовувати дитячі теми в WordPress

Висновок

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

.