impress.js_将impress.js集成到WordPress中

拼搏现实的明天。 2022-12-03 11:26 164阅读 0赞

impress.js

Online presentation tools are rapidly gaining popularity over desktop presentations. Impress.js is one of the most popular open source libraries for creating amazing presentations using CSS transitions and transformations. Even though it’s highly popular library, not many tools are available for generating presentations with dynamic content. So here we are going to integrate impress.js into WordPress for automating presentation creation. Throughout this two part tutorial, we will be developing highly customizable plugin, while building an impress.js presentation.

在线演示工具比台式机演示Swift普及。 Impress.js是最流行的开放源代码库之一，用于使用CSS过渡和转换创建出色的演示文稿。 即使它是非常流行的库，也没有很多工具可用于生成具有动态内容的演示文稿。 因此，在这里我们将impress.js集成到WordPress中以自动创建演示文稿。 在整个两部分的教程中，我们将开发高度可定制的插件，同时构建一个impress.js演示文稿。

Let’s get started.

让我们开始吧。

## 很棒的Impress.js演示文稿 **(**Awesome Impress.js Presentations**)** ##

Before we dig deeper into plugin implementation, you might want to look at some of the amazing presentations created with this powerful library. Let’s look at some of the creative uses of impress.js.

在深入研究插件实现之前，您可能需要看一下使用此功能强大的库创建的一些惊人的演示。 让我们看一下impress.js的一些创造性用法。

[Great Wall of Tees][][Building a Personal Website with Impress.js][][jgog.in Website/Portfolio][jgog.in Website_Portfolio][Pongoweb.it from creators of PongoCMS][]

[T恤的长城][Great Wall of Tees] [建立个人网站与Impress.js][Building a Personal Website with Impress.js] [jgog.in网站/组合][jgog.in Website_Portfolio] [Pongoweb.it从PongoCMS的创造者][Pongoweb.it from creators of PongoCMS]

These presentations and websites might have inspired you to learn more about this amazing tool. So I would like to recommend some tutorials on basics of impress.js before digging into the integration with WordPress.

这些演示文稿和网站可能启发了您更多地了解此惊人的工具。 因此，在研究与WordPress的集成之前，我想推荐一些有关impress.js基础的教程。

[Impress.js source][][Creating Stunning Visualizations with Impress.js][][Building Impressive Presentations with Impress.js][]

[Impress.js源代码][Impress.js source] [使用Impress.js创建][Creating Stunning Visualizations with Impress.js] [惊人的][Impress.js source] [可视化效果使用Impress.js][Creating Stunning Visualizations with Impress.js] [构建令人印象深刻的演示文稿][Building Impressive Presentations with Impress.js]

Having completed the articles for gaining basic knowledge, we can now move into the actual integration with WordPress.

完成获取基础知识的文章后，我们现在可以进入与WordPress的实际集成。

## 规划插件 **(**Planning the Plugin**)** ##

First, we need to identify the main requirements for presentation creation, before moving into plugin development. Let’s list the tasks considering the features of general presentations.

首先，在进入插件开发之前，我们需要确定演示文稿创建的主要要求。 让我们列出考虑一般演示功能的任务。

*  We should be able to create slides with specific designs.
    
    我们应该能够创建具有特定设计的幻灯片。
 *  Each slide needs to have transition effects.
    
    每个幻灯片都必须具有过渡效果。
 *  Slides need to be grouped together to create a presentation.
    
    幻灯片需要分组在一起以创建演示文稿。
 *  Presentations should have customizable settings.
    
    演示文稿应具有可自定义的设置。

In this part, we will be implementing the first three tasks mentioned in the list. Presentation customization settings and plugin usage techniques will be discussed in the second and final part. So let’s get started.

在这一部分中，我们将实现列表中提到的前三个任务。 演示文稿自定义设置和插件使用技术将在第二部分和最后一部分中讨论。 因此，让我们开始吧。

## 创建插件 **(**Creating the plugin**)** ##

We can start the implementation by creating a plugin folder called wimpress inside wp-content/plugins directory. All plugins has a main file that defines the information about the plugin using code comments. Let’s create the main plugin file as wimpress.php to contain the following code.

我们可以通过在wp-content / plugins目录中创建一个名为wimpress的插件文件夹来开始实施。 所有插件都有一个主文件，该主文件使用代码注释定义有关插件的信息。 让我们将主插件文件创建为wimpress.php，以包含以下代码。

<?php
    
    /*
      Plugin Name: WImpress
      Plugin URI:
      Description: WordPress integration of impress.js for online presentations.
      Author: Rakhitha Nimesh
      Version: 1.0
      Author URI: http://www.innovativephp.com/
     */
    
    class WImpress {
    
    }
    ?>

This plugin will use the object oriented approach and hence we have a main plugin class inside the main file. Implementation of all the plugin related functionalities resides within this class for the purpose of demonstration.

这个插件将使用面向对象的方法，因此我们在主文件中有一个主插件类。 出于演示目的，所有与插件相关的功能的实现均位于此类中。

## 初始化插件 **(**Initializing the plugin**)** ##

Even though WordPress uses procedural style of functionality within the core, most developers prefer the use of OOP style for plugin creation. In this technique, we have a main class that provides most of the functionality. Consider the following code for initial implementation of such plugins.

即使WordPress在核心内使用过程性功能样式，但大多数开发人员还是更喜欢使用OOP样式来创建插件。 在这种技术中，我们有一个提供大多数功能的主类。 考虑以下代码以实现此类插件的初始实现。

class WImpress {
    public function __construct() {
    
    	}
    }
    
    $wimpress = new WImpress();

After the definition, we initialize an object of the main class. WordPress uses actions and filters for providing most of its core functionality. Therefore we use the WImpress class constructor to define the necessary actions for WordPress. Implementation functions for these actions and filters will be defined within the same class in most scenarios. Let’s identify the action definitions by creating the first action for WImpress plugin.

定义之后，我们初始化主类的对象。 WordPress使用操作和过滤器来提供其大部分核心功能。 因此，我们使用WImpress类构造函数为WordPress定义必要的操作。 在大多数情况下，这些动作和过滤器的实现功能将在同一类中定义。 让我们通过为WImpress插件创建第一个动作来标识动作定义。

## 定义演示文稿和幻灯片 **(**Defining Presentations and Slides**)** ##

Presentations, and the slides contained within those presentations are the two most important components of this plugin. WordPress offers custom post types for adding various content types to websites. Here, we will be using two custom post types for implementing presentations and slides. Let’s see how custom posts are defined inside the plugin.

演示文稿以及这些演示文稿中包含的幻灯片是此插件的两个最重要的组件。 WordPress提供了用于将各种内容类型添加到网站的自定义帖子类型。 在这里，我们将使用两种自定义帖子类型来实现演示文稿和幻灯片。 让我们看看如何在插件中定义自定义帖子。

We can begin the process by updating the constructor of the class to contain the necessary action for custom post type definitions.

我们可以通过更新类的构造函数以包含自定义帖子类型定义所需的操作来开始此过程。

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'));
    
        	}
    }

We have used two instance variables for defining custom post names. This should be preferred over hard coding the custom post names to keep the possibility of changing the names at later stage without too much effort. Names of the custom post type is assigned to the instance variables through the constructor.

我们使用了两个实例变量来定义自定义帖子名称。 相对于对自定义帖子名称进行硬编码，这应该是更可取的，这样可以避免在以后的阶段中更改名称而无需过多的努力。 自定义帖子类型的名称通过构造函数分配给实例变量。

In impress.js, a single slide is named as a step and hence we will be using steps to refer slides from here onwards.

在impress.js中，将一张幻灯片命名为一个步骤，因此，我们将从此处开始使用步骤来引用幻灯片。

Here, we have used `wpresentations` as the presentation post type and `wsteps` as the steps post type. Finally, we add a function called `wimpr_generate_post_types` on init action to define the custom post types as given in the following code.

在这里，我们将`wpresentations`用作演示文稿的文章类型，并将`wsteps`用作步骤发布的文章类型。 最后，我们在初始化操作中添加了一个名为`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);
    }

Here, we have defined two custom post types for presentations and steps using the `register_post_type` function with necessary arguments. This is one of the poorly implemented functions in WordPress, where we have to define extensive amount of unnecessary codes just to define a custom post type.

在这里，我们使用带有必要参数的`register_post_type`函数为演示和步骤定义了两种自定义帖子类型。 这是WordPress中执行不佳的功能之一，在其中我们必须定义大量不必要的代码，才能定义自定义帖子类型。

Notice the usage of instance variables in parameters to define the custom post name. In case we decide to change the name, we have only one place to change. Most of the preceding code contains default parameters and labels required for defining custom post types.

注意，在参数中使用实例变量来定义自定义帖子名称。 万一我们决定更改名称，我们只有一个地方可以更改。 前面的大多数代码都包含定义自定义帖子类型所需的默认参数和标签。

By now, you should have two custom post type menus in the left menu as illustrated in the following screen.

到目前为止，您应该在左侧菜单中具有两个自定义帖子类型菜单，如下图所示。

![steps screen][]

## 创建演示步骤 **(**Creating Presentation Steps**)** ##

Presentations contain multiple steps and each step can have any type of HTML content. In the previous section, we assigned title and editor to the `supports` parameter of `wsteps` post type. Title field will be used to uniquely identify the step in post list, while editor field will be used to insert the actual content and design for the step.

演示文稿包含多个步骤，每个步骤可以具有任何类型HTML内容。 在上一节中，我们为`wsteps`帖子类型的`supports`参数分配了标题和编辑器。 标题字段将用于唯一标识帖子列表中的步骤，而编辑器字段将用于插入步骤的实际内容和设计。

Power of impress.js comes with its CSS transitions and transformations. So we need to have transition settings section for each step as custom fields within meta boxes. Let’s see how we can define custom fields for steps. First, we have to update the class constructor, to include `add_meta_boxes` action for creating custom meta boxes on post screens.

impress.js的强大功能来自其CSS转换和转换。 因此，我们需要为每个步骤提供转换设置部分，作为元框内的自定义字段。 让我们看看如何为步骤定义自定义字段。 首先，我们必须更新类构造函数，以包括`add_meta_boxes`操作，以在帖子屏幕上创建自定义元框。

add_action('add_meta_boxes', array($this, 'wimpr_generate_step_options'));

Now let’s move onto the implementation of `wimpr_generate_step_options` function.

现在，让我们继续执行`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");
    }

Definition of meta boxes comes within this function using `add_meta_box` function. Parameters to this function includes unique key, display name, display function, post type and context. Here also we have used `step_type` variable for step post type instead of hardcoded value.

使用`add_meta_box`函数可在此函数内定义元框。 该功能的参数包括唯一键，显示名称，显示功能，帖子类型和上下文。 在这里，我们也使用`step_type`变量代替步长类型，而不是硬编码值。

Context can be defined as one of three values, normal, side or advanced. Value of normal places the meta box under the editor field while side places the meta box in the right side with categories, tags etc.

上下文可以定义为正常，偏侧或高级三个值之一。 normal的值将meta框放在编辑器字段下，而side则将meta box放在带有类别，标签等的右侧。

Having defined the meta box, we can move into the implementation of the custom fields in the `wimpr_step_options_box` function. Since this function includes lengthy code, I am going to provide the explanations in three different sections. It’s ideal to work with source codes while reading the explanations.

定义了元框之后，我们可以进入`wimpr_step_options_box`函数中自定义字段的`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
    
    }

First, we have to get the existing step data from database. Since we are in the creating process, we won’t have any data by default. Once the step is saved and viewed, these variables will be populated with existing data.

首先，我们必须从数据库中获取现有的步骤数据。 由于我们处于创建过程中，因此默认情况下我们将没有任何数据。 保存并查看该步骤后，将使用现有数据填充这些变量。

We use `post_meta` table for saving necessary details about steps. Each step should be within a presentation. So we use a key called `_step_presentation` to keep the presentation ID for the step. All the step effects are stored in a key called `_step_data` as a json encoded string.

我们使用`post_meta`表保存有关步骤的必要详细信息。 每个步骤都应在演示文稿中。 因此，我们使用名为`_step_presentation`的键来保留该步骤的演示文稿ID。 所有的阶跃效果都作为json编码的字符串存储在称为`_step_data`的键中。

Both keys have been prefixed with underscore. This allows us to hide these fields from custom fields section. Without the underscore, these fields will show up in both meta box as well as custom fields section, making it difficult to manage.

这两个键都带有下划线前缀。 这使我们可以从“自定义字段”部分隐藏这些字段。 没有下划线，这些字段将同时显示在“元”框和“自定义字段”部分中，因此很难管理。

Finally, we get all the existing presentations available in the database to be displayed inside drop down field. Then we have to show the retrieved presentation list in a dropdown box for selection as shown in the section 2 of the preceding function.

最后，我们将获得数据库中所有可用的现有演示文稿，并将其显示在下拉字段中。 然后，我们必须在下拉框中显示检索到的演示列表，以供选择，如前一个功能的第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
    
    }

Preceding code populates the presentations into a dropdown field while checking for the assigned presentation for the edit screen. We use the `$query->posts` array to get the presentations, which were stored as a custom post type inside `wp_posts` table. Next, we can move into the final section of the code.

前面的代码会将演示文稿填充到一个下拉字段中，同时检查为编辑屏幕分配的演示文稿。 我们使用`$query->posts`数组获取演示文稿，这些演示文稿以自定义帖子类型存储在`wp_posts`表中。 接下来，我们可以进入代码的最后部分。

I assume that you took time to read the basics on impress.js using the resources provided at the beginning of this article. If not, I suggest you to just go through the code and wait till the second part of this article where I’ll be explaining the basic concepts while building a presentation.

我假设您花了一些时间使用本文开头提供的资源来阅读impress.js的基础知识。 如果没有，我建议您只看一下代码，然后等到本文的第二部分，我将在构建演示文稿时解释基本概念。

Impress.js is mainly built upon three effects called transition, scaling and rotation, in each of the three directions x,y,z. So we need to have 3\*3 = 9 options for configuring the effects on each step. Let’s look at the section three of preceding function for creating fields for impress effects.

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;
    
    }

Here, we have 9 text fields to configure the rotation, transition and scaling effects in x,y,z directions. In section 1, we used a key called `_step_data` to retrieve the values from database. This postmeta table key is used to store all 9 effect values as a json encoded string. So we assign the existing values into the text field using `$step_data` array, decoded from the json string. Next, we need to save these values when the user publish the presentation step.

在这里，我们有9个文本字段来配置x，y，z方向上的旋转，过渡和缩放效果。 在第1节中，我们使用了称为`_step_data`的键来从数据库中检索值。 此postmeta表键用于将所有9个效果值存储为json编码的字符串。 因此，我们使用`$step_data`数组(从json字符串解码)将现有值分配到文本字段中。 接下来，我们需要在用户发布演示步骤时保存这些值。

## 保存步骤数据 **(**Saving Step Data**)** ##

Once you hit the Publish button, both step title and contents of the editor will be saved automatically into the database. But meta box values need to be saved manually using action hooks. So we have to use WordPress `save_post` action to call a custom function called `wimpr_save_step_options`. This action is executed on every post insertion or updating. Let’s walk through the `wimpr_save_step_options` function using the following code.

按下“发布”按钮后，步骤标题和编辑器内容将自动保存到数据库中。 但是元框值需要使用动作挂钩手动保存。 因此，我们必须使用WordPress `save_post`操作来调用名为`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;
        	}
    }

First, we have to verify the nonce before saving the data into the database. Nonce is a short word for number used once. We have to generate a new nonce on each form submit, as a safety precaution from third party form submissions. In the previous function, we created the nonce value using `wp_create_nonce` function and now we are checking it against the submitted value from `$_POST` array. If the validation fails, we break the process by returning the post ID.

首先，我们必须先验证随机数，然后再将数据保存到数据库中。 Nonce是一次使用数字的缩写。 作为第三方表单提交的安全预防措施，我们必须在每个表单提交上生成一个新的随机数。 在上一个函数中，我们使用`wp_create_nonce`函数创建了现时值，现在将其与`$_POST`数组中提交的值进行比较。 如果验证失败，我们将通过返回帖子ID来中断该过程。

Once the none check is successful, we again check whether it’s an auto save to break the process and return the post ID. Finally, we check for the necessary post type and user permissions, before saving the data.

一旦无检查成功，我们将再次检查它是否是自动保存，以中断该过程并返回帖子ID。 最后，在保存数据之前，我们检查必要的帖子类型和用户权限。

Omitting the post type check will execute the save post action for each and every post type creating the possibility of inconsistent data.

省略发布类型检查将对每种发布类型执行保存发布操作，从而可能导致数据不一致。

After all the checks are completed, we get all nine custom field values from `$_POST` array to configure the effects of impress.js steps. Finally, we save the effect values as a JSON encoded string by using the update\_meta function. Now we have completed the process of creating necessary presentations, steps and presentation contents. Next, we need to display the presentation on the front end of WordPress application.

完成所有检查后，我们从`$_POST`数组中获得所有九个自定义字段值，以配置impress.js步骤的效果。 最后，我们使用update\_meta函数将效果值另存为JSON编码的字符串。 现在，我们已经完成了创建必要的演示文稿，步骤和演示文稿内容的过程。 接下来，我们需要在WordPress应用程序的前端显示演示文稿。

## 创建演示模板 **(**Creating Presentation Template**)** ##

We looked at some of the amazing impress.js presentation at the beginning of this article. Most impress presentations including the ones we showed, takes the full screen dimensions of the browser window. Therefore we are going to design full screen template for displaying presentation generated by WImpress plugin. Most of the existing WordPress theme templates contains the common header and footer. Here, we need full screen display and hence we have to use a template without common header, footer and any other common component.

我们在本文开头介绍了一些令人赞叹的impress.js演示文稿。 大多数印象深刻的演示文稿(包括我们展示的演示文稿)都采用了浏览器窗口的全屏尺寸。 因此，我们将设计全屏模板来显示WImpress插件生成的演示文稿。 大多数现有的WordPress主题模板都包含通用的页眉和页脚。 在这里，我们需要全屏显示，因此我们必须使用没有公共页眉，页脚和任何其他公共组件的模板。

So we are going to load a unique custom template by intercepting the default WordPress routing process. WordPress offers an action called `template_redirect` for loading custom templates, instead of default ones. Let’s add the following code to the constructor of the plugin.

因此，我们将通过拦截默认的WordPress路由过程来加载唯一的自定义模板。 WordPress提供了一个名为`template_redirect`的操作，用于加载自定义模板，而不是默认模板。 让我们将以下代码添加到插件的构造函数中。

add_action("template_redirect", array($this, 'wimpr_template_redirect'));

Now we can look at the implementation of `wimpr_template_redirect` function for loading the custom template.

现在，我们可以查看用于加载自定义模板的`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;
            		}
        	}
    }

First, we check for the post type for presentations and whether we are on the single presentation display screen. Then we load the custom template called single-wpresentations.php using the PHP include statement. Now we have to create the single-wpresentations.php file inside the plugin folder with HTML code for displaying the presentation.

首先，我们检查演示文稿的帖子类型以及我们是否在单个演示文稿显示屏幕上。 然后，使用PHP包含语句加载名为single-wpresentations.php的自定义模板。 现在，我们必须在用于显示演示文稿HTML代码的plugin文件夹中创建single-wpresentations.php文件。

<?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
                	)
            	)
        	));
    ?>

We get the ID of the presentation by using the global `$post` object at the beginning of the template file. Then we query the database for retrieving the steps for the current presentation. Then we traverse through each step in the result set to generate the impress.js steps as shown in the following code.

我们通过在模板文件的开头使用全局`$post`对象获得演示文稿的ID。 然后，我们查询数据库以检索当前演示文稿的步骤。 然后，遍历结果集中的每个步骤，以生成impress.js步骤，如以下代码所示。

We get the step effects using `get_post_meta` function while looping through the resultset. Finally, we generate the DIV element to be used as an impress.js step with the configured effects and values. Effects with empty values will not be assigned to the DIV and hence will use the default values of impress.js. Finally, we use the following code to load the necessary CSS and initialize the impress.js library located inside the WImpress folder.

我们在循环结果集时使用`get_post_meta`函数获得阶跃效果。 最后，我们使用配置的效果和值生成DIV元素，以用作impress.js步骤。 空值的效果不会分配给DIV，因此将使用impress.js的默认值。 最后，我们使用以下代码加载必要CSS并初始化WImpress文件夹中的impress.js库。

Now we have completed the process of integrating impress.js presentations into WordPress. You can use the admin dashboard to create dynamic presentations. Let’s go through the process of creating presentation using this plugin.

现在，我们已经完成了将impress.js演示文稿集成到WordPress的过程。 您可以使用管理控制台来创建动态演示文稿。 让我们来看一下使用此插件创建演示文稿的过程。

**Step 1** – Upload and Activate the plugin to see the tabs called Impress Steps and Impress Presentations on the left menu.

**步骤1** –上传并激活插件，以在左侧菜单上看到名为Impress Steps和Impress Presentations的选项卡。

**Step 2** – Create Presentation using the Impress Presentations menu.

**步骤2** –使用Impress Presentations菜单创建演示文稿。

**Step 3** – Create multiple steps by changing the values for effects.

**步骤3** –通过更改效果值创建多个步骤。

**Step 4** – Assign each step into a presentation using the drop down box.

**步骤4** –使用下拉框将每个步骤分配到演示文稿中。

**Step 5** – Publish the presentation and click the View Presentation button to load the presentation.

**步骤5** –发布演示文稿，然后单击“查看演示文稿”按钮以加载演示文稿。

You can access the demo presentation created with this plugin, using the following URL.

您可以使用以下URL访问使用此插件创建的演示演示。

[http://www.innovativephp.com/demo/wimpress-demo/][http_www.innovativephp.com_demo_wimpress-demo]

## 结语 **(**Wrap Up**)** ##

In this tutorial, we integrated impress.js into WordPress to manage dynamic presentations using custom post type capabilities. Plugin created throughout this tutorial is capable enough to handle basic presentations. Presentations should have eye catching designs and contents to attract the audience.

在本教程中，我们将impress.js集成到WordPress中，以使用自定义帖子类型功能管理动态演示。 本教程中创建的插件足以处理基本演示。 演示文稿应具有醒目的设计和内容以吸引观众。

So in the next part, we are going to enhance the capabilities of WImpress plugin by adding settings panel to configure background images and CSS styles. Also we are going to learn the basics of impress.js effects while creating a presentation using this plugiin.

因此，在下一部分中，我们将通过添加设置面板来配置背景图像和CSS样式来增强WImpress插件的功能。 此外，在使用此插件创建演示文稿时，我们还将学习impress.js效果的基础知识。

Hope you enjoyed the tutorial and looking forward to your comments and suggestions. Stay tuned for the second and final part of this tutorial for enhancing the power of impress.js presentations.

希望您喜欢本教程，并期待您的意见和建议。 请继续关注本教程的第二部分和最后一部分，以增强impress.js演示文稿的功能。

> 翻译自: [https://www.sitepoint.com/integrating-impress-js-wordpress/][https_www.sitepoint.com_integrating-impress-js-wordpress]

impress.js

[Great Wall of Tees]: http://zovi.com/wall-t
[Building a Personal Website with Impress.js]: http://www.innovativephp.com/demo/impress-js-demos/chapter5/#/about
[jgog.in Website_Portfolio]: http://www.jgog.in
[Pongoweb.it from creators of PongoCMS]: http://www.pongoweb.it/#/start
[Impress.js source]: https://github.com/bartaz/impress.js/blob/master/index.html
[Creating Stunning Visualizations with Impress.js]: http://www.1stwebdesigner.com/css/creating-stunning-visualizations-with-impress-js/
[Building Impressive Presentations with Impress.js]: http://www.packtpub.com/building-impressive-presentations-with-impressjs/book
[steps screen]: /images/20221123/ca59c2ae37ed44389c476098fa235649.png
[http_www.innovativephp.com_demo_wimpress-demo]: http://www.innovativephp.com/demo/wimpress-demo/
[https_www.sitepoint.com_integrating-impress-js-wordpress]: https://www.sitepoint.com/integrating-impress-js-wordpress/