Как создать тему WordPress. Урок 1. Создание и наполнение Index.php и style.css
Как создать тему 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 участок кода следующий:
<div id=»sidebar»>
<div class=»widget»></div>
</div>
123
<div id=»sidebar»> <div class=»widget»></div></div>
Последний момент с footer.php:
<div id=»footer»></div>
</body>
</html>
123
<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(); ?>
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, внутри него вывели несколько функций и в конце задали условие, в случае отсутствия постов.
Собственно обсуждать нам нужно только одну строчку, остальное сделайте так как написано:
<h2><a href=»<?php the_permalink(); ?>»><?php the_title(); ?></a></h2>
1
<h2><a href=»<?php the_permalink(); ?>»><?php the_title(); ?></a></h2>
Функция the_permalink() выводит URL поста, который в данный момент обрабатывается внутри цикла.
Следующая функция the_title() выведет заголовок поста, с этим думаю понятно.
Давайте подведем итог данного урока по созданию темы WordPress. Что же мы сделали сегодня:
- Создали структуру страницы;
- разбили индексный файл на несколько частей и поместили каждый из них в свой собственный файл;
- подключили файлы шаблона к индексному;
- запустили цикл WordPress;
- вывели заголовки постов с ссылками на материал.
На сегодня все, основная задача данного урока выполнена, в следующий раз займемся шапкой сайта, мета тегами и навигационным меню, а так же продолжим наполнять файл style.css. Не пропустите следующий урок, подписывайтесь на рассылку и продолжайте вместе с нами делать шаблон для CMS WordPress.
