WordPress教程:如何创建一个很棒的页面翻转插件

文章撰写者:
  • 入站营销
  • 更新:Sep 15,2014

注意:我们不再支持此WP插件,因为作者暂时没有为我们写信。

从今天开始,每周我们都将提供一个很棒的编码教程,教你如何使用WordPress进行自定义工作,从基础到高级。 今天我们将创建一个插件(因此您将学习基本步骤)以使用JS生成“页面翻转”库。

我敢打赌你在早期网络时代已经看过其中一个,但那些大部分都是使用flash完成的,现在已经相当不赞成了(它仍然有它的价值,但它不再是这类东西的最佳选择)。

基本功能将创建一个新的 画廊类型 基于一些图像及其大小,通过短代码。

让我们开始吧!

邮编和安装

看到它的最佳方式是自己安装它。 您可以 在这里下载。 安装并激活插件,然后您需要做的就是在页面中添加短代码,如下所示:

[flip_book ids =“78 79 78 79 79 78 78 79 79 78”width =“300”height =“225”display =“double”]

快速预览

这就是你会得到的结果:

翻书效果

但那里有什么样的黑魔法呢? 嗯,实际上很简单。 让我们学习如何创建这样的东西。

标题

首先,您需要创建一个新文件夹和一个新的.php文件。 在这一点上,如果你有一个测试环境会很棒,所以你可以打破并测试一些东西。

文件和文件夹应具有简单且唯一的名称,因此您将避免与现有插件冲突。 那么我们文件的基本内容是这样的:

/ *插件名称:动画书库描述:为动画书库创建一个短代码。 版本:1.0作者:Web Revenue Blog许可证:GPL2 * /

很简单,对吧? 创建此文件后,您将在WP admin> Plugins下的列表中看到您的插件,并且您可以激活它(但如果您的文件中只有这些内容,则不会对您的网站进行大量更改)。

调用脚本

现在我们需要在这里包含一些重要的外部资产。 基本功能所需的外部文件是:

  • jQuery(1.9 +)
  • Turn.js脚本
  • 打开基本造型

如果您只是添加脚本和样式标记,那么您将遇到一些问题。 例如,双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__),array('jquery'),'1.3',false); wp_enqueue_style('turnCSS',plugins_url('css / style.css',__ FILE__),false,'1.3','all'); }

我们以不同的方式调用3中的外部项目,它们是:

  • 调用现有项: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 ifs测试,但这是三元操作优于常规if调用的情况之一。

三元运算是直接在变量值中的if语句。 如果遵循这个结构:

$ variable =(CONDITION)? “如果条件有效则值”:“如果条件错误则值”;

您可以在我们函数的第一部分中看到它们的运行情况:

function create_flip_book($ attr){//准备要处理的ID $ array ['ids'] = explode(“”,$ attr ['ids']); // display mode $ array ['display'] = empty($ attr ['display'])? “single”:$ attr ['display']; //标准值// width $ array ['width'] =空($ attr ['width'])? 400:$ attr ['width']; // height $ array ['height'] =空($ attr ['height'])? 300:$ attr ['height'];
    // HTML和其余的代码在这里}

然后我们需要创建HTML,以及对图像的基本调用。 另一个重点是如果我们使用杂志样式调整大小(它应该是2x的宽度,因为我们将有2图像而不是一个):

<?php if($ array ['display'] ==“double”){$ array ['width'] = $ array ['width'] * 2; } // HTML,JS和Black Magic?> <div id =“flipbook”> <?php for($ i = 0; $ i <sizeof($ array ['ids']); $ i ++){?> < div> <?php echo wp_get_attachment_image($ array ['ids'] [$ i],'full'); if($ array ['display'] ==“single”){?> <span> <?=“”。($ i + 1)?> / <? echo“”.sizeof($ array ['ids'])?> </ span> <?php} else {?> <spanright“:”left“);?>”> <?php echo“”。($ 1 + 1)?> / <? echo“”.sizeof($ array ['ids']); ?> </ span> <?php}?> </ div> <?php}?> </ div> <script type =“text / javascript”> jQuery(“#flipbook”)。turn({width:< ?php echo $ array ['width'];?>,height:<?php echo $ array ['height'];?>,autoCenter:true,display:'<?php echo $ array ['display']; ?>',//单页或双页加速:true,渐变:!jQuery.isTouch,}); </ SCRIPT>

你觉得呢?

现在你可以根据需要调整和修改它,添加更多选项(查看他们的精彩示例以获得更多灵感),调整不适合你的内容,或将其与其他插件相结合。

你想要学习更多的WordPress概念吗? 也许你想学习怎么做? 请通过评论告诉我们,我们很乐意在以后的帖子中加入此内容!

关于罗切斯特奥利维拉

我是来自巴西Itajubá(MG)的网页设计师和企业家。 我喜欢写一些关于模糊主题和做一些很酷的东西。