Создание удивительных презентаций с помощью WImpress

В первой части мы узнали, как интегрировать в файл WordPress impression.js для создания динамических презентаций с переходами и преобразованиями CSS. impression.js становится одной из самых популярных библиотек JavaScript в Github.

Гибкость и хорошо структурированные коды могут быть причиной его успеха в качестве библиотеки генерации презентаций. В этом уроке мы рассмотрим возможности улучшения стандартных функций файла strike.js по умолчанию при создании интерактивной презентации с помощью WImpress.

Мы завершили первую часть этой статьи, построив очень простую презентацию с интегрированным плагином WordPress strike.js. Давайте начнем этот урок с создания панели опций для наших презентаций. Я надеюсь, что вы уже активировали плагин WImpress в вашей установке WordPress. Если это так, вы можете обновить код того же плагина, как мы продолжим реализацию.

Планирование панели параметров

Дизайн играет жизненно важную роль в создании удивительных презентаций. С помощью таких инструментов, как PowerPoint, дизайн презентации может быть ограничен до определенного уровня, в зависимости от доступных функций в каждой версии. impression.js построен исключительно на CSS и HTML, и, следовательно, у вас есть свобода творчества в своих проектах. В этом разделе мы планируем реализовать панель базовых опций с двумя перечисленными здесь опциями.

• CSS Customizer
• Фоновое изображение (шаблон презентации)

Цель создания этой панели параметров — дать вам знать, как создать базовую панель параметров для любого типа плагина WordPress. С помощью CSS у вас нет ограничений, и вы можете создать собственную панель параметров с большим количеством параметров в соответствии с вашими потребностями. Итак, начнем.

Страница создания параметров

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

add_action('admin_menu', array($this, 'wimpr_presentation_settings_page')); 

Давайте посмотрим на функцию wimpr_presentation_settings_page для добавления новой страницы меню.

 public function wimpr_presentation_settings_page() { add_menu_page('WImpress Presentation Settings', 'WImpress Presentation Settings', 'administrator', 'wimpr_settings', array($this, 'wimpr_presentation_settings')); } 

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

Вы можете посмотреть полный список параметров для функции add_menu_page адресу http://codex.wordpress.org/Function_Reference/add_menu_page .

Создание формы параметров

Как только мы нажмем на пункт меню, WordPress выполнит функцию wimpr_presentation_settings . Итак, нам нужно сгенерировать необходимый HTML-контент для отображения на странице настроек. Следующий код иллюстрирует реализацию функции wimpr_presentation_settings .

 public function wimpr_presentation_settings() { $html = '<div class="wrap"> <form method="post" name="options" action="options.php"> <h2>Select Presentation Settings</h2>' . wp_nonce_field('update-options') . ' <table width="100%" cellpadding="10" class="form-table"> <tr> <td align="left" scope="row"> <label>Background Image</label> </td> <td><input type="text" name="wimpr_bimage" id="wimpr_bimage" value="' . get_option('wimpr_bimage') . '" /> <input type="button" name="wimpr_image_btn" id="wimpr_image_btn" value="Upload" /> <div name="wimpr_bimage_preview" id="wimpr_bimage_preview"><img style="width:100px;height:100px" src="' . get_option('wimpr_bimage') . '" /></div> </td> </tr> <tr> <td align="left" scope="row"> <label>Custom CSS</label> </td> <td><textarea style="width:500px;height:300px;" name="wimpr_css" id="wimpr_css">' . get_option('wimpr_css') . '</textarea></td> </tr> </table> <p class="submit"> <input type="hidden" name="action" value="update" /> <input type="hidden" name="page_options" value="wimpr_bimage,wimpr_css" /> <input type="submit" name="Submit" value="Update" /> </p> </form> </div>'; echo $html; } 

Мы запускаем страницу HTML для настроек, создавая форму с действием, указывающим на страницу options.php . Это позволяет нам использовать процесс сохранения встроенных опций WordPress вместо процесса сохранения вручную. Далее мы определяем поле фонового изображения как текстовое поле с дополнительной кнопкой загрузки и контейнером DIV для предварительного просмотра загруженного изображения. Здесь мы использовали функцию get_option для извлечения существующего значения из таблицы wp_options . Затем мы определяем другую область текста для добавления пользовательских стилей CSS для презентаций.

Теперь у нас есть два поля для нашей панели параметров с существующими значениями. Наконец, мы определяем два скрытых поля, которые называются action и page_options . Поскольку мы используем существующий процесс сохранения опций, обязательно иметь эти два поля с точными именами, упомянутыми здесь. У действия поля должно быть значение update для обработки отправки формы. Затем мы должны определить имена каждого поля формы, которое мы хотим сохранить, в качестве значения поля page_options через page_options . Теперь мы можем нажать кнопку « Отправить» , чтобы автоматически сохранить данные в таблицу wp_options .

Загрузка фонового изображения

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

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

 add_action('admin_enqueue_scripts', array($this, 'wimpr_admin_scripts')); 

 public function wimpr_admin_scripts() { wp_enqueue_script('jquery'); if (function_exists('wp_enqueue_media')) { wp_enqueue_media(); } else { wp_enqueue_style('thickbox'); wp_enqueue_script('media-upload'); wp_enqueue_script('thickbox'); } wp_register_script('wimpr_init', plugins_url('js/wimpr_init.js', __FILE__), array("jquery")); wp_enqueue_script('wimpr_init'); } 

 jQuery(document).ready(function(){ jQuery("#wimpr_image_btn").click(function(){ if ( typeof wp !== 'undefined' && wp.media && wp.media.editor ) wp.media.editor.open("wimpr"); var wimpr_image_btn = jQuery(this); var send_attachments = wp.media.editor.send.attachment; wp.media.editor.send.attachment = function(props, attachment) { jQuery("#wimpr_bimage").val(attachment.url); jQuery("#wimpr_bimage_preview").html("<img style='width:100px;height:100px;' src='"+attachment.url+"' />"); wp.media.editor.send.attachment = send_attachments; } wp.media.editor.open(); return false; }); }); 

 < ?php $style[0] = (get_option('wimpr_bimage') != "") ? "background-image: url('" . get_option('wimpr_bimage') . "')" : ""; ?> <style> body{ font-size:12px; < ?php echo $style[0]; ?> } < ?php echo get_option('wimpr_css'); ?> </style> 

 <img src="http://localhost/wordpress-web-develop-test/wp-content/uploads/2013/09/logo.png" /> <p class="title1">Sitepoint</p> <p class="title2">Cutting-edge content for web professionals</p> 

 <img src="http://localhost/wordpress-web-develop-test/wp-content/uploads/2013/09/php.png" /> 

 <div class="iauthor"> <img src="http://localhost/wordpress-web-develop-test/wp-content/uploads/2013/09/auth1.jpeg" /> <div class="iauth_name">Rakhitha Nimesh</div> </div> <div class="ipost_title"> <p class="ipost_header">Integrating impress.js into WordPress</p> </div> <div style="clear:both"></div> <div class="ipost_content">Tutorial Summery.</div>