Полезные советы для разработчиков на WordPress. Как повысить функциональность и юзабилити ресурса

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

Как избежать конфликтов имен функций

Конфликты имен происходят, когда функция имеет то же имя, что и функция, которая уже была определена ранее. Например, если у вас в теме есть функция get_the_post_terms() , и вы установите плагин, который содержит функцию с тем же именем, вы получите что-то вроде:

Fatal error: Cannot redeclare get_the_post_terms() (previously declared in....

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

Для этого у нас есть следующие варианты:

1. Префиксы функций

Например, если ваш плагин называется «WordPress Cool Plugin» , вы можете использовать префикс wcc_ для всех его функций.

Таким образом, в приведенном выше примере название нашей функции будет выглядеть, как wcc_get_the_post_terms() .

2. Заключите функции в класс

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

class Wcc_Mailer { static function send($post_ID) { $friends = "[email protected]"; mail($friends,"New post!", "Check my new post in " . get_permalink($post_ID)); return $post_ID; } } add_action("publish_post", array("Wcc_Mailer", "send"));

Как видите, в этом примере я просто использовал префикс для имени класса, но моя функция называется «send» . Это имя метода защищено от изменений через глобальную область имен, сам метод не может вызываться непосредственно. Чтобы вызвать его, мне нужно будет сделать следующее:

Wcc_Mailer::send($post_id);

Код комментариев

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

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

Лично я использую для комментирования функций синтаксис PHPDoc , с применением Sublime + Docblockr это делается очень просто.

Давайте посмотрим, как ребята из WordPress комментируют функцию wp_mail() , расположенную в файле wp-includes/pluggable.php :

/** * Отправляет почтовые сообщения, аналогичные почте PHP * * Возвращаемое значение true не значит автоматически, что пользователь получил * письмо. Это только значит, что использованный метод выполнил * запрос без ошибок. * * Использование обращений "wp_mail_from" и "wp_mail_from_name" позволяет * задавать адрес отправителя в следующем формате "Name ", * если заданы оба обращения. Если использовано только обращение "wp_mail_from", * в адресе отправителя будет указывать только электронная почта. * * Тип контента по умолчанию - "text/plain", что не позволяет использование HTML. * Однако вы можете задать тип контента электронных сообщений, использовав * фильтр "wp_mail_content_type". * * Кодировка по умолчанию соответствует кодировке применяемой в блоге. Другая * кодировка может быть установлена через фильтр "wp_mail_charset". * * @since 1.2.1 * * @uses PHPMailer * * @param string|array $to Массив или разделенный запятыми список e-mail адресов для рассылки писем. * @param string $subject Тема письма * @param string $message Текст сообщения * @param string|array $headers Опционально. Дополнительный заголовок. * @param string|array $attachments Опционально. Прикрепленные файлы. * @return bool Всегда, когда содержимое письма было отправлено успешно. */ function wp_mail($to, $subject, $message, $headers = "", $attachments = array()) { [....] // Отправлено! try { return $phpmailer->Send(); } catch (phpmailerException $e) { return false; } }

Как видите, они описывают то, что делает эта функция, какие параметры ей необходимы и что она возвращает.
Довольно информативно, не правда ли?

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

В CSS я использую комментарии, чтобы разделить код на разные разделы.

Например:

/********************* ОБЩИЕ СТИЛИ *********************/ body { font-family: Arial; color: #333; } /****************************************************************** СТИЛИ H1, H2, H3, H4, H5 ******************************************************************/ h1, .h1 { font-size: 2.5em; line-height: 1em; font-family: $vag-bold; } /********************* СТИЛИ МЕНЮ НАВИГАЦИИ *********************/ nav { color:red } [...]

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

Если вы думаете, что я преувеличиваю, посмотрите на исследования Сheckmarx , проведенные ими в 2013 году среди 50 лучших плагинов WordPress .

Теперь давайте рассмотрим некоторые советы по безопасности разработки для WordPress :

XSS-уязвимости

Для предотвращения XSS мы должны сделать две вещи. Проверять безопасность входящих данных и проверять безопасность исходящих данных .

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

Для ввода данных можно использовать, например, sanitize_text_field() , которая проверяет недопустимый текст UTF-8 , конвертирует в объект одиночные символы <, убирает все теги, удаляет разрывы строк, отступы и лишние пробелы, а также убирает октеты. В зависимости от контекста, существуют разные функции, которые помогут вам обезопасить данные.

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

">

• esc_url отвергает неверные URL-адреса, устраняет недопустимые символы и удаляет опасные символы;
• esc_html кодирует & «‘при выводе HTML.

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

Кроме проверки самих данных, не забудьте проверить и дату.

Предотвращение прямого доступа к файлам

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

Чтобы предотвратить это, вы можете разместить в верхней части вашего скрипта очень простой код:

// Выход, если предоставлен прямой доступ if (! defined("ABSPATH")) exit;

Это в целом помешает выполнить скрипт, если доступ к нему получен не через WordPress .

Удалите все предупреждения и уведомления

Злоумышленники могут воспользоваться не только ошибками PHP — извещения и предупреждения также включают в себя много ценной для них информации. Каждый плагин должен быть закодирован с использованием режима DEBUG .

Это также помешает злоумышленникам вычислить устаревшие функции в вашем плагине. Чтобы включить режим DEBUG просто найдите эту строку в файле wp-config.php и установите значение TRUE :

define(WP_DEBUG, true);

Используйте значения Nonce

Nonce -значения — это сокращение от numbers used once (однократно использованные числа) , они используются для защиты от ложных запросов между сайтами, или CSRF .

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

В зависимости от того, где вам нужно применить значение Nonce , вы можете создавать его по-разному.

Для ссылок используйте wp_nonce_url() :

$complete_url = wp_nonce_url($bare_url, "trash-post", "my_nonce");

Для форм — wp_nonce_field() :

wp_nonce_field("trash-post", "my_nonce");

В других местах — wp_create_nonce() :

wp_localize_script("my-script", "my-var-name", array("nonce" => wp_create_nonce("trash-post", "my_nonce"));

Если вы посмотрите на приведенный выше пример, то увидите, как я использую wp_localize_script (о которой речь пойдет в следующей статье ), чтобы включить nonce в блок кода JavaScript . Я делаю это, потому что позже планирую использовать JQuery для выполнения запроса AJAX , и вы тоже всегда должны включать nonce в вызовы AJAX .

После этого в скрипте, просто для проверки nonce, используйте следующий код:

if(! wp_verify_nonce("trash_post" , "my_nonce")) { die("Busted!"); }

Используйте функции и библиотеки WordPress

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

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

По большей части информация будет «технического плана», касательно CMS Worpdress, «по верхушкам». Я рассказываю лишь про наш путь, для кого использование технологий, путей, приемов etc. вопрос религии - просьба воздержаться от холиваров. Приступим.

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

• HTML шаблон с themeforest -> сборка на CMS;
• Дизайн -> верстка -> сборка на CMS;
• Разработка индивидуальных решений.

Сразу оговорюсь, что рассматривать в этой статье я буду только первых два пункта, ибо обобщить третий мне представляется довольно сложной задачей, т.к. любимые/самые лучшие/все остальные плохие технологии у каждого свои и в небольших городах бывает сложно найти разработчика хорошего уровня на RoR/Flask и иже с ними. И пробегусь по ним обзорно. Если возникнет интерес к этой теме - почему бы и не быть развернутой статье-туториалу «Как собрать сайт на WP за 4-8 часов, которым клиент будет доволен».

Почему Wordpress?

Низкие бюджеты и желание привносить в мир меньше энтропии обосновало выбор. Более подробно:

• Удобство админ-панели для клиентов. Я серьезно, после введения этой CMS все обучение заказчиков свелось к тому, что мы высылаем пароль администратора. Воспоминания о записи видео “Как создать новость”, “Как поменять телефон на сайте” перестали мне сниться.
• Скорость сборки сайта. Около 4-8 часов на проект это здорово. Конкурентное преимущество.
• Кривая обучения разработчиков для сборки проектов. Пока мой рекорд - 1.5 недели обучения с нуля (то есть аббревиатура HTML кажется заклинанием, вызывающим Сатану) до полноценной сборки сайта за срок, который меня устраивает.
• Красивые графики для клиентов с рейтингом CMS:)
• Freeware, нет необходимости приобретать лицензии.

И да, я не буду стучаться в вашу дверь с брошюрой в руках и говорить “Не хотите ли вы поговорить о WP?”. Просто мы используем эту CMS и об этом и есть заметка. Фактически здесь монолог в печатном формате, который я произношу всем новым веб-мастерам, приходящим к нам.

Какие нюансы следует учитывать при верстке проекта?

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

Шаблон должен легко разделяться на “шапку сайта”, собственно контент и “подвал”. Если необходимо скрывать некоторые элементы шапки/подвала - WP предоставляет довольно много замечательных функций-условий. (is front page(), is_404() etc.). Если необходимо изменять внешний вид - CSS умеет, body_class() имеется.

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

• Пункт меню
• Пункт меню
  • Пункт меню
  • Пункт меню
• Пункт меню

Из нюансов здесь важно то, что подменю должны иметь css класс sub-menu . Это избавит вас от необходимости писать кастомный волкер при сборке сайта, для функции wp_nav_menu($args) ;.

Буду как капитан очевидность, но все динамические позиции в верстке должны быть либо отдельным элементов (если телефон, то, к примеру + 7 XXX XXX etc. без извращений), для дальнейшей замены плейсхолдера, либо быть похожи на следующую логическую структуру:

Верстка до списка
Верстка элемента списка
…
Верстка элемента списка
Верстка после списка

Обязательно создать отдельное правило в CSS для контента, который клиенты вставляют через wysiwyg в админ-панели. Что-то вроде этого (пусть это будет LESS):

User-content{ ... a{ &:hover{ ... }; &:active{ ... }; &:focus{ ... }; } p{ ... } table{ thead { ... th { ... } } tbody { tr{ ... td{ ... } } } } h1, h2, h3, h4, h5, h6, h7{ … } h1{ ... } ... h7{ ... } ul{ ... li{ ... } } img{ … } }

В дальнейшем убережет от звонков вида “Почему я вставила картинку и у меня все поехало!”

Если у вас есть на сайте галереи изображений (по три в ряд, по шесть в ряд etc.), то необходимо привести верстку этих галерей в верстку, которую генерирует WP шорткодом gallery. Или переопределить этот шорткод и сделать верстку просто придерживаясь правила “Верстка до списка, Верстка элемента списка, Верстка после списка”, если функционал WP по части количества колонок и прочего избыточен.

Верстка постраничной навигации, генерируемая WP, принимает примерно следующий вид:

Верстка «хлебных крошек» тривиальна. Либо ul li список, либо , разделенный " >> " и иже с ними.

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

Получили набор html/css/js файлов, что дальше?

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

• Самая свежая версия WP.
• Не дефлотный пароль на администраторе;).
• Билдер новых типов постов с кастомными полями из админ панели. Мы используем Magic fields 2 . Используется для создания элементов вида Список элементов -> Отдельная страница элемента. Шаблоны вида archive-$type.php и single-$type.php , или вывод, используя WP_Query.
• Билдер новых полей для таксономии, использую Tax-Meta-Class
• Кастомизатор для экранов редактирования. Использую Advanced СustomFields . Незаменим для следующего кейса. Имеется шаблон контактов, к примеру tpl-contacts.php , с прописанным внутри Template Name: Шаблон страницы контактов . И необходимо, чтобы при выборе этого шаблона в админ-панели, на странице редактирования контактов, появлялись дополнительные поля, такие как координаты карты, привязанная форма обратной связи etc. И тут он нам и помогает.
• Билдер форм перезвона, обратной связи, заказа, etc. Contact Form 7
• Билдер глобальных настроек сайта. Используется для телефонов в шапке, соц.сетей и прочей информации такого типа. Theme Options .
• Functions.php с функциями, покрывающими практически весь оставшийся функционал:
  • Поддержка меню темой. register_nav_menus();
  • Поддержка миниатюр у постов. add_theme_support ("post-thumbnails");
  • Ресайз изображений, с поддержкой из меньшего->большее и кешированием. resize_image($attach_id = null, $img_url = null, $width, $height, $crop = false)
  • Генератор хлебных крошек. the_breadcrumb() .
  • wp_corenavi($wp_query)
  • Кастомный волкер для wp_nav_menu() для расширения. class My_Walker extends Walker Nav Menu { оригинальный код WP }
  • Задел для изменения шорткода галереи. remove_shortcode("gallery", "gallery_shortcode");add_shortcode("gallery", "my_gallery_shortcode");function my_gallery_shortcode($attr) {}
  • Генератор постраничной навигации. wp_corenavi($wp_query)
• Файлик со сниппетами, для напоминания.

И вся сборка проекта сводится к следующему:

• Создание virtual host на компьютере
• git clone ...
• Импорт бд, ввод трех SQL команд, для того, чтобы сказать WP, какой у нас сейчас текущий URL (gist)
• Копирования сниппетов со второго монитора и наполнение верстки смыслом.
• Деплой на сервер и чашка кофе

Примерное содержание файлика со сниппетами:
ID)); $image = vt_resize(null, $url, 220, 220, true); if (!$image["url"]) $image["url"] = "http://placehold.it/220x220&text=NO IMAGE"; ?>