Первая тема

Для создания собственной темы мы можем в этой папке создать пустую папку и дать ей название, которые, собственно, и будет носить наша новая тема.

Для примера создадим новую тему с названием Test. Теперь, если в админке WordPress (административная панель) мы перейдем во вкладку Внешний вид -> Темы, то увидим нашу тему внизу в блоке «Поврежденные темы».

WP выдаст нам предупреждение — «Таблица стилей не найдена«. Так сделали создатели WordPress, что информация о теме должна содержаться в файле стилей этой темы и он считается основным.

В нашу папку test мы добавляем новый файл style.css.

После этого WP выдаст новое предупреждение о том, что не найден еще один файл index.php.

Создаем в папке test файл index.php. Снова переходим Внешний вид -> Темы и теперь видим, что всё хорошо и WP отображает нашу новую тему среди остальных тем.

Первая тема

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

Это описание WP берет из файла стилей темы — style.css. Я не буду долго описывать процесс заполнения информации о теме, мы для примера возьмем пример из базовой тему движка Twenty Twenty:

/*
Theme Name: Twenty Twenty
Text Domain: twentytwenty
Version: 1.5
Requires at least: 4.7
Requires PHP: 5.2.4
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Author: the WordPress team
Author URI: https://wordpress.org/
Theme URI: https://wordpress.org/themes/twentytwenty/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
 with others.
*/

Как видно из примера — нам нужно заполнить ряд полей типа Theme Name, Text Domain и т.д.

Мы копируем данный код и вставляем в файл style.css нашей темы, после чего меняем Ключ -> Значение на свои данные.

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

Первая тема

Далее нам нужно добавить картинку-превью для нашей темы, которая будет видна во вкладке Темы.

Превьюшку можно добавить и в самом конце после создания темы.

Картинка должна находиться в папке с нашей темой и называться screenshot.png. Размер превью должен быть 1200 на 900 пикселей.

После этого можно нажать «Активировать» и наша тема станет основной. Перейдя на главную страницу сайта мы увидим белый экран, т.к. в файлах index.php и style.css у нас ничего нет.

Добавим теперь для проверки работы темы в index.php строку:

<h1>Hello World!</h1>
// или <h1>Привет Мир!</h1>

И на главной странице сайта увидим:

Первая тема

На данный момент можно сказать, что мы создали свою первую тему для WordPress. Она не идеальна, но мы можем теперь её начать усложнять в следующих уроках.

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

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

Все веб-сайты, независимо от того, как они создаются, нуждаются в общих элементах: заголовках, основных областях содержания, меню, боковых панелях, нижних колонтитулах и тому подобном. Вы поймете, что создание тем WordPress — это еще один способ создания сайта.

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

В следующих уроках мы углубимся в темы и обсудим шаблоны и другие файлы, из которых состоит большинство тем, а также PHP, используемый для создания динамических тем, в том числе:

  • теги шаблонов,
  • циклы,
  • функции темы,
  • условные теги,
  • и многое другое

Была ли эта страница полезной?