Создание собственной темы для WordPress

Время чтения статьи 10 минут

Оглавление

Почему полезно создавать шаблон WordPress с нуля?
7 преимуществ создания новой темы для WordPress
Что нужно для создания темы WordPress?
Перенос содержимого файла index.php в отдельные файлы
Зачем создавать дочернюю тему в WordPress?
Сервисы и конструкторы для создания тем WordPress
Подведём итоги

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

Почему полезно создавать шаблон WordPress с нуля?

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

7 преимуществ создания новой темы для WordPress

Уникальность: создание своей темы позволяет выделиться на фоне других сайтов, которые используют стандартные темы, и создать уникальный бренд-образ.
Индивидуальная функциональность: создание своей темы позволяет добавить индивидуальные функции и настроить элементы, которых нет в стандартных темах.
Экономия денег: создание темы вручную экономит деньги на услугах дизайнера или разработчика тем.
Гибкость: создание своей темы дает возможность гибко настраивать дизайн и функционал сайта под конкретные потребности.
Оптимизация: создание своей темы позволяет оптимизировать сайт для скорости загрузки, SEO и мобильной адаптивности.
Обновления: создание своей темы позволяет контролировать процесс обновлений и исправлять возможные ошибки непосредственно на сайте.
Резервное копирование: создание дочерней темы в качестве резервной копии позволяет изменять тему без риска повреждения основной темы, а также восстанавливать предыдущую версию в случае непредвиденных ошибок.

Что нужно для создания темы WordPress?

Чтобы создать тему WordPress из HTML-шаблона требуются базовые знания HTML и установленная на компьютере платформа WordPress. Для редактирования кода можно использовать редакторы, такие как Notepad++ или Блокнот.

Чтобы начать работу, необходимо найти директорию wp-content\themes на жёстком диске, где установлена WordPress, и создать в ней новую папку с названием будущей темы. Здесь хранятся стандартные темы WordPress.

Каждая тема WordPress должна содержать два обязательных файла: index.php и style.css, а ещё папку images с изображениями для шаблона. Чтобы начать создание темы, необходимо создать эти файлы, а затем приступить к наполнению содержимым.

Файл index.php можно создать самостоятельно в текстовом редакторе, заказать у специалиста или взять готовое содержание из другой темы.

Чтобы создать шаблон для WordPress, необходимо добавить файл screenshot.png в папку с темой, предварительно убедившись, что его разрешение соответствует требованию 1200х900 пикселей. Изображение может быть любым, подходящим под указанные параметры.

Давайте рассмотрим пример простого содержания файла index.php для нашей будущей темы, в которой будут :

шапка (header)
подвал (footer)
основной пост
боковая панель (сайдбар)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Мой блог</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="header">
    <div id="logo">
      <a href="index.html"><img src="images/shapka.png" alt="" title=""/></a>
    </div>
    <ul id="menu">
      <li><a href="#">Главная</a></li>
      <li><a href="#">О нас</a></li>
      <li><a href="#">Каталог товаров</a></li>
      <li><a href="#">Контакты</a></li>
    </ul>
  </div>
  <div id="content-main">
    
    <div id="content">
      <div class="post-content">
        <div class="post-img"><a href="#"><img width="275" height="230" src="images/mini.jpg" alt="Миниатюра поста"/></a></div>
        <h1 class="note-title"><a href="#">Заголовок</a></h1>
        <div class="post-text">Основной текст</div>
        <div class="readmore"><a href="#">Читать далее</a></div>
      </div>
    </div>
 
    <div id="sidebar">
      <div class="widget-title">Популярное на сайте</div>
      <div class="widget">
        <ul>
          <li><a href="#">Новости</a></li>
          <li><a href="#">Комментарии</a></li>
          <li><a href="#">Отзывы</a></li>   
        </ul>
      </div>
    </div>
  </div>
  <div id="footer">
    <p>Копирование информации запрещено</p>
  </div> 
</body>
</html>

Для создания новой темы необходимо скопировать код примера файла index.php в текстовый редактор и сохранить его с расширением php в папке с новой темой. Затем можно добавлять нужные элементы для формирования внешнего вида сайта, используя знания HTML и CSS. Существующие теги HTML можно изучить на специальных ресурсах.

Далее необходимо заполнить файл style.css. Для этого нужно открыть текстовый редактор, добавить следующее содержание и сохранить файл в папке с темой:

/*
Theme Name: Название темы
Theme URI: Адрес сайта, посвященного данной теме
Description: Описание темы 
Version: Версия темы
Author: Имя автора
Author URI: Адрес автора темы
*/

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

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

Перенос содержимого файла index.php в отдельные файлы

Для более удобного управления содержимым сайта необходимо разделить файл index.php на несколько отдельных файлов, таких как шапка, сайдбар и футер. В каждом из этих файлов должны быть прописаны соответствующие элементы дизайна, которые повторяются на всех страницах сайта. Эти файлы должны храниться в общей папке и иметь расширение php.

Для создания файла header.php следует скопировать из index.php соответствующие строки, относящиеся к заголовку.

  <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Мой блог</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
    <div id="logo">
      <a href="index.html"><img src="images/shapka.png" alt="" title=""/></a>
    </div>
    <ul id="menu">
      <li><a href="#">Главная</a></li>
      <li><a href="#">О нас</a></li>
      <li><a href="#">Каталог товаров</a></li>
      <li><a href="#">Контакты</a></li>
    </ul>
  </div>

Вот и весь header. Содержимое файла sidebar.php будет аналогичным и выделенным из index.php следующим кодом, отвечающим за боковую панель.

<div id="sidebar">
      <div class="widget-title">Популярное на сайте</div>
      <div class="widget">
        <ul>
          <li><a href="#">Новости</a></li>
          <li><a href="#">Комментарии</a></li>
          <li><a href="#">Отзывы</a></li>   
        </ul>
      </div>
    </div>

Соответственно в файле footer.php будут такие строки:

<div id="footer">
    <p>Копирование информации запрещено</p>
  </div>

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

Для корректного отображения шапки, сайдбара и футера необходимо подключить соответствующие файлы к основному файлу (index.php). Для этого нужно вставить специальную строку в начале index.php:

<?php get_header(); ?>

А в конце файла для подключения боковой панели и футера — такие строки:

<?php get_sidebar(); ?>
<?php get_footer(); ?>

В итоге после выделения информации о шапке, сайдбаре и футере в отдельные файлы, в файле index.php останется только код для основного контента страницы:

<?php get_header(); ?>
<div class="content-main">
  <div class="content">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div class="post-content">
      <div class="post-img"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full'); ?></a></div>
      <h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      <div class="post-text"><?php the_excerpt(); ?></div>
      <div class="readmore"><a href="<?php the_permalink(); ?>">Читать далее</a></div>
    </div>
    <?php endwhile; ?>
    <?php else: ?>
    <?php endif; ?>
  </div>
  <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

После переноса участков кода, останется файл index.php, содержащий только основную информацию о странице. Если нужно, можно создавать дополнительные файлы и разделы для отображения на сайте различных данных. Некоторые из наиболее часто используемых элементов включают:

Home – тема, которая будет использоваться для главной страницы сайта.
Search – формат отображения поисковой строки на сайте.
Date – стиль, в котором дата и время будут отображаться на странице.
Archive – раздел, в котором будут храниться устаревшие данные.
Comment – правила отображения комментариев на странице.
Category – разделение контента на странице по категориям.
404 – формат, в котором будет отображаться страница с ошибкой 404.
Page – тема, которая будет использоваться для отдельных страниц на сайте.

Зачем создавать дочернюю тему в WordPress?

Создание подтемы WordPress может помочь избежать ошибок, которые не могут быть исправлены в основной теме без возможности возврата к предыдущей версии файла. В подтеме создается копия файла style.css, в котором можно вносить изменения, не затрагивая основной файл.

Для создания дочерней темы WordPress необходимо начать с создания папки для новой темы в директории wp-content\themes. После этого нужно создать файлы index.php и style.css в созданной папке, как это делается при создании основной темы. Однако в дочерней теме в файле style.css необходимо указать, что она является дочерней для родительской темы, чтобы WordPress мог правильно обрабатывать изменения:

/*
Theme Name: Название дочерней темы
Template: Имя папки с дочерней темой
Theme URI: Адрес, посвященный теме
Description: Описание темы
Author: Имя автора
Author URI: Адрес автора
Version: Версия темы
*/
/* импортируем стили родительской темы */
@import url(«../Название основной темы/style.css»);
/* свои дополнительные стили */
.foo{ color:orange; }

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

Сервисы и конструкторы для создания тем WordPress

Существуют конструкторы и сервисы, которые позволяют создавать темы для WordPress.

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

WP Theme Generator – это еще один бесплатный генератор тем WordPress, который предоставляет пользователю возможность создать свою собственную тему. Он также имеет простой интерфейс и позволяет настраивать цвета, шрифты, фон и другие элементы темы.

Существуют и другие конструкторы тем для WordPress с простым и понятным интерфейсом, такие как Beaver Builder, Page Builder и Elementor – наверное самый популярный на сегодняшний день.

Подведём итоги

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

Каждый шаблон для WordPress состоит из двух основных файлов: index.php и style.css. Создав эти файлы, можно начать экспериментировать с элементами и функциями шаблона, что позволяет создавать индивидуальный дизайн для каждой страницы.

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