Статьи

Создание темы WordPress из статического HTML: выпуск вашей темы

Ноябрь 24, 2018

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

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

Это имеет ряд преимуществ перед выпуском вашей темы в другом месте:

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

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

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

Что вам нужно

  • ваш редактор кода по вашему выбору
  • браузер для проверки вашей работы и загрузки вашей темы
  • установка WordPress, локальная или удаленная
  • Если вы работаете локально, вам понадобится MAMP, WAMP или LAMP, чтобы запустить WordPress.
  • Если вы работаете удаленно, вам понадобится FTP-доступ к вашему сайту и учетная запись администратора в вашей установке WordPress.

Стандарты кодирования

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

  • Убедитесь, что ваш синтаксис кода не вызовет конфликтов с другими темами или плагинами или с ядром WordPress. Например, правильно назовите все файлы и присвойте своим файлам и функциям плагинов уникальные имена, используя в качестве префикса имя вашего плагина или темы. Не используйте wp_ в качестве префикса для каких-либо функций или файлов, чтобы избежать конфликтов с ядром.
  • Проверьте ваш код. Используйте службу проверки, например сайты проверки W3C для HTML и CSS, чтобы убедиться, что ваш код проверяется. В некоторых случаях ваш код может не проверяться по уважительным причинам (например, вы используете HTML5 или CSS3, которые еще не являются частью спецификации) — если это так, убедитесь, что вы понимаете, почему код не ‘ Проверьте и исправьте его, чтобы он не вызывал проблем.
  • Отладка вашего кода. Используйте WP_DEBUG чтобы убедиться, что ваш код не WP_DEBUG никаких ошибок, включая уведомления об устаревших функциях, ошибки PHP, предупреждения или другие уведомления.
  • Если ваша тема или плагин использует JavaScript, протестируйте его с помощью консоли JavaScript в вашем браузере. Убедитесь, что вы используете последнюю версию любых библиотек JavaScript; и если вы используете jQuery, сделайте это, получив доступ к версии jQuery, связанной с WordPress.
  • Браузер протестирует ваш код. Убедитесь, что ваша тема или плагин работает во всех основных браузерах, и избегайте использования взломов браузеров для достижения совместимости с браузерами, где это возможно — гораздо лучше написать чистый код, который поддерживает несколько браузеров, а затем добавить «дополнительные», такие как CSS3-бонусы, которые не нужны для эффективного использования сайта работает ваша тема или плагин.
  • Проверьте свой код на нескольких устройствах. Поскольку все больше и больше пользователей получают доступ к сайтам WordPress на мобильных устройствах, ваш код должен работать на них. Подумайте, должна ли ваша тема отвечать требованиям, и убедитесь, что любые взаимодействия в вашем плагине работают на разных устройствах и не нарушают макет.
  • Протестируйте свой код на нескольких установках WordPress, включая установки на разных серверных платформах и на тех, на которых работает Multisite. Также полезно проверить установки с другими популярными плагинами, такими как BuddyPress и некоторые из фреймворков с большими темами, если это возможно, чтобы убедиться в отсутствии несовместимости. Попросите других разработчиков помочь вам в этом, чтобы у вас был максимально широкий спектр сред тестирования.

Рекомендации по обзору тем

При рассмотрении представленных тем группа по обзору тем использует « Руководство по рассмотрению тем », чтобы убедиться, что тема подходит и хорошо написана. Ваша тема должна соответствовать следующим требованиям:

  • Качество кода — ваш код должен соответствовать стандартам кодирования WordPress и не должен создавать никаких устаревших уведомлений о функциях, предупреждений или ошибок.
  • Презентация против функциональности. Темы предназначены для презентации, поэтому, если ваша тема функциональна, она должна быть плагином.
  • Функции темы — Ваша тема должна поддерживать все основные функции WordPress, независимо от того, имеет ли она свои дополнительные функции.
  • Шаблонные теги и хуки — это должно быть реализовано правильно.
  • Созданные WordPress CSS-классы — ваша тема должна использовать их там, где это уместно.
  • Файлы шаблонов — ваша тема должна использовать их правильно.
  • Безопасность и конфиденциальность. Темы должны обеспечивать безопасность данных и конфиденциальность пользователей.
  • Лицензирование — Ваша тема должна быть лицензирована под лицензией, совместимой с GPL.
  • Наименование — название вашей темы не должно включать «WordPress», и оно должно быть уникальным, чтобы не вводить пользователей в заблуждение.
  • Кредитные ссылки — ваша тема должна использовать их соответствующим образом.
  • Документация. Как минимум, вы должны предоставить файл readme.txt.
  • Тематические юнит-тесты — ваша тема должна пройти их.
  • Устаревание темы — Вы должны держать свою тему актуальной после того, как она будет принята.

Подготовка вашей темы

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

стилей

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

1
Tags: black, white, grey, featured-images, responsive, mobile, light, two-columns

Проверка

Затем проверьте свой код с помощью сервисов проверки W3C для HTML и CSS . Если вы найдете какие-либо ошибки, исправьте их.

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

Отладка

Откройте файл wp-config.php в вашей установке WordPress для разработки и найдите следующую строку:

1
define(‘WP_DEBUG’, false);

Измените его так:

1
define(‘WP_DEBUG’, true);

Теперь откройте сайт разработки, активируйте тему (если она еще не активирована) и протестируйте каждую страницу.

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

Если появятся какие-либо сообщения об ошибках, исправьте неправильный код. Для нашей темы WP_DEBUG не WP_DEBUG никаких ошибок — фу!

Тестирование браузера и устройства

Протестируйте свой код в наиболее часто используемых браузерах, в частности IE, — для общедоступных тем целесообразно поддерживать IE8 и выше, хотя вы можете решить поддержать IE7, если вы можете сделать это без особых затруднений. Если у вас нет доступа ко всем браузерам, вы можете использовать инструмент тестирования браузера, такой как Browserstack , который позволяет вам создать бесплатную пробную учетную запись на ограниченный период времени.

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

Readme.txt

Файл readme.txt расскажет пользователям, как работает ваша тема. Создайте новый пустой файл в папке вашей темы с именем readme.txt и вставьте в него описание того, как работает ваша тема.

В моей теме я написал следующее:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
Creating a WordPress Theme from Static HTML
 
This theme supports the 12th part of this series for wptutsplus.
 
The theme includes the following template files:
index.php
page.php — for static pages
archive.php — for archive pages
header.php
sidebar.php
footer.php
 
The theme supports featured images, menus and widgets and uses them as follows:
 
Featured images:
These are displayed in the archive and index templates if they are praesnt, using the medium size.
 
Menus:
The default menu is in header.php, and uses the Menus admin
 
Widgets:
There are 6 widget areas:
In Header Widget Area — in the header, to the right (header.php)
Sidebar Widget Area — in the sidebar (sidebar.php)
First Footer Widget Area — in the footer (footer.php)
Second Footer Widget Area — in the footer (footer.php)
Third Footer Widget Area — in the footer (footer.php)
Fourth Footer Widget Area — in the footer (footer.php)
If widget areas are not populated by widgets they do not output any code.
 
Styling
The theme uses Object Oriented CSS (OOCSS).
They are responsive, so will resize on smaller screens (for example the .half class is full width on phones)
.full-width
.three-quarters
.two-thirds
.half
.third
.quarter

Именование

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

В моей теме я использовал wptutsplus_ в качестве префикса. Не используйте wp_ .

Выполнение тематических юнит-тестов

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

  1. Загрузите файл XML, содержащий данные испытаний .
  2. Используя меню «Импорт» в админке WordPress, импортируйте файл XML в свою тему.
  3. Установите для WP_DEBUG значение 'true' в WP_DEBUG wp-config.php.
  4. Установите список плагинов , все из которых можно установить через плагин Developer .
  5. Выполните обзор темы, используя этот процесс .

Если ваша тема прошла, вы можете быть уверены, что она пройдет «Руководство по проверке темы».

Загрузка вашей темы

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

Сохраните вашу тему в виде файла .zip .

Перейдите на страницу представления темы на сайте WordPress:

создание-WordPress-тема-из-статики-HTML-загрузки-тема

Загрузите тему.

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

Резюме

Сделать ваши темы доступными для других пользователей — отличный способ вернуть что-то сообществу WordPress.

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

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

Ресурсы

34
Share: