Учебное пособие по WordPress: как создать удивительный плагин

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


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

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

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

Давайте начнем тогда!

застежка-молния & устанавливать

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

[flip_book id = "78 79 78 79 79 78 78 79 79 78" ширина ="300" высота ="225" дисплей ="двойной"]

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

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

Flipbook Effect

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

Заголовок

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

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

/ *
Название плагина: FlipBook Gallery
Описание: создание шорткода для галерей флипбуков.
Версия: 1.0
Автор: блог веб-доходов
Лицензия: GPL2
* /

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

Вызов скриптов

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

  • JQuery (1,9+)
  • Скрипт Turn.js
  • Включите базовый стиль

Если вы просто добавите туда теги script и style, у вас возникнут некоторые проблемы. Например, двойной вызов 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’);
}

Мы называем внешние предметы тремя разными способами, вот они:

  • Вызов существующего элемента: 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.

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

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

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

function create_flip_book ($ attr) {

// Подготовка идентификаторов для обработки
$ array [‘ids’] = explode (" ",$ Атр [ ‘иды’]);

//Режим отображения
$ array [‘display’] = пусто ($ attr [‘display’]) ? "Один" : $ attr [‘display’]; // стандартное значение

// ширина
$ array [‘width’] = пусто ($ attr [‘width’])? 400: $ attr [‘width’];

//высота
$ array [‘height’] = пусто ($ attr [‘height’])? 300: $ attr [‘height’]; // HTML и остальная часть кода идут здесь
}

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

<?PHP
if ($ array [‘display’] == "двойной" ) {
$ array [‘width’] = $ array [‘width’] * 2;
}
// HTML, JS и Black Magic
?>

<?PHP
для ($ i = 0; $ i < sizeof ($ array [‘ids’]); $ i ++) {
?>

<?PHP
echo wp_get_attachment_image ($ array [‘ids’] [$ i], ‘full’);
if ($ array [‘display’] == "Один" ) {
?>
<?знак равно"".($ + 1)?>/<? эхо "".SizeOf ($ массив [ ‘иды’])?>
<?PHP
} еще {
?>

<?PHP
эхо "".($ + 1)?>/<? эхо "".SizeOf ($ массив [ ‘иды’]);
?>

<?PHP
}
?>

<?PHP
}
?>

JQuery ("#flipbook").очередь({
ширина: <?php echo $ array [‘width’]; ?>,
высота: <?php echo $ array [‘height’]; ?>,
автоцентр: правда,
дисплей: ‘<?php echo $ array [‘display’]; ?>’, // одна страница или двойная страница
ускорение: правда,
градиенты: jQuery.isTouch,
});

Что вы думаете?

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me