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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

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

Отменить
173
How-to Читать 9 минут 13 мая 2019

Как создать тему в 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-бальной шкале

из 5 на основе 0 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Хотите узнать новые фишки по интернет-маркетингу?
Подпишитесь на нашу рассылку — только полезные статьи, реальные кейсы и новости Serpstat раз в неделю.

Поделитесь статьей с вашими друзьями

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

Свяжитесь с нашей службой поддержки
Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
Выберите один из проектов

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

Экспорт недоступен для вашего тарифного плана. Вам необходимо улучшить свой тариф до Lite или выше, чтобы получить доступ к инструменту Подробнее

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

Пригласить
Просмотр Редактирование

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

Я хочу больше лимитов