– Читать 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.

Например, первым создаем файл 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. По желанию можно создавать дополнительные файлы и разделы для отображения на сайте разной информации. Список самых популярных элементов:

Home — тема для главной страницы.

Search — формат поиска на сайте.

Date — стиль вывода даты и времени.

Archive — раздел для хранения устаревших данных.

Comments — правило вывода комментариев.

Category — разделение по категориям.

404 — формат вывода страницы с ошибкой.

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 — набор инструментов для поискового маркетинга!

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

Набор инструментов для экономии времени на выполнение SEO-задач.

7 дней бесплатно

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

3.88 из 5 на основе 36 оценок

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

Используйте лучшие SEO инструменты

Подбор ключевых слов

Поиск ключевых слов – раскройте неиспользованный потенциал вашего сайта

Возможности Serpstat

Возможности Serpstat – комплексное решение для эффективного продвижения вебсайтов

Кластеризация ключевых слов

Кластеризация ключевых слов автоматически обработает до 50 000 запросов в несколько кликов

SEO аудит страницы

Проанализируйте уровень оптимизации документа используя SЕО аудит страницы