В предыдущей публикации мы остановились на основных принципах и положениях, которые важны при создании своего фреймворка тем. А сегодня предлагаю подробно изучить процесс создания собственного фреймворка темы для сайта на основе WordPress, более подробно остановившись на коде CSS, файле functions.php и выборе страниц шаблона.
При этом важно не забывать, что полученный фреймворк должен обобщать код настолько, чтобы его можно было с легкостью применять в новых темах, а также чтобы этот фреймворк получился самодостаточным как тема, которую уже можно применять без доработки.
Итак, начнем.

Тема и ее CSS

Для начала нам надо заняться упорядочиванием кода в CSS. В моем фреймворке есть 2 основных компонента CSS: файл под названием style.css (обязательный файл) и папка /css/, в которой находится все, что "привязано" к CSS для моего фреймворка. В файле style.css есть 2 секции: дефиниции из темы и запросы к моей текущей верстке и параметрам CSS. Общий вид файла style.css - вот такой:

/*
Theme Name: WordPress 3.0 Boiler Plate
Theme URI: http://casabona.org/
Description: A Boiler Plate  Theme for WP 3.0. Now with more HTML5!
Version: 1.5
Author: Joe Casabona
Author URI: http://www.casabona.org
*/

@import url("css/reset.css");
@import url("css/master.css");
@import url("css/ie.css");

После определения параметров темы вы видите три строки с @import. Вот в этой части начинаются наиболее существенные правки в CSS. Файл reset.css задает "очистку" настроек CSS. Название я изменил на normalize.css по нескольким причинам.

Во-первых, вместо того, чтобы все настройки отображения "сбрасывать" на неотформатированный стиль, этот файл создает стиль, который по умолчанию задается вашим браузером. К примеру, стандартно <strong> — это не тип шрифта, а в normalize.css он задает жирный шрифт.

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

Примечание: В этой теме я использую HTML5. Он работает в браузерах Firefox, Chrome, Safari, IE7-9.

После того, как reset.css вызвана, я вызываю мою основную таблицу стилей master.css. В ней вся суть: здесь будут все мои новые стили по умолчанию. Я не буду приводить весь CSS, но я прикрепляю файлы, чтобы вы могли просмотреть.

Скачать исходники

Создавая CSS, я задаю стили, которые обычно остаются такими же от сайта к сайту: вроде ширины общего контейнера, мои стили навигации, как я размещаю мой сайдбар и т.п. Также я обычно использую границы и отступы, кратные 15, для моих абзацев и пунктов списка, так что для них у меня тоже есть базовые определения.

Я также прописываю стили по умолчанию для некоторых распространенных классов WordPress, включая сгенерированные редактором. Это:

.navigation, .post, .postmetadata, ol.commentlist, ol.commentlist li, ol.commentlist li .vcard, ol.commentlist li .vcard img, form#commentform, form#commentform p label, form#commentform input, form#commentform textarea, form#commentform textarea, form#commentform input[type="submit"], img.centered, .alignright, .alignleft, .aligncenter, div.aligncenter, .wp-caption, .wp-caption img, .wp-caption p.wp-caption-text

Последняя вещь, которую я добавляю в master.css, — это класс, который делает слои «самоочищающимися». Это убирает необходимость слоя .clearfix.

/* self-clear floats */
.group:after {
	content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

После того, как вызван master.css, я вызываю последний кусочек нашего паззла — ie.css. Здесь у нас будут всевозможные поправки для IE. В данный момент, это просто поправки для .group и PNG. Помните, что очередность импортирования здесь очень важна, поскольку некоторые вещи могут переопределяться, и изменение очередности может внести путаницу в стили, которые мы уже определили.

Functions.php

Файл functions.php важен не менее, чем CSS. Сюда мы будем добавлять все общие функции, которые мы планируем использовать по всей теме, а также все определения для сайдбаров, меню и т.д. Я начинаю с двух строк:

define( 'TEMPPATH', get_bloginfo('stylesheet_directory'));
define( 'IMAGES', TEMPPATH. "/images");

Это — две константы, которые я достаточно часто использую по всей теме.

Первая – путь к шаблону; это удобно для ссылки на конкретные файлы темы. Я использую ‘stylesheet_directory’ вместо ‘template_directory’, потому что если мы будем использовать тему как родительскую, ‘template_directory’ возьмет не тот путь (а именно, этот вместо подчиненного пути).

Вторая строка использует TEMPPATH, чтобы создать путь к папке /images/, которую мы также будем использовать очень часто, в этой ли теме или в теме, сгенерированной на ее основе.

После этих двух строк я добавляю поддержку динамических меню и 2 сайдбаров с виджетами: первый – основной и второй – сайдбар "на всякий случай" (в большинстве случаев, я буду использовать его в футере моей темы). В завершение я создал две другие функции, которые я, как выяснил, регулярно использую:

function print_post_nav(){
?>
		<div class="navigation group">
			<div class="alignleft"><?php next_posts_link('« Next') ?></div>
			<div class="alignright"><?php previous_posts_link('Previous »') ?></div>
		</div>
<?php

}

function print_not_found(){
?>
		<h3 class="center">No posts found. Try a different search?</h3>
		<?php get_search_form(); ?>
<?php
}

Первая выводит навигацию по постам и должна использоваться вне цикла . То есть, мы можем использовать ее на любой странице со списком постов (главная страница, поиск, любой специфический шаблон с постами).

Вторая функция создает область «Пост не найден», которую я использую практически на каждой шаблонной странице.

Конечно, здесь нет ограничения на количество созданных функций. Здесь просто функции, которые я часто использую.

Страницы шаблонов

Далее следуют шаблонные страницы. Мы рассмотрим 4 страницы: header.php, footer.php, single.php и page.php. Остальные – по сути производные страницы или отдельные шаблоны.

Шапка и Подвал

Так выглядит наш файл header.php:

<!html>

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head>
<title><?php bloginfo('name'); ?> | <?php wp_title(); ?> </title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

<?php wp_head(); ?>

</head>
<body>
	<div id="container" class="group">

		<!--Header - Name of Item Here-->
		<header class="group">
			<h1><a href="<?php bloginfo('home'); ?>"><?php bloginfo('name'); ?></h1>

			<nav>
				<?php wp_nav_menu( array('menu' => 'Main' )); ?>
			</nav>
		</header>

		<!-- End Header -->

		<!-- Main Area -->
		<?php get_sidebar(); ?>

		<div id="content" class="group">

Вы видите, что здесь не так уж много всего помимо наших стандартных обьявлений <header>.

Я включил

<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

чтобы убедиться, что наша тема совместима с HTML5, далее в теле страницы создал базовый хедер с названием сайта и навигацией, вызвал сайдбар и начал «контентную» часть, заключенную в предопределенный слой #container. Вы можете увидеть, что мой способ разметки соответствует тому, как задан мой CSS.

Обратите внимание: Я не говорю о шаблоне sidebar.php, потому как он такой же, как любой стандартный сайдбар: проверьте, определена ли область для виджетов; если нет – выведите несколько виджетов по умолчанию.

То же самое для нашего футера:

<?php print "\n\n"; ?>

</div>

<!--Footer Information-->
		<footer class="group">

			<?php if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('Sidebar2') ) : ?>
			<?php endif; ?>

			<p>© <a href="<?php bloginfo('home'); ?>"><?php bloginfo('name'); ?></p>
		</footer>
		<!-- End Footer Information -->

	</div>
	<!--end container-->

	<?php wp_footer(); ?>

</body>
</html>

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

Код для Single и Page

Эти файлы тоже достаточно просты. В каждом из них я постарался убрать все ненужное, оставив только то, что вы ожидаете увидеть.

В файле single.php код будет таким:

<?php get_header(); ?>

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

		<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
			<h2><?php the_title(); ?></h2>

			<div class="entry">
				<?php the_content('<p class="serif">Read the rest of this entry »</p>'); ?>

				<p class="postmetadata alt">
					<small>
						Posted on <?php the_time('l, F jS, Y') ?> at <?php the_time() ?> | Category <?php the_category(', ') ?> | <?php the_tags( 'Tags: ', ', ', '|'); ?>
						<?php if ( comments_open() && pings_open() ) {
							// Both Comments and Pings are open ?>
							<a href="#respond">Comment</a> |

						<?php } elseif ( !comments_open() && pings_open() ) {
							// Only Pings are Open ?>
							Comments are currently closed |

						<?php } elseif ( comments_open() && !pings_open() ) {
							// Comments are open, Pings are not ?>
							<a href="#respond">Comment</a> |

						<?php } elseif ( !comments_open() && !pings_open() ) {
							// Neither Comments, nor Pings are open ?>
							Both comments and pings are currently closed. |

						<?php } edit_post_link('Edit this entry','','.'); ?>

					</small>
				</p>
			</div>
		</div>

	<?php comments_template(); ?>

	<div class="navigation group">
			<div class="alignleft"><?php previous_post_link('« %link') ?></div>
			<div class="alignright"><?php next_post_link('%link »') ?></div>
		</div>

	<?php endwhile; else: ?>

		<?php print_not_found(); ?>

<?php endif; ?>

<?php get_footer(); ?>

Теперь у нас есть хедер, футер и наш цикл. Я оставил классы, которые обычно есть в большинстве тем WordPress для того, чтобы люди могли просто определить эти классы в CSS без необходимости изменять single.php. Я также добавил стандартную мета-информацию поста и область комментариев.

Обратите внимание, я не использую навигацию по постам, которую я написал в functions.php, потому что это "внутренность" цикла, и эта функция может вести себя непредсказуемо.

Шаблон page.php немного короче:

<?php get_header(); ?>

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<h2><?php the_title(); ?></h2>

			<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>

			<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

	<?php endwhile; endif; ?>

<?php get_footer(); ?>

Опять-таки: я написал только необходимое. Никаких лишних классов или информации. Страницы сайтов сфокусированы на контенте, поэтому я старался максимально упростить этот шаблон.

Другие шаблоны

Очевидно, что я не могу описать здесь все шаблоны страниц; я советую вам посмотреть прикрепленные исходники. В каждом шаблоне я постарался убрать то, что я не использую, в некоторых случаях я оставил шаблон таким же, как по умолчанию в WordPress.

Готовая тема выглядит так: Фреймворк WordPress Boilerplate

Выводы

Я сделал общий обзор с некоторыми примерами создания фреймворка темы. Просмотрев мой пример кода, вы увидите, что я не старался сделать очень много с каким-либо отдельным файлом шаблона. Если я буду добавлять что-либо в эту тему, я буду добавлять это в файл functions.php, потому что файлы шаблонов должны оставаться базовыми – особенно если мы собираемся перезаписать их при создании новой темы на основе данной.

Источник: WP.TutsPlus.com

Вам понравился материал?

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.