Як створити просту 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 . У ньому ми й пропишемо, що наша тема буде дочірньою. Створимо файл style.css у папці twentyeleven-child і вставимо в нього наступний код:

/*
Theme Name:     Twenty Eleven Child
Theme URI:      http: //example.com/
Description:    Child theme for the Twenty Eleven theme
Author:         Your Name
Author URI:     http: //your-site.com/
Template:       twentyeleven
Version:        0.1.0
*/

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

Ще одна примітка, перш ніж ми приступимо до створення кастомізованого CSS.

Наша дочірня тема та її файл style.css повністю " перепишуться " поверх батьківської. Тому після того, як ви вкажете інформацію про тему, перший рядок коду повинен імпортувати код батьківського файлу CSS:

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

Тепер ми готові вносити зміни до батьківського CSS . Поки ми збираємося зробити кілька досить простих змін, я б рекомендував вам використовувати Firefox з Firebug або Google Chrome Developer Tools , які вам допоможуть у вирішенні цієї задачі. А тепер додайте наступний код у файл style.css під рядком @import :

a{ color: #254655; }

body{
background: #727D82;
}

header#branding{
background: #29305C;
color: #B3BDC1;
}

header#branding h1, header#branding h2, header#branding a{ color: #B3BDC1; }

#respond{ background: #E7DFD6; }

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

Крок 2. Functions.php

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

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

Хоча functions.php є обов'язковим для дочірньої теми, він все-таки є найкращим способом додати власну функціональність до вашої нової теми. І на відміну від style.css , який переписується поверх "батьківського" файлу style.css , файл дочірньої теми functions.php буде завантажуватися до завантаження аналогічного файлу з "батьківської" теми.

Ми створимо блок віджету для заголовка сторінки та перекриємо одну із вбудованих функцій із теми Twenty Eleven. Для початку додамо місце для віджету. Створимо functions.php і додамо наступний код:

<?php
register_sidebar( array(
	'name' => __( 'Header Widget', 'twentyeleven-child' ),
	'id' => 'header-widget',
	'before_widget' => '<div id="%1$s" class="widget %2$s">',
	'after_widget' => "</div>",
	'before_title' => '<h3 class="widget-title">',
	'after_title' => '</h3>',
) );
?>

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

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

Давайте подивимося на приклад того, як виглядає той код, який ми повинні змінити в twentyeleven/functions.php :

if ( ! function_exists( 'twentyeleven_posted_on' ) ) :
/**
 * Prints HTML with meta information for the current post-date/time and author.
 * Create your own twentyeleven_posted_on to override in a child theme
 *
 * @since Twenty Eleven 1.0
 */
function twentyeleven_posted_on() {
	printf( __( '<span class="sep">Posted on </span><a title="%2$s" href="%1$s" rel="bookmark"><time class="entry-date" datetime="%3$s" pubdate="">%4$s</time></a><span class="by-author"> <span class="sep"> by </span> <span class="author vcard"><a class="url fn n" title="%6$s" href="%5$s" rel="author">%7$s</a></span></span>', 'twentyeleven' ),
		esc_url( get_permalink() ),
		esc_attr( get_the_time() ),
		esc_attr( get_the_date( 'c' ) ),
		esc_html( get_the_date() ),
		esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
		sprintf( esc_attr__( 'View all posts by %s', 'twentyeleven' ), get_the_author() ),
		esc_html( get_the_author() )
	);
}
endif;

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

Примітка для розробників нових тем: 

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

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

Додайте наступний код у файл functions.php :

function twentyeleven_posted_on() {
	$link= esc_url( get_permalink() );
	$title= esc_attr( get_the_title() );
	$time= esc_attr( get_the_time() );
	$dateGMT= esc_attr( get_the_date( 'c' ) );
	$date= esc_html( get_the_date() );
	$authorURL= esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) );
	$author= esc_html( get_the_author() );

	echo ('<span class="sep">Posted on</span> <a title="'.$title.'" href="'.$link.'" rel="bookmark"><time class="entry-date" datetime="%3$s" pubdate="">'.$date.' at '. $time.'</time></a> <span class="sep"> by </span> <span class="author vcard"><a class="url fn n" title="'.$author.'" href="'.$authorURL.'" rel="author">'.$author.'</a></span>');

}

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

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

Крок 3. Файли шаблону

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

Ми просто назвемо файли теми, як зазвичай, тим самим ім'ям, як і той файл, який ми хочемо замінити з батьківської теми. Ці файли, наприклад style.css , будуть виконуватися перед аналогічними батьківськими файлами.

Ми змінимо шапку та створимо шаблон нової сторінки. Почнемо з шапки . Створимо файл header.php , скопіюємо код із файлу twentyeleven/header.php і вставимо його в наш новий header.php . Як тільки ми це зробимо, нам потрібно замінити рядки 104 та 109 ( <?php get_search_form(); ?> ) викликом функції:

<?php techild_header_widget(); ?>

А тепер додамо наступний код у файл functions.php :

function techild_header_widget(){
	if ( ! dynamic_sidebar( 'header-widget' ) ) :
		get_search_form();
	endif;
}

Цей код допоможе нам відображати віджети у шапці (якщо вони є); а якщо їх немає, то в цьому блоці буде відображатися рядок пошуку. І нарешті, нам треба трохи поправити CSS , щоб наша шапка " потоваришувала " з віджетами. Додамо трохи коду в style.css :

header#branding .widget{
position: absolute;
top: 2em;
right: 7.6%;
}

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

Тепер створимо шаблон нової сторінки . Створюємо файл twentyeleven-child/page-welcome.php і копіюємо код із теми Twenty Eleven з файлу page.php (twentyeleven/page.php). Для початку нам треба змінити коментарі у верхній частині, щоб вказати WordPress, що це шаблон сторінки. Замініть коментарі вгорі наступним кодом:

/**
 * Template Name: Welcome
 */

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

<?php
/**
 * Template Name: Welcome
 */

get_header(); ?>

		<div id="primary">
			<div class="welcome">
				<p>Welcome to my website! I'm running a modification of WordPress' Twenty Eleven theme. Feel free to poke around a bit!</p>
			</div>
			<div id="content" role="main">

				<?php the_post(); ?>

				<?php get_template_part( 'content', 'page' ); ?>

				<?php comments_template( '', true ); ?>

			</div><!-- #content -->
		</div><!-- #primary -->

<?php get_footer(); ?>

Пам'ятайте, що між секціями #primary та #content ми додали секцію з класом welcome . Перейдемо тепер у файл style.css і там трохи попрацюємо над CSS :

.welcome{
margin: 15px 60px;
background: #fbffd8;
border: 1px solid #f6ff96;
padding: 15px;
text-align: center;
}

В результаті вийшло ось що:

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

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

Варто додати, що створюючи дочірню тему, ви прив'язуватимете свої файли та зображення до неї, а для цього треба використовувати

get_stylesheet_directory_uri()

замість

get_template_directory_uri()

оскільки остання функція викликає папку з головною, а чи не дочірньою, темою.

Джерело: WP.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/