Як створити шаблон або тему на WordPress

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


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

Її код:

<! DOCTYPE html> <html> <head> <meta http-equiv = "content-type" content = "text / html; charset = UTF-8"> <title> Верстка </ title> <link type = "text / css "rel =" StyleSheet "href =" style.css "> </ head> <body> <div class =" wrapper "> <div class =" header "> Шапка сайту <ul> <li> <a href = "/"> Головна </a> </ li> <li> <a href="/"> Пункт 1 </a> </ li> <li> <a href="/"> Пункт 2 </ a> </ li> <li> <a href="/"> Пункт 3 </a> </ li> </ ul> </ div> <div class = "middle"> <div class = "content" > <h1> Заголовок сторінки </ h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, </ p> </ div> <div class = "sidebar"> <div class = "block"> <div class = "blockheader"> Тема блоку </ div > <div class = "blockcontent"> Вміст блоку </ div> </ div> </ div> <div class = "clr"> </ div> </ div> <div class = "footer"> А тут підвал , лічильники всякі </ div> </ div> </ body> </ html> html, body {padding: 0px; margin: 0px; text-align: center; background: # fafaf9; font-family: tahoma, arial; font-size: 14px; color: # 000;} td {font-family: tahoma, arial; font-size: 14px; color: # 000;} a: link {text-decoration: underline; color: # 2a5c90} a: active {text-decoration: none; color: # 2a5c90} a: visited {text-decoration: underline; color: # 2a5c90} a: hover {text-decoration: none; color: # 2a5c90} .wrapper {text-align: left; width: 1000px; background: # e0e0e0; margin: 0px auto;} .header {height: 80px; background: # e0e0e0; font-size: 25px; padding-top: 20px; padding-left: 30px; position: relative; border-bottom: 1px solid #fff;} .header ul {margin: 0; padding: 0; font-size: 16px; position: absolute; bottom: 10px;} .header ul li {float: left; margin-right: 25px; list-style: none;} h1 {margin: 10px 0;} .middle {padding: 10px 0;} .content {width: 730px; float: left; padding: 0 10px; border-right: 1px solid #fff;} .sidebar {width: 228px; float: right; padding: 0 10px;} .clr {clear: both;} .block {margin-bottom: 20px; } .Blockheader {width: 203px; height: 25px; font-weight: bold; padding: 0px; text-align: center;} .blockcontent {width: 203px; text-align: left; padding: 0px; margin: 0px 10px 10px 20px;} .footer {height: 30px; padding: 10px; border-top: 1px solid #fff;}

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

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

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

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

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

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

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

/ * Theme Name: Test Wp Tmpl Theme URI: http://blweb.ru Description: new tmpl Version: 1.0.0 Author: z-17 Author URI: http://blweb.ru License: GPL * / html, body {padding: 0px; margin: 0px; text-align: center; background: # fafaf9; font-family: tahoma, arial; font-size: 14px; color: # 000;} td {font-family: tahoma, arial; font-size: 14px; color: # 000;} a: link {text-decoration: underline; color: # 2a5c90} a: active {text-decoration: none; color: # 2a5c90} a: visited {text-decoration: underline; color: # 2a5c90} a: hover {text-decoration: none; color: # 2a5c90} .wrapper {text-align: left; width: 1000px; background: # e0e0e0; margin: 0px auto;} .header {height: 80px; background: # e0e0e0; font-size: 25px; padding-top: 20px; padding-left: 30px; position: relative; border-bottom: 1px solid #fff;} .header ul {margin: 0; padding: 0; font-size: 16px; position: absolute; bottom: 10px;} .header ul li {float: left; margin-right: 25px; list-style: none;} h1 {margin: 10px 0;} .middle {padding: 10px 0;} .content {width: 730px; float: left; padding: 0 10px; border-right: 1px solid #fff;} .sidebar {width: 228px; float: right; padding: 0 10px;} .clr {clear: both;} .block {width: 215px; margin: 10px auto; text-align: left; padding: 0px} .block .title {font-weight: bold; padding: 0px; text-align: center;} .footer {height: 30px; padding: 10px; border-top: 1px solid #fff; background: # f1f1f1;}

Файл header.php:

<! DOCTYPE html> <html> <head> <meta http-equiv = "content-type" content = "text / html; charset = UTF-8"> <title> <? Php wp_title ( ''); ?&gt; | <? Php bloginfo ( 'name'); ?&gt; </ Title> <link type = "text / css" rel = "StyleSheet" href = "<? Php bloginfo ( 'stylesheet_url');?&gt;"> <? Php wp_head (); // API Hook?&gt; </ Head> <body> <div class = "wrapper"> <div class = "header"> Шапка сайту <? Php wp_nav_menu (); ?> </ Div>

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

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

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

<Div class = "clr"> </ div> </ div> <div class = "footer"> А тут підвал, лічильники всякі </ div> </ div> <? Php wp_footer (); // API Hook?> </ Body> </ html>

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

<Div class = "sidebar"> <? Php if (function_exists ( 'dynamic_sidebar')) dynamic_sidebar ( 'sidebar'); ?> </ Div>

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

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

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

<? Php get_header ();?> <Div class = "content"> <? Php if (have_posts ()):?> <? Php while (have_posts ()): the_post (); // the loop?> <H2> <a href="<?=get_permalink();?> "> <? Php the_title (); ?> </a> </ h2> <? Php the_content ( ''); ?> <? Php endwhile; ?> <? Php wp_pagenavi (); ?> <? Php else:?> <H2 class = "center"> не знайдено </ h2> <p class = "center"> Спробуйте знову </ p> <? Php endif; ?> </ Div> <? Php get_sidebar ();?> <? Php get_footer ();?>
  • 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, це технічний файл, в якому ми можемо вказувати настройки для нашого сайту, писати власні функції і робити ще багато чого корисного. У нас він виглядає так:

<? Php if (function_exists ( 'register_sidebar')) register_sidebar (array ( 'name' => 'Сайдбар', 'id' => 'sidebar', 'before_widget' => '<div class = "block">', 'after_widget' => '</ div>', 'before_title' => '<div class = "title">', 'after_title' => '</ div>',));

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

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

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

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

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

DOCTYPE html> <html> <head> <meta http-equiv = "content-type" content = "text / html; charset = UTF-8"> <title> <?
Php wp_title ( ''); ?
Gt; | <?
Php bloginfo ( 'name'); ?
Gt; </ Title> <link type = "text / css" rel = "StyleSheet" href = "<?
Php bloginfo ( 'stylesheet_url');?
Gt;"> <?
Php wp_head (); // API Hook?
Gt; </ Head> <body> <div class = "wrapper"> <div class = "header"> Шапка сайту <?
Php wp_nav_menu (); ?

Уважаемые партнеры, если Вас заинтересовала наша продукция, мы готовы с Вами сотрудничать. Вам необходимо заполнить эту форму и отправить нам. Наши менеджеры в оперативном режиме обработают Вашу заявку, свяжутся с Вами и ответят на все интересующее Вас вопросы.

Или позвоните нам по телефонам: (048) 823-25-64

Организация (обязательно) *

Адрес доставки

Объем

Как с вами связаться:

Имя

Телефон (обязательно) *

Мобильный телефон

Ваш E-Mail

Дополнительная информация: