WORDPRESS-Создание простой Wordpress темы

Главная->WORDPRESS->Создание простой Wordpress темы

29 Мая 2022г. в 04:54

В этом уроке мы создадим простую тему для cвоего блога wordpress самостоятельно.

Введение.

Прежде чем начать, давайте взглянем на стандартную тему (тему по умолчанию, файлы index.php и single.php) WordPress и посмотрим как она устроена:

тема вордпресс

тема вордпресс

Исходный шаблон.
Предположим, что мы нарисовали в фотошопе вот такой шаблон (его исходник здесь), аналогично поделим его на блоки:

*

Сам процесс создания и верстки html-шаблона рассматривать в рамках этой статьи не будет, только следует учесть, что вордпресс генерирует некоторые классы, которые должны присутствовать в таблице стилей. К примеру классы aligncenter, alignleft и alignright служат для выравнивания изображений и блочных элементов, и их нужно включить в свою таблицу стилей (можно скопировать из таблицы стилей дефолтной темы):

.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}

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

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* необязательные параметры, которые сделают скругленные углы в поддерживаемых браузерах*/
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
Кроме того, существует еще несколько классов WordPress, которые необязательно описывать в таблице стилей, но, т.к. WordPress генерирует страницы с их использованием, можно и им задать стиль:

.categories {...}
.cat-item /* Этот класс присваивается всем категориям */}
.current-cat {/* стиль текущей категории */}
.current-cat-parent {/* стиль для предка(ов) текущей категории */}
.children {/* класс для потомка */}
.pagenav {/* постраничная навигация */}
.page_item {/* любой элемент списка */}
.current_page_item {/* этот класс присваивается в списке страниц к текущей активной странице */}
.current_page_parent {/*класс для родительской страницы по отношению к текущей */}
.current_page_ancestor {/* любая страница верхних уровней по отношению к данной */}
.widget {/* все виджеты обворачиваются в этот класс */}
В процессе верстки используйте блоки и стили к ним, как это определено в скринах в начале статьи. Это не обязательно, но очень даже желательно.

К примеру в дальнейшем мы подключим поисковую форму на сайт через спец. тег wordpress <?php get_search_form() ?>, в результате чего wordpress выведет такую форму:

<form id="searchform" action="http://localhost/testblog/" method="get" role="search">
<div>
<label class="screen-reader-text" for="s">Найти:</label>
<input id="s" type="text" name="s" value="силами" gtbfieldid="2"/>
<input id="searchsubmit" type="submit" value="Найти"/>
</div>
</form>
Поэтому учитываем это при верстки темы.

И последнее, что нужно добавить в style.css это информацию о себе любимом и о созданной теме. Информация размещается в начале файла в коментах:

/*
Theme Name: Придумайте уникальное имя темы
Theme URI: http://ссылка-на-домашнюю-страницу-темы
Description: Описание темы
Author: Автор темы
Author URI: http://ссылка-на-страницу-автора
Template: название-темы-предка
Tags: теги темы - только из списка предлагаемого wordpress.org
Version: версия
Ну и здесь текст лицензии
*/
Также не забудьте сделать screenshot.png и положить его в папку с шаблоном (в корень). Информация, размещенная таким образом в таблице стилей, будет отображаться в админке в разделе Управление «темами». Сверстанный шаблон тестируем в браузерах, если все норм, можно идти далее.

Код страниц сверстанного шаблона приводить не буду, т.к. он достаточно большой, вы его просто скачайте, далее будем работать с ним.

Итак распакуйте архив, далее мы будем конвертировать index.html, single.html и page.html в wordpress тему (page.html такая же как и single.html, только без блока коментариев).

Принцип работы wp-темы:

Если вы откроете папку темы по умолчанию (wp-content/themes/default), вы увидите множество файлов PHP (файлы темы) и одного файла style.css. Когда мы просматриваем блог, WP подключает файлы темы ( index.php <<header.php, sidebar.php и footer.php) для создания страниц.

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

Шаг 1:
Для начала в директории тем вордпресса (wp-content/themes) создайте папку с именем нашей темы. Пусть это будет ruseller_lessons. Затем из папки темы по умолчанию (wp-content/themes/default) скопируйте файлы comments.php, search.php и 404.php в папку нашей темы. Эти файлы отвечают за комментарии и поиск на блоге. Затем в ruseller_lessons скопируйте таблицу стилей style.css нашего шаблона, screenshot.png (300x225) и папку images.

Теперь файлы нашего шаблона нужно "распилить", т.е. вытащить в отдельные файлы footer, sidebar и header. Схема показывает упрощенный вид файла index.php с метками, согласно которым будем его пилить:

*

Шаг 2 - Header.php
Открываем index.html и вырезаем все, что находится до коментария  , создаем новый файл header.php и вставляем в него вырезанный код, сохраняем в директории нашей темы ruseller_lessons:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index.html</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="header">
<div id="headerimg">
<h1><a href="#">My Blog</a></h1>
<div class="description">Blog Description</div>
</div>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Теперь идем в папку с дефолтной темой, открываем header.php и копируем оттуда теги <title>, <link>, <h1>, and <div class=description> и ими заменям соответствующие строки в нашем header.php.

Затем все теги <li>, находящиеся id="nav" (список страниц в верхней части блога) заменям на функцию вордпресса

<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>

В итоге получаем:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>
<body>
<div id="page">
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
<ul id="nav">
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
</ul>
</div>

Шаг 3 - Sidebar.php
Возращаемся к файлу index.htm. Первым делом удаляем всю форму поиска, затем вырезаем из него все от <div id="sidebar"> до . Вырезанный код вставляем в новый файл sidebar.php и сохраняем его в директории нашей темы. Теперь в полученном коде заменяем все, что между тегами <ul> вызовом сайдбаров, получаем следующий код:

<div id="sidebar">
<ul class="ul-cat">
<?php dynamic_sidebar('sidebar1') ?>
</ul>
<ul class="ul-archives">
<?php dynamic_sidebar('sidebar2') ?>
</ul>
</div>


Таким образом мы вызываем 2 сайдбара. Если вы смотрели Sidebar.php дефолтной темы, то заметили, что кода там гораздо больше. Дело в том, что там просто прописано дополнительное условие, которое по умолчанию выводит архив и категории, в случае, если админ не подключил ни одного виджета к сайдбару. Мы это условие прописывать не будем.

Чтобы наши сайдбары заработали, их необходимо зарегистрировать. Для этого в директории темы создаем файл functions.php и в нем пишем:

<?php
register_sidebar(array('name'=>'sidebar1'));
register_sidebar(array('name'=>'sidebar2'));
?>
Осталось подключить форму поиска. Сделать это можно либо из админки путем добаления виджета в один из сайдбаров, а можно вызвать ее в sidebar.php, что мы и сделаем. В самом начале добавляем:

<?php get_search_form(); ?>
<div id="sidebar">
...............................................
Шаг 4 - Footer.php
Возращаемся к файлу index.html и вырезаем из него все от <div id=footer> до </html>. Вырезанный код вставляем в новый файл footer.php:

<div id="footer">
<div class="left-col">
<h4>Recent Posts </h4>
<ul class="recent-posts">
<li><a href="#">Blog Title Text</a><br />
10/23/2006</li>
<li><a href="#">Blog Title</a><br />
10/23/2006</li>
<li><a href="#">Title Text</a><br />
10/23/2006</li>
<li><a href="#">Sample Blog Title</a><br />
10/23/2006</li>
</ul>
</div>
<div class="left-col">
<h4>Recent Comments</h4>
<ul class="recent-comments">
<li><a href="#">Nick:</a> This is a test comment</li>
<li><a href="#">Jen:</a> Hello, nice day!</li>
<li><a href="#">Someone:</a> Wow, this is another test comment</li>
<li><a href="#">Admin:</a> This is a comment</li>
</ul>
</div>
<div class="right-col">
<h4>About</h4>
<p>Welcome to my design blog and portfolio showcase. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
<p>Feel free to <a href="#"> contact me.</a></p>
</div>
<hr class="clear" />
</div>

</div>

</body>
</html>
По нашему шаблону здесь же мы должны вывести последние записи блога (Recent Posts) и последние коментарии (Recent Comments). Последние записи будем выводить в количестве 5 штук - showposts=5. Заменям все внутри <ul class="recent-posts"> :

<ul class="recent-posts">
<?php query_posts('showposts=5'); ?>
<?php while (have_posts()) : the_post(); ?>
<li>
<strong><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Permanent link to'); ?> <?php the_title(); ?>"><?php the_title(); ?></a></strong><br />
<small><?php the_time('m-d-Y') ?></small>
</li>
<?php endwhile;?>
</ul>
Вывод последних коментариев сделаем с помощью плагина simple_recent_comments.php, скачайте его и положите в папку нашей темы. Теперь в нужном месте его нам нужно вызвать (заменям содержимое блока <div class="left-col">):

<div class="left-col">
<?php include (TEMPLATEPATH . '/simple_recent_comments.php'); /* recent comments plugin by: www.g-loaded.eu */?>
<?php if (function_exists('src_simple_recent_comments')) { src_simple_recent_comments(5, 60, '<h4>Recent Comments</h4>', ''); } ?>
</div>
Шаг 5 - Index.php
Все что осталось в index.html сохраняем как index.php в папку с нашей темой, затем подключаем вызов header, sidebar и footer:

<?php get_header(); ?>
<div id="content">
<div class="post">
<div class="post-date"><span class="post-month">Oct</span> <span class="post-day">13</span></div>
<div class="post-title">
<h2><a href="#">Sample Blog Entry</a></h2>
<span class="post-cat"><a href="#">News</a></span> <span class="post-comments"><a href="#">3 comments</a></span>
</div>
<div class="entry">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="#">Read more...</a> </p>
</div>
</div>
<div class="navigation"> <span class="previous-entries"><a href="#">Previous Entries</a></span> <span class="next-entries"><a href="#">Next Entries</a></span> </div>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>
Шаг 6 - Вывод записей блога на странице index.php

Следующий рисунок демонстрирует принцип вывода записей блога. Сначала идет проверка, есть ли сообщения в базе, если нет выводит "Not Found". Если есть, выводит в цикле while

. *

Открываем наш index.php и заменям статичный текст между <div id=content>..</div> функциями (тегами) wordpresspost date, title, category, comments, next и previous. Ориентируясь на рисунок выше получаем:

<?php get_header(); ?>
<div id="content">
<?php if (have_posts()) { ?>
<?php while (have_posts()) { the_post(); ?>
<div class="post">
<div class="post-date"><span class="post-month"><?php the_time('M') ?></span> <span class="post-day"><?php the_time('j') ?></span></div>
<div class="post-title">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<span class="post-cat"><a href="#"><?php the_category(', ') ?></a></span> <span class="post-comments"><?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></span>
</div>
<div class="entry">
<?php the_content(); ?>
</div>
</div>
<?php } ?>
<div class="navigation">
<span class="previous-entries"><?php next_posts_link('Вперед') ?></span>
<span class="next-entries"><?php previous_posts_link('Назад') ?></span>
</div>
<?php } else { ?>
<h2>Ничего не найдено</h2>
<?php } ?>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>
Теперь тема должна уже быть доступна из админки в списке тем, ее можно активировать и посмотреть, что вышло.

Мы использовали теги Wordpress:

the_time('M'), the_time('j') - вывод месяца и дня соответственно
the_permalink() - отображает постоянную ссылку записи
the_title_attribute() - заголовок текущей записи.
the_title() - заголовок записи или страницы
the_category(', ') - ссылку на категорию или категории, к которым принадлежит запись
comments_popup_link - выведет ссылку для комментариев во всплывающем окне если comments_ popup_script() используется, иначе выводит обычную ссылку на комментарии.
the_content - выводит содержание текущей записи. Если используется тег <!–more–> то сообщение показывается только до <!–more–> (только на главной странице, на странице записи будет показываться полностью).
next_posts_link - ссылка на предыдущие сообщения.
previous_posts_link - ссылка на следующие сообщения.

Шаг 7- Single.php
Этот файл мы создадим из только что законченного index.php , немного изменив его:

<?php get_header(); ?>
<div id="content">
<?php if (have_posts()) { ?>
<?php while (have_posts()) { the_post(); ?>
<div class="post">
<div class="post-date"><span class="post-month"><?php the_time('M') ?></span> <span class="post-day"><?php the_time('j') ?></span></div>
<div class="post-title">
<h2><?php the_title(); ?></h2> 
<span class="post-cat"><?php the_category(', ') ?></span> 
</div>
<div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
<?php comments_template(); ?>
</div>
<?php } ?>
<div class="navigation">
<span class="previous-entries"><?php previous_post_link(' %link') ?></span>
<span class="next-entries"><?php next_post_link('%link') ?></span>

</div>
<?php } else { ?>
<h2>Ничего не найдено</h2>
<?php } ?>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>
wp_link_pages - Выводит ссылки на странице в многостраничном сообщении ( при использовании ).
comments_template() - Подключает файл шаблона comments.php из текущей папки темы
previous_post_link(' %link'), next_post_link('%link') - выведет заголовки предыдущей и следующей записи

Шаг 8 - page.php
Этот шаг проще предыдущего. Файл single.php сохраняем как page.php. Удаляем из page.php вывод даты, комменты, next/previous:

<?php get_header(); ?>
<div id="content">
<?php if (have_posts()) { ?>
<?php while (have_posts()) { the_post(); ?>
<div class="post">

<h2><?php the_title(); ?></h2>
<div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
</div>
<?php } ?>
<?php } else { ?>

<h2>Ничего не найдено</h2>
<?php } ?>
</div>

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

На этом можно и закончить. Основные файлы темы мы собрали. Вероятно вы заметили, что в дефолтной теме больше файлов. Например archive.php, он не является обязательным. Однако если мы подключим виджет "Архивы" или "Календарь" в сайдбаре и перейдем в какой - нибудь архив по дате, записи по выбранной дате выведутся на индексной странице, поэтому вполне можно обойтись без archive.php :)

Финал.
Иногда нужно/полезно вывести на странице заголовки всех записей. Для этой цели воспользуемся тегом wordpress query_post:

<?php
/*
Template Name: Archives
*/
?><?php get_header(); ?>
<div id="content">
<h2><?php the_title(); ?></h2>
<?php query_posts('showposts=-1'); ?>
<ul>
<?php while (have_posts()) { the_post(); ?>
<li>
<h3><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
<?php the_time('M d Y') ?> | <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?>
</li>
<?php }?>
</ul>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

query_posts('showposts=-1'); - выведет все записи. Сохраним это в файл archives.php. Обратите внимание на комментарии в начале кода Template Name: Archives, он здесь обязателен (далее вы поймете почему)

Идем в админку и создаем новую страницу. Указываем только заголовок и указываем в "Атрибутах" шаблон Archives, сохраняем страницу. И теперь на этой странице у нас будут выводиться все записи по шаблону archives.php, который мы описали чуть выше:

*

На сегодня это все. Спасибо за внимание.

P.S собранная тема тестировалась на WordPress 2.8.5. Конечный результат скачать можно здесь. Аналогично попробуйте создать свою тему, уверен, у вас получиться!