Инструменты онлайн-презентаций быстро завоевывают популярность по сравнению с презентациями на рабочем столе Impress.js — одна из самых популярных библиотек с открытым исходным кодом для создания удивительных презентаций с использованием CSS-переходов и преобразований. Несмотря на то, что это очень популярная библиотека, не так много инструментов для создания презентаций с динамическим контентом. Итак, здесь мы собираемся интегрировать impression.js в WordPress для автоматизации создания презентаций. В этом уроке, состоящем из двух частей, мы будем разрабатывать настраиваемый плагин, в то же время создавая презентацию strike.js.
Давайте начнем.
Awesome Impress.js Презентации
Прежде чем мы углубимся в реализацию плагинов, вы можете взглянуть на некоторые удивительные презентации, созданные с помощью этой мощной библиотеки. Давайте посмотрим на некоторые из творческих применений impression.js.
Великая китайская стена
Создание персонального сайта с Impress.js
Сайт jgog.in / Портфолио
Pongoweb.it от создателей PongoCMS
Эти презентации и веб-сайты, возможно, вдохновили вас узнать больше об этом удивительном инструменте. Поэтому я хотел бы порекомендовать несколько учебных пособий по основам impression.js, прежде чем углубляться в интеграцию с WordPress.
Источник Impress.js
Создание потрясающих визуализаций с помощью Impress.js
Создание впечатляющих презентаций с помощью Impress.js
Закончив статьи для получения базовых знаний, теперь мы можем перейти к реальной интеграции с WordPress.
Планирование плагина
Во-первых, нам нужно определить основные требования к созданию презентации, прежде чем переходить к разработке плагинов. Перечислим задачи с учетом особенностей общих презентаций.
- Мы должны иметь возможность создавать слайды с определенным дизайном.
- Каждый слайд должен иметь эффекты перехода.
- Слайды должны быть сгруппированы вместе, чтобы создать презентацию.
- Презентации должны иметь настраиваемые параметры.
В этой части мы будем реализовывать первые три задачи, упомянутые в списке. Параметры настройки презентации и методы использования плагинов будут обсуждаться во второй и последней части. Итак, начнем.
Создание плагина
Мы можем начать реализацию, создав папку плагинов с именем wimpress внутри каталога wp-content / plugins. У всех плагинов есть основной файл, который определяет информацию о плагине с помощью комментариев к коду. Давайте создадим основной файл плагина как wimpress.php, который будет содержать следующий код.
<?php class WImpress { } ?> Этот плагин будет использовать объектно-ориентированный подход и, следовательно, у нас есть основной класс плагина внутри основного файла. Реализация всех связанных с плагином функциональных возможностей находится в этом классе с целью демонстрации.
Инициализация плагина
Хотя WordPress использует процедурный стиль функциональности в ядре, большинство разработчиков предпочитают использовать стиль ООП для создания плагинов. В этой технике у нас есть основной класс, который обеспечивает большую часть функциональности. Рассмотрим следующий код для начальной реализации таких плагинов.
class WImpress { public function __construct() { } } $wimpress = new WImpress();
После определения мы инициализируем объект основного класса. WordPress использует действия и фильтры для обеспечения большинства своих основных функций. Поэтому мы используем конструктор класса WImpress для определения необходимых действий для WordPress. Функции реализации для этих действий и фильтров будут определены в рамках одного и того же класса в большинстве сценариев. Давайте определим определения действий, создав первое действие для плагина WImpress.
Определение презентаций и слайдов
Презентации и слайды, содержащиеся в этих презентациях, являются двумя наиболее важными компонентами этого плагина. WordPress предлагает пользовательские типы записей для добавления различных типов контента на веб-сайты. Здесь мы будем использовать два пользовательских типа записей для реализации презентаций и слайдов. Давайте посмотрим, как пользовательские сообщения определяются внутри плагина.
Мы можем начать процесс, обновив конструктор класса, чтобы он содержал необходимые действия для пользовательских определений типов записей.
class WImpress { private $presentation_type; private $step_type; public function __construct() { $this->presentation_type = "wpresentations"; $this->step_type = "wsteps"; add_action('init', array($this, 'wimpr_generate_post_types')); } }
Мы использовали две переменные экземпляра для определения пользовательских имен записей. Это должно быть предпочтительнее жесткого кодирования пользовательских имен постов, чтобы сохранить возможность изменения имен на более позднем этапе без особых усилий. Имена пользовательских типов записей присваиваются переменным экземпляра через конструктор.
В Impress.js один слайд назван как шаг, и поэтому мы будем использовать шаги, чтобы ссылаться на слайды здесь и далее.
Здесь мы использовали wpresentations в качестве типа поста презентации и wsteps в качестве типа поста шагов. Наконец, мы добавляем функцию wimpr_generate_post_types в действие init для определения пользовательских типов wimpr_generate_post_types в следующем коде.
public function wimpr_generate_post_types() { // Register custom post type for creating impress presentations $labels = array( 'name' => _x('Presentations', $this->presentation_type), 'singular_name' => _x('Presentation', $this->presentation_type), 'add_new' => _x('Add New', $this->presentation_type), 'add_new_item' => __('Add New Presentation'), 'edit_item' => __('Edit Presentation'), 'new_item' => __('New Presentation'), 'all_items' => __('All Presentations'), 'view_item' => __('View Presentation'), 'search_items' => __('Search Presentations'), 'not_found' => __('No Presentations found'), 'not_found_in_trash' => __('No Presentation found in the Trash'), 'parent_item_colon' => '', 'menu_name' => 'Impress Presentations' ); $args = array( 'labels' => $labels, 'hierarchical' => true, 'description' => 'Presentation', 'supports' => array('title', 'editor'), 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'show_in_nav_menus' => true, 'publicly_queryable' => true, 'exclude_from_search' => false, 'has_archive' => true, 'query_var' => true, 'can_export' => true, 'rewrite' => true, 'capability_type' => 'post', ); register_post_type($this->presentation_type, $args); // Register custom post type for adding steps to impress presentations $labels = array( 'name' => _x('Steps', $this->step_type), 'singular_name' => _x('Step', $this->step_type), 'add_new' => _x('Add New', $this->step_type), 'add_new_item' => __('Add New Step'), 'edit_item' => __('Edit Step'), 'new_item' => __('New Step'), 'all_items' => __('All Steps'), 'view_item' => __('View Step'), 'search_items' => __('Search Steps'), 'not_found' => __('No Steps found'), 'not_found_in_trash' => __('No Step found in the Trash'), 'parent_item_colon' => '', 'menu_name' => 'Impress Steps' ); $args = array( 'labels' => $labels, 'hierarchical' => true, 'description' => 'Steps', 'supports' => array('title', 'editor'), 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'show_in_nav_menus' => true, 'publicly_queryable' => true, 'exclude_from_search' => false, 'has_archive' => true, 'query_var' => true, 'can_export' => true, 'rewrite' => true, 'capability_type' => 'post', ); register_post_type($this->step_type, $args); }
Здесь мы определили два пользовательских типа записей для презентаций и этапов, используя функцию register_post_type с необходимыми аргументами. Это одна из плохо реализованных функций в WordPress, где мы должны определить большое количество ненужных кодов просто для определения пользовательского типа записи.
Обратите внимание на использование переменных экземпляра в параметрах для определения пользовательского имени публикации. В случае, если мы решим изменить имя, у нас есть только одно место для изменения. Большая часть предыдущего кода содержит параметры по умолчанию и метки, необходимые для определения пользовательских типов записей.
К настоящему времени у вас должно быть два пользовательских меню типа записей в левом меню, как показано на следующем экране.
Создание шагов презентации
Презентации содержат несколько шагов, и каждый шаг может иметь любой тип содержимого HTML. В предыдущем разделе мы присвоили заголовок и редактор параметру wsteps типа сообщения wsteps . Поле заголовка будет использоваться для уникальной идентификации шага в списке записей, а поле редактора будет использоваться для вставки фактического содержания и дизайна для шага.
Сила Impress.js приходит с его CSS-переходами и преобразованиями. Таким образом, мы должны иметь раздел настроек перехода для каждого шага в качестве настраиваемых полей в мета-полях. Давайте посмотрим, как мы можем определить настраиваемые поля для шагов. Во-первых, нам нужно обновить конструктор класса, чтобы включить действие add_meta_boxes для создания пользовательских мета-блоков на экранах сообщений.
add_action('add_meta_boxes', array($this, 'wimpr_generate_step_options'));
Теперь давайте перейдем к реализации функции wimpr_generate_step_options .
public function wimpr_generate_step_options() { add_meta_box("wimpr-step-options", "Impress Step Options", array($this, 'wimpr_step_options_box'), $this->step_type, "normal"); }
Определение мета-блоков входит в эту функцию с add_meta_box функции add_meta_box . Параметры этой функции включают уникальный ключ, отображаемое имя, функцию отображения, тип сообщения и контекст. Здесь также мы использовали переменную step_type для типа post шага вместо жестко заданного значения.
Контекст может быть определен как одно из трех значений: нормальное, боковое или расширенное. Значение normal помещает мета-поле под полем редактора, в то время как side размещает мета-поле справа с категориями, тегами и т. Д.
Определив мета-блок, мы можем перейти к реализации пользовательских полей в функции wimpr_step_options_box . Поскольку эта функция включает в себя длинный код, я собираюсь предоставить объяснения в трех разных разделах. Идеально для работы с исходниками при чтении пояснений.
public function wimpr_step_options_box() { global $post; $step_data = json_decode(get_post_meta($post->ID, "_step_data", true)); $presentation_id = get_post_meta($post->ID, "_step_presentation", true); $query = new WP_Query(array('post_type' => 'wpresentations', 'post_status' => 'publish')); // Section 2 code // Section 3 code }
Сначала мы должны получить существующие данные шага из базы данных. Поскольку мы находимся в процессе создания, у нас не будет никаких данных по умолчанию. После сохранения и просмотра шага эти переменные будут заполнены существующими данными.
Мы используем таблицу post_meta для сохранения необходимых деталей о шагах. Каждый шаг должен быть в презентации. Поэтому мы используем ключ _step_presentation чтобы сохранить идентификатор презентации для шага. Все эффекты шага хранятся в ключе с именем _step_data в виде строки в кодировке json.
Оба ключа имеют префикс подчеркивания. Это позволяет нам скрыть эти поля в разделе пользовательских полей. Без подчеркивания эти поля будут отображаться как в мета-поле, так и в разделе пользовательских полей, что затрудняет управление.
Наконец, мы получаем все имеющиеся в базе данных презентации для отображения внутри выпадающего поля. Затем мы должны показать полученный список презентаций в выпадающем списке для выбора, как показано в разделе 2 предыдущей функции.
public function wimpr_step_options_box() { // Section 1 $html .= " <tr> <th style=''><label for='Upload Images'>Select Presentation : </label></th> <td><select class='widefat' name='wimpr_presentation' id='wimpr_presentation' > <option value='0' >Select</option>"; foreach ($query->posts as $presentation) { if ($presentation_id == $presentation->ID) { $select = "selected"; } $html .= "<option $select value='$presentation->ID' >$presentation->post_title</option>"; } $html .= "</select> </td> </tr>"; $html .= "<tr> <th style=''><label >CSS Classes : </label></th> <td><input name='wimpr_step_class' id='wimpr_step_class' class='widefat impress_text' type='text' value='" . $step_data->wimpr_step_class . "' /> </td> </tr>"; // Section 3 code }
Предыдущий код заполняет презентации в раскрывающемся поле при проверке назначенной презентации для экрана редактирования. Мы используем массив $query->posts чтобы получить презентации, которые были сохранены как пользовательский тип wp_posts таблице wp_posts . Далее мы можем перейти к последнему разделу кода.
Я предполагаю, что вы потратили время на ознакомление с основами на strike.js, используя ресурсы, предоставленные в начале этой статьи. Если нет, я предлагаю вам просто пройтись по коду и подождать до второй части этой статьи, где я буду объяснять основные концепции при создании презентации.
Impress.js в основном построен на трех эффектах, называемых переходом, масштабированием и вращением, в каждом из трех направлений x, y, z. Поэтому нам нужно иметь 3 * 3 = 9 опций для настройки эффектов на каждом шаге. Давайте рассмотрим третий раздел предыдущей функции для создания полей для впечатляющих эффектов.
public function wimpr_step_options_box() { // Section 1 // Section 2 $html .= "<tr> <th style=''><label for='Upload Images'>Transition Settings : </label></th> <td> </td> </tr> <tr> <td colspan='2'> x:<input name='transition_x' id='transition_x' class='impress_text' type='text' value='" . $step_data->transition_x . "' /> y:<input name='transition_y' id='transition_y' class='impress_text' type='text' value='" . $step_data->transition_y . "' /> z:<input name='transition_z' id='transition_z' class='impress_text' type='text' value='" . $step_data->transition_z . "' /> </td> </tr> <tr> <th style=''><label for='Upload Images'>Rotation Settings : </label></th> </tr> <tr> <td colspan='2'> x:<input name='rotation_x' id='rotation_x' class='impress_text' type='text' value='" . $step_data->rotation_x . "' /> y:<input name='rotation_y' id='rotation_y' class='impress_text' type='text' value='" . $step_data->rotation_y . "' /> z:<input name='rotation_z' id='rotation_z' class='impress_text' type='text' value='" . $step_data->rotation_z . "' /> </td> </tr> <tr> <th style=''><label>Scaling Settings : </label></th> </tr> <tr> <td colspan='2'> <input name='scale' id='scale' class='impress_text' type='text' value='" . $step_data->scale . "' /> </td> </tr> </table>"; echo $html; }
Здесь у нас есть 9 текстовых полей для настройки эффектов вращения, перехода и масштабирования в направлениях x, y, z. В разделе 1 мы использовали ключ _step_data для извлечения значений из базы данных. Этот ключ таблицы postmeta используется для хранения всех 9 значений эффекта в виде строки в кодировке json. Таким образом, мы присваиваем существующие значения в текстовое поле, используя массив $step_data , декодированный из строки json. Далее нам нужно сохранить эти значения, когда пользователь опубликует шаг презентации.
Сохранение данных шага
После нажатия кнопки «Опубликовать» заголовок шага и содержимое редактора будут автоматически сохранены в базе данных. Но значения метабокса необходимо сохранять вручную с помощью хуков действий. Поэтому мы должны использовать действие WordPress save_post для вызова пользовательской функции wimpr_save_step_options . Это действие выполняется при каждой публикации или обновлении сообщения. Давайте wimpr_save_step_options функции wimpr_save_step_options используя следующий код.
public function wimpr_save_step_options() { global $post; if (!wp_verify_nonce($_POST['wipmr_box_nonce'], "wipmr-step-meta")) { return $post->ID; } if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) { return $post->ID; } if ($this->step_type == $_POST['post_type'] && current_user_can('edit_post', $post->ID)) { $step_data = array(); // Retrive the transition data through form submission $step_data['transition_x'] = (isset($_POST['transition_x']) ? $_POST['transition_x'] : ''); $step_data['transition_y'] = (isset($_POST['transition_y']) ? $_POST['transition_y'] : ''); $step_data['transition_z'] = (isset($_POST['transition_z']) ? $_POST['transition_z'] : ''); // Retrieve the rotation data through form submission $step_data['rotation_x'] = (isset($_POST['rotation_x']) ? $_POST['rotation_x'] : ''); $step_data['rotation_y'] = (isset($_POST['rotation_y']) ? $_POST['rotation_y'] : ''); $step_data['rotation_z'] = (isset($_POST['rotation_z']) ? $_POST['rotation_z'] : ''); // Retrieve the scale data through form submission $step_data['scale'] = (isset($_POST['scale']) ? $_POST['scale'] : ''); $presentation = (isset($_POST['wimpr_presentation']) ? $_POST['wimpr_presentation'] : ''); update_post_meta($post->ID, "_step_presentation", $presentation); // Update the custom field values upon successfull validation update_post_meta($post->ID, "_step_data", json_encode($step_data)); } else { return $post->ID; } }
Во-первых, мы должны проверить одноразовый номер перед сохранением данных в базе данных. Nonce — это короткое слово для числа, используемого один раз. Мы должны генерировать новый одноразовый номер в каждой отправляемой форме, в качестве меры предосторожности из сторонних отправляемых форм. В предыдущей функции мы создали значение nonce, используя функцию wp_create_nonce и теперь мы проверяем его по переданному значению из массива $_POST . Если проверка не пройдена, мы прерываем процесс, возвращая идентификатор сообщения.
После того, как ни одна проверка не прошла успешно, мы снова проверяем, является ли это автоматическим сохранением, чтобы прервать процесс и вернуть идентификатор сообщения. Наконец, мы проверяем необходимый тип поста и права пользователя перед сохранением данных.
Отказ от проверки типа записи будет выполнять действие сохранения записи для каждого типа записи, создавая возможность несогласованности данных.
После того, как все проверки завершены, мы получаем все девять значений настраиваемых полей из массива $_POST чтобы сконфигурировать эффекты шагов strike.js. Наконец, мы сохраняем значения эффекта в виде строки в кодировке JSON с помощью функции update_meta. Теперь мы завершили процесс создания необходимых презентаций, шагов и содержания презентации. Далее нам нужно отобразить презентацию в интерфейсе приложения WordPress.
Создание шаблона презентации
Мы посмотрели на некоторые из удивительных презентаций Впечатляющих в начале этой статьи. Большинство впечатляющих презентаций, включая показанные нами, занимают полноэкранные размеры окна браузера. Поэтому мы собираемся разработать полноэкранный шаблон для отображения презентации, созданной плагином WImpress. Большинство существующих шаблонов тем WordPress содержат общий колонтитул. Здесь нам нужно полноэкранное отображение и, следовательно, мы должны использовать шаблон без общего верхнего колонтитула, нижнего колонтитула и любого другого общего компонента.
Итак, мы собираемся загрузить уникальный пользовательский шаблон, перехватывая процесс маршрутизации WordPress по умолчанию. WordPress предлагает действие под названием template_redirect для загрузки пользовательских шаблонов вместо стандартных. Давайте добавим следующий код в конструктор плагина.
add_action("template_redirect", array($this, 'wimpr_template_redirect'));
Теперь мы можем взглянуть на реализацию функции wimpr_template_redirect для загрузки пользовательского шаблона.
public function wimpr_template_redirect() { global $wp; if ($wp->query_vars["post_type"] == "wpresentations") { if (is_single ()) { include(plugin_dir_path(__FILE__) . '/single-wpresentations.php'); exit; } } }
Сначала мы проверяем тип сообщения для презентаций и находимся ли мы на экране отображения одной презентации. Затем мы загружаем пользовательский шаблон с именем single-wpresentations.php, используя оператор включения PHP. Теперь нам нужно создать файл single-wpresentations.php внутри папки плагина с HTML-кодом для отображения презентации.
<?php global $post; $presentation_id = $post->ID; $query = new WP_Query(array('post_type' => 'wsteps', 'post_status' => 'publish', 'meta_query' => array( array( 'key' => '_step_presentation', 'value' => $presentation_id ) ) )); ?>
Мы получаем идентификатор презентации, используя глобальный объект $post в начале файла шаблона. Затем мы запрашиваем базу данных для получения шагов для текущей презентации. Затем мы перебираем каждый шаг в наборе результатов, чтобы сгенерировать шаги strike.js, как показано в следующем коде.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <div id="impress"> <?php foreach ($query->posts as $step) { $step_data = json_decode(get_post_meta($step->ID, "_step_data", true)); $transition_x = (isset($step_data->transition_x) && !empty($step_data->transition_x)) ? "data-x='" . $step_data->transition_x . "'" : ''; $transition_y = (isset($step_data->transition_y) && !empty($step_data->transition_y)) ? "data-y='" . $step_data->transition_y . "'" : ''; $transition_z = (isset($step_data->transition_z) && !empty($step_data->transition_z)) ? "data-z='" . $step_data->transition_z . "'" : ''; $rotation_x = (isset($step_data->rotation_x) && !empty($step_data->rotation_x)) ? "data-rotate='" . $step_data->rotation_x . "'" : ''; $rotation_y = (isset($step_data->rotation_y) && !empty($step_data->rotation_y)) ? "data-rotate='" . $step_data->rotation_y . "'" : ''; $rotation_z = (isset($step_data->rotation_z) && !empty($step_data->rotation_z)) ? "data-rotate='" . $step_data->rotation_z . "'" : ''; $scale = (isset($step_data->scale) && !empty($step_data->scale)) ? "data-scale='" . $step_data->scale . "'" : ''; $css_class = (isset($step_data->wimpr_step_class) && !empty($step_data->wimpr_step_class)) ? $step_data->wimpr_step_class : ''; echo '<div id="' . $step->ID . '" class="step slide ' . $css_class . '" ' . $transition_x . ' ' . $transition_y . ' ' . $transition_z . ' ' . $scale . ' ' . $rotation_x . ' ' . $rotation_y . ' ' . $rotation_z . ' > ' . $step->post_content . ' </div>'; } ?> </div>
Мы получаем пошаговые эффекты, используя функцию get_post_meta при циклическом просмотре набора результатов. Наконец, мы генерируем элемент DIV, который будет использоваться в качестве шага strike.js с настроенными эффектами и значениями. Эффекты с пустыми значениями не будут назначены DIV и, следовательно, будут использовать значения по умолчанию в strike.js. Наконец, мы используем следующий код для загрузки необходимого CSS и инициализируем библиотеку impression.js, расположенную в папке WImpress.
<link rel="stylesheet" href="<?php echo plugins_url('css/impress-demo.css', __FILE__); ?>" /> <style> body{ background : #FFF; color:#000; font-size:35px; } </style> <script type="text/javascript" src="<?php echo plugins_url('js/impress.js', __FILE__); ?>" ></script> <script type="text/javascript">impress().init();</script>
Теперь мы завершили процесс интеграции презентаций strike.js в WordPress. Вы можете использовать панель администратора для создания динамических презентаций. Давайте пройдемся по процессу создания презентации с помощью этого плагина.
Шаг 1 — Загрузите и активируйте плагин, чтобы увидеть вкладки под названием Impress Steps и Impress Presentations в левом меню.
Шаг 2 — Создание презентации с помощью меню Impress Presentations.
Шаг 3 — Создайте несколько шагов, изменив значения эффектов.
Шаг 4 — Назначьте каждый шаг в презентации, используя выпадающий список.
Шаг 5 — Опубликуйте презентацию и нажмите кнопку «Просмотреть презентацию», чтобы загрузить презентацию.
Вы можете получить доступ к демонстрационной презентации, созданной с помощью этого плагина, используя следующий URL.
http://www.innovativephp.com/demo/wimpress-demo/
Заворачивать
В этом уроке мы интегрировали в WordPress impression.js для управления динамическими презентациями, используя возможности пользовательских типов записей. Плагин, созданный в этом уроке, способен обрабатывать основные презентации. Презентации должны иметь привлекательный дизайн и содержание, чтобы привлечь аудиторию.
Итак, в следующей части мы собираемся расширить возможности плагина WImpress, добавив панель настроек для настройки фоновых изображений и стилей CSS. Также мы собираемся изучить основы эффектов impression.js при создании презентации с использованием этого плагина.
Надеюсь, вам понравился урок и с нетерпением ждем ваших комментариев и предложений. Оставайтесь с нами во второй и последней части этого урока, чтобы расширить возможности презентаций impression.js.