WordPress: создаем виджет для показа картинок с Flickr

Сегодня я расскажу о создании виджета для одной из самых популярных на сегодняшний день CMS – WordPress.

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

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

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

Единственное условие – тема должна быть «widget ready», т.е. поддерживать виджеты. Но добавить эту поддержку несложно. Подробная инструкция находится здесь. Чтобы не усложнять пример, я буду считать, что используется дефолтная тема.

Сформулируем задачу.

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

Сразу приведу ссылку на архив с плагином

Source

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

Условно создание виджета можно разбить на 3 этапа.

1) Регистрация виджета.

2) Создание панели управления.

3) Создание самого виджета.

Рассмотрим их подробнее.

Наш виджет достаточно простой, поэтому он будет состоять всего из одного файла flickr-widget.php, который мы разместим в папке wp-content/plugins/flickr_widget. Учтите, что имя файла виджета должно совпадать с названием папки, иначе WordPress не сможет его найти.

В начале файла размещаем комментарий.

/*
Plugin Name: Flickr Widget
Plugin URI: http://localhost
Description: Этот виджет ищет по заданным тегам фотографии на сервисе flickr и показывает их.
Version: 1.0
Author: Statsenko Vladimir
Author URI: https://www.simplecoding.org
*/

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

На данном этапе мы получили обычный плагин WP, который можно активировать и деактивировать, правда, он ничего не умеет делать.

Но, прежде чем переходить к написанию функционала, разберемся с сервисом Flickr. Я его выбрал главным образом потому, что он предоставляет удобный API, из которого нам потребуется всего одна функция flickr.photos.search.

Как несложно догадаться из названия, она используется для поиска фотографий. Правда перед использованием Flickr API нужно зарегистрировать свое приложение на этом сервисе и получить для него уникальный ключ (Application Key), но эта операция бесплатная и сложности не представляет.

Запрос на Flickr можно отправить несколькими способами, кстати, существуют готовые библиотеки для различных языков. Но этот пример очень простой, поэтому мы просто отправим XML-RPC запрос (библиотека для работы с XML-RPC есть в дистрибутиве WP).

По описанию функции на официальном сайте я составил минимальный перечень параметров, которые мы должны передать в XML-RPC запросе.

1) api_key – ключ нашего приложения;
2) tags – список тегов через запятую;
3) per_page – количество фотографий.

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

Возвращаемся к нашему виджету.

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

Следующий шаг — инициализация виджета.

Выполняется с помощью одной строчки кода.

add_action("widgets_init", array('Flickr_Widget', 'register'));

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

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

Сам метод инициализации выглядит следующим образом

class Flickr_Widget {
…
    public function register() {
        register_sidebar_widget('Flickr Widget', array('Flickr_Widget', 'widget'));
        register_widget_control('Flickr Widget', array('Flickr_Widget', 'control'));
    }
…
}

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

Кроме того, нам нужно назначить два хука (для активации и деактивации виджета).

register_activation_hook( __FILE__, array('Flickr_Widget', 'activate'));
register_deactivation_hook( __FILE__, array('Flickr_Widget', 'deactivate'));

Здесь, также как и при инициализации, мы просто указываем имена соответствующих методов.

Рассмотрим, как они работают.

class Flickr_Widget { private static $APP_NAME = 'Flickr_Widget'; private static $APP_KEY = '17e73e544f0f6fff4d06822668e76e01'; … function activate() { //устанавливаем начальные значения $data['fw_app_name'] = Flickr_Widget::$APP_NAME; $data['fw_app_key'] = Flickr_Widget::$APP_KEY; $data['wf_images'] = '2'; //две картинки $data['fw_size'] = '2'; //размер не более 100px по большей стороне $data['wf_tags'] = 'nature, природа'; //и создаем опцию add_option('fw_data', $data); } function deactivate() { //удаляем опцию delete_option('fw_data'); } }
* This source code was highlighted with Source Code Highlighter.

При активации виджета мы формируем массив с настройками по-умолчанию и сохраняем его в опции fw_data (с помощью метода add_option).

Обратите внимание на использовании атрибутов класса ($APP_NAME и $APP_KEY). При вызове методов WordPress не создает экземпляр класса, поэтому для обращения к свойствам нужно указывать имя класса.

При деактивации виджета мы удаляем опцию. Все настройки при этом будут удалены.

Теперь напишем метод создания панели управления виджетом.

class Flickr_Widget { … private static $IMG_SIZES = array( '1'=>array('s','75 x 75 px') , '2'=>array('t','max 100 px') , '3'=>array('m','max 240 px') , '4'=>array('','max 500 px') ); … function control() { //если пришли данные в массиве $_POST, обновляем опцию if (isset($_POST['wf_images'])){ $data['fw_app_name'] = Flickr_Widget::$APP_NAME; $data['fw_app_key'] = Flickr_Widget::$APP_KEY; $data['wf_images'] = esc_attr($_POST['wf_images']); $data['fw_size'] = esc_attr($_POST['fw_size']); $data['wf_tags'] = esc_attr($_POST['wf_tags']); update_option('fw_data', $data); } //читаем данные, сохраненные в опции $data = get_option('fw_data'); if ( FALSE === $data ) { //заполняем массив $data значениями по-умолчанию $data = array(); $data['wf_images'] = ''; $data['fw_size'] = ''; $data['wf_tags'] = ''; } //создаем поля формы, которая будет показана в панели управления ?> <p><label>Количество картинок <input name="wf_images" type="text" value="<?php echo $data['wf_images']; ?>" /></label></p> <p><label>Размер картинок <select size="1" name="fw_size"> <?php foreach ( Flickr_Widget::$IMG_SIZES as $i => $size ) { $selected = ''; if ( $i == $data['fw_size'] ) { $selected = 'selected="selected"'; } ?> <option value="<?php echo $i; ?>" <?php echo $selected; ?>><?php echo $size['1']; ?></option> <?php } ?> </select></label></p> <p><label>Теги (через запятую) <input name="wf_tags" type="text" value="<?php echo $data['wf_tags']; ?>" /></label></p> <?php } … }
* This source code was highlighted with Source Code Highlighter.

В начале этого метода мы проверяем, не пришли ли данные, которые мы должны сохранить. Если в массиве $_POST есть поля, которые относятся к нашему виджету, то мы записываем их в массив и сохраняем в опции.

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

Их у нас три.
1) Поле «Количество картинок».
2) Выпадающий список с размерами картинок.
3) Поле для ввода тегов.

Примечание. При загрузке пользователем фотографий, Flickr создает несколько превьюшек разных размеров. Именно эти превьюшки мы и будем показывать в сайдбаре.

Переходим к методу, формирующему сам виджет.

class Flickr_Widget { … public function widget($args) { echo $args['before_widget']; //показываем заголовок виджета echo $args['before_title'] . 'Images from Flickr' . $args['after_title']; //читаем массив с опциями if ( $data = get_option('fw_data') ) { //подключаем библиотеку для работы с XML-RPC include_once ('wp-includes/class-IXR.php'); $client = new IXR_Client(Flickr_Widget::$flickr_url); $params = array('api_key'=>$data['fw_app_key'] ,'tags'=>$data['wf_tags'] ,'per_page'=>$data['wf_images'] ); if ( !$client->query('flickr.photos.search', $params) ) { echo 'Error: '.$client->getErrorCode().':'.$client->getErrorMessage(); } else { $photos = $client->getResponse(); $xml = new SimpleXMLElement($photos); foreach ($xml->photo as $photo) { $url = 'http://farm'.$photo['farm'] .'.static.flickr.com/' .$photo['server'].'/' .$photo['id'].'_' .$photo['secret']; $oUrl = 'http://www.flickr.com/photos/' .$photo['owner'] .'/'.$photo['id']; if ('' !== $data['fw_size']) { $url .= '_'.Flickr_Widget::$IMG_SIZES[$data['fw_size']][0].'.jpg'; } else { $url .= '.jpg'; } echo '<div class="flickr_image"><a href="'.$oUrl.'" target="_blank"><img src="'.$url.'" alt="'.$photo['title'].'" /></a></div>'; } } } else { echo 'No settings'; } echo $args['after_widget']; } … }
* This source code was highlighted with Source Code Highlighter.

Принцип работы следующий.

1) Выводим заголовок виджета.

2) Читаем опцию (с помощью функции get_option). Если опция найдена:

2.1) Загружаем класс для работы с XML-RPC.

2.2) Формируем и отправляем запрос на Flickr.

2.3) Если ответ получен, формируем ссылки для тегов img. Ответ от Flickr приходит в XML формате, и для его анализа мы используем библиотеку SimpleXML. Расписывать, как формируются ссылки я не буду, на этой странице вы найдете достаточное количество примеров.

2.4) В цикле выводим теги img (я дополнительно вставил их в div’ы).

Вот и все 🙂 Мы получили работающий виджет.

Я не буду утверждать, что работать с виджетами в WordPress одно удовольствие 🙂 Но, с другой стороны, каких-то сверхсложных действий не требуется, и основная часть времени все равно уйдет на написание вашего кода.

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

В общем, надеюсь, эта статья вам поможет 😉 Если есть вопросы или замечания, пишите, постараюсь ответить!

Постовой

Даем бесплатные консультации по вопросам налогообложения. Заходите!