В попередній публікації ми зупинилися на основних принципах та положенняхякі важливі при створенні свого фреймворку тем. А сьогодні пропоную докладно вивчити процес створення власного фреймворку теми для сайту на основі 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 по деяким причинам.
По-перше, замість того, щоб всі налаштування відображення "скидати" на невідформатований стиль, цей файл створює стиль, який за замовчуванням задається вашим браузером. Наприклад, стандартно - це не тип шрифту, а в 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я викликаю останній шматочок нашого пазла тобто.css. Тут у нас будуть всілякі виправлення для IE. На даний момент, це просто поправки для .група и PNG. Пам'ятайте, що черговість імпортування тут дуже важлива, оскільки деякі речі можуть перевизначатися і зміна черговості може внести плутанину в стилі, які ми вже визначили.
Функції.php
Файл functions.php важливий не менше, ніж CSS. Сюди ми додаватимемо всі загальні функції, які ми плануємо використовувати по всій темі, а також усі визначення для сайдбарів, меню тощо. Я починаю з двох рядків:
define( 'TEMPPATH', get_bloginfo('stylesheet_directory'));
define( 'IMAGES', TEMPPATH. "/images");Це дві константи, які я досить часто використовую по всій темі.
перша - Шлях до шаблону; це зручно для посилання на конкретні теми файли. Я використовую 'каталог стилів_таблиці' замість 'каталог шаблону', тому що якщо ми будемо використовувати тему як батьківську, 'каталог шаблону' візьме не той шлях (а саме, цей замість підлеглого шляху).
Друга рядок використовує TEMPPATH, щоб створити шлях до папки /зображень/, яку ми також будемо використовувати дуже часто, чи в цій темі, чи в темі, згенерованій на її основі.
Після цих двох рядків я додаю підтримку динамічних меню і 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">Ви бачите, що тут не так вже й багато всього крім наших стандартних оголошень .
Я увімкнув
<!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
щоб переконатися, що наша тема сумісна з HTML5, далі в тілі сторінки створив базовий хедер із назвою сайту та навігацією, викликав сайдбар і розпочав «контентну» частину, укладену в певний шар #контейнер. Ви можете побачити, що мій спосіб розмітки відповідає тому, як мій 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