В предыдущей публикации мы остановились на основных принципах и положениях, которые важны при создании своего фреймворка тем. А сегодня предлагаю подробно изучить процесс создания собственного фреймворка темы для сайта на основе 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 "nn"; ?>
</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
Комментарии к записи: 0