Создание темы для WordPress

Конечно, перед тем, как начать создавать собственные темы для WordPress, вы можете попробовать разобраться в уже готовых. Но дело в том, что в них иногда столько всего понапихано, что это не всегда будет легко.

style.css и index.php

Каждая тема должна содержать по крайней мере 2 файла — это index.php и style.css. Понятно, что первый предназначен для HTML и PHP, а второй для CSS-стилей. Кроме того, в файле style.css содержится описание темы.

/*
Theme Name: Тема для блога
Version: 1.0
Description: 3-х колоночная тема для WordPress
Author: Михаил Рудрастых
Author URI: https://truemisha.ru
*/

Я думаю не нужно объяснять, что означает каждая строчка. Кстати, без них тема тоже будет работать. Но лучше вставьте их в начало style.css, а дальше уже пишите свои стили.

Для полного счастья можете закинуть какую-нибудь картинку с названием screenshot.png в папку с вашей будущей темой — картинка тоже появится в описании темы в админке.

Теперь напишем что-нибудь в файле index.php:

<!DOCTYPE html>
<html dir="ltr"><head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>" />
</head>
<body>
	Привет мир!
</body></html>

Как видите я просто указал кодировку, вставил таблицу стилей и написал в теле документа «Привет мир!»

Ну что же, поздравляю! Фактически тема готова, только сейчас это просто статичная HTML-страница, никак не связанная с WordPress. Если вы не собираетесь на этом останавливаться, то перейдём к следующему шагу.

Шаг 2. Структура блога на WordPress

структура сайта

Для начала разделим наш index.php на несколько частей.

header.php

<!DOCTYPE html>
<html dir="ltr"><head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>" />
</head>
<body>

Сюда ещё не помешало бы добавить меню. Для этого воспользуемся функциями wp_list_categories() и wp_list_pages(). Просто вставляем этот код в конец header.php. Если хотите, можете добавить собственные параметры в функции.

<?php wp_list_categories(); wp_list_pages() ?>

Существует ещё более удобный вариант меню для WordPress. Его преимущество в возможности редактирования прямо из админки. Советую использовать этот способ, когда вы работаете над сайтами для клиентов.

Ну и конечно никто не запрещает вам написать меню на чистом HTML.

footer.php

</body>
</html>

sidebar.php создавать не будем, потому что нам всё равно пока что нечего туда засунуть.

index.php
Я надеюсь, вы знакомы с функциями get_header() и get_footer().

<?php get_header(); // вставка header.php ?>
Привет мир!
<?php get_footer(); // footer.php ?>

Но ведь контент по-прежнему статичен. Самое время им заняться! Для отображения контента будем использовать цикл WordPress.

Итак, вместо «Привет мир!» вставляем следующий код:

<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink(); ?>"><?php the_title();?></a>
<p><?php the_content(); ?></p>
<?php endwhile; ?>

В зависимости от страницы, на которой вы находитесь, WordPress сам подберет, что вставлять.

Подпишитесь, чтобы раз в неделю получать свежие статьи с блога по email.

Смотрите также

Оставить комментарий / вопрос

phpjsHTMLCSSSQLПросто код
  Комментарии закрыты.
  • Миша: Привет ещё раз, не поверишь, реально не сталкивался с этим вопросом. По теории можно сказать следующее: во-первых,...

  • Миша: Привет, вообще без проблем, делаешь всё через require(), require_once() - выбирай любую, какая больше нравится.

  • Виталий Моргунов: Привет! Не могу разобаться, как я могу контролировать порядок подключения стилей. В моем случае мне нужно чтобы стили...

  • Миша: Спасибо!

  • w0rmak: Это было просто. Нашел код в интернете. Добавьте и себе ymaps.load(function () { var input = document.getElem...