В первом уроке мы создадим папку нашей первой темы, добавим описание, сделаем превью шаблона и выведем «Hello World».

На данный момент будем считать, что вы установили на локальный сервер Wordrpess версии старше 5.0 и на вашем компьютере есть удобный редактор кода.

Когда мы переходим в корень нашего сайта с установленной CMS WordPress, то мы видим три папки:

  • wp-admin
  • wp-content
  • wp-includes

Мы не будем работать с папками wp-admin и wp-includes, т.к. это папки ядра WordPress (далее — WP). Никакие изменения в эти папки и файлы внутри мы не вносим.

Также в корне есть еще набор файлов, которые мы не будем изменять.

Мы переходим в папку wp-content и внутри мы наконец-то видим те папки с которыми мы можем работать — themes и plugins. Вторая папка содержит установленные в WordPress плагины или, как их еще называют, модули, а вот папка themes — это то, что нам нужно.

Папка themes содержит все темы (шаблоны), которые могут быть использованы на сайте.

Создаем папку темы

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

Для примера создадим новую тему с названием 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. Она не идеальна, но мы можем теперь её начать усложнять в следующих уроках.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вы можете использовать эти HTML теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>