Ця запис написана мною в 2014 році. В ті часи дерева були високими, а долар коштував менше 40 рублів. З тих пір пройшло багато часу і багато чого змінилося. Враховуйте це, читаючи.

Насправді, шаблон для WordPress без особливих надмірностей створити дуже просто, потрібно тільки знати структуру шаблонів, і трохи функцій WordPress.
Взагалі правильніше називати тема, а не шаблон, але це нікому не важливо. Нехай початково у нас є деяка верстка, яку потрібно «натягнути» на WP. Цим ми і займемося.
Ось така буде вихідна верстка:

Її код:

Найпростіша верстка для прикладу.

Що б движок WP зрозумів, що перед ним тема, вона повинна відповідати деяким правилам. Ось приблизний набір файлів:

• style.css - основний файл стилів, і розташування опису теми (про це трохи пізніше)
• index.php - основний файл теми, якщо немає якогось іншого файлу, то використовується він
• header.php, footer.php - має бути з назви зрозуміло навіщо вони
• sidebar.php - для сайдбара, якщо їх декілька, до назви додають префікси через знак _
• screenshot.png - скріншот теми для адмінки розміром 880x660px, за аналогією з дефолтними темами (цей файл не обов'язковий)
• functions.php - файл, де ми реалізуємо різні функції, підключаємо сайдбарі і робимо інші важливі для нас речі.

Це мінімальний набір. За фактом окремих шаблонів сторінок може бути скільки завгодно, тому для кращого розуміння стуктрури теми WP, і того, для яких сторінок які файли будуть використовуватися, є така схема (кликабельна):

Як бачите, таке розмаїття дозволяє дуже гнучко налаштовувати висновок чого завгодно.

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

Отже, почнемо розбивати нашу верстку на шаблони, css файл буде виглядати у нас так:

Файл header.php:

Тут потрібно пояснити кілька функцій:

• wp_head () - це хук, через який підключаються всякі css і js файли і виводяться інша необхідна інформація
• wp_title () - виводить заголовок сторінки
• bloginfo ( 'name') - виводить назву блогу
• bloginfo ( 'stylesheet_url') - виводить шлях до основного css файлу, сам шлях до теми буде виглядати приблизно так: site / wp-content / themes / назва теми /. Так само є bloginfo ( 'template_directory') - виводить шлях до поточної теми.
• wp_nav_menu ($ args) - виводить меню, параметри якого вказані в масиві $ args і передаються як аргумент, у нас його немає, тому в функції використовуються значення за умовчанням, я не буду зараз докладно на цьому зупинятися, але це легко гугл.

А ось код підвалу, він не сильно відрізняється від коду в верстці:

Єдине, функція wp_footer () - хук, який так само виводить різний службовий код (наприклад адмін бар виводиться саме їм).
А ось так буде виглядати сайдбар:

Конструкція означає, що якщо існує dynamic_sidebar, то ми її викликаємо з аргументом »sidebar» і у нас в результаті виводиться сайдбар з файлу sidebar.php. Їх може бути кілька, який виводити визначається по що передається аргументу.

Блоки в сайдбарі будуть встановлюватися через адмінку, вкладка «Зовнішній вигляд» -> «Віджети».

Наступний файл це index.php, основний файл шаблону, який показує вид будь-якої сторінки, якщо він не перевизначений іншими файлами (див. Схему вище):

• get_header () - виводить header.php;
• Після if (have_posts ()) починається стандартний цикл WP, що дозволяє виводити записи на сторінку (при тому не має значення 1 запис (тобто це її сторінка), або список записів (сторінка категорії, наприклад)). Після while йде блок, який показує вид виведення кожного запису:
• get_permalink () - посилання на сторінку записи;
• the_title () - заголовок;
• the_content ( '') - текст;
• Після завершення циклу варто wp_pagenavi () - висновок навігації, якщо її можливо вивести (посторінкова навігація).

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

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

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

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

• name - ім'я (в адмінці використовується);
• id - використовується для виклику потрібного сайдбара з шаблону;
• before_widget і after_widget - код, що виводиться перед і після виджетом;
• before_title і afret_title - аналогічно, код, що виводиться перед і після заголовка віджета.

Ось ніби і все, найпростіша тема готова. Для її установки потрібно всього лише запакувати її в zip архів, і завантажити через адмінку вашого сайту на WP ( «Зовнішній вигляд» -> «Теми» -> «Додати нову»).

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

Якщо щось не зрозуміло - задавайте питання в коментарях.