Як створити просту WordPress-тему на основі Twenty Eleven

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

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

Завантажити вихідні

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

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

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

Що таке дочірня тема?

Наведу витримку з WordPress Codex:

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

Крім створення "дочірніх тем", є ще 2 інших способу створення тем.

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

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

Дочірня тема WordPress - це тема, яка ґрунтується у своїй функціональності на іншій темі, яка називається "батьківськоїПри цьому дочірня тема дозволяє вам вносити зміни в її код і розширювати цю функціональність.

У цьому посібнику користувача ми створимо дочірню тему на основі теми, що пропонується за умовчанням - Двадцять одинадцять.

Крок 1. Файли встановлення / обов'язкові

Для початку нам потрібно оновити WordPress до версії 3.2 + або завантажити и встановити темуДвадцять одинадцятьми помістимо в окрему папку. У / Wp-зміст / теми / створюємо папку 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 с Палій або Інструменти розробника Google Chrome, які вам допоможуть у вирішенні цієї задачі. А тепер додайте наступний код у файл 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, ми виконаємо цю функцію до того, як аналогічна буде виконана у батьківській темі.

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

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

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

Додайте наступний код у файл 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 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
 */

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

<?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, ми додали секцію з класом ласкаво просимо. Перейдемо тепер у файл 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/