Как «с нуля» кодировать тему WordPress 3.0

Дата публикации: 2011-09-19

тема wordpress 3.0

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

тема wordpress 3.0

Устанавливаем Work Station

Для начала работы с этим учебником нужно установить на свой компьютер сервер, используя XAMPP или WAMP (особенно если вы работаете на PC) или MAMP, если вы работаете на Mac’е. Эти инструменты дают возможность создать для WordPress локальную тестовую среду и сделать так, чтобы вам не приходилось во время работы над проектом постоянно пересылать файлы через FTP.

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

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее

Подготовка необходимых папок и файлов

В папке с установочным файлом своего WordPress’а перейдите к wp-content/themes/ и создайте папку с названием "New 3.0 Theme" (новая тема 3.0). Именно тут в течение работы с учебником мы будем держать все свои файлы. Теперь создайте следующие файлы и папки:

дерево папок

/images
style.css
header.php
index.php
single.php
footer.php
archive.php
page.php
sidebar.php
functions.php

Шаг 1 — Style.css

В style.css будут находиться все элементы стилей нашего шаблона WordPress. Однако сначала мы используем его для объявления названия своего шаблона, а также имени автора и ссылки, описания и версии. При создании темы WordPress помните о том, что style.css – это один из двух файлов, нужных для работы темы, а второй, который мы создадим попозже – это index.php.

/*
Theme Name: New WP 3.0
Theme URI: http://www.onextrapixel.com
Description: A clean and minimal theme that is completely compatible with WordPress 3.0
Author: Keenan Payne
Author URI: http://slackrmedia.com
Version: 1.0
*/

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

Теперь создадим несколько основных описаний, которые позже реализуем в нескольких PHP-файлах шаблона.

body{
 font-family: Arial, Helvetica, Georgia, Sans-serif;
 font-size: 12px;
 background: #d9d9d9;
 color: #000000;
}
 
a:link, a:visited{
 text-decoration: none;
 color: #000000;
}
 
a:hover{
 color: #5f5f5f;
}
 
h1 {
 font-size: 54px;
}
 
h3 {
 font-size: 24px;
}
 
#wrapper{
 margin: 0 auto;
 width: 750px;
 text-align: left;
 background: #fff;
 padding: 20px;
 
}
 
#header{
 width: 750px;
 height: 100px;
}
 
#blog{
 float: left;
 width: 520px;
 padding: 0 10px 10px 10px;
}
 
.sidebar{
 float: left;
 width: 200px;
 margin: 0 0 0 10px;
 font-size: 14px;
 list-style: none;
}
 
#footer{
 clear: both;
 text-align: center;
 height: 50px;
 background: #ccc;
 padding: 10px;
}

Тэг используется только для объявления спецификаций используемых на вебсайте шрифтов, а также цвета фона (можно менять на свое усмотрение). Далее мы объявляем атрибуты стилей для ссылок, а также некоторые заголовки, которые будем использовать в своей теме.

Упаковщик #wrapper будет размером во всю страницу, #header, что ясно из названия, будет заголовком, а #blog содержит последние посты в блог сайта. Наконец, у нас есть .sidebar и #footer, оба из которых будут содержать основные определения данных областей, о которых мы более подробно поговорим позже.

Шаг 2 — Header.php

Далее мы создадим header.php, который в настоящий момент будет содержать логотип нашего вебсайта, а также пользовательскую навигацию.

header

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title ( '|', true,'right' ); ?></title>
 
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
 
<?php
 /*
 *  Add this to support sites with sites with threaded comments enabled.
 */
 if ( is_singular() && get_option( 'thread_comments' ) )
 wp_enqueue_script( 'comment-reply' );
 
 wp_head();
 
 wp_get_archives('type=monthly&format=link');
?>
</head>
<body>
 
<div id="wrapper">
 <div id="header">
 <h1><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1>
 </div>

На самом деле этот код не нуждается в подробных объяснениях, просто помните о том, что он должен присутствовать в header.php всех ваших тем. Сначала мы объявляем doctype, а также используем стандарт, который применяется для показа названия вебсайта таким, каким вы его пишете в установках своего WordPress’а, а затем style.css и код PHP, который активирует перекрестные ссылки WordPress 3.0.

Шаг 3 – Добавляем пользовательскую навигацию

Теперь, когда мы закодировали свой header.php со всей основной информацией и названием блога, можно добавить пользовательское навигационное меню – свойство, представленное в WordPress 3.0. Однако до фактического добавления кода в header.php нам нужно открыть functions.php и внести код, необходимый для активации пользовательских меню.

<?php
 
//Add support for WordPress 3.0's custom menus
add_action( 'init', 'register_my_menu' );
 
//Register area for custom menu
function register_my_menu() {
 register_nav_menu( 'primary-menu', __( 'Primary Menu' ) );
}
 
?>

Как видно из комментируемых отрывков кода, первая часть с add_action используется для добавления поддержки пользовательских меню, а далее мы регистрируем пользовательское меню и называем его "Primary Menu" (Основное меню). Теперь мы переходим к реализации меню в своей теме.

Чтобы это сделать, нам придется добавить нижеприведенную строку кода в конец документа header.php.

<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' ) ); ?>

Теперь разберемся, что она в точности означает. Основная примененная функция – это wp_nav_menu, с sort_column, container_class и theme_location в качестве используемых аргументов. Sort_column гарантирует, что команда, выбранная вами в инструментальной панели WordPress выполняется, container_class позволит выбрать класс CSS, созданный вами для применения стилей к своему меню. Наконец, theme_location просто устанавливает меню туда, куда нам нужно, в данный момент это primary-menu.

Шаг 4 – Определяем стили навигации

Наша пользовательская навигация заголовка готова и работает, но в данный момент выглядит всего лишь как скучный устаревший список ссылок, к сожалению, эстетически непривлекательный. Чтобы исправить это, мы создадим в ourstyle.css класс с названием nav.

стили навигации

.nav{
 width:750px;
 background: #000;
 display:block;
 float:left;
 position:relative;
}
 
.nav ul{
 list-style:none;
}
 
.nav li{
 float:left;
 position:relative;
}

Как видно, в .nav мы сделали некоторые основные объявления, такие как ширина навигации, фон, в котором она будет выровнена, а также значение display. Далее мы назначаем стили основному неупорядоченному списку, просто убедившись, что маркеры абзаца с нашими ссылками не показываются. Для списка мы перемещаем пункты влево, а также располагаем их относительно.

Теперь закончим определение стилей навигации, добавив их к ссылкам и выпадающим меню.

.nav a{
 display:block;
 text-decoration:none;
 color:#fff;
 padding:0 15px 10px 0;
 font-size:13px;
 font-weight:bold;
}
 
.nav ul ul{
 display:none;
 position:absolute;
 top:100%;
 left:0;
 float:left;
 z-index:99999;
 background: #212121;
}
 
.nav ul ul ul{
 top: 30%;
 left:100%;
 background: #343434;
}
 
.nav ul ul a{
 height:auto;
 line-height:1em;
 padding:10px;
 width:130px;
}
 
.nav li:hover > a,.nav ul ul:hover > a{
 color:#ccc;
}
 
.nav ul li:hover > ul{
 display:block;
}

Как видно, мы начинаем с назначения стилей ссылкам меню, а сейчас занимаемся назначением стилей выпадающим меню. В .nav ul ul мы устанавливаем position (положение) на absolute (абсолютно) и устанавливаем свойство верха top на 100%, так что он находится прямо под свой исходной ссылкой. Мы также изменили фон, чтобы выпадающая ссылка немного выделялась, и установили z-index на 99999, так что неважно, что находится под ней или на пути нашего меню, она всегда будет находиться поверх всех прочих элементов.

Для третьего выпадающего меню мы снова слегка изменили цвет фона так, чтобы оно выделялось, установили left (левый край) на 100%, чтобы ее левый край всегда находился справа от первого выпадающего меню, и установили top (верх) на 30% так, чтобы он все еще был прикреплен ко второму выпадающему меню, но отделен от целого меню.

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

Шаг 5 — Index.php

Index.php станет домашней страницей нашего вебсайта и будет содержать код, включающий заголовок, нижний колонтитул и боковую колонку, о чем я расскажу ниже, и код, включающий последние посты из блога, а также мы воспользуемся в своих интересах свойством WordPress 3.0 для размещения контрольных изображений (thumbnail).

<?php get_header(); ?>
 
 <div id="blog">
 <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
 
 <div class="post">
 <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
 
 <div class="entry">
 <?php the_post_thumbnail(); ?>
 <?php the_content(); ?>
 
 <p class="postmetadata">
 <?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />
 <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
 </p>
 
 </div>
 </div>
<?php endwhile; ?>
 
 <div class="navigation">
 <?php posts_nav_link(); ?>
 </div>
 
 <?php endif; ?>
 </div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Эти строки кода использованы для вывода всей информации в header.php, sidebar.php и footer.php, куда бы вы ни поместили их в файлах темы.

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Кроме того, код здесь довольно прост для понимания. После вызова header.php мы пользуемся чуть ранее созданным #blog и вызываем цикл, применяемый для вывода последних постов в блог WordPress. После этого обертываем название своих постов в div, которому мы ранее также назначили стили.

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

Шаг 6 – Активация «контролек» постов

Мы добавили код показа контрольных изображений постов на домашней странице, но в данный момент ничего не происходит, так как в действительности мы не дали свойству возможности работать. Сейчас откройте functions.php, над которым мы трудились до этого, и добавьте после кода навигации меню следующее.

Активация «контролек» постов

// Активируйте контрольные изображения постов
add_theme_support('post-thumbnails');
set_post_thumbnail_size(520, 250, true);

Код вверху поясняет сам себя, так как почти в точности разъясняет то, что выполняется. Вторая строка добавляет в нашу тему поддержку контрольных изображений постов, в то время как третья строка определяет точные размеры нашей контрольки, которые в этой статье установлены на ширину в 520 пикселей и высоту в 250 пикселей.

Шаг 7 — Sidebar.php

Как вы догадались, sidebar.php – это файл, который будет демонстрировать нужную нам информацию в боковой колонке. Так как мы уже включили файл в свой index.php, то все, что нужно сделать – это вставить в него код, и наша боковая колонка покажется на домашней странице.

<div class="sidebar">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
 
<?php endif; ?>
</div>

Да, это весь код, добавленный для функциональности sidebar.php. Мы вызываем div, созданный в style.css, а указанный внизу код даст возможность добавлять виджеты в боковую колонку в нужном порядке и нужным образом через прикладную часть WordPress’а. Однако, как со многими свойствами, нам приходится сначала модифицировать файл functions.php, чтобы это свойство работало нормально.

//Простой код для боковой колонки с виджетом
if ( function_exists('register_sidebar') )
 register_sidebar();

Код всего лишь указывает WordPress’у регистрировать боковую колонку, вызываемую нами в sidebar.php. WordPress довольно легко может создавать множество боковых колонок, если они вам нужны в количестве более одной, но ради сокращения этого и так уже длинного учебника, давайте дадим возможность Google’у ответить на вопрос о том, как это сделать.

Шаг 8 — Single.php

Single.php мы уже используем для отдельной страницы с постом, и большая часть кода должна выглядеть довольно похоже, так как мы уже кодировали index.php. На самом деле, отличие всего одно – мы добавили div шаблона комментариев и код для присоединения comments.php.

<?php get_header(); ?>
 
 <div id="blog">
 <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
 
 <div class="post">
 <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
 <div class="entry">
 <?php the_post_thumbnail(); ?>
 <?php the_content(); ?>
 
 <p class="postmetadata">
 <?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />
 <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
 </p>
 
 </div>
 
 <div class="comments-template">
 <?php comments_template(); ?>
 </div>
 </div>
 
<?php endwhile; ?>
 
 <div class="navigation">
 <?php previous_post_link('< %link') ?> <?php next_post_link(' %link >') ?>
 </div>
 
<?php endif; ?>
</div>
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Шаг 9 — Comments.php

При выпуске WordPress 3.0 подразумевалась стандартизация формы комментариев для всех тем WordPress, облегчая задачу авторам тем и разработчикам плагинов, так как форма для комментариев могла корректироваться при помощи ловушек-хуков (hooks).

комментарии

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

<?php comment_form(); ?>

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

Шаг 10 — Page.php

При создании страницы в WordPress для отображения написанного на ней используется другой файл — page.php. Код будет выглядеть почти полностью так, как тот, что мы написали в oursingle.php, за исключением того, что это страница, на которой мы собираемся пропустить шаблон комментариев и слегка изменить навигацию постов, чтобы вместо поста управлять страницей. За этим исключением код будет точно таким же.

<?php get_header(); ?>
 
 <div id="blog">
 <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
 
 <div class="post">
 <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
 
 <div class="entry">
 <?php the_content(); ?>
 
 <p class="postmetadata">
 <?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />
 <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
 </p>
 
 </div>
 
 </div>
 
<?php endwhile; ?>
 
 <div class="navigation">
 <?php posts_nav_link(); ?>
 </div>
 
<?php endif; ?>
</div>
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Шаг 11 — Category.php

Category.php послужит в качестве файла, который предоставляет информацию для отображения постов всякий раз, когда пользователь смотрит специальную категорию поста, время написания постов или отдельного автора. Как в случае с page.php, большая часть кода здесь будет совершенно такой же, как в созданном нами до того single.php, кроме фрагмента в самом начале.

категории

<?php get_header(); ?>
 
 <div id="blog">
 <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
 
 <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
 <?php /* If this is a category archive */ if (is_category()) { ?>
 <h2>Archive for the &#8216;<?php single_cat_title(); ?>&#8217; Category:</h2>
 <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
 <h2>Posts Tagged &#8216;<?php single_tag_title(); ?>&#8217;</h2>
 <?php /* If this is a daily archive */ } elseif (is_day()) { ?>
 <h2>Archive for <?php the_time('F jS, Y'); ?>:</h2>
 <?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
 <h2>Archive for <?php the_time('F, Y'); ?>:</h2>
 <?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
 <h2>Archive for <?php the_time('Y'); ?>:</h2>
 <?php /* If this is an author archive */ } elseif (is_author()) { ?>
 <h2>Author Archive</h2>
 <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
 <h2>Blog Archives</h2>
 <?php } ?>
 
 <div class="post">
 <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
 
 <div class="entry">
 <?php the_content(); ?>
 
 <p class="postmetadata">
 <?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />
 <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
 </p>
 
 </div>
 
 </div>
 
<?php endwhile; ?>
 
 <div class="navigation">
 <?php posts_nav_link(); ?>
 </div>
 
<?php endif; ?>
 
</div>
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Фрагмент кода здесь станет единственным добавлением, мы включили его сразу после цикла WordPress.

<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
 <?php /* If this is a category archive */ if (is_category()) { ?>
 <h2>Archive for the &#8216;<?php single_cat_title(); ?>&#8217; Category:</h2>
 <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
 <h2>Posts Tagged &#8216;<?php single_tag_title(); ?>&#8217;</h2>
 <?php /* If this is a daily archive */ } elseif (is_day()) { ?>
 <h2>Archive for <?php the_time('F jS, Y'); ?>:</h2>
 <?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
 <h2>Archive for <?php the_time('F, Y'); ?>:</h2>
 <?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
 <h2>Archive for <?php the_time('Y'); ?>:</h2>
 <?php /* If this is an author archive */ } elseif (is_author()) { ?>
 <h2>Author Archive</h2>
 <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
 <h2>Blog Archives</h2>
 <?php } ?>

Он занимается тем, что использует группу предложений if/elseif в PHP для показа того, что мы в данный момент просматриваем в своем блоге. Таким образом, если мы смотрим отдельную категорию с названием "Test Category 1" (тестовая категория 1), он покажет нам заголовок h2 — "Archive for the ‘Test Category 1′ Category:" (архив тестовой категории 1) перед всеми постами, и станет делать это для отдельных дат, авторов и так далее.

Шаг 12 – Пользовательские фоны, ссылки загрузки

Как уже объяснялось, одно из свойств, реализованных в WordPress 3.0 – это способность создавать или модифицировать фон своего сайта, будь то изображение или основной цвет, прямо при помощи внутреннего интерфейса WordPress. Что нужно нам для работы этого свойства? Эта коротенькая строчка кода:

фоны, ссылки загрузки

//Код поддержки пользовательского фона
add_custom_background();

И таким образом, теперь подключаются пользовательские фоны. Далее мы собираемся добавить такой же простой код для того, чтобы везде на сайте были доступны важные ссылки. Будь это стандартный источник, комментарии, тэги, категории – все они будут добавлены в заголовок без дополнительного кода.

Давайте в functions.php добавим следующий код, чтобы это свойство заработало должным образом.

//Включите ссылки загрузок RSS-читалок постов и комментариев 
add_theme_support( 'automatic-feed-links' );

Шаг 13 — Footer.php

Для окончания работы мы собираемся создать файл footer.php, который использует #footer, объявленный в style.css, а также будет содержать основную информацию о копирайте, а также ссылку на RSS-читалку историй и комментариев внизу страницы.

<div id="footer">
 <p>
 <strong>Copyright 2011 <?php bloginfo('name'); ?> | All Rights Reserved.</strong> </a>
 Designed by <a href="http://slackrmedia.com">SlackrMedia</a>
 </p>
 <p><a href="<?php bloginfo('rss2_url'); ?>">Latest Stories RSS</a> | <a href="<?php comments_rss_link('comment feed'); ?>">Comments RSS</a></p>
 </div>
</div>
 
</body>
</html>

Шаг 14 – Прочие свойства?

Вот пара свойств, не таких уж необходимых, но способных оказаться полезными. Сначала о том, как включить свойство мультисайтов для WordPress 3.0, чтобы можно было вести множество сайтов с одной установки WordPress. И снова нам нужно добавить в functions.php этот код.

фоны, ссылки загрузки

//Включить свойство мультисайт (WordPress 3.0)
define('WP_ALLOW_MULTISITE', true);

Заключение

Итак, что касается нашего учебника. К этому моменту вы успешно закодировали «с нуля» тему WordPress 3.0, обладающую всеми преимуществами самых популярных свойств, но достаточно маленькую, чтобы ее можно было модифицировать во что-то более графически впечатляющее.

Автор: Keenan Payne

Источник: http://www.onextrapixel.com/

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее