Войти Регистрация

Как создать wordpress шаблон, создаем 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() – выводит ссылки на страницы сайта.

header wordpress шаблона

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, который добавляет туда нужные ему элементы.

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 темы.

Пример работы созданной wordpress темы

Мы имеем четыре файла в нашей теме, для начала это вполне достаточно. В следующей статье добавим файл single.php, которые будет показываться при выводе конкретного поста. Этот файл будет включать в себя систему комментариев, в отличии от файла index.php.

Читаем продолжение статьи о создании wordpress шаблона.

Если у вас еще остались вопросы или недопонимания по поводу создание wordpress шаблона (темы), выразите свои проблемы в комментариях ниже!


Дальше: Создание wordpress шаблона: продолжение


Дискуссия по теме    14 Комментариев
Добавить комментарий
Вера 23.11.2015 в 22:38
Спасибо. Хорошая статья)
Вера 23.11.2015 в 19:13
Здравствуйте! А как просмотреть результат ?
Тарас 23.11.2015 в 20:56
Только на картинка в тексте статьи. Демо шаблона к сожалению нету. Впринципе, прочитав статью, можете смело скачивать любой вордпресс шаблон и смотреть как он устроен внутри архива... думаю многое уже будет понятным и очевидным. :)
Анатолий 10.01.2015 в 22:31
доброго времени суток есть вопрос как сделать чтобы sidebar не опускался под div ="post" пробывал помещать сайдбар <div id="content"> <div id="post"> <div id="sidebar"><?php get_sidebar(); ?></div> </div> </div> все ровно выходит за пределы,опускается слева вниз вот ссылка http://blog-webmastera.pw
Екатерина 18.11.2014 в 13:12
Большое спасибо, для меня информация оказалась очень полезной. Один небольшой комментарий: при создании footer.php, если скопировать весь приведенный Вами код, на сайте строка < ?php wp_footer(); ?> будет видимой, т.е. будет восприниматься просто как текст. Чтобы этого не происходило, т.е. чтобы это был именно код для ядра WordPress, нужно убрать пробел после <
Юрий 27.06.2014 в 09:03
Объясните: какую роль при создании шаблона сайта играет язык HTML? Просмторел уйму инфы на разных сайтах, но нигде не нашел ответа... Ведь в темах нет файлов index.html, page.html и др. Зато есть файлы index.php, page.php. Так причем здесь язык html, если вся конструкция шаблона состоит из php и CSS?
Тарас 27.06.2014 в 19:03
PHP или HTML это всего лишь расширения файла... если индекс, то будет читаться по умолчанию (в корне сайта, или конкретной папке). В пхп файлах могут присутствовать элементы html разметки, и наоборот в html файл можно влепить пхп код... эти два языка дополняют друг друга. ПХП для создания алгоритмов и калькуляций, ШТМЛ - это разметка сайта которая репрезентируется браузером как страница которую мы видим. например, пхп код штмл: while($array){ echo "<div>блок</div>"; } выведет столько блоков, сколько их в массиве, и не надо каждый раз прописывать это в штмлле... данный подход упрощает разработку сайта.
Аня 01.02.2014 в 21:46
Помогите, у меня не редактируется styles.css из админки. захожу "внешний вид - редактор", выбираю стилевой файл, но он открывается пустым. по фтп все редактируется, но это не удобно для меня.
Евгений 29.03.2014 в 19:23
Зайдите на сервер по фтп и измените права доступа на css-файл темы.
Антонина 05.06.2012 в 15:27
Вы не написали, в какой программе создавать все эти файлы. В блокноте?
Тарас 08.06.2012 в 21:47
Да в блокноте. Только я использую этот блокнот: http://sitear.ru/material/notepad-plus-plus
Максим 01.08.2014 в 12:16
я использую Notepad Очень удобный... есть подсветка синтаксиса!
Денис 29.04.2012 в 12:19
ЭТО НЕ НУЖНО ДОБАВЛЯТЬ!!! /* 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. . */
Тарас 29.04.2012 в 17:41
Всмысле? Вы имеете в виду это не обязательно добавлять?
Добавить комментарий
Просмотров: 80797