Создаем тему для wordpress: Создание темы (шаблона) WordPress

Содержание

Создание темы (шаблона) WordPress

Это главная страница руководства по созданию тем (шаблонов) для WordPress. Основная информация взята из официального руководства и из личного опыта.

Чтобы сразу посмотреть общий принцип создания темы, перейдите к части учебника: Создание самой простой темы

Тема WordPress — это набор css, js, php файлов, которые в связке с WordPress и плагинами выводят информацию из базы данных на экран в красивом и удобном виде (дизайне). Ну или в некрасивом и неудобном, тут смотря какую тему выбрать… В других движка тему еще называют «шаблоном», но в WordPress принято говорить именно тема — theme, а не шаблон — template. Хотя и то и другое по сути одно и тоже…

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

Необходимые файлы

Чтобы создать тему необходимы лишь два файла:

  1. index. php — главный файл темы, отвечает за вывод содержимого
  2. style.css — главный файл стилей, отвечает за css стили

Но ни одна тема по факту не состоит всего из двух файлов. Их больше: PHP, языковые файлы, файл CSS и JS, текстовые файлы. Тему начинают с двух файлов, а затем, чтобы было удобнее, её расширяют, добавляя такие файлы как:

  • header.php — отвечает за вывод шапки
  • footer.php — отвечает за вывод подвала
  • sidebar.php — отвечает за вывод боковой панели
  • page.php — отвечает за вывод отдельной страницы (записи)
  • и т.д. смотрите полный список.

Возможности темы

Возможности темы по сути безграничны, ведь там можно полностью использовать PHP. НО! Тема, как призвана отображать содержимое сайта определенным образом, а не добавлять функционала сайту. Поэтому возможности темы принято ограничивать до тех, которые отвечают за внешний вид, а все остальные возможности: голосование, рейтинги, редиректы, СЕО и т. п. принято выносить в плагины…

Таким образом, тема может:

  • Отвечать за вывод содержимого сайта под разные типы устройств: мониторы и смартфоны. Такие темы называются адаптивные. Также темы могут быть фиксированные, одноколоночные, двухколоночные и т.п.;
  • Тема может выводить любое содержимое;
  • Может указать, какой контент будет отображаться для разных пользователей;
  • Может использовать любые элементы дизайна (картинки, видео).

Как и на любом сайте, тема — это не только цветовое решение, макет и красивая картинка. По-настоящему качественные темы еще и очень функциональны. Функциональность темы, заключается в её гибкой настройке. Т.е. она не добавляет ничего нового на сайт, но отлично настраивается по вкусу владельца. Например: устанавливается фоновая картинка, меняется цвета элементов, настраивается меню и блоки с контентом (виджеты).

Чем тема отличается от плагина?

С точки зрения кода, можно сказать, ничем — в теме можно создать полноценный плагин. А вот с точки зрения логики — всем! Задача плагина, добавить что-то новое на сайт, например добавить опрос. Задача темы — вывод содержимого, в том числе, этого опроса…

Таким образом, тема отвечает за показ контента на странице, а плагин нужен для реализации функционала сайта.

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

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

Где скачивать темы?

Каталог тем на сайте WordPress.org. — одно из самых безопасных мест, где можно скачать темы. Там все темы проверяются на соответствие требованиям и рекомендациям.

Есть и другие источники, но там темы обычно платные. Например, темы можно скачать на: Creative Market.

Старт

Теперь, когда мы разобрались в темах, можно приступать к созданию своей темы. Первым делом нужно:

  1. настроить локальную среду разработки.
  2. Затем можно посмотреть примеры WordPress-тем.
  3. Ну и начать разработку своей первой темы.

Этот раздел в процессе разработки… И вообще, я его начал писать и забросил, неинтересное занятие получается. Будет время, желание продолжу…

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

Публикуем перевод статьи Nick La — это пособие по работе с темами WordPress. Пост был опубликован в 2011 году, но принципы и подходы, описанные в материале, до сих пор актуальны. Если у вас будут замечания и комментарии, пишите их под постом: дополним, расширим статью. Далее материал будет идти от первого лица.

Эта статья поведает вам о том, как создать самую простую тему для WordPress. Хотя Codex и предоставляет обширную документацию по этому вопросу, но мне она кажется несколько сложной для новичка. Поэтому в данном «туториале» я расскажу принципы работы тем для WordPress и покажу как адаптировать под них сырой HTML-шаблон. При этом от вас не требуется знание PHP, но хорошо если вы владеете Photoshop и CSS для создания дизайна.

1. Frontend блога

До того как мы начнём, давайте взглянем на стандартную тему WordPress и разберёмся из чего она состоит. Отметим элементы: шапка, заголовок поста, форма поиска, навигация, подвал.

Стандартный Frontpage (index.php)

Стандартный Single (single.php)

2. Photoshop-макеты

Основываясь на внешнем виде стандартной темы, разработайте Photoshop-макеты для вашего блога. Для примера я использую GlossyBlue — одну из моих бесплатных тем.

3. HTML и CSS

Когда PSD-дизайн готов, создайте HTML+CSS шаблон каждой страницы.

Зачем сперва создавать статический HTML? Главным образом это нужно потому, что это значительно упростит процесс разработки. Обычно я создаю HTML файл для каждого шаблона, проверяю их валидность (HTML и CSS разметку) во всех браузерах. После этого остаётся лишь вырезать и вставить код WordPress. Так что можно уже не беспокоиться об ошибках в HTML или CSS.

4. Как работает тема WordPress

Если вы перейдёте к папке стандартной темы (wp-content/themes/default), то увидите много php-файлов (называемых файлами шаблонов) и один файл style.css. Для формирования страницы WordPress обычно использует несколько файлов шаблонов (index.php , header.php, sidebar.php, и footer.php).

Подробнее в Codex: «Архитектура сайта» и «Иерархия шаблонов» .

5. Дублирование файлов шаблонов

Скопируйте папку HTML из GlossyBlue в папку wp-content/themes. После этого перейдите в директорию темы default, скопируйте comments.php и searchform.php в папку glossyblue.

6. Style.css

Перейдите в папку темы default, откройте файл style.css. Скопируйте закомментированный в начале файла текст и вставьте в style.css темы GlossyBlue. Если хотите, можете изменить название и данные об авторе.

7. Разделение файлов

Теперь нам нужно понять где разделить HTML-файлы на части: header.php, sidebar.php, и footer.php. На скриншоте ниже видно упрощённую версию моего index-файла, а также принцип его деления.

8. Header.php

Откройте index.html. Вам нужно вырезать участок от верха до места, где заканчивается , вставить его в новый php-файл и сохранить как header.php. Перейдите в папку темы default, откройте новый header.php. Скопируйте и замените теги, где этого требует php-код: title, link, таблицы стилей, h2 и div class=description.

Меню навигации (wp_list_pages) Замените тэги li в ul id=nav на ;

Ссылка: wp_list_pages

9. Sidebar.php

Вернитесь к index.html, вырежьте код с того места, где начинается form id=searchform и до закрытия тега div id=sidebar, поместите его в новый php-файл и сохраните как sidebar.php.

  • Замените form id=searchform со всем содержимым на .
  • Замените теги li категорий на
  • Замените теги li архивов на

Ссылка: wp_list_categories и wp_get_archives

10. Footer.php

Вернитесь к index.html. Извлеките оттуда код от div id=footer включительно с тегом div id=footer и до конца /html затем поместите в новый footer.php.

Недавние записи Тут я использовал query_post для отображения 5 последних записей в блоге.

«Последние комментарии» «Последние комментарии» сгенерированы плагином (включён в папку темы).

11. Index.php

Теперь в вашем index.html должен остаться только div id=content. Сохраните файл как index.php. Впишите строки: get_header, get_sidebar, и get_footer в том порядке, как они встречаются в шаблоне.

12. Разбор цикла

Цикл последовательно отображает записи блога в зависимости от ваших настроек. Скриншот ниже иллюстрирует его работу. Изначально цикл проверяет наличие записей и если таковых не находит, то выдает сообщение «Not Found».

13. Копирование цикла

Перейдите к директории темы default, откройте index.php. Скопируйте цикл из стандартного index.php в свой — между div id=content../div. После этого замените статический текст тегами шаблона WordPress: post date, title, category, comments, next и previous link.

14. Предпросмотр темы

Поздравляю! Вы создали публичную часть (основную часть шаблона). Теперь зайдите в административную панель, перейдите к закладке Design, вы должны увидеть тему GlossyBlue. Активируйте её и перейдите к публичной части, чтобы посмотреть результат в действии.

15. Single.php

Пришло время создать шаблон single.php. Если хотите, можете повторить шаги, перенося код из стандартной темы. Но мне кажется более простым использовать только что созданный index.php, сохранив его как single.php. Откройте single.php из стандартной темы и скопируйте теги шаблона в нужные места. Далее подключите comments_template. На следующем скриншоте отображены внесенные мною изменения:

16. Page.php

Теперь новый single.php сохраните с названием page.php. Уберите дату записи, форму комментариев, ссылки следующий/предыдущий. Вот, собственно, и всё — ваш шаблон page.php готов.

17. Удаление файлов HTML

Удалите все файлы HTML из папки glossyblue (они нам больше не понадобятся). Технически этого достаточно для создания базовой темы WordPress. Вы, наверное, заметили, что в стандартной теме больше PHP-файлов. Что же, на самом деле, они вам не так уж необходимы, если требуется простая тема. Например, если search.php или 404.php не будет в папке темы, WordPress автоматически использует index.php для отображения страницы. Читайте Template Hierarchy для более подробного рассмотрения.

18. Шаблон страницы WordPress

А теперь последний пример — я покажу вам как использовать Page Template для создания страницы Архива, которая будет содержать список всех записей на вашем блоге (удобно для карты сайта). Скопируйте archives.php из папки стандартной темы. Удалите ненужный код и получите что-то вроде этого:

Тут я использовал query_post (showposts=-1 означает «отобразить все записи»), чтобы перечислить все записи.

Теперь зайдите в панель администратора, создайте новую страницу и назовите её Archives. В выпадающем списке шаблонов выберите Archives.

Дополнительная литература

Просмотрите список Плагины WordPress, возможно, они покажутся вам полезными. Для более углублённого изучения читайте WordPress Theme Hacks.

Как разработать собственную тему WordPress

Если вы хотите, чтобы что-то было сделано определенным образом — ну, возможно, вам придется сделать это самостоятельно. Конечно, несмотря на то, что доступно множество отличных тем WordPress, найти ту, которая соответствует вашим конкретным требованиям, может оказаться непростой задачей для некоторых. Чтобы решить эту проблему, у вас может возникнуть соблазн создать собственную тему WordPress.

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

Получите содержимое, доставленное прямо в ваш почтовый ящик

Подпишитесь на наш блог и получайте отличный контент, точно так же, как это, доставленный прямо в ваш почтовый ящик.

Введение в разработку темы WordPress

Вы хотите, чтобы ваш сайт выглядел великолепно и обладал всеми необходимыми функциями, поэтому загляните в каталог тем WordPress:

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

Сейчас вы можете подумать о создании собственной темы. К счастью, разработка темы для WordPress не так сложна, как может показаться. Благодаря удобному интерфейсу платформы и многочисленным доступным инструментам почти каждый может создать собственную тему.

Мы проведем вас через процесс создания вашей первой темы. Для начала вам понадобятся две вещи:

  • Ваш собственный веб-сайт WordPress
  • Качественный хостинг

Вам также будет полезен опыт работы с локальными промежуточными средами, поскольку вы будете использовать их для создания своей темы. Некоторое понимание CSS и PHP также будет полезно (если не обязательно).

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

Что такое стартовая тема (и почему вы должны ее использовать)

Стартовая тема — это базовая тема WordPress, которую вы можете использовать в качестве основы для создания своей собственной. Это позволяет вам создавать прочную основу, не беспокоясь о сложностях, связанных с кодированием темы с нуля. Это также поможет вам понять, как работает WordPress, показав вам базовую структуру темы и то, как все ее части работают вместе.

Существует множество отличных тем для начинающих, включая Underscores, UnderStrap и Bones (и это лишь некоторые из них).

В нашем уроке мы будем использовать символ подчеркивания. Это хороший выбор для начинающих, потому что он содержит только основы. Кроме того, эта стартовая тема разработана Automattic (командой WordPress.com), что означает, что она, скорее всего, будет безопасной, совместимой и будет хорошо поддерживаться в долгосрочной перспективе.

Как разработать свою первую тему WordPress (5 шагов)

Завершив подготовку, вы, наконец, готовы приступить к созданию своей первой темы. Как мы упоминали ранее, в этом пошаговом руководстве мы будем использовать стартовую тему.

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

Шаг 1. Настройка локальной среды

Первое, что вам нужно сделать, это создать локальную среду разработки. По сути, это сервер, который вы устанавливаете на свой компьютер, который вы можете использовать для разработки и управления локальными сайтами WordPress. Локальный сайт — это безопасный способ разработки темы, который никак не повлияет на ваш действующий сайт.

Есть много способов создать локальную среду, но мы будем использовать Local. Это быстрый и простой способ бесплатно установить локальную версию WordPress, совместимый как с Mac, так и с Windows:

Чтобы получить запущен, выберите бесплатную версию Local, выберите свою платформу, добавьте свои данные и загрузите установщик. Когда установка будет завершена, вы можете открыть программу на своем компьютере.

Здесь вам будет предложено настроить новую локальную среду:

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

Шаг 2. Загрузите и установите начальную тему

Как и большинство начальных тем, с Underscores очень легко начать работу. Фактически, все, что вам нужно сделать, это зайти на веб-сайт и назвать свою тему:

Если хотите, вы можете нажать Дополнительные параметры , чтобы настроить базовую тему дальше:

Здесь вы можете ввести дополнительную информацию, например, имя автора, и дать описание темы:

Также есть _sassify! , который добавит файлы Syntactically Awesome StyleSheets (SASS) в вашу тему. SASS — это язык предварительной обработки для CSS, который позволяет использовать переменные, вложение, математические операторы и многое другое.

Когда вы сделали свой выбор, вы можете нажать Generate , который загрузит файл .zip , содержащий вашу начальную тему. Это основной файл, вокруг которого вы будете разрабатывать свою собственную тему, поэтому вам необходимо установить его на свой локальный сайт.

После установки темы вы можете предварительно просмотреть свой сайт, чтобы увидеть, как он выглядит. Это очень просто прямо сейчас, но это не будет иметь место в течение долгого времени!

Шаг 3: Узнайте о различных компонентах темы WordPress

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

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

Например, header.php используется для создания заголовка, а comments.php позволяет отображать комментарии.

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

Например, если вы посетите URL-адрес http://example. com/post/this-post , WordPress будет искать следующие файлы шаблонов в следующем порядке:

  1. Файлы, соответствующие слагу, например this-post
  2. Файлы, соответствующие идентификатору сообщения
  3. Универсальный одиночный почтовый файл, например single.php
  4. Архивный файл, например archive.php
  5. файл index.php

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

Еще один важный элемент, который вам нужно усвоить, — это Петля. WordPress использует этот код для отображения контента, поэтому во многих отношениях это бьющееся сердце вашего сайта. Он появляется во всех файлах шаблонов, которые отображают содержимое сообщения, например index. php или sidebar.php .

Цикл — это сложная тема, о которой мы рекомендуем вам узнать больше, если вы хотите понять, как WordPress отображает содержимое сообщений. К счастью, Loop уже интегрирован в вашу тему благодаря Underscores, так что пока не стоит об этом беспокоиться.

Шаг 4. Настройте тему

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

Добавление функциональности с помощью «хуков»

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

Давайте рассмотрим некоторые из наиболее распространенных хуков и то, для чего их можно использовать:

  • wp_head() — Добавлено в элемент в header. php . Он включает стили, сценарии и другую информацию, которая запускается сразу после загрузки сайта.
  • wp_footer() — Добавлено в footer.php прямо перед тегом . Это часто используется для вставки кода Google Analytics.
  • wp_meta() — обычно появляется в sidebar.php для включения дополнительных скриптов (таких как облако тегов).
  • comment_form() — Добавлено в comments.php непосредственно перед закрывающим тегом

файла для отображения данных комментариев.

Эти крючки уже будут включены в вашу тему Underscores. Тем не менее, мы по-прежнему рекомендуем посетить Базу данных хуков, чтобы увидеть все доступные хуки и узнать о них больше.

Добавление стилей с помощью CSS

Каскадные таблицы стилей (CSS) определяют внешний вид всего контента на вашем сайте. В WordPress это достигается с помощью файл style.css . Этот файл уже включен в вашу тему, но на данный момент он содержит только базовые стили по умолчанию:

Если вам нужен краткий пример того, как работает CSS, вы можете отредактировать любой из стилей здесь и сохранить файл, чтобы увидеть эффекты. Например, вы можете найти следующий код (обычно в строке 485):

 a {
цвет: королевский синий;
} 

Этот код управляет цветом непосещенных гиперссылок, которые по умолчанию отображаются ярко-синим цветом:

Давайте посмотрим, что произойдет, если мы попытаемся изменить это, заменив его следующим кодом:

 a {
красный цвет;
} 

Сохраните файл и проверьте свой локальный сайт. Как и следовало ожидать, все непросмотренные ссылки теперь будут отображаться ярко-красным цветом:

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

 a:visited {
цвет: фиолетовый;
} 

Это очень простой пример того, как редактирование style.css повлияет на внешний вид вашего сайта. CSS — это обширная тема, которую мы рекомендуем вам изучить подробнее, если вы хотите узнать больше о создании веб-дизайна. Есть много ресурсов по теме для начинающих.

Шаг 5. Экспортируйте тему и загрузите ее на свой сайт

Когда вы закончите возиться со своей темой, пришло время убедиться, что она работает правильно. Для этого можно использовать данные Theme Unit Test.

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

Когда вы тщательно протестировали свою тему и убедились, что она соответствует требуемым стандартам, остается только экспортировать ее.

Во-первых, вам нужно найти местоположение вашего веб-сайта на локальном компьютере. Скорее всего, вы найдете его в папке с именем Websites, внутри вашего стандартного каталога Documents .

Откройте папку веб-сайта и войдите в /wp-content/themes/ , где вы найдете свою тему:

Теперь вы можете использовать инструмент сжатия, например WinRAR, для создания .zip файл на основе папки. Просто щелкните папку правой кнопкой мыши и выберите параметр, позволяющий заархивировать ее, например, Сжать «папку» :

Когда папка заархивирована, ее можно загрузить и установить на любой сайт WordPress, как и вы установили тему Underscores в самом начале. Если вы особенно довольны результатом, вы даже можете отправить свою тему в каталог тем WordPress!

Создание пользовательской темы WordPress

Создание пользовательской темы WordPress с нуля — непростая задача. Тем не менее, этот процесс может быть не таким сложным, как вы думаете.

Напомним, вот как разработать тему WordPress за пять простых шагов:

  1. Настройте локальную среду, используя Local.
  2. Загрузите и установите стартовую тему, например Underscores.
  3. Узнайте о различных компонентах темы WordPress.
  4. Настройте свою тему.
  5. Экспортируйте тему и загрузите ее на свой сайт.

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

Как создать собственную тему WordPress с нуля (2023)

Хотите создать собственную тему WordPress, чтобы придать своему сайту уникальный вид?

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

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

Чтобы перейти к определенному разделу руководства, вы можете использовать быстрые ссылки ниже:

В этой статье

  • Шаг 1. Установите плагин SeedProd
  • Шаг 2. Выберите шаблон темы
  • Шаг 3. Настройте Части вашей темы WordPress
  • Шаг 4. Подключитесь к почтовой службе
  • Шаг 5. Опубликуйте свою собственную тему WordPress

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

Темы WordPress созданы с использованием комбинации PHP, CSS, JavaScript и HTML. Это языки программирования, для изучения которых требуется много тренировок. Так что, если вы сами не являетесь разработчиком, ваш единственный вариант — нанять агентства по разработке для создания тем для вас, что может быть очень дорогостоящим.

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

Почему SeedProd?

SeedProd — самый удобный плагин для создания целевых страниц для WordPress.

Он обеспечивает высокий уровень настройки и включает широкий спектр дополнительных функций, включая:

  • Конструктор тем
  • Более 150 шаблонов целевых страниц
  • Конструктор перетаскивания
  • Интеграция электронного маркетинга
  • 2 миллиона стоковых фото
  • и более.

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

Давайте посмотрим, как создать тему WordPress с помощью SeedProd.

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

Если вы хотите заменить существующую тему WordPress на ту, которую собираетесь создать, мы рекомендуем использовать для нее тестовый сайт разработки. Таким образом, вы не рискуете случайно вызвать какие-либо ошибки на своем основном сайте. Лучшие хостинг-сервисы WordPress, такие как Bluehost, предлагают среды разработки для WordPress.

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

После того, как вы сделали эти приготовления, пришло время приступить к созданию пользовательской темы WordPress без кода!

Шаг 1. Установите плагин SeedProd

Прежде всего, установите плагин SeedProd на свой сайт WordPress. Вы можете посмотреть инструкции по установке плагинов WordPress, если вы никогда раньше не устанавливали плагин.

Вам понадобится как минимум лицензия SeedProd Pro, чтобы разблокировать функцию создания тем. Чтобы активировать лицензию Pro, откройте свою учетную запись SeedProd и щелкните вкладку Загрузки . Прокрутите вниз, чтобы найти лицензионный ключ и скопировать его.

Затем откройте панель администратора WordPress и перейдите в SeedProd »Настройки.  Затем введите скопированный ключ в поле Лицензионный ключ и нажмите Подтвердить .

Теперь перейдите к SeedProd » Theme Builder. Это панель инструментов, на которой будут жить все ваши различные элементы темы.

Теперь у вас есть два способа создать свою тему с помощью SeedProd: создать каждую отдельную часть вашей темы самостоятельно или использовать готовый шаблон и отредактировать части, которые вам не нравятся.

Каждая тема WordPress состоит из разных частей, включая:

  • Заголовок
  • Нижний колонтитул
  • Домашняя страница
  • Один пост
  • Одна страница
  • Архив или страница блога
  • Боковая панель

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

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

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

Шаг 2. Выберите шаблон темы

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

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

В этом примере мы будем использовать тему Starter. Как только вы выберете тему, SeedProd автоматически создаст все отдельные части темы.

Вы также можете отключить различные части темы, если они вам не нужны для вашего сайта. Чтобы отключить любой раздел, вы можете использовать кнопки-переключатели под заголовком «Опубликовано».

Вы можете изменить настройки для каждой части вашей темы, щелкнув Edit Conditions 9кнопка 0140.

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

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

Шаг 3. Настройка частей вашей темы WordPress

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

Чтобы начать редактирование, наведите курсор на часть темы и нажмите Edit Design .

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

Верхний и нижний колонтитулы

Чтобы начать редактирование верхнего колонтитула, нажмите кнопку Edit Design , которая появляется при наведении указателя мыши на верхний колонтитул. Это приведет вас к интерфейсу перетаскивания тем SeedProd. Наведите курсор и щелкните область заголовка, чтобы открыть параметры настройки, которые появятся на левой панели.

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

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

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

Теперь щелкните вкладку Advanced , чтобы получить доступ к дополнительным настройкам, таким как тень, интервал, граница, положение и т. д.

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

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

Далее мы собираемся отредактировать домашнюю страницу.

Домашняя страница

Домашняя страница — это передняя часть вашего веб-сайта. Обычно он содержит важные элементы, которые определяют, кто вы, что вы делаете, и обеспечивают социальное доказательство посредством отзывов и отзывов.

Шаблон Starter Theme, который мы используем, имеет все ключевые разделы, которые вы обычно найдете на главной странице бизнес-сайта, включая:

  • Основная область
  • Секция характеристик
  • Отзывы
  • Раздел часто задаваемых вопросов

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

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

Используйте настройки и блоки в левом меню, чтобы редактировать дизайн, пока вы не будете полностью удовлетворены. Когда вы внесли все изменения, обязательно проверьте предварительный просмотр для мобильных устройств.

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

Когда вы будете довольны своей домашней страницей, нажмите кнопку Сохранить и вернитесь на панель инструментов конструктора тем SeedProd.

Страница блога

Теперь давайте создадим пользовательскую страницу блога для вашего сайта. На панели инструментов конструктора тем нажмите ссылку Edit Design под Blog Index, Archives, Search , чтобы начать его редактирование.

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

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

После того, как вы настроили страницу блога, нажмите Сохранить и снова вернитесь на панель управления.

Global CSS

В разделе Global CSS настраиваются глобальные параметры цветов, типографики, макета и стиля вашей темы.

На панели инструментов Theme Builder нажмите Edit Design в разделе Global CSS вашей темы.

Например, вы можете выбрать цвет и шрифт кнопки , которые должны отображаться на всем сайте.

Точно так же вы можете изменить текстовые шрифты, фон, макет и даже добавить пользовательский CSS в свою тему. Эти изменения будут применяться ко всему сайту и обеспечат единообразие стиля.

Когда вы закончите настройку параметров по своему вкусу, нажмите кнопку Сохранить .

Шаг 4. Подключение к службе рассылки

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

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

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

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

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

Шаг 5. Опубликуйте свою собственную тему WordPress

Теперь ваша тема готова к развертыванию! Чтобы активировать тему, перейдите на панель инструментов конструктора тем и нажмите кнопку-переключатель «Включить тему SeedProd » в правом верхнем углу экрана.

Теперь давайте взглянем на нашу недавно созданную пользовательскую тему WordPress!

Это главная страница темы с заголовком:

А вот и страница блога.

И все! Вы только что создали свою первую пользовательскую тему WordPress без кода!

Затем создайте контактные формы для вашего сайта WordPress

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

This entry was posted in Популярное