Как создать тему WordPress? Тем кто впервые сталкивается с подобной задачей будет не просто, но изучив материал данного и последующих руководств вы научитесь создавать шаблоны для CMS WordPress. В данной публикации мы начнем наполнять файлы index.php и style.css что позволит нам перейти от теории к практике и уже видеть первые результаты на экранах монитора.

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

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

Наполняем index.php темы WordPress

Хочу заметить что наполнять все файлы мы будем постепенно и если вы не увидите каких-то атрибутов или элементов, значит они будут добавлены в дальнейшем с подробным объяснением.

Итак, отрываем индексный файл и вписываем в него следующий код:

<!DOCTYPE html>  <html>   <head></head>    <body>     <div id="header">      <h1 class="site-title">Site Title</h1>      <div class="nav-menu"></div>     </div>     <div id="main">      <div class="post"></div>     </div>     <div id="sidebar">      <div class="widget"></div>     </div>     <div id="footer"></div>   </body>  </html>

Как мы можем видеть мы поделили страницу на 4 основных части — header, main, sidebar и footer. Уже сейчас нашу тему можно активировать и посмотреть на белый экран с единственной надписью “Site Title”.
Пока остановимся на этом и пойдем к style.css, шапку которого нужно оформить по некоторым правилам.

Файл style.css в WordPress, добавление базовой информации о теме

По правилам файл style.css в WordPress должен иметь следующий комментарий в начале:

/*Theme Name: My First Theme  Theme URI: https://yrokiwp.ru  Author: Alex Spivak  Author URI: https://yrokiwp.ru  Description: Описание темы  Version: 1.0*/

Введенные тут данные будут отображаться в описании темы, в админке. Я думаю вы догадались какие элементы нужно поменять на свои.
После того как вы ввели свои данные, пропишем несколько правил, которые в любом случае будут необходимы:

* {  margin:0; /*Обнуляем все отступы, в нужных местах добавим их*/  padding:0;  }  body {  font-family: Arial, Helvetica, sans-serif; /*задаем основной шрифт текста*/  display:block; /*Заставляем все элементы вести себя как блочные*/  }

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

Разбиваем index.php на несколько файлов

В WordPress существует большое количество встроенных функций, которые ускоряют создание шаблона. В данном случае мы поговорим о get_header(), get_sidebar(), get_footer().

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

Открываем файл header.php. Вырезаем с index.php следующий участок кода и вставляем его в header.php:

<!DOCTYPE html>  <html>   <head></head>    <body>     <div class="header">      <h1 class="site-title">Site Title</h1>      <div class="nav-menu"></div>     </div>

Аналогичную операцию проводим с sidebar.php участок кода следующий:

<div id="sidebar">   <div class="widget"></div>  </div>

Последний момент с footer.php:

  <div id="footer"></div>   </body>  </html>

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

<?php get_header(); ?>   <div class="main">    <div class="post"></div>   </div>  <?php get_sidebar(); ?>  <?php get_footer(); ?>

Теперь немного добавим функций в индексный файл и выведем названия постов с ссылками на их страницы.

<?php get_header(); ?>   <div class="main">  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>    <div class="post">     <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>    </div>  <?php endwhile; else: ?>     <p><?php _e('Простите, но публикаций пока нет.'); ?></p>  <?php endif; ?>   </div>  <?php get_sidebar(); ?>  <?php get_footer(); ?>

Можем сохранить настройки и посмотреть что у нас получилось. Зрелище не из приятных. Белый холст с ссылками при переходе по которым ничего не написано. Не переживайте это только основы, всему свое время, все приведем в порядок. Обсудим функции, которые мы применили.

Сначала мы запустили цикл WordPress, внутри него вывели несколько функций и в конце задали условие, в случае отсутствия постов.

Собственно обсуждать нам нужно только одну строчку, остальное сделайте так как написано:

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

Функция the_permalink() выводит URL поста, который в данный момент обрабатывается внутри цикла.

Следующая функция the_title() выведет заголовок поста, с этим думаю понятно.

Давайте подведем итог данного урока по созданию темы WordPress. Что же мы сделали сегодня:

  • Создали структуру страницы;
  • разбили индексный файл на несколько частей и поместили каждый из них в свой собственный файл;
  • подключили файлы шаблона к индексному;
  • запустили цикл WordPress;
  • вывели заголовки постов с ссылками на материал.

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