Как создать wordpress шаблон, создаем wordpress тему
В этой статье мы узнаем, как создать wordpress тему. Для начала мы создадим HTML + CSS шаблон, который поместим в структуру wordpress темы. После того, как вы дочитаете эту статью, вы сможете создать собственный шаблон для wordpress, а точнее вы его создадите по ходу чтения и выполнения практических заданий. Вы будете знать как устроена тема и сможете самостоятельно реализовать ядро wordpress темы из других HTML/CSS шаблонов. Начнем?
Вступление – структура wordpress темы
Структура wordpress темы, предельно проста. В теме мы имеем файл index.php, он отвечает за сборку кусков шаблона. К этому файлу подключены другие: header.php, footer.php. Эти файлы (куски шаблона) используются на любой странице сайта. Мы знаем, что не все страницы строятся по единому шаблону, поэтому wordpress тема имеет другие файлы, такие как archives.php или single.php. Также можно создать свой тип страниц, если вы хотите, чтобы он категорически отличался от других на сайте. Это очень удобно.
Если вы внимательно рассмотрите структуру темы, и прочитаете содержимое файлов, то интуитивно поймете что к чему. Но все же имеются некоторые моменты, которые мы рассмотрим. Вы всегда сможете вернуться к этой странице и прочитать, как все делается.
А теперь рассмотрим создание шаблона поэтапно:
Шаг 1 – style.css
CSS файл, это файл параметров и дизайнерских решений для HTML элементов шаблона. Вы должны переименовать главный css файл (если он у вас не один) на style.css. Далее вам необходимо добавить в начале этого файла следующую закомментированную информацию:
/* Theme Name: Typography Paramount Theme URI: http://sitear.ru/ Description: An image-less template focusing on Typography. Author: Sam Parkinson Author URI: http://sitear.ru Version: 1.0 . General comments/License Statement if any. . */
Этот код будет показывать информацию о теме для администраторов. Убедитесь что он в начале файла, и нету никаких пробельных символов перед ним!
Далее я создал еще один файл, под именем 1.css, и поместил его в папку typography-paramount, которую создал в папке wordpress темы. Нужно четко соблюдать эту структуру, чтобы wordpress смог видеть этот файл.
Шаг 2 – header и footer
На этом этапе мы создадим два файла: header.php и footer.php, о которых упоминалось раньше. Хотя они не основные и включены в тему опционально, они используются в большинстве шаблонов, поэтому мы их создадим.
Header.php
Начнем с этого файла. Создайте файл и присвойте ему имя header.php, после чего вставьте в него поданный код и сохраните. Этот файл будет отображаться на всех страницах нашего шаблона.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>-</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/1.css" type="text/css" media="screen,projection" />
</head>
<body>
<div id="wrapper">
<div id="header">
<p class="description">
An imageless template focusing on Typography.
</p>
<h1><a href="#">Typography Paramount</a></h1>
<ul id="nav">
<li><a href="#">Link Here</a></li>
<li><a href="#" class="active">Link Here</a></li>
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
</ul>
</div>
До сих пор, не было ничего особенного в отличии от простой html/css темы. Но теперь мы заменим некоторые элементы на wordpress теги.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes() ?>>
<head profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen,projection" />
<?php wp_head(); ?>
</head>
<body>
<div id="wrapper">
<div id="header">
<p class="description"><?php bloginfo('description'); ?></p>
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<ul id="nav">
<?php wp_list_pages('sort_column=menu_order&title_li='); ?>
</ul>
</div>
Это только некоторые известные мне теги. Намного больше вы найдете на официальном сайте: codex.wordpress.org.
language_attributes() – Выводит тип языка для тега <html>.
bloginfo() – Используется для вывода информации о сайте, все параметры можно найти в кодексе вордпресса.
wp_title() – Возвращает title страницы.
wp_head() – подключает javascript и другие необходимые элементы.
get_option() – получает необходимые опции для работы с базой данных.
wp_list_pages() – выводит ссылки на страницы сайта.
Footer.php
Теперь создадим так званный «подвал сайта». Создайте файл footer.php и поместите в него следующий код. Этот футер, будет отображать год, название сайта, и ссылки на rss.
<div id="footer">
<!-- Please leave this line intact -->
<p>Template design by <a href="http://www.sixshootermedia.com">Six Shooter Media</a><br />
<!-- you can delete below here -->
© <?php the_time('Y'); ?> <?php bloginfo('name'); ?><br />
<a href="<?php bloginfo('rss2_url'); ?>">Grab the feed</a></p>
</div>
</div>
< ?php wp_footer(); ?>
</body>
</html>
<?phpthe_time('Y'); ?> - отображает текущий год.
<?php bloginfo('name'); ?> - название блога.
<?php bloginfo('rss2_url'); ?> - добавление ссылки на rssленту блога.
wp_footer() – это необходимо для самого ядра wordpress, который добавляет туда нужные ему элементы.
Шаг 3 – основной файл wordpress шаблона
Пришло время создать основной файл wordpress шаблона, который будет подключать верхушку и низ сайта. Создайте файл index.php. Это один из двух обязательных файлов wordpress темы (другой style.css). Вставьте ново созданный файл следующий код:
<?php get_header(); ?> <?php get_footer(); ?>
Этот код, помогает wordpress получить информацию куда подключать header.php и footer.php. Давайте добавим еще несколько строк между этими тегами:
<div id="content">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<p><?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?> | <?php the_category(', '); ?> | <?php comments_number('No comment', '1 comment', '% comments'); ?></p>
<?php endwhile; else: ?>
<h2>Woops...</h2>
<p>Sorry, no posts we're found.</p>
<?php endif; ?>
<p align="center"><?php posts_nav_link(); ?></p>
</div>
Этот фрагмент кода получает информацию об имеющихся постах в блоге и если они есть, показывает их. Если они не обнаружены, то отображается часть кода после <?php endwhile; else: ?>, которая дает нам знать, что блог еще пустой.
Также добавлен тег <?php posts_nav_link(); ?>, который выводит навигационные ссылки, чтобы пользователи могли читать ранее добавленные посты.
Пример работы wordpress темы
Теперь у нас есть подобие темы, давайте посмотрим пример работы созданной wordpress темы.
Мы имеем четыре файла в нашей теме, для начала это вполне достаточно. В следующей статье добавим файл single.php, которые будет показываться при выводе конкретного поста. Этот файл будет включать в себя систему комментариев, в отличии от файла index.php.
Читаем продолжение статьи о создании wordpress шаблона.
Если у вас еще остались вопросы или недопонимания по поводу создание wordpress шаблона (темы), выразите свои проблемы в комментариях ниже!Дальше: Создание wordpress шаблона: продолжение
Development — Taras Moroz