使用WImpress建立惊人的演示文稿

最新推荐文章于 2024-09-11 20:05:26 发布

dingshi7798

最新推荐文章于 2024-09-11 20:05:26 发布

阅读量147

点赞数

文章标签： php javascript ViewUI

在第一部分中，我们学习了如何将impress.js集成到WordPress中，以创建具有CSS过渡和转换的动态演示。 impress.js成为Github中最受欢迎的JavaScript库之一。

灵活性和结构良好的代码可能是其成功成为演示文稿生成库的原因。在本教程中，我们将探讨在使用WImpress构建交互式演示时增强impress.js的默认功能的可能性。

我们通过使用impress.js集成的WordPress插件构建了非常基本的演示文稿，从而完成了本文的第一部分。让我们通过为演示文稿创建一个选项面板来开始本教程。我希望您已经在WordPress安装中激活了WImpress插件。如果是这样，您可以在实施过程中继续更新同一插件的代码。

规划选项面板

设计在构建出色的演示文稿中起着至关重要的作用。使用PowerPoint之类的工具时，取决于每个版本中的可用功能，演示文稿的设计可能会受到限制。 impress.js完全基于CSS和HTML构建，因此您可以自由地进行设计创新。在本节中，我们计划实现一个基本选项面板，其中列出了两个选项。

CSS定制器
背景图像（演示模板）

创建此选项面板的目的是让您知道如何为任何类型的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函数显示选项面板的表单字段。

您可以在http://codex.wordpress.org/Function_Reference/add_menu_page上查看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;
}

我们通过创建一个带有指向options.php页面的动作的表单来启动设置页面的HTML。这使我们可以使用WordPress内置选项保存过程，而不是手动保存过程。接下来，我们将背景图像字段定义为带有附加上载按钮和DIV容器的文本字段，以预览上载的图像。在这里，我们使用get_option函数从wp_options表中检索现有值。然后，我们定义另一个文本区域，用于为演示文稿添加自定义CSS样式。

现在，我们的选项面板有两个具有现有值的字段。最后，我们定义了两个隐藏的字段，分别称为action和page_options 。由于我们使用的是现有的选项保存过程，因此必须具有此处提到的确切名称的这两个字段。现场操作应具有用于处理表单提交的值更新。然后，我们必须将要保存的每个表单字段的名称定义为page_options字段的逗号分隔值。现在，我们可以单击Submit按钮将数据自动保存到wp_options表中。

上传背景图片

在上一节中，我们使用上载按钮创建了背景图像字段。现在，我们必须允许用户使用此按钮上传图像。因此，我们将把现有的WordPress Media Uploader集成到我们的上传按钮中。

首先，我们必须包含用于加载媒体上载器的必要脚本文件。在插件构造函数中使用以下操作为WordPress管理员加载脚本文件。

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

现在我们来看看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');
}

WordPress 3.5使用wp_enqueue_media函数引入了新版本的Media Uploader。因此，我们在将wp_enqueue_media函数加载到插件之前检查其是否存在。如果它不可用，我们可以回wp_enqueue_script使用wp_enqueue_script语句加载Media Uploader的先前方法。最后，我们包含一个自定义JavaScript文件，用于处理我们上传按钮的文件上传。

现在，让我们看一下用于处理图像上传的wimpr_init.js文件。

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

单击该按钮后，我们通过为wp.media.editor.open函数提供唯一的ID来打开媒体上传器。然后，我们将原始媒体附件功能分配到一个名为send_attachments的变量中，以避免与自定义媒体上载器发生冲突。接下来，我们为上载按钮定义自定义发送附件功能。

我们使用attachment.url .url获取上载文件的路径，并将其分配给文本字段作为背景图像。接下来，我们将与图像相同的URL分配给预览DIV容器。最后，我们使用send_attachments变量恢复原始的发送附件功能。

完成上传处理代码后，我们现在可以使用上传按钮上传图片。上传图像后，我们必须单击“ 插入页面”按钮，URL和预览将显示在设置页面中。

应用演示设置

到目前为止，我们已经创建了一个基本设置部分，其中包含背景图片和用于演示步骤的自定义CSS。现在，我们必须将这些数据应用于实际演示中。让我们更新single-wpresentations.php文件以包含设置。

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

首先，我们使用从get_option函数获取的wimpr_bimage选项值为背景图像准备必要的样式。背景图像的样式应用于HTML页面的正文。接下来，我们使用wimpr_css键从wp_options表中获取自定义CSS数据，并将其应用于style元素中。现在，我们已经通过设置页面完成了WImpress插件的实现。

您可以根据自己的喜好添加更多设置。我想知道您希望此插件还有哪些其他设置。因此，请使用评论部分让我知道。

在本节中，我们将使用在本教程中创建的插件来构建高级演示文稿。演示文稿旨在说明SitePoint网络中的各种教程和类别。让我们使用以下链接查看最终演示文稿的预览。

演示– http://goo.gl/oMuO8c

让我们开始吧。

步骤1 –配置演示文稿设置

我们可以通过配置演示文稿的设置来开始该过程。为演示模板选择您喜欢的背景图像，然后通过单击“ 上传”按钮上传它，最后在上传后单击“ 插入页面”按钮。

然后，我们必须提供用于文本区域内演示文稿的自定义CSS。用于此演示文稿的完整样式集很长，因此，我不会在本教程中包括它。您可以在源代码文件夹中找到所有样式。现在，您的设置屏幕应如下图所示。

设定画面

步骤2 –建立简报

现在，您可以使用左侧菜单上的Impress Presentation项目来创建演示文稿。使用一个有意义的名称，然后单击“ 发布”按钮以保存演示文稿。

步骤3 –建立第一步

第一步，我们将把SitePoint标题及其徽标和小标签行包括在内。使用“ 印象步骤”部分创建演示文稿的第一步。添加唯一的标题和以下代码作为内容。

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

根据您的WordPress安装，确保具有正确的映像路径。然后选择表示名称，并为此步骤添加必要的CSS类。在这里，我将使用名为banner的类来设置第一步的样式。接下来，将data-x定义为-1000，将data-y定义为0，作为演示的起点。最后，单击“ 发布”按钮。

现在转到Impress Presentations列表，然后单击先前创建的演示文稿的视图链接以将其加载到浏览器中。您应该得到类似于下图的内容。

SitePoint徽标

步骤4 –创建第二级步骤

现在，我们将创建教程类别作为SitePoint的子级别。因此，它们将被放置在第一步之下。我们可以增加data-y值以将步长移至屏幕底部，而减小data-x值将使步长移至屏幕左侧。以下代码显示了用于此步骤的HTML。必要的CSS样式位于“设置”部分。

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

与往常一样，从列表中选择相同的表示形式，并将CSS类定义为post-category 。最后，在单击“ 发布”按钮之前，将data-x值设置为-1500，将data-y值设置为800。现在，再次加载演示文稿，并使用空格键或箭头键进行导航。您应该得到类似于下图的内容。

PHP图标

步骤5 –将教程创建为多维数据集

现在，通过教程进入演示的第三级。在这里，我们将构建一个包含六个教程信息的多维数据集，并将其放置在远离步骤2的位置。现在，考虑以下用于教程步骤的HTML结构代码。

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

所有教程步骤均使用相同的结构，并带有已修改的值。与往常一样，选择演示文稿并将CSS类定义为post。接下来，保持data-x值为-2000，data-y值为2500，以使step3远离step2。现在，您应该具有类似于下图的内容。

文章摘要