WordPress как на ладони
wordpress jino

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

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

В разделе «Что такое тема?» упоминалось, что для создания темы необходимо всего два файла: index.php и style.css. Первый отвечает за вывод содержимого, второй за css стили этого вывода. Это обязательные файлы, а есть еще много необязательных, которые расширяют возможности темы и делают разработку удобнее.

А сейчас, чтобы увидеть как это работает, давайте создадим самую простую темы из двух файлов и запустим её. Шаги ниже предполагают, что вы уже ознакомились со статьей: Программная среда для создания тем и WordPress уже установлен.

Шаг 1: создание папки темы

Зайдите в папку на вашем компьютере, где установлен ваш сайт на WordPress. Затем из основной папки, перейдите в папку тем: wp-content/themes/ и создайте в ней папку mytheme — это будет папка темы, в которой будут лежать все файлы темы. Должно получиться примерно так:

Создание папки темы

Шаг 2: создание обязательных файлов: style.css и index.php

В созданной папке темы mytheme создайте файл style.css. Откройте этот файл в текстовом редакторе, например notepad++ и добавьте в него такой CSS код:

/**
Theme Name: Моя первая темы
Author: Пупкин
*/

body {
	background: #F2F1EC;
	max-width: 700px;
	margin: 2em auto;
}

.header, .footer {
	margin: 2em auto;
	text-align: center;
}

Далее, точно также создайте еще один файл 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="middle">
	<?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">
		<?php echo date('Y') ?> © Я и компания моя
	</footer>

	<?php wp_footer(); ?>
</body>

</html>

Шаг 3: активация темы

На этом все! Тема готова. Правда в очень первоначальном виде. Но она уже работает, осталось только её активировать. Для этого заходим в админ-панель > Внешний вид > Темы и активируем тему с названием: «Моя первая тема».

Активация темы

Далее, переходим во внешнюю часть и смотрим как выглядит наша первая тема, видим:

Моя первая тема

Все, первая тема готова!

Разумеется, в таком виде использовать её невозможно — тема требует доработки. Чтобы быстрее понять как и что нужно делать, рекомендую ознакомится с остальными главами этого руководства. А также, в качестве примера ознакомьтесь с очень простой стартовой темой: clean-wp-template.

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

Немного про файл style.css

Файл темы style.css это особенный файл — он обязательный, а еще именно по нему WordPress идентифицирует тему. Т.е. когда вы заходите в темы в админ-панели, WordPress просматривает все файлы style.css в папках и показывает все доступные темы. Название темы и другие данные берутся именно из этого файла. Эти данные считываются из начальных данных файла, которые находятся в комментариях:

/**
 * Theme Name: Моя первая темы
 */

Theme Name — это обязательное поле, но есть и другие необязательные поля. Вот их полный список:

/*
Theme Name: Название темы
Theme URI: URL темы в каталоге WordPress или где-то еще. Пример: http://wordpress.org/themes/twentythirteen
Author: Имя автора темы
Author URI: URL автора. Пример: http://mysite.org/
Description: Короткое описание темы. 
Version: Версия темы. Пример: 1.0
License: Лицензия. Пример: GNU General Public License v2 or later
License URI: URL на лицензию. Пример: http://www.gnu.org/licenses/gpl-2.0.html
Tags: Метки темы, по которым тему можно будет найти в каталоге WordPress. Например: black, brown, orange, tan, white, yellow
Text Domain: Домен перевода для темы. Нужен чтобы можно было перевести описание указанное в Description. Например: twentythirteen
*/
Создание самой простой темы Комментариев нет

Здравствуйте, !

Ваш комментарий