Мы используем файлы cookie для обеспечения работоспособности сервиса, улучшения навигации и маркетинговых активностей Serpstat. Нажимая "Принять и продолжить", вы соглашаетесь с нашей Политика конфиденциальности

Сообщить об ошибке

Отменить
5565
How-to Читать 9 минут

Как создать тему в WordPress самостоятельно

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

Для чего нужно создание шаблона WordPress с нуля

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

Преимущества создания новой темы

  • Возможность отличиться от конкурентов, использующих стандартные шаблоны WordPress;

  • возможность использовать уникальные функции, самостоятельно подбирать рабочие элементы;

  • при работе вручную — экономия денежных средств на привлечение сторонних специалистов;

  • использование разных дизайнов для каждой страницы сайта;

  • возможность доработки или корректировки темы;

  • создание дочерней темы в качестве резервной копии для отката ненужных изменений.

Как создать тему для WordPress

Для создания темы WordPress из HTML-шаблона понадобятся базовые знания этого языка программирования. Первое, что нужно сделать — скачать и установить WordPress на компьютер. Вам также потребуется любой редактор, например, Notepad++ или Блокнот.

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

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

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

Рассмотрим пример файла 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>
  <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>
Этот код нужно скопировать в блокнот и сохранить в папке с новой темой, указав расширение php. Дальше в этот файл можно добавлять любые элементы, которые вам хотелось бы видеть на сайте. Ознакомиться со всеми существующими тегами HTML можно на этом сайте.

Теперь необходимо наполнить файл style.css. Аналогично с предыдущим шагом, откройте текстовый редактор и добавьте такое содержание:
/*
Theme Name: Название темы
Theme URI: Адрес сайта, посвященного данной теме
Description: Описание темы 
Version: Версия темы
Author: Имя автора
Author URI: Адрес автора темы
*/
Пока этого достаточно. Дальше нужно будет дополнять этот файл информацией о внешнем оформлении страниц.

Разделение index.php на отдельные файлы

Файл index.php содержит общую информацию о сайте. В ней прописаны элементы, которые повторяются для каждой страницы. Для корректной работы всего содержимого, нужно создать отдельные файлы для шапки, сайдбара, футера. Все они будут храниться в общей папке, и каждому будет присвоено расширение php.
Файл index.php для WordPress CMS
Например, первым создаем файл 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.php. Такие же действия нужно проделать с остальными файлами. Следовательно, содержимое sidebar.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 нужно добавить строку:
<?php get_header(); ?>
А в конце файла — эти строки:
<?php get_sidebar(); ?>
<?php get_footer(); ?>
В результате после переноса данных шапки, сайдбара и футера останется такая информация:
<?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. По желанию можно создавать дополнительные файлы и разделы для отображения на сайте разной информации. Список самых популярных элементов:
1
Home — тема для главной страницы.
2
Search — формат поиска на сайте.
3
Date — стиль вывода даты и времени.
4
Archive — раздел для хранения устаревших данных.
5
Comments — правило вывода комментариев.
6
Category — разделение по категориям.
7
404 — формат вывода страницы с ошибкой.
8
Page — тема для отдельных страниц на сайте.

Для чего нужно создание дочерней темы WordPress

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

Создание дочерней темы WordPress начинается так же, как и начало работы с основной. Нужно открыть директорию wp-content\themes и создать в ней папку для второй темы. Дальше следует проделать то же самое, что и раньше: создать файлы index.php и style.css. Во втором прописать:
/*
Theme Name: Название дочерней темы
Template: Имя папки с дочерней темой
Theme URI: Адрес, посвященный теме
Description: Описание темы
Author: Имя автора
Author URI: Адрес автора
Version: Версия темы
*/
/* импортируем стили родительской темы */
@import url(«../Название основной темы/style.css»);
/* свои дополнительные стили */
.foo{ color:red; }
После этого нужно в админке активировать созданный дочерний шаблон и дальше работать с ним.

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

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

Один из популярных генераторов тем — Lubith, который отличается простым и понятным интерфейсом. Чтобы в нем разобраться, достаточно знать английский язык на уровне чтения.

После регистрации открывается личный кабинет с настройками. В этом окне можно создавать и устанавливать блоки, подбирать цвета, точные размеры рамок. Для выбора настроек используйте разделы в левой части монитора:
Генератор тем для WordPress онлайн Lubith
Когда дизайн будет готов, необходимо нажать кнопку «Download» для загрузки архива новой темы. Чтобы ее установить на сайт, загрузите архив в админке WordPress и активируйте новую тему. Далее вы сможете редактировать тему прямо в коде сайта.

Альтернативные конструкторы тем WordPress с интуитивно понятным интерфейсом: Beaver Builder, Page Builder, Elementor.

Заключение

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

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

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

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Оцените статью по 5-бальной шкале

3.6 из 5 на основе 27 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.