Учебник WordPress: как создать отличный плагин для флип-страниц

Статья написана:
  • Входящий маркетинг
  • Обновлено: сентябрь 15, 2014

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

Начиная с сегодняшнего дня, каждую неделю мы расскажем о потрясающем учебнике по кодированию, расскажем вам, как делать пользовательские материалы с помощью WordPress, от базового до продвинутого. Сегодня мы создадим плагин (чтобы вы узнали об основных шагах на этом), чтобы создать галерею «flip» страницы, используя JS.

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

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

Тогда начнем!

Zip & Install

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

[flip_book ids = "78 79 78 79 79 78 78 79 79 78" width = "300" height = "225" display = "double"]

Быстрый просмотр

И это тот результат, который вы получите:

Эффект Flipbook

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

Заголовок

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

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

/ * Имя плагина: Галерея FlipBook Описание: Создать шорткод для галерей FlipBook. Версия: 1.0 Автор: Блог о веб-доходах Лицензия: GPL2 * /

Довольно просто, да? После создания этого файла вы увидите свой плагин в списке в разделе «Администратор»> «Плагины», и вы можете его активировать (но если у вас есть только этот контент в вашем файле, он не сильно изменит ваш сайт).

Вызов сценариев

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

  • jQuery (1.9 +)
  • Скрипт Turn.js
  • Поверните базовый стиль

Если вы просто добавите теги сценария и стиля, у вас появятся некоторые проблемы. Например, двойной вызов jQuery, вероятно, сломает ваш сайт. Кроме того, сам WordPress не будет «знать», что вы создали эти элементы, поэтому, если другой плагин вызывает turn.js снова или другой стиль, он сломает ваш сайт.

Поэтому мы всегда должны использовать функции wp_enqueue_script и wp_enqueue_style. Вот основное использование:

function plugin_scripts () {wp_enqueue_script ('jquery'); wp_enqueue_script ('turn', plugins_url ('js / turn.js', __FILE__), массив ('jquery'), '1.3', false); wp_enqueue_style ('turnCSS', plugins_url ('css / style.css', __FILE__), false, '1.3', 'all'); }

Мы вызываем внешние элементы в 3 разными способами, вот они:

  • Вызов существующего элемента: jQuery - нам не нужно передавать много параметров, если мы точно знаем, что WordPress уже загружает этот скрипт, мы просто говорим ему: «Чувак, этот скрипт ДОЛЖЕН быть здесь, иначе наш код не будет Работа"
  • Создание нового скрипта - вам нужно передать некоторые атрибуты, такие как имя, местоположение файла, необходимые элементы (в этом случае он требует jQuery), версию и если он загружен в нижний колонтитул или заголовок (false = header, true = footer)
  • Создание нового стиля. Практически так же, как и предыдущий, с небольшой разницей в последнем атрибуте, в котором говорится, какой тип носителя этот стиль, если для

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

В нашем случае у нас есть несколько дополнительных скриптов для настройки галереи только тогда, когда ее HTML-код создан и который будет добавлен в тело. Вот почему мы ДОЛЖНЫ добавить этот скрипт в голову, иначе, когда наш код называется функцией «поворот», еще нет.

После этого приятного кода нам нужно сказать WordPress, чтобы загрузить их как скрипты, действие «wp_enqueue_scripts» будет делать следующее:

add_action ('wp_enqueue_scripts', 'plugin_scripts');

Шорткод

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

add_shortcode ( "flip_book", "create_flip_book");

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

Тернарные операции - это выражения типа if непосредственно в значении переменной. Если следовать этой структуре:

$ variable = (CONDITION)? «ЗНАЧЕНИЕ ЕСЛИ СОСТОЯНИЕ ИСТИННО»: «ЦЕНА, ЕСЛИ СОСТОЯНИЕ ЛОЖНО»;

Вы можете увидеть их в действии в первой части нашей функции:

function create_flip_book ($ attr) {// Подготовка идентификаторов для обработки $ array ['ids'] = explode ("", $ attr ['ids']); // режим отображения $ array ['display'] = empty ($ attr ['display'])? "single": $ attr ['display']; // стандартное значение // width $ array ['width'] = пусто ($ attr ['width'])? 400: $ attr ['width']; // высота $ массив ['высота'] = пусто ($ attr ['высота'])? 300: $ attr ['height'];
    // HTML и остальная часть кода идут здесь}

Затем нам нужно создать HTML-код и базовый вызов для наших изображений. Еще одним важным моментом здесь является настройка размера, если мы используем стиль журнала (он должен быть 2x ширины, поскольку у нас будут изображения 2 вместо одного):

<? php if ($ array ['display'] == "double") {$ array ['width'] = $ array ['width'] * 2; } // HTML, JS и Black Magic?> <Div id = "flipbook"> <? Php для ($ i = 0; $ i <sizeof ($ array ['ids']); $ i ++) {?> < div> <? php echo wp_get_attachment_image ($ array ['ids'] [$ i], 'full'); if ($ array ['display'] == "single") {?> <span> <? = "". ($ i + 1)?> / <? echo "" .sizeof ($ array ['ids'])?> </ span> <? php} else {?> <spanright ":" left ");?>"> <? php echo "". ($ я + 1)?> / <? echo "" .sizeof ($ array ['ids']); ?> </ span> <? php}?> </ div> <? php}?> </ div> <script type = "text / javascript"> jQuery ("# ​​flipbook"). turn ({width: < ? php echo $ array ['width'];?>, высота: <? php echo $ array ['height'];?>, autoCenter: true, display: '<? php echo $ array [' display ']; ?> ', // одностраничное или двухстраничное ускорение: true, градиенты:! jQuery.isTouch,}); </ Скрипт>

Как вы думаете?

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

Есть ли у вас концепция WordPress, которую вы хотите узнать немного больше? Может быть, вы хотите научиться делать? Сообщите нам через комментарии, и мы будем рады включить это в будущий пост!

О Рочестер Оливейра

Я веб-дизайнер и предприниматель из Итажуба (МГ), Бразилия. Я люблю писать на непонятные темы и делать интересные вещи.

Подключение: