Как создать тему 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.
Жду след урока!)
В ближайшее время)