Создание простейшей темы WordPress

Создание своей темы оформления для CMS WordPress - это несложный процесс. Для работы простейшей темы нужны всего два файла. Первый файл - "index.php", который отвечает за вывод содержимого страницы. Второй файл - "style.css", который содержит стили темы.

Помимо этих файлов могут существовать и другие, в зависимости от сложности и функционала темы. В этой статье мы не будем рассматривать всю иерархию файлов тем в WordPress, а только ограничимся основными файлами.

Для начала необходимо создать папку внутри директории "/wp-content/themes/". Название этой папки лучше связанное с названием нашей будущей темы, к примеру "/wp-content/themes/mytheme". Создайте такую папку.

Перейдите в только что добавленную папку и создайте в ней два файла с именами: index.php и style.css

Приступим к созданию темы с файла style.css. В этом файле содержится не только CSS код для оформления темы, но и информация о создателе темы, её названии и так далее. Напишите в этот файл следующий код:
/**
* Theme Name: Моя тема
* Author: MouseDC
*/
body {
   max-width: 800px;
   margin: 200px auto;
}
.header, .footer, .content {
   margin: 50px 0;
   text-align: center;
}
Обратите внимание на комментарии в начале файла. Эти комментарии описывают тему. Запись идёт в виде ключ (двоеточие) значение. Поле "Theme Name" является обязательным. Но так же существуют и другие поля:
/**
 * Theme Name:   Название темы
 * Theme URI:   Полная ссылка на страницу с описанием темы (к примеру, на сайте wordpress.org) 
 * Author:   Имя автора темы
 * Author URI:   Полная ссылка на сайт автора темы
 * Description:   Короткое описание темы. 
 * License:   Лицензия. Пример: "GNU General Public License 3.0"
 * License URI: Полная ссылка на. Пример: http://www.gnu.org/licenses/gpl-3.0.html
 * Tags:   Теги, по которым тему можно будет найти в каталоге WordPress. К примеру: white, mouse, yellow, cheese, grey
 * Version:     Версия темы. К примеру: 2.1.5
 */ 
Закончим с файлом стилей и перейдём к исполняемому файлу index.php. Запишем в него следующий код, а затем разберём построчно, что он значит:
<!DOCTYPE html>
<html>
   <head>
      <meta charset="<?php bloginfo('charset'); ?>">
      <title><?php echo wp_get_document_title(); ?></title>
      <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />
      <?php wp_head(); ?>
   </head>
   <body>
      <header class="header">
         <h1><?php bloginfo( 'name' ); ?></h1>
         <h2><?php bloginfo( 'description' ); ?></h2>
      </header>
      <div class="content">
         <?php
            // вывод записей, если найдены
            if ( have_posts() ){
               while ( have_posts() ){
                  the_post();
                  echo '<h3><a href="'. get_permalink() .'">'. get_the_title() .'</a></h3>';
                  echo get_the_excerpt();
               }
            }else{
               echo '<p>Не найдено ни одной публикации...</p>';
            }
            ?>
      </div>
      <footer class="footer">
         Автор сайта - MouseDC.ru
      </footer>
      <?php wp_footer(); ?>
   </body>
</html>
Теперь пройдёмся по функциям из примера:

bloginfo('charset') отображает кодировку, в которой работает блог.
wp_get_document_title() - возвращает Title документа. На титульной странице это название блога. На странице с разделом - название раздела. На странице с детальным просмотром публикации - название публикации.
get_stylesheet_uri() - возвращает адрес файла style.css
wp_head() - выводит оставшиеся мета теги, служебные скрипты и ссылки на файлы. Эта функция вызывается всегда перед закрывающейся "</head>"
have_posts() - проверяет есть ли записи в текущей выборке
the_post() - распечатывает текущую запись
get_permalink() - печатает постоянную ссылку на публикацию
get_the_title() - печатает название публикации
wp_footer - печатает служебные скрипты. Эта функция вызывается всегда перед закрывающимся "</body>"
Если функция начинается с префикса "the_", то она выводит результат на страницу, распечатывает его. А если начинается с префикса "get_", то только возвращает значение.
Наша мини-тема готова. Осталось перейти в панель управления и активировать её. Для этого заходим в закладку "Внешний вид" - "Темы" и нажимаем "Активировать" напротив нашей темы. В целом, наш сайт готов. Конечно, в таком виде его практически невозможно использовать, но описанной информации должно хватить для понимания основ создания темы для WordPress.
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: