制作wordpress收藏分享插件（wordpress插件开发教程三）

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

上一期教程，明河讲解了如何构建插件的主文件，主文件是入口，真正干活的是ShareList类，今天明河将重点讲解include/ShareList.php。

（灵亦rEd有反映插件启动头部会报错误，插件无法运行，可是明河和银月并没有遇到这种情况，欢迎其他朋友帮忙测试，明河拜谢，这里也向灵亦rEd朋友表示感谢。）

ShareList.php解析

一、getAdminOptions方法说明

getAdminOptions这个ShareList的公共方法用于获取插件的配置项（如果数据库中不存在该插件的配置项，将先予以添加。）
代码如下：

  1. //获取参数配置
  2.         function getAdminOptions(){
  3.             $defaults = array('addJquery' => 'true',
  4.                               'autoShow' => 'false',
  5.                               'listWidth' => 660,   
  6.                               'shareSites' => array("9dian" => "豆瓣9点","feerbook" => "feerbook","chouti" =>"抽屉","diglog" => "奇客发现","sinaminiblog" => "新浪微博","renren" => "人人网","zhuaxia" => "抓虾","xianguo" => "鲜果","greader" =>"greader","qqshuqian"=>"QQ书签",
  7.                               "douban" => "豆瓣","twitter" => "twitter","favorite" => "本地收藏夹","kaixin001" => "开心网","baiducang" => "百度收藏","gbuzz" => "gbuzz","digu" => "嘀咕","zuosa" => "做啥","renjian" => "人间","sohubai" => "搜狐白社会"),
  8.                               'showShadow' => 'true',
  9.                               'allowSroll' => 'true');                   
  10.             //获取参数
  11.             $options = get_option($this->adminOptionsName);
  12.             //覆盖默认参数
  13.             if(!empty($options)){
  14.                 foreach($options as $key => $option){
  15.                      $defaults[$key] = $option;
  16.                 }
  17.             }
  18.             //更新参数
  19.             update_option($this->adminOptionsName,$defaults);
  20.             return $defaults;
  21.         }

1、首先我们先定义一个默认参数的关联数组$defaults，共有6个配置项，这些配置项将是后台管理页面的配置内容，包括、是否引入jquery、是否自动在文章末尾显示分享列表、分享站点（也是个关联数组）、容器宽度等。
2、获取参数

  1. //获取参数
  2.             $options = get_option($this->adminOptionsName);

adminOptionsName是ShareList的公共属性，用于储存插件的配置项名称（不可与其他插件的配置项名称相同，这是唯一的,类似起到命名空间的作用）。
get_option()是wordpress的函数，获取指定配置项名称下的所有配置。
3、遍历从数据库中获取的配置项，覆盖默认配置项：

  1. //覆盖默认参数
  2.             if(!empty($options)){
  3.                 foreach($options as $key => $option){
  4.                      $defaults[$key] = $option;
  5.                 }
  6.             }

4、更新数据库：

  1. //更新参数
  2.             update_option($this->adminOptionsName,$defaults);

update_option()也是wordpress的一个方法，用于更新配置项（这个方法在数据库中不存在该插件配置的时候，执行的是添加方法，存在则执行更新。）

二、addHeader方法说明

  1. //将代码添加到html页面的头部
  2.         function addHeader(){
  3.             $options = $this->getAdminOptions();
  4.             if(is_single() || is_page()){                   
  5.                 echo '<link type="text/css" rel="stylesheet" href="'.get_bloginfo('wpurl').'/wp-content/plugins/wp-share-list/style/css/shareList.css" />' . "\n";   
  6.                 if($options['addJquery'] == 'true'){
  7.                     echo '<script type="text/javascript" src="'.get_bloginfo('wpurl').'/wp-content/plugins/wp-share-list/js/jquery-1.4.2.min.js"></script>'."\n";
  8.                 } 
  9.                     echo '<script type="text/javascript" src="'.get_bloginfo('wpurl').'/wp-content/plugins/wp-share-list/js/jquery.shareList.js"></script>'."\n";           
  10.             }                   
  11.         }

上一期的教程明河曾经讲到Action，主文件中有add_action(“wp_head”,array (&$SL, ‘addHeader’ ));会向头部加入插件所需要的css和js文件。
1、获取插件参数配置：

  1. $options = $this->getAdminOptions();

2、由于收藏分享插件主要应用于文章页和独立页面页，其他页面无需加入，所以我们加上如下判断：

  1. is_single() || is_page()

3、输出css和js文件引用：

  1. echo '<link type="text/css" rel="stylesheet" href="'.get_bloginfo('wpurl').'/wp-content/plugins/wp-share-list/style/css/shareList.css" />' . "\n";
  2. ....

get_bloginfo(‘wpurl’)这个方法将获取你博客的根路径，这个方法很常用。

三、addContent方法说明

主文件内我们加入了add_action(‘the_content’, array (&$SL, ‘addContent’ ));，生成文章正文后，添加js调用，生成分享列表。
来看addContent的代码：

  1. //将js调用添加到content
  2.         function addContent($content){
  3.             $options = get_option($this->adminOptionsName);
  4.             $c = $content;
  5.             if($options['autoShow'] == 'true'){
  6.                 if(is_single() || is_page()){
  7.                     $h = $this->createShareList();
  8.                     $c = $c.$h;
  9.                 }               
  10.             }
  11.             return $c;
  12.         }

1、获取配置项

  1. $options = get_option($this->adminOptionsName);

2、the_content这个钩子比较特殊，需要有返回内容，我们先将原文章正文赋值给$c，然后将生成的分享列表html代码拼接到$c，最后返回新的$c。
3、为了让用户可以更自由的控制显示位置，需要加个判断，是否自动在正文后加入调用：

  1. $options['autoShow'] == 'true'

4、获取调用的html代码：

  1. $h = $this->createShareList();

createShareList这个方法请看下面讲解。

四、createShareList讲解

  1. //生成js调用
  2.         function createShareList(){
  3.                 $options = $this->getAdminOptions();
  4.                
  5.                 $dataUrl = get_bloginfo('wpurl').'/wp-content/plugins/wp-share-list/js/shareListData.js';
  6.                 $shadowSrc = get_bloginfo('wpurl').'/wp-content/plugins/wp-share-list/style/images/icon-shadow.png';
  7.                 $preloadImgSrc = get_bloginfo('wpurl').'/wp-content/plugins/wp-share-list/style/images/loading.gif';
  8.                 $style = '{width:'.$options['listWidth'].'}';
  9.                 $sites = "[";
  10.                 $_a = array();
  11.                 foreach($options['shareSites'] as $key => $value){
  12.                      $_a[] = '"'.$key.'"';
  13.                 }
  14.                 $sites .= implode(',',$_a);
  15.                 $sites .="]";
  16.                
  17.                 $h = '<div id="single-share"></div>'.
  18.                      '<script type="text/javascript">'.
  19.                           '$(function(){'.
  20.                                 '$("#single-share").shareList({getListAjaxOptions:{url:"'.$dataUrl.'"},shadowSrc : "'.$shadowSrc.'",preloadImgSrc:"'.$preloadImgSrc.'",shareSites:'.$sites.',style:'.$style.'});'.
  21.                           '})'.
  22.                      '</script>';
  23.                  return $h;                    
  24.         }

看似代码很多，其实难度不高，这个函数的目的是生成一个分享列表容器层和js调用。
生成后的大致内容如下：

  1. <div id="single-share"></div>
  2. <script type="text/javascript">
  3. $(function(){
  4. $("#single-share").shareList({getListAjaxOptions:{url:"http://www.36ria.com/wp-content/plugins/wp-share-list/js/shareListData.js"},
  5. shadowSrc : "http://www.36ria.com/wp-content/plugins/wp-share-list/style/images/icon-shadow.png"
  6. ,preloadImgSrc:"http://www.36ria.com/wp-content/plugins/wp-share-list/style/images/loading.gif",
  7. shareSites:["9dian","feerbook","chouti","diglog","sinaminiblog","renren","zhuaxia","xianguo","greader","qqshuqian","douban","twitter","favorite","kaixin001","baiducang","gbuzz","digu","zuosa","renjian","sohubai"],
  8. style:{width:660}});
  9. })
  10. </script>

实际上就是$.shareList这个jquery插件的调用，你只要明白这个jquery插件如何调用，然后将配置项写入这个jquery插件的参数，如果你不明白shareList参数的含义，请点此：shareList — jquery收藏&分享插件（明河作品）

至此这部分的内容结束，下一期是完结篇，将讲述后台管理页面的构建。

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

跟作者说两句

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

5个座位已被强势霸占！

  1. 灵亦rEd

    有空一定要好好研究研究
    你这个插件要比jiathis那个好看多了
    加油

    明河共影回复于 2010年06月19日 3:46

    呵呵，谢谢夸奖，现在分享站点还不够丰富，日后将更新上。

  2. 银月闪舞

    恩~很好的参考，以后有些插件的需要这是个很不错的教程。
    PS：灵亦rEd学生时代就搞了自己的blog了，很好，也很羡慕！

    明河共影回复于 2010年06月19日 3:47

    哈，你现在搞也不迟啊。

  3. 灵亦rEd

    回复：银月闪舞
    昂，这个不是个人时段问题，是时代问题
    现在的初中生就有人弄的了

同类