Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress Plugins

Использование пространств имен и автозагрузок плагинов для WordPress, часть 2

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Using Namespaces and Autoloading in WordPress Plugins.
Using Namespaces and Autoloading in WordPress Plugins, Part 1
Using Namespaces and Autoloading in WordPress Plugins, Part 3

Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)

In the previous tutorial, мы начали разговор о пространствах имён и автозагрузок с PHP в контексте развития WordPress. И хотя мы не уделили особого внимания этим двум темам, но дали им определение и заложили фундамент для дальнейшей постройки, чем и займёмся в предстоящем уроке.

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

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

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

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

Прежде, чем мы начнём

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

  • Локальный сервер с поддержкой PHP 5.6.20, веб-сервер Apache и сервер базы данных MySQL.
  • Каталог, из которого размещается WordPress 4.6.
  • Текстовый редактор или привычный вам IDE для написания плагина.
  • Навык работы с WordPress Plugin API.

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

Если так, то мы готовы начать.

Что мы будем строить

Выдержка из предыдущего урока:

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

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

Плагин нужен нам только для этого.

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

Random questions appearing in a meta box

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

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

Начинаем.

Представление таблицы стилей

В целях обучения, в этом уроке не стану пользоваться препроцессором. Подойдёт стандартная CSS. Но порядок очерёдности будет немного более объектно-ориентированный, чем тот, что многие WordPress разработчики привыкли видеть.

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

Добавление CSS файла

В каталоге admin создайте папку assets. В assets  создайте подпапку css и в ней файл admin.css.

Конечная структура папок будет выглядеть так:

The final directory structure for assets

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

Размещение таблиц стилей

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

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

Интерфейс активов

Описание интерфейса объектно-ориентированного программирования выглядит так:

Интерфейс это запрограммированная структура/синтаксис, которая указывает компьютеру на следование определённым свойствам класса.

Иными словами:

Если у вас прописан класс, он обязан выполнять назначенные ему интерфейсом функции.

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

И вот, что мы сделаем. Во-первых, дадим определение интерфейсу. Так, в каталоге util создадим interface-assets.php и пропишем следующий код:

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

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

Далее,  включите этот файл в файл основного плагина:

Теперь нам нужно создать файл, который реализует этот интерфейс. Поскольку мы работаем с файлами CSS, создадим загрузчика CSS.

Загрузчик CSS  

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

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

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

  • init и enqueue необходимы, как инструменты класса Assets_Interface.
  • Когда вызывается init он назначает функцию enqueue хуком, ответственным за регистрацию таблицы стилей.
  • Метод enqueue регистрирует файл admin.css и использует filemtime как способ узнать, был файл изменен или нет (что позволяет пробить любую кэшированную версию файла при обслуживании).

В этой реализации фактический admin.css файл добавляется на каждой странице. Постановка условия для проверки активности каждой страницы с уточнением необходимости добавления таблицы стилей может быть рассмотрена в дополнительном упражнении к уроку. Между прочим, проверьте get_current_screen().

Далее, необходимо включить этот файл в основной файл плагина:

Подтвердим установщик CSS и вызовем его метод  init в главной функции tutsplus_namespace_demo :

Предполагая, что всё сделано правильно, вы можете обновить страницу Add New Post, просмотреть исходный код и увидеть admin.css в списке доступных стилей.

Осталось сделать одну вещь, чтобы считать эту часть курса завершённой. Надо обязательно прописать некий CSS.

Стиль в метабокс

Поскольку основное внимание в уроке было сосредоточено на некоторых объектно-ориентированных техниках, а у нас есть ещё темы для изучения, сделаем это задание несколько облегчённым.

Не просто используя стили по умолчанию, как предусмотрено в WordPress, а давайте чуть-чуть усилим метабокс.

Поместим функцию render в класс Meta_Box_Displayclass. И изменим его так, что он выведет содержимое файла в элемент абзаца с атрибутом ID "tutsplus-author-prompt".

С этой целью мы введём новый метод, который будет использовать метод WordPress API для санации HTML.

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

Теперь мы можем открыть admin.css и сделать некоторые небольшие изменения, чтобы обновить внешний вид панели метабокс в окне Add New Post. Добавим стили CSS:

В данный момент ваш метабокс выглядит примерно так:

An updated version of the styles of the metabox

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

Что будет дальше?

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

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

Если, между тем, вы ищете другие материалы, связанные с WordPress, можете обратиться к моим прежним урокам на my profile page и зайти on my blog или Twitter.

До тех пор не забудьте скачать рабочую версию плагина (версия 0.2.0) прилагаемую к этому посту. Переходите по ссылке под кнопкой Download Attachment. Как всегда, не стесняйтесь задавать любые вопросы в комментариях!

Ресурсы

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.