制作wordpress收藏分享插件（完结篇）

发布于，归属于wordpress。 前16个座位已被强势霸占！ 共有1,076人围观    

这一期教程将是wordpress插件开发教程的完结篇，主要讲解如何构建插件管理页面，首先先来回顾下之前的教程：

1、制作wordpress收藏分享插件（准备篇）

2、制作wordpress收藏分享插件：如何构建wordpress插件的主文件

3、制作wordpress收藏分享插件：构建ShareList类

该插件的下载请到准备篇。

构建插件管理页面

在第二篇教程讲解主文件中，明河有说到，往wordpress的后台插入插件的管理页面，代码如下：

  1. add_action('admin_menu','add_share_list_options_page');
  1. //生成管理页面
  2. if(!function_exists('add_share_list_options_page')){
  3.     function add_share_list_options_page(){
  4.         global $SL;
  5.         if(!isset($SL)){
  6.             return ;
  7.         }
  8.         if(function_exists('add_options_page')){
  9.             add_options_page('wp-share-list','收藏分享列表',9,basename ( __FILE__ ),array (&$SL, 'printAdminPage' ));
  10.         }
  11.     }
  12. }

构建插件管理页面的关键在于

  1. add_options_page('wp-share-list','收藏分享列表',9,basename ( __FILE__ ),array (&$SL, 'printAdminPage' ));

printAdminPage是ShareList的一个方法，用于输出管理页面。
printAdminPage这个函数代码很多，这里就不全部贴出，具体请详见ShareList.php

一、获取配置参数和插件路径

  1. $options = $this->getAdminOptions();
  2.             $pluginUri = get_bloginfo('wpurl').'/wp-content/plugins/wp-share-list';

二、判断是否存在post值，存在更新配置，不存在显示表单

  1. isset($_POST['update-options'])

update-options是表单提交按钮的name值

三、先来看表单部分

1、引入必要的js和css文件

  1. <script type="text/javascript" src="<?php echo $pluginUri;?>/js/jquery-1.4.2.min.js"></script>
  2.             <link rel="stylesheet" href="<?php echo $pluginUri;?>/style/css/base.css" type="text/css" media="screen" />
  3.             <link rel="stylesheet" href="<?php echo $pluginUri;?>/style/css/admin-options.css" type="text/css" media="screen" />
  4.             <link rel="stylesheet" href="<?php echo $pluginUri;?>/style/css/shareList.css" type="text/css" media="screen" />

2、构建表单表格
这部分难度不大，讲解有php的部分：
生成选择框的选项

  1. <select name="shareSites" multiple="multiple" id="shareSites" class="multiple-select">
  2.                                   <?php foreach($options['shareSites'] as $name => $localName) {?>
  3.                                   <option value="<?php echo $name;?>"><?php echo $localName;?></option>
  4.                                   <?php } ?>
  5.                                 </select>

结果如下图：

根据参数选中多选框

  1. <input type="checkbox" id="addJquery" name="addJquery" value="true"  <?php if($options['addJquery'] == 'true') echo 'checked="checked"';  ?> />

接下来来看js部分，这部分的内容并不属于wordpress插件开发的关键部分，明河不会一一讲解，js的代码有混合了php代码，这部分可以留意下。
3、我们需要遍历配置shareSites，将用户选择的分享站点生成一个js数组（数据只需要name值）

  1. //用户选择的分享站点
  2.                     var sites = [];
  3.                     <?php foreach($options['shareSites'] as $name => $localName) {?>
  4.                         sites.push("<?php echo $name;?>");
  5.                     <?php } ?>

4、ajax获取全部分享站点
获取json数据源，得到全部分享站点：

  1. //读取json
  2.                     $.getJSON("<?php echo $pluginUri.'/js/shareListData.js'?>",function(data){
  3.                         //....回调函数
  4.                     })

5、处理json数据，生成全部分享站点列表

  1. var _a = [];
  2.                         $.each(data,function(i){
  3.                             var _h = '<li class="l share-list-item">'+
  4.                                      '<span class="share-list-icon icon-'+data[i].name+'"></span>'+
  5.                                      '<div><input type="checkbox" class="share-list-checkbox" name="sites[]" value="'+data[i].name+'" localName ="'+data[i].localName+'" />&nbsp;&nbsp;<label>'+data[i].localName+'</label></div>'+
  6.                                      '</li>';
  7.                             _a.push(_h);        
  8.                         });
  9.                         //将站点插入列表
  10.                         $("#sites").html(_a.join(''));

生成的结果是：

当然是多选框是没有选中的。
6、根据用户选择的分享站点数组，选中多选框

  1. //选中用户选择的分享站点
  2.                         $("#sites").find(".share-list-checkbox").each(function(){
  3.                             var _$this = $(this);
  4.                             $.each(sites,function(i){
  5.                                 if(_$this.val() == sites[i]) _$this.attr("checked",true);
  6.                             })
  7.                         })


选择框的处理，只是js的处理，不牵涉到php，这里略过。

四、更新配置参数

1、更新分享站点参数

  1. if(isset($_POST['hidden-share-site-names'])){
  2.                     $names = explode(',',$_POST['hidden-share-site-names']);
  3.                     $localNames = explode(',',$_POST['hidden-share-site-localNames']);
  4.                     $shareSites = array();
  5.                     for($i = 0;$i<count($names);$i++){
  6.                         $shareSites[$names[$i]] = $localNames[$i];
  7.                     }
  8.                     $options['shareSites'] = $shareSites;
  9.                    
  10.                 }
  1. $names = explode(',',$_POST['hidden-share-site-names']);

hidden-share-site-names是表单中的隐藏域，存储着用户选择的分享站点（只有name值），这里将其转成php数组。

  1. $localNames = explode(',',$_POST['hidden-share-site-localNames']);

同样我们将中文名转成php数组。
接下来我们需要localNames和name值合并成一个数组，最后才是站点配置：

  1. $shareSites = array();
  2.                     for($i = 0;$i<count($names);$i++){
  3.                         $shareSites[$names[$i]] = $localNames[$i];
  4.                     }
  5.                     $options['shareSites'] = $shareSites;

这是唯一的难点，接下来其他配置参数的处理就非常简单，类似：

  1. //引入jquery
  2.                 if(isset($_POST['addJquery'])){
  3.                     $options['addJquery'] = $_POST['addJquery'];
  4.                 }else{
  5.                     $options['addJquery'] = 'false';
  6.                 }

更新配置：

  1. update_option($this->adminOptionsName,$options);

配置成功了，我们需要输出一行提示：

  1. echo '<div style="margin:100px auto;font-size:14px;width:350px;padding:20px;border:2px dashed #E3E3E3;background-color:#ffffff;text-align:center;">配置更新成功！<a href="'.$pluPageUrl.'">点此返回配置页面</a></div>';

完成的插件页面如下：

至此这个插件就构建完毕，其实管理页面的构建主要还是html和javascript的知识，只要懂得获取wordpress的插件参数和更新插件参数即可。
明河这个插件的管理页面难点在于对分享站点的控制，由于要实现对分享站点的全面控制，所以需要不少量的js，这部分与wordpress无关，看不下去也没事，只要你能通过这个系列的教程，能够对wordpress的插件机制有个大概的理解，明河就算没白写这个系列的文章。

如果你遇到什么问题，可以给明河留言，谢谢。

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

16个座位已被强势霸占！

  1. 银月闪舞

    终于出来完结篇了，很有收获

    灵亦rEd回复于 2010年06月21日 10:16

    @银月闪舞, 我太菜了，看不懂

    明河共影回复于 2010年06月21日 10:21

    不是你太菜了，是写的这个插件管理页面代码太多了，其实不是很适合做教程讲解。

    银月闪舞回复于 2010年06月22日 12:27

    @灵亦rEd,文章太长，要耐心看，呵呵

  2. 灵亦rEd

    准备断网半个月了,挂科就猥琐了

    明河共影回复于 2010年06月22日 6:13

    …..没事，不是可以补考，哈。

  3. fly3q

    呵呵，看完了，整个看下来对对wp的插件机制也算是有了一个定的了解了，谢谢博主的分享。
    今天就先浏览博主的文章在这里了，改天再来学习，看球了，嘿嘿

  4. zen

    博主的這個插件超棒，但是在底色不是白色的情況下會出現效果不佳的問題，不知是否有辦法改進，還是只能改底色呢？

    明河共影回复于 2010年07月15日 10:26

    恩，你要手动修改下底色，在样式表里面修改。我之所以加上底色是因为IE7、IE8在改变图标透明度的时候，会出现黑色border的bug。

    明河共影回复于 2010年07月15日 10:40

    点开插件的“style/shareList.css”，找到.share-list-icon-shadow下的background:#FAFDEF;改成你主题的底色

  5. andrewmak

    太喜歡博主這個插件了，可是我用的是Arjuna X主題，是灰色的底色。不知道是什麽原因，顯示出來的效果是那些圖標倒沒什麽問題，只是那個陰影的層變得是俯視的平面效果了，疊在圖標的下面，成不了立體的陰影效果，不知博主有沒有解決的辦法，還是因為那個主題不支持呢？感謝！

    明河共影回复于 2010年07月15日 10:39

    跟你主题没什么关系，跟阴影底色有关系，你点开插件的“style/shareList.css”，找到.share-list-icon-shadow下的background:#FAFDEF;改成灰色

  6. 剑灵

    真不知道该说什么了，老大你太强大了，为你的分享精神感到自豪。还有你的耐心回复！

    明河共影回复于 2010年09月23日 10:56

    剑灵这句话让我备感欣慰，哈支持我，帮我点个广告，呵呵。

  7. Bruce Lee

    强人分享！我的分享插件，有些没有

  8. 竹影风

    很好很强大，谢谢分享。

同类