У попередній публікації ми зупинилися на основних принципах і положеннях , які є важливими при створенні свого фреймворку тем. А сьогодні пропоную докладно вивчити процес створення власного фреймворку теми для сайту на основі WordPress, детальніше зупинившись на коді CSS , файлі functions.php та виборі сторінок шаблону.
При цьому важливо не забувати, що отриманий фреймворк повинен узагальнювати код настільки, щоб його можна було легко застосовувати в нових темах, а також щоб цей фреймворк вийшов самодостатнім як тема, яку вже можна застосовувати без доопрацювання.
Тож почнемо.
Тема та її CSS
Для початку нам треба зайнятися впорядкуванням коду в CSS . У моєму фреймворку є два основних компоненти 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 . Пам'ятайте, що черговість імпортування тут є дуже важливою, оскільки деякі речі можуть перевизначатися, і зміна черговості може внести плутанину в стилі, які ми вже визначили.
Функції.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