Когда я в последний раз оставлял вас , мы рассмотрели некоторые принципы проектирования, исследовали другие фреймворки и пришли к неизбежному выводу, что будем создавать свои собственные. В этом уроке мы рассмотрим шаги, которые я предпринял, чтобы создать то, что я назвал моей WordPress Boilerplate, подробно рассмотрим CSS, functions.php и выберите страницы шаблонов.
При разработке важно помнить, что мы хотим придерживаться этого общего принципа, чтобы его можно было легко адаптировать / использовать в будущих темах; Я также сделал своей личной целью сделать это достаточно хорошим, чтобы выдержать эту тему. Давайте помнить, что идти вперед.
Тема CSS
Первое, что нам нужно сделать, это организовать CSS. В моей WordPress Boilerplate есть 2 основных компонента CSS: style.css, который требуется, и папка / css /, которая включает в себя весь CSS для фреймворка. В style.css вы найдете два раздела: определение темы и вызовы моего настоящего CSS. Весь файл style.css выглядит так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
/*
Theme Name: WordPress 3.0 Boiler Plate
Theme URI: http://casabona.org/
Description: A Boiler Plate Theme for WP 3.0.
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 (соглашения об именах благодаря Дэну Седерхолму из SimpleBits). Это суть дела! Все мои стили по умолчанию после сброса будут здесь. Я не буду вставлять весь CSS здесь, но я включил файлы для просмотра. Создавая CSS, я помнил о стилях, которые обычно остаются одинаковыми для меня от сайта к сайту; такие вещи, как ширина всего контейнера, мои стили навигации, расположение моей боковой панели и т. д. Я также обычно использую отступы / поля, кратные 15, для своих элементов параграфа и списка, поэтому у меня также есть некоторые базовые определения для них.
Я также включил стили по умолчанию для некоторых распространенных классов WordPress, в том числе сгенерированных редактором 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 — это класс, который делает div «самоочищающимся». То есть это устранит необходимость в .clearfix div (опять же, спасибо Дэну Седерхольму за это).
|
1
2
3
4
5
6
7
8
|
/* self-clear floats */
.group:after {
content: «.»;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
|
После вызова master.css я вызываю последний фрагмент нашей головоломки, т.е. .css. Это где все исправления IE будут идти. Сейчас это просто исправление для .group и исправление PNG. Имейте в виду, что порядок импорта здесь очень важен, так как некоторые вещи могут быть переопределены, и изменение порядка может испортить стили, которые мы определили.
functions.php
Не менее важным, чем CSS, является файл functions.php. Здесь мы добавим любые общие функции, которые мы планируем использовать по всей теме, а также любые определения для боковых панелей, меню и многого другого. Я начинаю это с двух строк:
|
1
2
|
define( ‘TEMPPATH’, get_bloginfo(‘stylesheet_directory’));
define( ‘IMAGES’, TEMPPATH. «/images»);
|
Эти две константы я использую довольно часто по всей теме. Первый путь шаблона; это хорошо для ссылок на файлы, относящиеся к теме. Я использовал «stylesheet_directory» вместо «template_directory», потому что, если мы будем использовать это как родительскую тему (скоро будет учебное пособие), «template_directory» получит неправильный путь (а именно этот вместо пути ребенка). Во второй строке фактически используется TEMPPATH для создания пути к каталогу / images /, который мы также будем использовать очень часто, будь то в этой теме или в дочерних темах.
После этих двух строк я добавляю поддержку динамических меню и 2 боковых панелей с виджетами; один является основной боковой панелью, а второй — второй «на всякий случай». Обычно я буду использовать его в нижнем колонтитуле моей темы. Наконец, я создал две другие функции, которые я регулярно использовал:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
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.
<?php get_search_form();
<?php
}
|
Первый печатает навигацию поста и должен использоваться за пределами цикла. Это означает, что мы можем использовать его на любой странице со списком сообщений (индекс, поиск и любой пользовательский шаблон типа сообщения). Вторая функция создает область «Записи не найдены», которую я использовал почти на каждой странице шаблона.
Конечно, нет ограничений на количество создаваемых здесь функций. Это были те, которые я часто использовал.
Страницы шаблона
Далее идут страницы шаблона. Мы рассмотрим 4 конкретные страницы: header.php, footer.php, single.php и page.php. Другие в основном являются производными от страницы или отдельных шаблонов.
Верхний и нижний колонтитулы
Ниже представлен весь наш файл header.php:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html>
<html xmlns=»http://www.w3.org/1999/xhtml» dir=»ltr» lang=»en-US»>
<head>
<title><?php bloginfo(‘name’);
<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’);
<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, а затем в теле создайте базовый заголовок с именем сайта и навигацией, вызовите боковую панель и запустите область «содержимого», завернутую в предопределенный div #container. Вы можете видеть, что способ, которым я выкладываю вещи, согласуется с тем, как определяется мой CSS (например, боковая панель, которую я плаваю справа, находится над основной областью содержимого).
Примечание: я не говорю о шаблоне sidebar.php, потому что он такой же, как и у всех стандартных боковых панелей: проверьте, определена ли область виджета; если нет, распечатайте некоторые виджеты по умолчанию.
То же самое касается нашего нижнего колонтитула:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<?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’);
</footer>
<!— End Footer Information —>
</div>
<!—end container—>
<?php wp_footer();
</body>
</html>
|
Я печатаю два переноса строк, в основном, чтобы код выглядел красиво, заканчиваю div содержимого, затем начинаю с нижнего колонтитула. Я включаю вторичную боковую панель в нижний колонтитул, так как это то, чем я часто занимаюсь, затем получаю некоторую общую информацию об авторских правах и завершаю тему, закрывая все открытые теги. Опять же, я стараюсь не делать слишком много с нижним колонтитулом, так как это фреймворк, но я предоставляю некоторые опции для добавления информации в нижний колонтитул, если мне нужно.
Одна страница
Эти файлы также довольно простые. Я пытался вырезать большую часть ненужной информации, оставляя информацию, которую вы ожидаете увидеть на каждой. single.php должен выглядеть знакомо:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<?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();
<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() ?> |
<?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;
<?php print_not_found();
<?php endif;
<?php get_footer();
|
У нас есть верхний и нижний колонтитулы и наш цикл. Я сохранил классы, которые являются общими для большинства тем WordPress, чтобы люди, которые используют это, могли просто определять эти классы в CSS без необходимости изменения шаблона single.php. Я также включаю стандартные метаданные публикации и область комментариев. Обратите внимание, что я не использую функцию пост-навигации, которую я пишу в functions.php. Это потому, что это внутри цикла, и эта функция будет работать непредсказуемо.
Шаблон page.php немного короче:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<?php get_header();
<?php if (have_posts()) : while (have_posts()) : the_post();
<h2><?php the_title();
<?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;
<?php get_footer();
|
Опять же, я включаю только то, что нужно. Там нет дополнительных классов или информации. Страницы на веб-сайтах сосредоточены на контенте, поэтому я постарался максимально упростить этот шаблон.
Другие шаблоны
Очевидно, я не могу охватить каждую страницу шаблона здесь; Я предлагаю вам проверить включенный источник. Для каждого шаблона я пытался вырезать то, что не использовал, и в некоторых случаях я оставлял шаблоны вместе (как информация по умолчанию для WordPress). Поскольку мы все кодируем по-разному, то, как я добавляю, может не подходить вам лучше всего, но я постарался сделать это как можно более общим.
Вот как выглядит тема из коробки:
Тема WordPress Boilerplate
Вывод
Итак, вот обзор с некоторыми примерами создания каркаса темы. Глядя на мой пример кода, вы можете видеть, что я не пытался сделать слишком много с одним файлом шаблона. Если я собираюсь что-то добавить к этой теме, это будет в файле functions.php, потому что файлы шаблонов должны оставаться базовыми, особенно если мы просто перезаписываем их при создании дочерней темы. Кстати, это то, что мы будем делать в следующий раз, так что следите за обновлениями!