Як створити WordPress тему з нуля: перші кроки

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

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

Слово або два про основи

WordPress замислювався як блог-рух або проста, орієнтована на блоги система управління контентом. Спочатку його було випущено в 2003 році Меттом Малленвегом і Майком Літтлом. З того часу його база користувача не перестала зростати. WordPress — це веб-додаток на основі PHP, який використовує MySQL як свою базу даних і зазвичай запускається за серверною програмою, такою як NGINX або Apache.

WordPress це просто набір PHP-файлів, які працюють разом як додаток. Інтерпретатор PHP використовує ці файли для створення веб-сторінок відвідувачів. Це виробляє HTML, щоб бути точнішим.

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

Кожна тема складається з папки з файлами PHP, CSS, а іноді JavaScript. Файли, які повинна мати кожна тема WordPress – як мінімум – це style.css та index.php. Це технічний мінімум, необхідний роботи теми, але жодна серйозна тема WordPress залишається тільки з цими двома файлами.

Базовий шаблон та файли Partials

Мінімальний файл index.php перехоплює всі запити, які не мають відповідних спеціалізованих шаблонів файлів у темі. front-page.php, home.php, page.php, taxonomy.php, author.php, archive.php — це деякі з шаблонів, які ми можемо використовувати в наших темах для подальшої структуризації певних сторінок або запитів у нашій темі.

Наприклад, файл archive.php визначатиме структуру виведення HTML, коли відвідувач запитує деякі сторінки, на яких відображається список повідомлень. page.php буде вказувати, як відображати окремі сторінки тощо.

Часткові файли інкапсулюють повторювані частини сторінок на веб-сайті WordPress. Наприклад, верхній та нижній колонтитули зазвичай однакові для всіх сторінок веб-сайту, тому теми WordPress поділяють ці частини сторінки на header.php та footer.php . comments.php буде використовуватися для відображення коментарів, де це застосовується.

Потім ці файли потрібні з файлів шаблонів, які ми пояснили.

Таким чином, ми дотримуємося принципу СУХИЙ і не повторюємо код у всіх цих файлах.

Ієрархія шаблонів

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

Щоб пояснити це за запитом сторінки — коли відвідувач відвідує певну сторінку на веб-сайті WordPress — WordPress спочатку спробує знайти шаблон, призначений автором сторінки, у wp-admin . Це може бути власний файл шаблону, навіть цілком статичний.

Якщо такого шаблону немає або він не був призначений, WordPress спробує знайти файл шаблону з фрагментом цієї конкретної сторінки на ім'я файлу. Це виглядало б як page-mypageslug.php — хоч би яким був наш mypageslug .

Наступним файлом, який WordPress спробує використовувати, буде файл із ідентифікатором цієї конкретної сторінки у своєму імені файлу, наприклад, page-48.php .

Якщо жоден із цих специфічних для сторінки файлів не існує, WordPress спробує використати page.php — використовується для всіх сторінок якщо не вказано інше.

Якщо він не знаходить page.php, він спробує використати singular.php. Цей файл шаблону використовується, коли для повідомлень - single.php не знайдено, а також для сторінок, де page.php не знайдено.

Тепер, якщо нічого з цього не знайдено у прикладі запиту сторінки , WordPress повернеться до index.php

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

Наступне, що вам потрібно знати, щоб розумітися на них, — це тип посту WordPress.

Типи повідомлень WordPress

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

Ми також можемо вказати наші власні типи повідомлень, будь то в наших темах або наших плагінів. Нам потрібно використати наступне:

register_post_type(
$post_type,
$args
)

Тут ми вказуємо ім'я типу запису, як воно структуроване, як воно представлене wp-admin і так далі.

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

Докладніше про ієрархію шаблонів можна дізнатися тут.

style.css

style.css є важливим файлом у кожній темі WordPress, і його функція виходить за межі стилю. Цей файл використовується для надання основної інформації про тему WordPress. Без цього WordPress не зможе зареєструвати тему як тему.

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

• назва теми
• автор
• опис
• URI теми
• версія
• ліцензія
• та інші деталі

WordPress використовує ці деталі для правильного відображення теми в бекенді.

Наприклад, мета-заголовок у темі «Двадцять сімнадцять» виглядає так:

/* Theme Name: Twenty Seventeen Theme URI: https://wordpress.org/themes/twentyseventeen/ Автор: WordPress team Author URI: https://wordpress.org/ і іmmersive featured images.З фокусом на бізнес-сайтах, це особливості декількох розділів на сторінці, як добре, як widgets, navigation and social menus, logo, and more. Особистість його є ассиметричним grid with custom color scheme and showcase your multimedia content with post formats. Наші подробиці теми для 2017 works great in many languages, for any abilities, and on any device. Version: 1.7 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentyseventeen flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready Цей тема, як WordPress, is licensed under the GPL. Use it to make something cool, має fun, і share what you've learned with others. */

style.css файл style.css очевидно, використовується для style.css наших сторінок WordPress.

WordPress Action та фільтр-хукі

Теми та плагіни WordPress, WordPress значною мірою залежать від дій і фільтрів . Вони є частиною подієвої архітектури. Простим поясненням цього було б те, що в процесі виконання сторінки, пов'язаної з веб-запитом відвідувачів, існують певні зареєстровані точки. хуки - які дозволяють нам запускати дії у цих точках. Ми прив'язуємо функції PHP до тих точок, які мають бути виконані. Це бойові дії . Фільтруючі зачіпки орієнтовані обробку — зміна — фрагментів даних у циклі виконання.Отже, якщо пастка фільтра зареєстрована для будь-якого фрагмента даних (змінна PHP), ми можемо підключити нашу власну функцію та змінити або обробити цей фрагмент даних.

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

Гачки описані тут докладніше, і ми заглибимося в це докладніше в інших частинах цього посібника.

Петля

Цикл є елементарною частиною циклу запиту WordPress. Як говорить Кодекс WordPress:

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

Цикл WordPress — це, в основному, PHP-цикл while, який відображає повідомлення відповідно до запиту відвідувачів та зазначених критеріїв файл шаблону, у якому він зазначений.

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

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

if
(
have_posts()
)

while
(
have_posts()
)

the_post();
// // Post Content here // > // end while > // end if

Ми можемо використовувати кілька циклів на одній сторінці (у цьому випадку нам потрібно їх скинути), і є певні функції WordPress, які існують для використання в ній.

Умовні теги

Умовні теги WordPress — це фрагменти коду PHP, які дозволяють нам відображати фрагменти контенту лише за умови дотримання певних умов. -Коди відображалися лише на домашній або іншій сторінці.

Отже, у першому прикладі ми будемо використовувати is_front_page() , і це буде виглядати приблизно так:

if
(is_front_page())
# do something >

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

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

Структура теми

В кінці цієї частини і до того, як ми спробуємо створити власну тему, ми будемо використовувати інструмент WP-CLI для створення мінімальної теми на основі Underscores, підтримуваної Automattic, щоб подивитися на типову мінімальну тему WordPress.

Звідси ми можемо отримати уявлення у тому, як ми можемо структурувати файли тем, папки тощо.

Висновок

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

У цій серії є три статті щодо створення теми WordPress з нуля:

Посібник для початківців з розробки теми WordPress

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

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

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

До мене часто надходять питання про хостинг, яким я користуюсь і тому вирішив зазначити хостинг у статті https://sprinthost.ru. Ви можете скористатися хостингом 30 днів безкоштовно. Щоб зрозуміти, як працюватиме Ваш сайт на цьому хостингу просто перенести свій сайт (у цьому допоможе підтримка хостингу безкоштовно) і таким чином зможете зрозуміти підходить хостинг Вам чи ні. На цьому хостингу знаходяться сайти з 20 000 тисяч відвідуваності та сайти почуваються чудово. Рекомендую! Так, якщо робити оплату на 1 рік, то отримуєте знижку 25%. І що мені подобається – тих. підтримка завжди допомагає в технічних питаннях, за що їм дякую. Як Ви розумієте не завжди проходить все гладко і немає бажання, щоб сайт не був доступний, тим самим страждав трафік і дохід.

Введення в розробку WordPress Theme

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

На цьому етапі ви можете почати створювати свою тему. На щастя, розробка теми для WordPress — не така складна задача, як ви можете собі уявити. Завдяки зручності платформи та численним доступним інструментам майже кожен може створити власну тему.

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

* Відразу хочу порадувати вас, що при покупці хостингу від TimeWeb та оплати на рік - домен вам дається в подарунок, можете заощадити небагато). Купуючи хостинг через моє партнерське посилання, я допоможу вам налаштувати хостинг і встановити WordPress.

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

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

Що таке стартова тема (і чому ви маєте її використовувати)

Початкова (стартова) тема - це порожня тема WordPress, яку ви можете використовувати для створення власної теми. Використання стартової теми дозволяє побудувати міцну основу, не турбуючись про складнощі, пов'язані з написанням теми з нуля.Це також допоможе вам зрозуміти, як працює WordPress, показуючи базову структуру теми і те, як всі її частини працюють разом.

Існує безліч відмінних сервісів для створення початкових тем, у тому числі Underscores, FoundationPress, UnderStrap та Bones (це лише деякі з них).

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

Як розробити свою першу тему WordPress (за 5 кроків)

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

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

Крок 1: Налаштуйте локальне середовище

Перше, що вам потрібно зробити, це створити локальне середовище розробки. Фактично це сервер, який ви встановлюєте на свій комп'ютер, який можна використовувати для розробки та управління локальними сайтами WordPress. Локальний сайт – це безпечний спосіб розробки теми, що ніяк не впливає на ваш живий сайт.

Існує безліч способів створення локального середовища, але я збираюся використовувати OpenServer (і вам раджу). Це швидкий, простий та безкоштовний спосіб встановлення локальної версії WordPress, сумісний із Windows.Для початку виберіть «PREMIUM» версію OpenServer (вам має її вистачити за очі), дочекайтеся скачування, а потім встановіть це програмне забезпечення на комп'ютер.

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

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

Крок 2: Завантажте та встановіть стартову тему

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

Якщо ви хочете, ви також можете натиснути на "Advanced Options" (Додаткові параметри) для подальшого налаштування базової теми. Тут ви можете заповнити додаткову інформацію, таку як ім'я автора та надати опис теми.

Там також є _sassify! опція, яка додасть файли Syntaxically Awesome StyleSheets (SASS) у вашу тему. SASS - це мова попередньої обробки для CSS, яка дозволяє вам використовувати змінні, вкладення, математичні оператори та багато іншого.

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

Крок 3: зрозуміти, як працює WordPress за лаштунками

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

WordPress визначає, які шаблони використовувати на кожній сторінці, переглядаючи ієрархію шаблонів. Це порядок, в якому WordPress шукатиме відповідні файли шаблонів під час кожного завантаження сторінки на вашому сайті. Наприклад, якщо ви відвідуєте URL-адресу http://example.com/post/this-post, WordPress шукатиме наступні файли шаблонів у такому порядку:

• Файли, які відповідають стилю, такі як цей пост.
• Файли, які відповідають ідентифікатору запису.
• Загальний файл із одним повідомленням, наприклад single.php.
• Архівний файл, наприклад archive.php.
• Index.php файл.

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

Ще один важливий елемент, який потрібно зрозуміти, це The Loop (Цикл WordPress). Це код, який WordPress використовує для відображення контенту, тому багато в чому це серце вашого сайту. Він відображається у всіх файлах шаблонів, де відображається вміст публікації, наприклад index.php або sidebar.php.

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

Крок 4: Налаштуйте тему

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

Додайте функціональність за допомогою "Hooks"

Hooks* (що в перекладі означає «гачки, зачепи») — це фрагменти коду, вставлені у файли шаблонів, які дозволяють запускати дії PHP у різних сферах сайту, вставляти стилі та відображати іншу інформацію. Більшість хуків реалізовані безпосередньо в ядрі WordPress, але деякі корисні і для розробників тем.

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

• wp_head() — додається до елемента «head» у header.php і включає стилі, сценарії та іншу інформацію, яка запускається під час завантаження сайту.
• wp_footer() — доданий до footer.php прямо перед тегом «/body». Це часто використовується для вставлення коду Google Analytics.
• wp_meta() — зазвичай з'являється в sidebar.php для включення додаткових скриптів (таких як тегів та інші).
• comment_form() — додається в comments.php безпосередньо перед тегом «/div» файлу, що закриває, для відображення даних коментарів.

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

Додайте стилі за допомогою CSS

Каскадні таблиці стилів (CSS) – це те, що визначає зовнішній вигляд всього контенту на вашому сайті. У WordPress це досягається за допомогою файлу style.css. Цей файл вже включений у вашу тему, але на даний момент він містить лише базовий стиль за промовчанням.

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

Це контролює колір не відвіданих гіперпосилань, які за замовчуванням мають колір royalblue:

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

Збережіть файл та перевірте ваш локальний сайт зараз. Як і слід було очікувати, всі невідвідані посилання тепер будуть яскраво-червоного кольору:

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

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

Крок 5: Експортуйте тему та завантажте її на свій сайт

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

Коли ви ретельно перевірите свою тему та переконаєтеся, що вона відповідає необхідним стандартам, тепер залишається лише експортувати її. Найпростіший спосіб зробити це - просто знайти, де веб-сайт встановлений на вашому локальному комп'ютері, швидше за все, в папці з ім'ям "OSPanel", в папці "domains" за промовчанням назва вашого локального сайту. Відкрийте папку веб-сайту та перейдіть до "/wp-content/themes/", де ви знайдете свою тему.

Тепер можна використовувати інструмент стиснення, такий як WinRAR, для створення ZIP-файлу на основі папки. Просто клацніть папку правою кнопкою миші та виберіть параметр, який дозволяє вам стиснути її, наприклад, «Додати до архіву».

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

Висновок

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

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

Думаю, ця стаття буде дуже корисною для новачків, які хочуть навчитися розробляти теми WordPress з нуля.

Ну, а в мене на цьому все — до швидких зустрічей!

Займаюся створенням сайтів на WordPress понад 6 років.Раніше працював у кількох веб-студіях та вирішив ділитися своїм досвідом на даному сайті. Пишіть коментарі, буду радий спілкуванню.

Як створити свою тему у WordPress?

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

Ви можете розробляти теми для себе чи для громадського користування.

Навіщо потрібні теми WordPress

Теми WordPress складаються з файлів та стилів, які разом визначають зовнішній вигляд сайту. Вони можуть відрізнятися між собою, дозволяючи користувачам швидко змінити дизайн веб-сайту. Але навіщо вам знадобиться своя тема?

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

Тема WordPress також надає деякі переваги.

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

Але навіщо створювати свою власну тему? Ось у чому головне питання.

• Це можливість дізнатися більше про CSS, HTML/XHTML та PHP.
• Це можливість показати свої вміння у CSS, HTML/XHTML та PHP.
• Це можливість творити.
• Це весело (здебільшого).
• Якщо ви надали свою тему в громадський доступ, ви отримаєте задоволення від того, що поділилися і дали щось натомість Спільноті WordPress (можете похвалитися!)

Стандарти створення тем

При написанні коду тем WordPress, дотримуйтесь наступних стандартів:

• Використовуйте коректно структурований PHP-код, що не містить помилок, і валідний HTML-код (див. Стандарти кодування WordPress).
• Використовуйте правильно складений, валідний CSS-код (див. стандарти кодування CSS).
• Дотримуйтесь рекомендацій щодо основ дизайну сайту.

Анатомія Теми

Теми WordPress знаходяться у піддиректоріях wp-content/themes/. Директорія теми містить таблиці стилів, файли шаблонів, файл додаткового функціоналу (functions.php) та картинки. Наприклад, тема під назвою "test" ймовірно буде розташована в директорії wp-content/themes/test/.

За промовчанням WordPress містить три теми, створені командою розробників Wordpress: "Twenty Fifteen", "Twenty Sixteen" та "Twenty Seventeen". Ці теми відрізняються між собою та використовують різні функції та теги для створення зовнішнього вигляду та сторінок сайту. Уважно вивчіть складові файли, щоб краще зрозуміти, як створити свою власну тему.

Тема WordPress складається з трьох основних типів файлів, на додаток до зображень. Перший – це таблиця стилів під ім'ям style.css, яка контролює вигляд сторінок сайту. Другий є файлом додаткового функціоналу (functions.php). Інші файли - це файли шаблонів, які визначають, як виводиться інформація з бази даних на веб-сторінку. Давайте розглянемо кожен тип окремо.

Таблиця стилів теми

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

Нижче наведено шаблон заголовка таблиці стилів (style sheet header) вашої теми Rose. Він повинен знаходиться на початку файлу стилів style.css, у перших рядках:

/* Theme Name: Rose Theme URI: домашня-сторінка-теми Description: короткий-опис-теми Author: ваше-ім'я Author URI: ваш-URI Template: напишіть-тут-найменування-батьківської-теми--необов'язкове-поле Version: номер-версії-необов'язкове-поле . Розгорнутий опис теми/Ліцензія-якщо потрібно. . */

Найпростіша тема включає лише файл style.css плюс зображення, якщо вони потрібні. Для створення такої теми необхідно у рядку заголовка Template: вказати ім'я батьківської теми. Наприклад, якщо ваша тема "Rose" походить (успадковує) від теми "test", напишіть у заголовку style.css наступний рядок:

Після додавання такого рядка до заголовка style.css всі шаблони теми "test" будуть успадковуватись вашою темою "Rose", в якій нічого немає, крім файлу з таблицею стилів style.cssі, можливо, малюнків. Ці файли потрібно помістити в каталог wp-content/themes/Rose.

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

Коментарі в заголовку style.css потрібні WordPress для ідентифікації теми та відображення її в Administration Panel підменю Design > Themes як встановлену тему, разом з іншими встановленими темами.

Примітка : Коли ви визначаєте батьківську тему, у рядку коментарів Template: Ви повинні використовувати ім'я каталогу теми. Наприклад, для використання теми "Default Wordpress Theme" не пишіть

Template: WordPress Default

оскільки "default" – це ім'я каталогу батьківської теми.

Файл додаткового функціоналу

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

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

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

Файли шаблонів теми

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

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

Базові шаблони

Мінімальна тема WordPress складається з двох файлів:

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

Якщо ви не додасте до теми власні файли шаблонів, WordPress буде використовувати вбудовані файли шаблонів за промовчанням. Наприклад, якщо у вашій темі немає файлів шаблонів: ні comments.phpні comments-popup.php, то WordPress буде автоматично використовувати стандартні wp-comments.php і wp-comments-popup.php файли шаблонів, згідно з ієрархією шаблонів Template Hierarchy. Ці шаблони за замовчуванням, швидше за все, не будуть відповідати стилям вашої теми, так що вам, ймовірно, доведеться розробити власні файли шаблонів. Ось основні файли, які зазвичай використовують для поділу виду сторінок (і які мають бути в каталозі теми):

Якщо ви розробили ці модульні файли шаблонів, ви можете додати їх шаблон в index.php (Головний файл-шаблон), і результат їх роботи з'явиться на сторінці у користувача. Щоб увімкнути або отримати ці модулі шаблонів там, де ви хочете, дотримуйтесь інструкцій.

• Для додавання шаблону header.php використовуйте get_header() template tag.
• Для додавання шаблону sidebar.php використовуйте get_sidebar() template tag.
• Для додавання шаблону footer.php використовуйте the get_footer() template tag.

Ось приклад включення шаблонів:

Більш детальну інформацію про те, як розробляти різні шаблони і як вони працюють, як генерувати різну інформацію в них, читайте у документації Templates

Вибір шаблонів на основі запитів

WordPress дозволяє програмісту використовувати різні варіанти для підключення шаблонів із набору шаблонів: по-перше, з використанням ієрархії шаблонів Template Hierarchy, по-друге - з використанням умовних тегів Conditional Tags усередині циклу обробки The Loop файлів шаблону.

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

Ви можете визначити шаблон для конкретної категорії, наприклад, додавши файл шаблону до теми category-6.php. Файл буде використаний замість index.php у тому випадку, коли ID категорії дорівнюватиме 6. Щоб дізнатися ID категорії, зайдіть у Manage > Categories, якщо у вас є доступ адміністратора в WordPress version 2.3 або нижче.

Починаючи з WordPress 2.5, стовпець ID був видалений з панелі адміністратора. Ви можете визначити ID категорії, натиснувши 'Edit Category' і переглянувши в URL значення cat_ID. Наприклад, кінець URL:

'. categories.php?action=edit&cat_ID=3'

де '3' – і є ID поточної категорії. Більш детально цей процес розглянуто у Category Templates

Якщо ваша тема повинна вміти ще більш докладно керувати шаблоном відображення, ніж рівень контролю, який забезпечує ієрархія шаблонів Template Hierarchy, ви можете використовувати умовні теги Conditional Tags. Умовні теги в основному перевіряють, якщо будь-який особливий стан вірний під час виконання WordPress Loop, у такому разі ви можете завантажити певний шаблон або відобразити деякі варіанти тексту на сторінці відповідно до цього стану.

Наприклад, для створення різних стилів, залежно від номера категорії, код може виглядати так:

Або, використовуючи об'єкт запиту, той самий алгоритм можна реалізувати по-іншому:

post; if ( $post->in_category('9') ) < include(TEMPLATEPATH . '/single2.php'); >else < include(TEMPLATEPATH . '/single1.php'); >?>

У будь-якому випадку обидва приклади коду будуть викликати різні шаблони, залежно від ID категорії. Умовні теги не обмежуються категоріями, див. статтю Conditional Tags, у ній розглянуті всі можливі варіанти.

Іконки типів файлів

Wordpress використовує іконки типів файлів (attachment files) у вашому блозі та в інтерфейсі Адмін-панелі, якщо ці іконки існують у вказаному місці.

Wordpress шукає ці файли у каталозі images поточної теми. (А в Wordpress 2.2, тема за замовчуванням має лише одну іконку, audio.jpg.)

Наприклад, для відображення іконки типу MIME type audio/mpeg, Wordpress буде шукати файл іконки у вказаному каталозі images поточної теми, він вибирає перший відповідний файл (див. опис функції wp_mime_type_icon):

1. my_theme /images/audio.jpg
2. my_theme /images/audio.gif
3. my_theme /images/audio.png
4. my_theme /images/mpeg.jpg
5. my_theme /images/mpeg.gif
6. my_theme /images/mpeg.png
7. my_theme /images/audio_mpeg.jpg
8. my_theme /images/audio_mpeg.gif
9. my_theme /images/audio_mpeg.png

Список стандартних файлів шаблонів теми

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

style.css Головний файл таблиці стилів Файл має бути у темі. обов'язково і обов'язково повинен містити описані вище коментарі у заголовку файлу. index.php Головний файл шаблонів Якщо ви використовуєте свої шаблони у своїй темі, цей файл. index.php обов'язковий. comments.php Шаблон коментарів. comments.php з теми за промовчанням. comments-popup.php Додає спливаюче меню для коментарів на JS. comments-popup.php з теми за промовчанням. home.php Шаблон головної сторінки блогу. single.php Шаблон сторінки одиночного поста. Використовується, коли потрібний конкретний пост. index.php, якщо у вашій темі немає файлу шаблону. page.php Шаблон окремої сторінки використовується для відображення запитаної сторінки Page. category.php Шаблон категорії категорії. Використовується при запиті категорії. author.php Шаблон автора блогу author template. date.php Шаблон виведення дати-часу. Використовується при запиті дати та часу. archive.php Шаблон архіву Використовується, коли запитується категорія, автор або дата. category.php, author.php і date.php для відповідних типів запитів. search.php Шаблон результатів пошуку. Використовується після пошуку. 404.php Шаблон для повідомлення про помилку 404 Not Found . Використовується, коли WordPress не може знайти повідомлення або сторінку, яка відповідає запиту.

Ці файли мають спеціальне значення у WordPress, оскільки вони використовуються для заміни index.php, коли вони є в каталозі теми, відповідно до ієрархії шаблонів Template Hierarchy, і коли надійшов відповідний запит; або ж відповідно до істинності умовних тегів Conditional Tag, коли функція типу is_*(); повертає 'true'.

Наприклад, якщо потрібно відобразити єдиний пост, функція is_single() повертає 'true', і в каталозі активної теми є файл шаблону single.php Цей шаблон використовується для створення сторінки.

Посилання на файли із шаблону

Тема WordPress за умовчанням є гарним прикладом техніки (вперше описаної Майклом Хелманном (Michael Heilemann) у Kubrick у макеті для WordPress 1.2), як запити відображаються у шаблонах.

Наступний код вставляє URL шаблону для виведення шаблону. Ви можете додати будь-яку додаткову інформацію для посилань на файли з вашої теми.

Наступний код додає URL каталогу, який містить файли стилів .css вашої теми, виведення шаблону. Ви можете додати будь-яку додаткову інформацію для посилань на файли вашої теми, особливо ті, які необхідні для таблиць стилів (щоб цього уникнути, використовуйте це замість ).

Константа TEMPLATEPATH містить абсолютний шлях до каталогу шаблонів текуш теми (без символу '/' в кінці).