Как создать тему WordPress. Урок 1. Создание и наполнение Index.php и style.css

05.12.2018

296 3 minutes read

Как создать тему 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>

1234567891011121314151617

<!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: http://yrokiwp.ru
Author: Alex Spivak
Author URI: http://yrokiwp.ru
Description: Описание темы
Version: 1.0*/

123456

/*Theme Name: My First ThemeTheme URI: http://yrokiwp.ruAuthor: Alex SpivakAuthor URI: http://yrokiwp.ruDescription: Описание темыVersion: 1.0*/

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

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

12345678

* {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>

12345678

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

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

123

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

123

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

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

123456

<?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(); ?>

123456789101112

<?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, внутри него вывели несколько функций и в конце задали условие, в случае отсутствия постов.

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

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

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

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

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

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