Статьи

Создание идеальной темы WordPress: как хорошо писать код

Март 6, 2019

В предыдущей части этой серии; мы просмотрели различные API-интерфейсы WordPress, о которых мы должны узнать, поговорили о важности перевода темы (или даже лучше, выпуская ее уже переведенной на другие языки) и поняли концепцию лицензирования тем и использования лицензионных продуктов с темами.

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

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

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

Но если вы собираетесь разрабатывать для других людей и буквально продавать свой код , вы должны сделать его понятным. И хотя вы можете подумать, что ваш код «достаточно ясен», существуют универсальные стандарты кодирования, помогающие всем программировать с одинаковым стилем, и все серьезные торговые площадки и центры загрузки (от WordPress.org до ThemeForest) требуют , чтобы вы кодировали с стандарты.

Существует четыре основных языка программирования и разметки, необходимые для разработки тем WordPress: HTML, CSS, JavaScript и, конечно, PHP. Давайте посмотрим на каждого:

Стандарты HTML

Существуют относительно простые правила написания HTML-кода, соответствующего стандартам:

  • Подтвердите свой код с помощью W3C. Всегда. Мы подойдем к этому позже.
  • Будьте осторожны с самозакрывающимися элементами: вы должны заканчивать элемент пробелом, косой чертой и знаком «больше чем».
  • При вводе значений атрибутов, введите их все в нижнем регистре — если это не для людей.
  • Всегда заключайте значения атрибутов в кавычки. Допускаются как одинарные, так и двойные кавычки.
  • Отступы должны быть логичными и читабельными. Код PHP, смешанный с HTML, не должен быть исключением.

Посетите страницу стандартов WordPress HTML в Make WordPress для получения дополнительной информации.

Стандарты CSS

Список немного длиннее, но, опять же, есть простые правила правильного кодирования CSS:

  • Свойства должны иметь отступ с вкладками.
  • Вы можете группировать селекторы, но каждый селектор должен иметь собственную строку для удобства чтения.
  • Назовите все ваши селекторы class и id строчными буквами и не забудьте разделить слова дефисами.
  • Используйте удобочитаемые селекторы. .c6 не хорошее имя — назовите его .column-sixth !
  • Нет переоценки. div.column имеет смысла, когда вы можете просто использовать .column .
  • Свойства и их значения также должны быть в нижнем регистре, за исключением имен шрифтов и специфичных для поставщика свойств.
  • Порядок для свойств должен быть «отображение, позиционирование, блочная модель, цвета, типография и прочее».
  • Вы также должны заказать префиксы поставщика от самого длинного ( -webkit- ) до самого короткого (без префикса).
  • Держите свои медиа-запросы внизу таблицы стилей.
  • Комментируйте свой код CSS, как вы комментируете в PHP. Подробнее об этом позже.

См. Страницу Стандартов WordPress CSS в Make WordPress для более подробного объяснения.

Стандарты JavaScript

Поскольку в настоящее время JavaScript становится критически важным для многих тем WordPress, нам также нужны стандарты и правила:

  • Скобки не могут открываться и закрываться в пределах одной линии.
  • Предпочитайте одинарные кавычки двойным, если строка не содержит одинарные кавычки.
  • Вы можете свободно использовать пробелы в своем коде — не используйте пробелы в пустых строках. И не забывайте, что вы используете пробелы для удобства чтения, а не для развлечения.
  • Назовите свои функции и переменные, используя camelCase , not_with_underscores . Конструкторы должны быть в TitleCase .
  • Вы можете объявить несколько переменных в одной строке; но если вы собираетесь назначать значения, вам понадобятся отдельные строки.
  • new Array() нотация new Array() и new Object() являются «нет-нет». Вместо этого используйте сокращенные эквиваленты ( [] и {} ).
  • Обрабатывайте условные выражения и циклы очень деликатно — их обычно проще всего неправильно понять. Использование скобок и пробелов являются ключевыми для этого.
  • Если вы собираетесь использовать jQuery; определите анонимную функцию и передайте jQuery в качестве аргумента, прежде чем делать что-либо еще. Проверьте пример, чтобы убедиться.

Страница стандартов WordPress JavaScript в Make WordPress содержит больше информации, добавьте эту страницу в закладки и используйте ее.

Стандарты PHP:

Это более сложная часть. Существует множество правил, которые необходимо учитывать:

  • Соглашения об именах
  • Одинарные и двойные кавычки
  • Использование пробелов
  • Регулярные выражения
  • «Йода Условия»
  • Специальный гостевой SQL и форматирование запросов к базе данных

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

Тем не менее, есть два замечательных ресурса для изучения этого:

  1. Страница стандартов WordPress PHP на сайте Make WordPress
  2. Серия Wptuts + под названием » Стандарты кодирования WordPress » Тома Макфарлина

Правильно комментируя ваш код

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

Лучшая практика для PHP — использовать PHPDoc, стиль документации phpDocumentor . Он широко используется разработчиками WordPress и рекомендован на странице стандартов документации PHP в Make WordPress. Он обеспечивает чистый стиль документации для вашего кода PHP.

Что касается CSS, то на странице WordPress CSS Standards в Make WordPress рекомендуется сделать это как PHPDoc вместе с парой других предложений.

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

Проверка и тестирование темы

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

Вот почему вы должны проверить свою тему и проверить код. У меня есть три идеи для этого:

Проверьте свои HTML и CSS с помощью W3C Validators

Первое, что вам нужно сделать, это проверить ваш код с помощью сервисов валидации W3C. И службы HTML Markup Validator, и службы CSS Validator используются и разрабатываются годами и являются лучшими доступными службами проверки.

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

Используйте плагин «Developer», чтобы исправить вашу тему

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

Разработчик предлагает 16 различных плагинов. В то время как некоторые из них значительно упрощают процесс разработки (например, переключение пользователей и тестирование тем ), некоторые помогают отладить вашу тему (например, журнал устаревших уведомлений и проверка тем ).

Наиболее полезными из них являются Theme Check , Theme Test Drive и Debug Bar, но все 16 плагинов предоставляют отличные функции. Я предлагаю вам установить их все, чтобы проверить свою тему.

Проверьте свою тему с тестовыми данными

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

  • Используйте пример данных WordPress . Этот пример данных содержит некоторые из наиболее часто используемых типов контента и поможет вам заметить недостатки вашей темы по сравнению с контентом, который вы забыли рассмотреть.
  • Используйте более исчерпывающие данные испытаний. WPTest.io — это небольшой веб-сайт со страшной коллекцией примеров контента WordPress. Я не шучу: из пунктов меню, которые углубляются в 10 уровней и из Amazon Store, это самые полные тестовые данные, которые я когда-либо видел. Я никогда не тестировал тему с этим примером контента, но если вам удастся заставить вашу тему работать с этими данными, вам, вероятно, не придется беспокоиться о том, что ваша тема выглядит скучно в любом сценарии.

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

Завершение

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

Оставайтесь с нами и не забудьте поделиться статьей, если она вам понравилась!

41
Share: