Создание собственной темы WordPress

Здравствуйте, друзья! Сегодня я расскажу о принципах и технических моментах создания темы для WordPress с нуля. Эта статья написана для тех, кто имеет какой-то опыт работы с движком WordPress и, хотя бы на базовом уровне, разбирается в HTML и CSS.

Темы разрабатываются под разные задачи: интернет-магазин, фото или видео сайт и т.д., мы же рассмотрим обычную тему блога и алгоритм действий по ее созданию.

Если вы решили создать собственную уникальную тему оформления, то перед созданием темы нужно продумать дизайн и сверстать HTML шаблон сайта или заказать у фрилансеров, решать вам. В общем, у вас должен получиться сверстанный шаблон, например, вот с таким содержимым: файлы index.html и style.css, папка картинок images и папка js со скриптами. Из этого шаблона мы и будем делать тему оформления.

Если же у вас пока нет собственного HTML шаблона для темы, то можете потренироваться, взять решение из данной статьи и набросать стили под себя. Для примера я возьму вот такой простенький HTML код главной страницы с разметкой шапки сайта, одного анонса поста, правой колонки и футера:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Мой блог</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="header">
 
 <div id="logo">
 <a href="index.html"><img src="images/shapka.png" alt="" title=""/></a>
 </div> 
 
 <ul id="menu">
 <li><a href="#">Главная</a></li>
 <li><a href="#">Контакты</a></li>
 <li><a href="#">Рубрика 1</a></li>
 <li><a href="#">Рубрика 2</a></li>
 </ul>
 
 </div> 
 
 <div id="content-main">
 
 <div id="content">
 
 <div class="post-content">
 
 <div class="post-img"><a href="#"><img width="275" height="230" src="images/mini.jpg" alt="Миниатюра поста"/></a></div>
 
 <h2 class="note-title"><a href="#">Заголовок поста</a></h2>
 
 <div class="post-text"> Текст анонса поста</div>
 
 <div class="readmore"><a href="#">Кнопка читать далее</a></div>
 
 </div>
 
 </div>
 
 <div id="saidbar">
 
 <div class="widget-title">Популярные рубрики</div>
 
 <div class="widget">
 <ul>
 <li><a href="#">Мои услуги</a></li>
 <li><a href="#">WordPress</a></li>
 <li><a href="#">Сайтостроение</a></li>
 <li><a href="#">О заработке</a></li>
 <li><a href="#">О SEO</a></li>
 <li><a href="#">О YouTube</a></li>
 </ul>
 
 </div>
 
 </div> 
 
 </div>
 
 <div id="footer">
 <p>Все права защищены</p>
 </div> 
 
</body>
</html>

Для создания темы оформления необходимо знать функции или как их еще называют — теги WordPress. Мы разберем основные функции темы, со всеми тегами вы можете ознакомиться на официальном сайте codex.wordpress.org.

Структура темы WordPress

В папке themes создаем папку и называем ее, например, «mytheme». Затем в нее переносим наш style.css и создаем необходимые файлы.

Создаем шаблоны блоков, которые отображаются на всех страницах:

  • header.php – шапка вашего сайта
  • sidebar.php – боковая колонка с различными виджитами
  • footer.php – подвал сайта

Шаблоны контента:

  • Index.php – шаблон главной страницы, выводятся короткие анонсы статей
  • single.php – шаблон постов (статей)
  • page.php – шаблон статических страниц
  • category.php – шаблон категорий
  • search.php – шаблон выдачи результатов поиска
  • 404.php – шаблон сообщения о несуществующей странице
  • comments.php – шаблон коментариев

Дополнительные файлы:

  • functions.php – файл дополнительного функционала и изменения стандартного функционала движка  WordPress
  • searchform.php – код формы поиска
  • screenshot.png – Изображение 880 х 660, превью отображается в админке во вкладке «темы»

Не обязательные шаблоны (по моему мнению):

  • author.php – шаблон страницы автора
  • archive.php – шаблон архивов
  • date.php – шаблон вывода дат
  • tag.php – шаблон меток
  • attachment.php – шаблон страницы вложения

Лично я редко использую пять последних шаблонов, в основном делаю перенаправление на «главную» или на «404 ошибку» при запросе данных шаблонов. Информацию об авторе можно оформить на основе page.php, а остальные четыре только плодят дублированный контент на вашем сайте, организацию архивов можно реализовать намного продуктивнее.

Начинаем с файла style.css, делаем отступ и в самом верху вставляем закомментированный текст с названием и описанием темы:

/*
Theme Name: Название темы
Theme URI: УРЛ адрес, если есть отдельный сайт о теме
Description: Описание темы оформления
Version: Версия, например (1.0)
Author: Ваше имя
Author URI: УРЛ адрес автора темы
*/

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

Формируем header.php

Из HTML файла переносим сюда все, что находится в <head> и элементы в <body>, которые относятся к шапке сайта. У меня в шапке большое изображение с информацией о сайте и меню.

Код был таким:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Мой блог</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="header">

<div id="logo">
<a href="index.html"><img src="images/shapka.png" alt="" title=""/></a>
</div>

<ul id="menu">
<li><a href="#">Главная</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Рубрика 1</a></li>
<li><a href="#">Рубрика 2</a></li>
</ul>

</div>

После переноса и редактирования стал таким:

<!DOCTYPE html>
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_get_document_title(); ?></title>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<?php wp_head(); ?>
</head>

<body>

<div id="logo">
<a href="<?php echo home_url(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/shapka.png" alt="" title="" /></a>
</div>

<?php

$args = array(
'theme_location' => 'main-menu',
'menu' => 'main-menu',
'container' => 'nav',
'container_class' => 'menu-{menu-slug}-container',
'container_id' => 'main-menu',
'menu_class' => '',
'menu_id' => 'main-menu',
'echo' => true,
'fallback_cb' => '__return_empty_string',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id = "%1$s" class = "%2$s">%3$s</ul>',
'depth' => 0,
'walker' => ''
);

wp_nav_menu( $args );
?>

Разбираем изменения:

  • bloginfo( ‘charset’ ); – устанавливает кодировку
  • wp_get_document_title(); – отображает title документа
  • wp_head(); – это так называемый хук-действие, обязательная строка в теме
  • echo home_url(); — Выводим ссылку на главную страницу
  • bloginfo(‘template_url’); – указывает путь  к папке с темой
  • bloginfo(‘stylesheet_url’); – подключает файл стилей

Нижний участок кода — это вывод меню, который вы будете настраивать из админки после подключения в functions.php, о котором написано ниже. Его нужно будет стилизовать в CSS.

Файл стилей можно подключить таким образом, но если у вас много файлов стилей и скриптов, то я рекомендую подключать их в fanctions.php. Подробно об этом я расписал в статье «Правильное подключение скриптов и стилей в WordPress».

Обратите внимание, все функции WordPress заключены в конструкцию PHP!

Формируем index.php

Шапку мы сформировали, но теперь ее нужно подключить к нашему шаблону главной страницы, для этого в самом верху прописываем вот такую функцию:

<?php get_header(); ?>

Переносим нашу контентную часть из подготовленного HTML файла, в HTML шаблоне выводится анонс статьи с заголовком и миниатюрой, редактируем и получаем:

<?php get_header(); ?>

<div class="content-main">

<div class="content">

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class="post-content">

<div class="post-img"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full'); ?></a></div>

<h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

<div class="post-text"><?php the_excerpt(); ?></div>

<div class="readmore"><a href="<?php the_permalink(); ?>">Читать далее</a></div>

</div>

<?php endwhile; ?>

<?php else: ?>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>
  • the_title(); – Выводит название поста
  • the_permalink(); – Выводит ссылку на отображаемый пост
  • the_excerpt(); – выводит установленное количество символов поста со вставкой […]
  • the_post_thumbnail(‘full’); – выводит миниатюру поста, а ‘full’ задает полный размер
  • get_header(); – подключение файла header.php
  • get_sidebar(); – подключение файла sidebar.php
  • get_footer(); – подключение файла footer.php

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

Вот как выглядит чистый цикл без нашего кода:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?><!-- Начало цикла -->
<!-- Весь код анонса поста -->
<?php endwhile; ?><!-- Окончание цикла -->
<!-- Постраничная навигация -->
<?php else: ?>
<!-- Альтернативный код если нечего не найдено -->
<?php endif; ?>

Все расписано, думаю с этим понятно.

Прописываем функции в functions.php

Открываем файл и первым делом пишем конструкцию PHP, а затем в нее добавляем следующие функции:

<?php

/*-----------------------------------------------------------------------------------*/
/*------------Поддержка миниатюр-----------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
add_theme_support('post-thumbnails');

/*-----------------------------------------------------------------------------------*/
/*------------Подключение меню-------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
register_nav_menus( array(
'main-menu' => __( 'main-menu')
) );

/*-----------------------------------------------------------------------------------*/
/*------------Подключение сайдбара---------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
register_sidebar( array(
'name' => __( 'Sidebar', 'mytheme' ),
'id' => 'sidebar',
'description' => 'Правая колонка сайта.',
'before_widget' => '<aside class="widget">',
'after_widget' => '</aside>',
'before_title' => '<div class="widget-title">',
'after_title' => '</div>',
) );

/*-----------------------------------------------------------------------------------*/
/*------!Функции вывода анонса поста(цитаты) на главной!-----------------------------*/
/*-----------------------------------------------------------------------------------*/
function new_excerpt_length($length) {
return 100;//количество выводимых символов анонса (по умолчанию 55)
}
add_filter('excerpt_length', 'new_excerpt_length');

/*------Убирает […] в конце цитаты------*/
function new_excerpt_more($more) {
return '...';
}
add_filter('excerpt_more', 'new_excerpt_more');

?>

Заполняем файлы sidebar.php и footer.php

В файл  sidebar.php прописываем:

<div class="sidebar-right"> 
 <?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
 <ul id="sidebar">
 <?php dynamic_sidebar( 'sidebar' ); ?>
 </ul>
 <?php endif; ?>
</div>
  • is_active_sidebar(); – проверяет, установлен хотя бы один виджет в нашей панели ‘sidebar’
  • dynamic_sidebar(); – выводит активную панель виджетов

В файл footer.php вставляем нужный вам код, например, параграф с копирайтом, а в конце перед закрывающим тегом </body> вставляем wp_footer();. Как и wp_head(); это обязательный хук-действие темы.

<!--- Нужный вам код ---> 
<?php wp_footer(); ?> 
</body>
</html>

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

Формируем page.php и single.php

Копируем код из индексного файла и вставляем в page.php, убираем лишнее и в блоке с классом post-text изменяем вывод анонса на вывод всего контента страницы функцией the_content();

<?php get_header(); ?>

<div class="content-main">

<div class="content">
<div id="page">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<h1 class="post-title"><?php the_title(); ?></h1>

<div class="post-text"><?php the_content(); ?></div>

<?php endwhile; ?>

<?php else: ?>

<?php endif; ?>
</div>
</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

В single.php получается тот же код, что и в шаблоне страниц, добавляем только подключение комментариев comments_template(); из файла comments.php.

<?php get_header(); ?>

<div class="content-main">

<div class="content">
<div id="page">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<h1 class="post-title"><?php the_title(); ?></h1>

<div class="post-text"><?php the_content(); ?></div>

<?php comments_template(); ?>

<?php endwhile; ?>

<?php else: ?>

<?php endif; ?>
</div>
</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

При желании можете добавить:

  • the_time(‘j.m.Y’); – выводит дату публикации поста (число, месяц, год)
  • the_author(); – выводит автора статьи
  • the_category(); – выводит рубрику, в которую входит данный пост

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

Заполняем оставшиеся шаблоны 404.php, category.php и search.php

В 404.php копируем содержимое page.php, удаляем лишнее, прописываем уведомление о том, что страницы не существует, можно подкрепить текст какой-нибудь картинкой:

<?php get_header(); ?>

<div class="content-main">

<div class="content">
<div id="page">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<<div id="page">
<h1 class="page-title">Такой страницы не существует!</h1>
<img src="<?php bloginfo('template_url') ?>/images/404.png" />
</div>

<?php endwhile; ?>

<?php else: ?>

<?php endif; ?>
</div>
</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

В category.php просто копируем содержимое файла index.php и добавляем вывод заголовка категорий  single_cat_title(‘Рубрика: ‘)

<?php get_header(); ?>

<div class="content-main">

<div class="content">

<div id="category">
<h1><?php single_cat_title('Рубрика: ');?></h1>
</div>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class="post-content">

<div class="post-img"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full'); ?></a></div>

<h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

<div class="post-text"><?php the_excerpt(); ?></div>

<div class="readmore"><a href="<?php the_permalink(); ?>">Читать далее</a></div>

</div>

<?php endwhile; ?>

<?php else: ?>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

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

<?php get_header(); ?>

<div class="content-main">

<div class="content">

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class="post-content">

<div class="post-img"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full'); ?></a></div>

<h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

<div class="post-text"><?php the_excerpt(); ?></div>

<div class="readmore"><a href="<?php the_permalink(); ?>">Читать далее</a></div>

</div>

<?php endwhile; ?>

<?php else: ?>
<div id="page">
<h1 class="post-title">По запросу ни чего не найдено!</h1>
<h4 class="post-text">Попробуйте еще раз с другими ключевыми словами.</h4>
</div>
<?php endif; ?>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

Код формы поиска размещаем в файле searchform.php. Берем стандартную форму и редактируем, в input добавляем параметр «s» для name и id, используем метод «GET» для отправки запроса на главную страницу home_url( ‘/’ ) и очищаем УРЛ функцией esc_url();

<form role="search" method="get" id="searchform" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
 <div class="widget-search">
 <input type="search" class="search-field" value="" placeholder="Искать..." name="s" id="s" class="input-search" />
 <button type="submit" class="search-submit" >Поиск</button>
 </div>
</form>

Важно. После всех проделанных действий, нужно будет лезть в код и стилизовать все новые элементы, которые выдаст вам WordPress! Для этих целей я использую расширение «Firebug» для Mozilla Firefox, это расширение облегчает и ускоряет решение таких задач.

На этом создание простенькой блоговой темы оформления WordPress закончено, постарался объяснить все по пунктам и как можно короче, но получилась внушительная статья. Если остались вопросы, задавайте в комментариях. Рекомендую статью:  «Основные функции движка WordPress».

Добавить комментарий