Небольшой урок велосипедостроения от zetblog. Задача: дать возможность встроить аудио-плеер в посты WordPress с помощью плагина. Вообще, какие-то готовые плагины-плееры под wordpress уже существуют, но мне они, по разным причинам, мне не очень приглянулись. Тем более, хотелось заглянуть и узнать как это всё реализовано «под капотом». В качестве самого плеера была выбрана JS-библиотека audiojs.
Cоздние плагина для WordPress
Вообще, это не очень сложная штука. Плагин может состоять как из одного php-файла, так и из нескольких. В первом случае можно просто создать файл plugin_name.php без корневой папки, во втором — поместить всё в каталог с особой структурой. Желательно, чтобы имя плагина было уникальным, поэтому рекомендую перед названием проверить список уже существующих. Если вы решили создать плагин который будет размещён внутри каталога, а не одним файлом, то такой плагин обязательно должен содержать PHP-скрипт с тем же именем, что и его корневая папка.
Т.е. если каталог плагина называется zetblog, то внутри неё необходимо создать скрипт с именем zetblog.php. Из соображений безопасности, желательно добавить ещё файл index.php, который можно оставить пустым. Это поможет скрыть отображение списка файлов в каталоге при некоторых небезопасных настройках web-сервера.
Один из способов взаимодействия плагин для WordPress с ядром это регистрация своих функций-обработчиков которые вызываются перед или после выполнения определённых действий, т.н. хуков. Например, вы можете зарегистрировать обработчик, который будет принимать на вход содержимое поста и производить над ним какие-то действия. Это не единственный способ взаимодействия, но для наших целей его будет достаточно. Остальное можно прочитать в официальной документации, которая, кстати, частично переведена и на русский язык.
Audiojs
Audiojs это JavaScript-библиотека для проигрывания меди-файлов. Один из плюсов её использования это готовая кросс-браузерность, вот список поддерживаемых браузеров:
- Mobile Safari (iOS 3+)
- Android (2.2+, w/Flash)
- Safari (4+)
- Chrome (7+)
- Firefox (3+, w/ Flash)
- Opera (10+, w/ Flash)
- IE (6, 7, 8, w/ Flash)
Современные браузеры могут воспроизводить аудио-файлы с помощью html5, для более старых имеется «fallback»-вариант с использвоанием flash-плеера. Т.е. если audiojs не удастся воспроизвести музыку силами браузера, то автоматом должен подгрузиться flash-вариант проигрывателя.
Встраиваем плеер в WordPress
Приступим к написанию непосредственно самого плеера. Логика работы будет несколько упрощённой: к посту прикрепляется аудио-запись через встроенный в WordPress функционал добавления медиа-файлов, наш хук проверяет если в данных, которые вставляются в пост есть подстрока .mp3, то ссылку помечаем для обработки библиотекой JS (в данном случае, присваиваем свой CSS-класс для простоты поиска таких элементов в дальнейшем).
Подготовка плагина
Создаём папку audiojs, внутри пустой файл index.php, создаём подкаталог includes и распаковываем в него сам JS-библиотеку audiojs. Всё выглядит примерно так:
| 1 2 3 4 5 6 7 | .├── audiojs.php ├── includes │ └── audiojs │ ├── audiojs.swf │ ├── audio.min.js │ └── player-graphics.gif └── index.php |
Backend
Создаём в корне файл audiojs.php со следующим содержимым:
Тут у нас вставляется 2 своих обработчика. Первый — это добавление вызова функции «install_frontend» на хук «wp_enqueue_scripts». В теле самой функции указан файл aplayer.js, который мы рассмотрим чуть ниже. Далее, мы добавляем фильтр на хук «media_send_to_editor»: функцию «mark_link». Логика её работы была описана выше: помечаем ссылки на mp3-файлы классом «playlist-item».
Тут идёт вызов двух разных функций: add_action и add_filter. На самом деле разница между фильтром и действием не существенна, более того, add_action — это просто обёртка на add_filter. Логика в общих чертах логика примерно такая: если вам надо поменять сами данные, то вы используете add_filter, если вам надо произвести какие-то действия, которые не влияют напрямую на данные, то вы используете add_action (например, «увеличить счётчик количества просмотров поста» — это скорее действие, а не фильтр).
wp_enqueue_scripts — хук для подключаения необходимых файлов на frontend’е: JS-скриптов, CSS-стилей (несмотря на то, что в названии присутствует только «scripts»).
wp_enqueue_script — это безопасный и рекомендуемый способ добавления JS-скриптов в WordPress. Эта функция подключает запрошенные скрипты нужной версии, если они не были уже подключены ранее, и обрабатывает их зависимости. Мы указали что нам нужна библиотека audiojs, в её зависимостях — jQuery. Во втором вызове сказали что надо подключить aplayer, который требует audiojs и jquery. Так же указали в качестве подключаемой версии ‘0.2’, это решит проблему кеширования старых JS-скриптов в браузерах пользователей при релизе новой версии плагина.
media_send_to_editor — как вы уже догадались, этот хук срабатывает при добавлении чего-либо из медиа-файлов WordPress’а в окно редактора поста.
Frontend
Теперь пришло время рассмотреть фронтенд-часть. Она совсем небольшая и состоит только из одного файла, aplayer.js:
| 1 2 3 4 5 6 7 8 9 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 | jQuery(document).ready(function($) { var cn = 'playlist-item'; // shortcut for class name $('.' + cn).replaceWith(function() { var i = $(this); return i.html() + ' var a = audiojs.createAll({ trackEnded: function() { a[(a.indexOf(this) + 1) % a.length].play(); }, }); $('.audiojs .play-pause').live('click', function() { var current_index = $(this).parents('.audiojs').index('.audiojs'); $.each(a, function(i, v) { if (i != current_index && a[i].playing) a[i].pause(); }); }); }); |
В этом скрипте можно выделить 3 основных части:
- Заменяем все помеченные нужным CSS-классом ранее ссылки на код плеера с использованием html-тега «audio».
- Говорим audiojs чтобы он обработал все теги audio и добавляем на событие «трек закончился» совой обработчик, который включит следующую песню на текущей странице.
- При клике на кнопке воспроизведения останавливаем запущенные на воспроизведение ранее файлы (чтобы не слышать какофонии при переключении между разными записями).
На этом всё.
