Advertisement
  1. Code
  2. Plugins

Делаем плагин слайд-шоу для WordPress

by
Difficulty:BeginnerLength:LongLanguages:

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

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

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

Работая над этим уроком, подразумевается, что вы используете сервер Apache и MySQL локально или удаленно, чтобы иметь возможность установить WordPress. Кроме того, у вас установлена ​​версия WordPress 3.1+, у которой есть доступ к ее файловой системе, а также что у вас есть базовые знания PHP, CSS, JavaScript и HTML.

Шаг 1 Создание плагина

Одна из самых простых частей этого урока. Мы собираемся создать папку с именем nivoplugin внутри каталога wp-content/plugins внутри установленного WordPress. Внутри этого каталога мы создадим файл nivoplugin.php со следующим кодом:

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

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

Шаг 2 Создание функционала управления слайд-шоу

Слайд-шоу состоит из изображений, поэтому, чтобы сделать простую реализацию jQuery Nivo Slider, нам нужен способ добавления и управления изображениями в панели. Наш подход будет эффективно использовать функциональные возможности создания произвольных типов записей в WordPress. Произвольный тип записей будет использоваться для создания новой типа страницы, где каждая запись содержит все необходимые детали изображения: название и, конечно же, самую важную часть - изображения. Мы будем использовать заголовок и редактор для получения информации о названии и описании, а также функции изображения записи, чтобы загрузить изображение, управлять и идентифицировать его.

В приведенном выше примере мы добавляем хук к функции np_init, используя тег init, который будет запускаться до отправки заголовков. Мы должны сделать это, для того чтобы затем включить внутрь функцию register_post_type с ее параметрами. Эта функцией, используемой для добавления и управления новым пользовательским типом записей. По сути мы встраиваем новый пользовательский тип записей с именем np_images и некоторыми аргументами.

Аргументы представляют собой массив значений, которые представляют настройки нашего нового типа записей. Такие вещи, как например, общедоступность, мы устанавливаем в значение true, мы даем ей ярлык с именем Nivo Images, и устанавливаем то, что каждый пост имеет title и thumbnail с названием переменных и миниатюрами в качестве массива данных для основного атрибута supports.

Это создает пользовательский тип записей, и он выглядит следующим образом:

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

Шаг 3 Подключаем скрипты и стили Nivo Slider

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

Чтобы загрузить источники, мы перейдем на страницу расценок на nivo.dev7studios.com и нажмём на кнопку загрузить jQuery Plugin (Бесплатная версия) чтобы загрузить исходный код.

Согласно задачам нашего урока мы будем стараться сделать все просто. Мы разархивируем файл и подключим весь каталог в папку нашего плагина. Внутри папки nivo-slider у нас есть другая папка с именем demo. Мы удалим ее, поскольку мы не будем ее использовать, и мы не хотим, перегружать плагин ненужными материалами.

Регистрируем и подключаем Скрипты и Стили

Следующая часть этого шага подключение необходимых файлов слайдера Nivo. В нашем файле nivoplugin.php мы добавим следующее:

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

Функция вызова скрипта регистрирует и подключает в 3 важных файла javascript: jQuery (как необходимый компонент Nivo Slider), базовый файл nivo-slider (jquery.nivo.slider.js) и наш пользовательский файл сценария (script.js). Nivo Slider требует, работающего jQuery, и нам нужен специальный скрипт для его активации.

Файл script.js:

Скрипт довольно простой, ему необходим jQuery чтобы присоединить функцию nivoSlider к тегу с идентификатором slider. Этот тег будет принимать свойства и функциональность nivo-slider.

Наконец, на нашем предыдущем этапе функция обратного вызова стиля регистрирует и включает в себя еще 2 важных файла: файл nivo-slider.css, который имеет все стили, необходимые для того, чтобы слайдер выглядел и работал соответственно, и файл default.css внутри папки themes/default, которую мы используем для темы слайд-шоу с помощью темы nivo-slider по умолчанию.

Шаг 4 Новые Размеры Изображения

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

Во-первых, мы должны принять во внимание тот факт, что мы используем изображения в произвольных сообщениях в качестве наших изображений слайд-шоу. Итак, как же мы изменим размер и обрежем эти фотографии в соответствии с нашими потребностями? Мы собираемся добавить новые размеры, которые WordPress будет использовать, чтобы изменять и обрезать изображения, при каждой новой загрузке. Чтобы добавить новые размеры изображения, мы будем использовать функцию add_image_size, добавив следующий код внутрь функции np_init:

В приведенном выше коде мы реализовали 2 размера изображения, которые мы вызовем позже, используя имена np_widget для виджета и np_function для шорткода и функцию PHP для их идентификации.

Еще кое-что

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

"Размеры изображений, добавленные с помощью функции add_image_size, будут работать только для новых изображений, которые загружаются после активации функции".

Шаг 5 Функция PHP

Одной из основных особенностей плагина является функция PHP, которую вы можете использовать в любом месте вашего кода темы для вставки большого слайд-шоу Nivo размером 600x280.

Поскольку мы используем пользовательскую запись для управления нашими изображениями слайд-шоу, нам нужно запросить эти записи и получить названия и изображения из пользовательского типа записей. Для этого мы используем новый цикл WP_Query с параметрами переменной $args, который выберет нужный тип записей и создаст слайд-шоу из максимум 5 изображений в запросе. Затем мы создадим переменную $result, которая содержит весь HTML-код, необходимый для слайд-шоу Nivo. Мы используем демонстрационный код HTML из загруженной папки Nivo.

Внутри цикла мы используем функцию wp_get_attachment_image_src для извлечения изображения из нашей записи. Мы используем значение np_function для определения размера изображения, которое мы ранее добавили в np_init. Поскольку мы находимся внутри цикла, мы можемиспользовать $post->ID для идентификации сообщения. Функция имеет один параметр $type, который используется для установки размера изображения из wp_get_attachment_image_src с помощью одного из ранее заданных размеров изображения. Переменная имеет значение np_function по умолчанию. Если при вызове функции не задан параметр, будет задана переменная по умолчанию.

Заголовки сообщений добавляются как значения в параметр заголовка HTML тега изображения и видны внизу слайд-шоу изображений как плавающий текст над изображениями внутри прозрачного темного фона.

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

Слайд-шоу в размере np_function выглядит примерно так:

Этот предварительный просмотр слайд-шоу представляет собой реализацию шорткода, которая будет рассмотрена далее.

Шаг 6 Шорткод

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

Хук шорткода фактически использует нашу функцию PHP для возврата содержимого слайд-шоу. На этом все, это очень простая и быстрая реализация шорткода. Чтобы использовать его, просто добавьте [np-shortcode] в любую запись или страницу. Этот текст будет заменен слайд-шоу.

Шаг 7 Создание виджета

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

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

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

Класс

Чтобы создать новый виджет, мы реализуем новый класс с именем np_Widget, который расширяет класс WP_Widget. Для начала определим, что функция __construct является основной и самой важной функцией класса и нашей функциональностью виджета. Функция имеет параметры, которые мы используем, чтобы присвоить виджету уникальный идентификатор, который в нашем случае называется np_widget, название, Nivo Slideshow и даже описание, как показано в следующем коде:

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

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

Наш виджет выглядит как и любой другой виджет в панели управления. Нам нужно дать виджету название, которое может быть введено пользователем, а затем сохранено плагином. Для этого нам нужно написать функцию form из класса WP_Widget. В этой функции мы будем использовать параметр $instance, который функция предоставляет для получения title, который является переменной, которая впоследствии будет реализована, сохранена и обновлена. Поэтому мы создаем элемент поля ввода формы, используя следующий код:

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

Сохранение данных

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

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

Отображение виджета

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

Функция widget управляет интерфейсом виджета и имеет два параметра: $args и $instance. Параметр $args используется для получения переменных типа $before_widget, $after_widget и $before_title, $after_title, которые мы будем использовать в нашем коде. Функция виджета выглядит так:

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

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

"Для получения дополнительной информации об API  WordPress для виджетов изучите Кодекс API для WordPress".

Заключение

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

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.