ria之家--RIA三部曲：jquery、ext、flex » wordpress http://www.36ria.com RIA三部曲：jquery、ext、flex Wed, 08 Feb 2012 12:19:26 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 RIA之家wordpress模板开放下载了！ http://www.36ria.com/4520 http://www.36ria.com/4520#comments Mon, 26 Sep 2011 08:39:19 +0000 明河 http://www.36ria.com/?p=4520
:lol: :lol: 有不少朋友向明河索要RIA之家的模板，团队成员商量后，决定将该模板开放出去，欢迎下载试用，同时欢迎大家的反馈！
为了便于日后更新维护，明河将模板托管到github，传送门在此：https://github.com/minghe/36ria-theme。

说说该模板的特点：

  • 中文原创模板，由明河设计，苏河、天河、飞绿制作；
  • 中国为数不多的采用html5的wordpress模板；
  • 适合团队博客；
  • 整体设计还行（明河自吹自擂下…）

(PS:目前没做IE兼容性处理哦)

]]> http://www.36ria.com/4520/feed 10 在wordpress博客首页中构建快速注册表单 http://www.36ria.com/3866 http://www.36ria.com/3866#comments Tue, 15 Feb 2011 13:22:25 +0000 明河共影 http://www.36ria.com/?p=3866
休假18天，RIA之家重新恢复更新！同时明河开始着手RIA之家的改版，新版RIA之家争取1个月后与大家见面。
不少朋友，向明河要RIA之家右侧的快速注册表单代码，今天明河就发布个相应教程，同时也算是演练下如何修改wordpress主题。其实向首页追加个注册表单，一点都不难，请看下面明河的分解。

1.进入你的当前主题代码页面


点击“Editor”。

2.打开sidebar.php


这里我们是往侧边添加注册表单，所以打开的是sidebar.php。

3.在相应位置添加如下代码

  1. <div class="ria_r_box mar-t-10">
  2.          <div class="ria_r_box_header icon">
  3.             <span class="box_header_2_title">快速注册</span>
  4.          </div>
  5.          <form name="registerform" id="registerform" action="<?php bloginfo('url'); ?>/wp-login.php?action=register" method="post">
  6.                 <ul>
  7.                     <li class="mar-t-10">用户名（只能是英文、数字）</li>               
  8.                     <li class="mar-t-10">
  9.                         <input type="text" name="user_login" id="user_login" class="input" value="" size="35" tabindex="10" />
  10.                     </li>
  11.                     <li class="mar-t-10">邮&nbsp;&nbsp;箱（密码将通过email发送给您）</li> 
  12.                     <li class="mar-t-10">
  13.                         <input type="text" name="user_email" id="user_email" class="input" value="" size="35" tabindex="20" /></label>
  14.  
  15.                     </li> 
  16.                     <li class="mar-t-10">
  17.                         <input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="注&nbsp;册" tabindex="100" />
  18.                     </li>                             
  19.                 </ul>
  20.            </form>                               
  21.     </div>

关键点说明：
wordpress注册的服务器端页面：

  1. <?php bloginfo('url'); ?>/wp-login.php?action=register

注意表单内的输入框的name值请勿修改。

4.添加样式

  1. .ria_r_box{background-color:#FFF;padding:10px;}
  2. .ria_r_box_header{background-position:left -777px !important;padding:6px 0px;font-size:14px;font-weight:bold;color:#333;}
  3. .mar-t-10{margin-top:10px;}

以上样式仅供参考，请自行修改。

]]> http://www.36ria.com/3866/feed 6 wp-share-list更新至1.6.1.2 http://www.36ria.com/3815 http://www.36ria.com/3815#comments Thu, 13 Jan 2011 01:28:10 +0000 明河共影 http://www.36ria.com/?p=3815 这次的更新，主要是针对1.6.1发布后出现的一个比较严重的bug：当不勾选配置页面的“引入插件的jquery1.4.2库”，就无法初始化插件的问题。而有些用户有引入其他插件不是基于jquery.1.4.2的，如果引入wp-share-list的jquery，就会导致冲突！报错或其他插件比如灯箱、评论插件无法使用！
明河先对遇到上述问题的朋友，道个歉，这个bug是由于明河敲代码时的一时疏忽导致的bug！T_T！
特别特别感谢飞龙在天朋友细心的排查！飞龙在天还给明河发了修正版本，哈，再次表示感谢。
点此下载

补充QA：为什么升级到1.6.1后不勾选“引入插件的jquery1.4.2库”，插件无法加载？为什么与其他插件存在冲突？

这个bug是由明河的疏忽导致的，原因可以看下面飞龙在天发的脚本。
正确的版本

  1. //关于wp-share-list 1.6.1这个问题，修改文件 wp-share-list\include\ShareList.php 的第46行函数addJs里的一段逻辑为下面这样就好了，括号位置括错了：）
  2.                 //修正好的版本
  3.                 //输出jquery引用
  4.                 function addJs(){
  5.                         $options = $this->getAdminOptions();
  6.                         if(is_single() || is_page()){                                 
  7.                                 echo '<link type="text/css" rel="stylesheet" href="'.get_bloginfo('wpurl').'/wp-content/plugins/wp-share-list/style/css/shareList.css" />' . "\n";    
  8.                                 if($options['addJquery'] == 'true'){
  9.                                         echo '<script type="text/javascript" src="'.get_bloginfo('wpurl').'/wp-content/plugins/wp-share-list/js/jquery-1.4.2.min.js"></script>'."\n";
  10.                                 }
  11.                                 echo '<script type="text/javascript" src="'.get_bloginfo('wpurl').'/wp-content/plugins/wp-share-list/js/jquery.shareList.js"></script>'."\n";
  12.                                 $this->addShareList();
  13.                         }             
  14.                 }

错误的版本

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

….“}”引发的血案…….

]]> http://www.36ria.com/3815/feed 39 发布wp-share-list1.6.1推荐更新！ http://www.36ria.com/3760 http://www.36ria.com/3760#comments Sat, 01 Jan 2011 13:14:02 +0000 明河共影 http://www.36ria.com/?p=3760
wp-share-list发布1.6不少热心的朋友找明河，哈多数是抱怨明河这个版本上存在这样或那样的bug，明河在此深表歉意，针对一些明显bug，1月1日做了修复，特此发布1.6.1版，没加入什么新功能，主要做些优化，建议更新。
点此下载

wp-share-list1.6.1的更新内容如下

  • 1.修复1.6版几个明显的bug
  • 2.重写了html部分
  • 3.解决部分主题调用失败的问题
  • 4.解决1.6后出现新的样式冲突问题

目前有部分朋友反映1.6.1存在冲突，明河再次表示抱歉，同时放出1.6，如果1.6.1无法使用的朋友，请下载1.6。

点此下载

补充2个QA

1.知更鸟主题（HotNewspro233）下，插件报错，调用失败的问题

这个更新，很大程度上是因为这个问题，这里明河说明，并不是插件的问题，而是知更鸟这个主题引入多个jquery导致的变量覆盖导致的bug。
目前明河已经使用小技巧，解决了这个冲突。

2.IE6下存在内存泄露问题

症状是鼠标的手型不断变化闪烁，看到这个问题，明河彻底囧了，调试了一个晚上，无果。一直想重构js脚本，重构结束后将发布个新版本，届时会解决这个问题。

]]> http://www.36ria.com/3760/feed 19 发布wp-share-list1.6！增加小图版！ http://www.36ria.com/3715 http://www.36ria.com/3715#comments Wed, 15 Dec 2010 13:34:33 +0000 明河共影 http://www.36ria.com/?p=3715
在发布wp-share-list1.5.5的时候明河曾说过将在12月中旬发布wp-share-list1.6，这次明河没食言，如期发布1.6版。欢迎朋友们反馈新版的问题和建议，尤其欢迎测试下1.6小图版，（气泡显示站点名称，留待1.6.2完善版发布）
点此下载

wp-share-list1.6的更新内容如下

  • 1.增加小图版，小图版的图标大小为25*25
  • 2.优化css样式
  • 3.优化插件管理页面
  • 4.调整了js（js将在日后重构，现在来看这个脚本，写的还是很粗糙的）

明河将在下周发布个稳定版1.6.2，修复1.6插件出现的bug，欢迎朋友们向明河反映插件bug，一如既往的感谢给明河的朋友们。
插件完整说明页面，猛击这里进入。

QA：为什么1.5.5后启用了插件却没有效果。

1.5.5后插件使用wp_footer()作为钩子，即将插件的代码插入到尾部，而不再是头部，这样可以减少冲突的可能行，同时提高页面加载速度，有很多主题会把wp_footer()函数漏掉，只要在footer.php模板页上，加上这个函数即可。

  1. <?php wp_footer(); ?>
]]> http://www.36ria.com/3715/feed 32 关于wp-share-list紧急发布到1.5.5说明 http://www.36ria.com/3630 http://www.36ria.com/3630#comments Fri, 26 Nov 2010 13:11:26 +0000 明河共影 http://www.36ria.com/?p=3630
wp-share-list1.5.4发布，马上有二个朋友反应无法显示，明河顿时瀑布汗下来了，这次真的非常抱歉。

之所以无法显示还是由于js冲突引起的，主要是很多插件会引入jquery库，在jquery版本和代码上存在覆盖的问题，直接导致jquery插件变量被覆盖掉了，所以报找不到函数的错误。1.5.5版明河将插件的引入插入到页面的尾部，而不再插入到头部，避免被其他插件引入的jquery库覆盖。

如果你在使用中还是遇到问题，可以给明河留言，明河会及时处理。

这次错误更新，给各位带来困扰，明河深表抱歉！有更新到1.5.4的朋友，请及时更新到1.5.5！

这里明河提醒有使用多个插件的朋友，留意插件有没有多引用了jquery库，建议页面中引入一个jquery库即可，多个jquery容易造成冲突、性能的浪费。

点此下载

QA：

为什么只显示正在加载的图形，而不出现内容？

明河答：这说明插件本身已经加载成功了，没有和其他插件冲突了，依旧无法加载，是因为跨域的问题，明河是使用ajax获取分享站点数据。有部分博客的站点网址设置不对，会造成跨域的问题，无法取到加载数据。比如你的访问主页的域名是http://www.36ria.com/，当如果你在站点路径中设置成http://36ria.com/就会存在跨域问题。
请在你的后台“常规设置”中修改下站点URL。
跨域问题出现，有个标志：js报a is null 的错误。

]]> http://www.36ria.com/3630/feed 52 wordpress分享插件wp-share-list更新至1.5.4！ http://www.36ria.com/3622 http://www.36ria.com/3622#comments Fri, 26 Nov 2010 06:38:57 +0000 明河共影 http://www.36ria.com/?p=3622
明河这次对wp-share-list的更新，主要是紧急修复一些朋友反映的bug，这次插件的更新特别感谢kevin、medesky、xiaoronglv、vue、depthsky等朋友的建议，特别鸣谢kevin，占用了他几个小时，测试新版插件，O(∩_∩)O哈！
关于wp-share-list，如果你有用着觉得不爽或感觉很脑残的地方，请给明河明河留言，明河会继续改进wp-share-list，谢谢各位朋友的支持！
点此下载

wp-share-list1.5.4的更新内容如下：

  • 1、修正插件样式与部分主题依旧存在冲突的问题；
  • 2、修正插件js与主题部分其他插件js冲突而导致报错，无法显示分享列表的问题；
  • 3、修正开心网的标题接口错误的问题；
  • 4、调整了插件的一些细节。
  • 5、修复IE7、IE8下阴影层出现难看的黑色锯齿。

wp-share-list1.6的更新预告：

  • 1、增加小图标版；
  • 2、气泡显示站点名称；
  • 3、自由设置阴影背景颜色。

1.6将在下个月中旬与大家见面，O(∩_∩)O~。

QA：

为什么在非白色背景下，分享站点下的阴影，带有难看的白色背景？

明河答：这跟IE存在透明bug有关，为了不让IE下阴影呈现难看的黑色锯齿，明河强制给阴影层加了白色背景。目前，用户还无法自定义背景颜色，明河将在1.6追加这个功能。

]]> http://www.36ria.com/3622/feed 22 wp-share-list1.5.2更新及插件常见问题回答 http://www.36ria.com/3411 http://www.36ria.com/3411#comments Fri, 05 Nov 2010 02:30:32 +0000 明河共影 http://www.36ria.com/?p=3411
点此下载
wp-share-list1.5.2是明河根据朋友们使用wp-share-list1.5后反映的一些问题修正版本。

更新内容如下：
  • 1、压缩了插件的js和css文件，加快加载速度
  • 2、修正了插件配置页面的细节问题
  • 3、强制li无内边距，防止出现二行图标问题

wp-share-list常见问题回答

Q1.为什么会出现二行图标？

这是最多朋友咨询明河的问题，wp-share-list会出现二行图标的根本原因在于插件的样式与主题的样式冲突引起的。很多朋友是使用

这不是明河提倡的使用方式，因为在文章尾部自动显示，是把插件添加到正文内，会受到主题正文样式，特别是li样式的影响，会出现各种各样的样式冲突问题，比较多的就是二行图标问题（由于主题对li加了padding引起的）。

目前1.5.2已经通过插件样式强制优先级的方式，解决了问题。如果依旧出现二行图标的问题，请使用手动调用的方式。

Q2.如何自定义插件显示位置或如何手动调用？

二个问题，实际上是同一问题。

1、首先先在配置页面取消自动显示；

2、在你要显示分享列表的地方插入以下代码：

  1. <?php if(function_exists('wp_share_list')) wp_share_list() ?>

Q3.更新到1.5后配置页面左侧有QQ空间等新分享站点，但右侧选择区没有出现？

这是由于明河使用ajax获取分享列表，有些浏览器会缓存结果的缘故。
解决方案：清理浏览器换错或重新打开浏览器。

Q4.部分主题不显示分享列表。

vue向明河反映了他的主题下无法显示分享列表，但明河使用该主题时又可以使用，目前明河还不知道原因，持续关注中。

明河结语

欢迎各路朋友继续向明河反映wp-share-list的使用问题，明河会争取第一时间解决，感谢朋友们的反馈和支持！

]]> http://www.36ria.com/3411/feed 41 wp-share-list更新至1.5！ http://www.36ria.com/3404 http://www.36ria.com/3404#comments Tue, 02 Nov 2010 11:38:03 +0000 明河共影 http://www.36ria.com/?p=3404 这个新版本是明河欠很多朋友的，感谢曾向明河提过意见和bug的朋友们，像fonlan、风来西林、ShunYea等，没有他们的反馈，就没有这个新版的wp-share-list。

说说wp-share-list1.5的更新内容

  • 1、修正部分主题显示二列的问题
  • 2、修正插件样式和主题样式冲突的问题
  • 3、修正百度收藏网址加到‘分类’的问题
  • 4、增加QQ空间、腾讯微博、搜狐微博、淘江湖四个分享站点
  • 5、增加可以设置是否显示阴影，是否跟随鼠标滚动的功能
  • 6、可重置配置参数
  • 7、调整插件配置页面

wp-share-list下一个版本预告

  • 1、微博分享不再跳转到登录页面，允许授权后直接转发。
  • 2、气泡显示站点名称
  • 3、加入更多的分享站点
  • 4、点击统计，这个功能是明河一直想加上去的，争取在下个版本中出现
点此下载 ]]> http://www.36ria.com/3404/feed 26 wordpress3.0之comment_form()实战（下） http://www.36ria.com/3045 http://www.36ria.com/3045#comments Wed, 01 Sep 2010 02:15:39 +0000 明河共影 http://www.36ria.com/?p=3045 上一篇教程《wordpress3.0之comment_form()实战（上）》主要讲解了wordpress3.0中comment_form()函数的基础用法，今天这篇教程，明河将讲述comment_form()的高级技巧。

过滤评论表单的字段

举个例子，默认的评论表单包含名称、email、url、评论内容，现在明河觉得url是多余的，想把url这个字段去掉，如何控制呢？
1、请打开你当前主题的Functions.php页面
2、加入如下代码：

  1. add_filter('comment_form_default_fields', 'mytheme_remove_url');
  2. function mytheme_remove_url($arg) {
  3.     $arg['url'] = '';
  4.     return $arg;
  5. }

保存后刷新页面，你就会看到“url”输入框已经不复存在。

添加新的表单字段

继续在Functions.php操作，现在加入“QQ”字段。
加入如下代码：

  1. function my_fields($fields) {
  2. $fields['qq'] = '<p class="comment-form-qq">' . '<label for="qq">QQ</label> ' .
  3.                     '<input id="qq" name="qq" type="text" value="' . esc_attr( $commenter['comment_qq'] ) . '" size="30" /></p>';
  4. return $fields;
  5. }
  6. add_filter('comment_form_default_fields','my_fields');

保存后，刷新页面就会看到“QQ”了。
如果你设置$fields['author']，与默认字段（author、email、url）相同，就会覆盖默认字段。

comment_form()的钩子（Hooks）

comment_form()全部钩子

• comment_form_before
• comment_form_must_log_in_after
• comment_form_top
• comment_form_logged_in_after
• comment_notes_before
• comment_form_before_fields
• comment_form_field_{$name}
• comment_form_after_fields
• comment_form_field_comment
• comment_form
• comment_form_after
• comment_form_comments_closed

钩子的使用

明河举个例子，我希望在表单前面加上一句话，看代码（还是操作Functions.php）：

  1. function comment_form_before_test(){
  2.     echo "<p>明河的测试</p>";
  3. }
  4. add_action( 'comment_form_before', 'comment_form_before_test' );

comment_form()其他钩子的使用与之类似。

改变comment_form()的布局和样式

在上一篇教程中，guny曾问明河，“如何处理皮肤(skin or 表单布局)”，接下来明河演示如何自定义出任何想要的布局和样式。
一般主题的表单如下图：

我们希望表单的结构类似于RIA之家的评论表单，如下图：

来看代码（先把之前的测试代码去掉）：

  1. function ria_fields($fields) {
  2.     $fields =  array(
  3.         'author' => '<p class="comment-form-field comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
  4.                     '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="13"' . $aria_req . ' /></p>',
  5.         'email'  => '<p class="comment-form-field comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
  6.                     '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="13"' . $aria_req . ' /></p>',
  7.         'url'    => '<p class="comment-form-field comment-form-url"><label for="url">' . __( 'Website' ) . '</label>' .
  8.                     '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="13" /></p>',
  9.     );
  10. return $fields;
  11. }
  12. add_filter('comment_form_default_fields','ria_fields');

我们主要是让author、email、url排成三列，需要将默认的字段使用自定义的结构覆盖掉，如上代码，给每个”p”加上个新的”comment-form-field”。
接下来就是在style.css对这个样式进行操作，代码如下：

  1. #commentform {
  2.     display:block;
  3.     height:1%;
  4.     content:".";
  5. }
  6. #commentform .comment-form-field{
  7.     width:33%;float:left;
  8. }
  9. #commentform .comment-form-field input{
  10.     width:190px;
  11. }
  12. #commentform .comment-form-comment{
  13.     float:left;width:100%;
  14. }
  15. #commentform .comment-form-comment textarea{
  16.     width:614px;
  17. }

OK！完毕！

作者结语

wordpress的强大和优良的扩展性的确让人叹为观止，有太多的使用技巧等待挖掘，欢迎各路朋友与明河一起探讨，谢谢！

]]> http://www.36ria.com/3045/feed 13 wordpress3.0之comment_form()实战（上） http://www.36ria.com/3007 http://www.36ria.com/3007#comments Sat, 28 Aug 2010 07:48:48 +0000 明河共影 http://www.36ria.com/?p=3007 comment_form()是wordpress3.0出现的新的实用方法，作用是快速生成评论表单。comment_form大大简化了评论表单构建过程，从此以后你无须书写一堆html代码产生评论表格，只要一行：

  1. <?php comment_form(); ?>

就搞定问题了！明河借用个广告词“so easy！” -_-!

comment_form()未出现前

你可以打开你主题的comments.php ，你会看到类似如下的表单代码：

  1. <?php if ( comments_open() ) : ?>
  2.  
  3. <div id="respond">
  4.     <div class="single-box mar-t-10">
  5.          <div class="single-box-header clearfix"><span></span>有话要说？请在此留下阁下高见</div>
  6.     </div>
  7.  
  8.     <div id="cancel-comment-reply">
  9.         <small><?php cancel_comment_reply_link() ?></small>
  10.     </div>
  11.  
  12. <?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
  13. <p><?php printf(__('请先<a href="%s">登录</a>，然后再发表评论', 'kubrick'), wp_login_url( get_permalink() )); ?></p>
  14. <?php else : ?>
  15.  
  16. <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
  17. <table width="100%" border="0" cellspacing="0" cellpadding="0" class="comment-table mar-t-10">
  18. <?php if ( is_user_logged_in() ) : ?>
  19.  
  20. <p class="mar-t-b-10"><?php printf(__('你的用户名是<a href="%1$s">%2$s</a>', 'kubrick'), get_option('siteurl') . '/wp-admin/profile.php', $user_identity); ?> ，<a href="<?php echo wp_logout_url(get_permalink()); ?>" title="<?php _e('Log out of this account', 'kubrick'); ?>"><?php _e('注销;', 'kubrick'); ?></a></p>
  21.  
  22. <?php else : ?>
  23.   <tr>
  24.     <td><label for="author"><?php _e('用户名', 'kubrick'); ?> <?php if ($req) _e("(必须)", "kubrick"); ?></label></td>
  25.     <td><label for="email"><?php _e('邮箱 (不会公开', 'kubrick'); ?> <?php if ($req) _e(",必须)", "kubrick"); ?></label></td>
  26.     <td><label for="url"><?php _e('站点URL', 'kubrick'); ?></label></td>
  27.   </tr>
  28.   <tr>
  29.     <td><input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="25" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> class="comment-input" /></td>
  30.     <td><input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="25" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> class="comment-input" /></td>
  31.     <td><input type="text" name="url" id="url" value="<?php echo  esc_attr($comment_author_url); ?>" size="25" tabindex="3" class="comment-input" />
  32. </td>
  33.   </tr>
  34. <?php endif; ?>
  35.   <tr>
  36.     <td colspan="3">你的评论</td>
  37.   </tr>
  38.   <tr>
  39.      <td colspan="3"><textarea name="comment" id="comment" cols="58" rows="10" tabindex="4" class="comment-input" ></textarea></td>
  40.   </tr>
  41.   <tr>
  42.     <td><input name="submit" type="submit" id="submit" class="comment-submit" tabindex="5" value="<?php _e('提交评论', 'kubrick'); ?>" /><?php comment_id_fields(); ?></td>
  43.     <td>&nbsp;</td>
  44.     <td></td>
  45.   </tr>
  46. </table>
  47. <?php do_action('comment_form', $post->ID); ?>
  48.  
  49. </form>
  50.  
  51. <?php endif; // If registration required and not logged in ?>

以上代码来自明河自制的RIA之家主题，大部分的评论的表单都与之类似，是不是觉得有些头晕？

comment_form()出现之后

  1. <?php comment_form(); ?>

一行搞定！这里明河说明下，wordpress3.0的默认模板依旧采用旧的表单生成形式，而wordpress3.0新加入的twentyten已经使用comment_form()来生成评论表单了。
实际上还需要做一些处理，比如评论中按钮和lable是英文，设置中文，还需要comment_form的参数帮忙

comment_form()参数说明

comment_form()有二个参数

  1. <?php comment_form($args, $post_id); ?>
  • $args：comment_form()的输出配置参数，为一个关联数组，配置项非常丰富，将再下一步说明。
  • $post_id：文章id，默认为空，即当前id

comment_form()的$args参数详解

$args的默认配置项如下：

  1. $defaults = array(
  2.         'fields'               => apply_filters( 'comment_form_default_fields', $fields ),
  3.         'comment_field'        => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>',
  4.         'must_log_in'          => '<p class="must-log-in">' .  sprintf( __( 'You must be <a href="%s">logged in</a> to post a comment.' ), wp_login_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
  5.         'logged_in_as'         => '<p class="logged-in-as">' . sprintf( __( 'Logged in as <a href="%1$s">%2$s</a>. <a href="%3$s" title="Log out of this account">Log out?</a>' ), admin_url( 'profile.php' ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
  6.         'comment_notes_before' => '<p class="comment-notes">' . __( 'Your email address will not be published.' ) . ( $req ? $required_text : '' ) . '</p>',
  7.         'comment_notes_after'  => '<p class="form-allowed-tags">' . sprintf( __( 'You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: %s' ), ' <code>' . allowed_tags() . '</code>' ) . '</p>',
  8.         'id_form'              => 'commentform',
  9.         'id_submit'            => 'submit',
  10.         'title_reply'          => __( 'Leave a Reply' ),
  11.         'title_reply_to'       => __( 'Leave a Reply to %s' ),
  12.         'cancel_reply_link'    => __( 'Cancel reply' ),
  13.         'label_submit'         => __( 'Post Comment' ),
  14.     );

配置项很多，明河以评论表单中的英文改中文为例：

  1. $comment_form_args = array('must_log_in'          => '<p class="must-log-in">' .  sprintf( __( '你必须先 <a href="%s">登录</a>才能发表评论。' ), wp_login_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
  2.                            'logged_in_as'         => '<p class="logged-in-as">' . sprintf( __( '<a href="%1$s">%2$s</a>已经登录，要 <a href="%3$s" title="注销用户">注销</a>此用户吗?' ), admin_url( 'profile.php' ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
  3.                            'comment_notes_before' => '<p class="comment-notes">' . __( '你的email不会被公开。' ) . ( $req ? $required_text : '' ) . '</p>',
  4.                            'comment_notes_after'  => '<p class="form-allowed-tags">' . sprintf( __( '你只能使用以下 <abbr title="HyperText Markup Language">HTML</abbr> 标签和属性: %s' ), ' <code>' . allowed_tags() . '</code>' ) . '</p>',
  5.                            'title_reply'          => __( '留下一个回复' ),
  6.                            'title_reply_to'       => __( '给%s的回复' ),
  7.                            'cancel_reply_link'    => __( '取消回复' ),
  8.                            'label_submit'         => __( '提交评论' ));
  9. comment_form($comment_form_args);


可以看到表单已经全部汉化了。但是这样只适用于一个主题，如果我希望所有的主题（有应用该函数）都是汉化的，如何处理呢。请看下一步解说

修改comment_form()的$args默认参数

1、请打开“wp-includes”，再打开“comment-template.php”。
2、找到comment_form函数。
3、找到“$defaults”变量，将其覆盖成：

  1. $defaults = array(
  2.         'fields'               => apply_filters( 'comment_form_default_fields', $fields ),
  3.         'comment_field'        => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>',
  4.         'must_log_in'          => '<p class="must-log-in">' .  sprintf( __( '你必须先 <a href="%s">登录</a>才能发表评论。' ), wp_login_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
  5.         'logged_in_as'         => '<p class="logged-in-as">' . sprintf( __( '<a href="%1$s">%2$s</a>已经登录，要 <a href="%3$s" title="注销用户">注销</a>此用户吗?' ), admin_url( 'profile.php' ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
  6.         'comment_notes_before' => '<p class="comment-notes">' . __( '你的email不会被公开。' ) . ( $req ? $required_text : '' ) . '</p>',
  7.         'comment_notes_after'  => '<p class="form-allowed-tags">' . sprintf( __( '你只能使用以下 <abbr title="HyperText Markup Language">HTML</abbr> 标签和属性: %s' ), ' <code>' . allowed_tags() . '</code>' ) . '</p>',
  8.         'id_form'              => 'commentform',
  9.         'id_submit'            => 'submit',
  10.         'title_reply'          => __( '留下一个回复' ),
  11.         'title_reply_to'       => __( '给%s的回复' ),
  12.         'cancel_reply_link'    => __( '取消回复' ),
  13.         'label_submit'         => __( '提交评论' ),
  14.     );

还有一个地方要修改的，查找“$required_text”，修改此变量如下：

  1. $required_text = sprintf( ' ' . __('带%s号为必填选项'), '<span class="required">*</span>' );

保存，完毕！

明河语：comment_form()远比想象中的强大，下一篇教程将讲解自定义表单字段和该函数的钩子用法。

]]> http://www.36ria.com/3007/feed 20 15个免费的wordpress3.0二栏式主题 http://www.36ria.com/2938 http://www.36ria.com/2938#comments Thu, 19 Aug 2010 01:17:47 +0000 明河共影 http://www.36ria.com/?p=2938 1、Freshblog

非常简洁但不落单调的主题。

2、MobileWorld


用于介绍手机的主题。

3、Simplo


非常简洁大方的主题。

4、Akylas

5、Gadget

6、Magazeen


这个主题明河非常喜欢，推荐下。

7、Side Blog


非常喜欢此主题的侧边栏。

8、Suffusion

9、Orsted Theme


亮点在于图片滚动部分。

10、Polaris Theme

11、Channel


12、Meissa

13、Carbonified


14、Mistique

15、 Graphene

原文：http://www.1stwebdesigner.com/wordpress/free-wordpress-3-0-ready-themes/

]]> http://www.36ria.com/2938/feed 0 wp-share-list—wordpress分享收藏插件（明河作品） http://www.36ria.com/2672 http://www.36ria.com/2672#comments Thu, 01 Jul 2010 13:43:30 +0000 明河共影 http://www.36ria.com/?p=2672 前二周明河曾发了一个系列教程，讲解如何制作wordpress插件，完成的作品就是wp-share-list，也就是RIA之家文章底部的分享收藏列表，可是一直忘记整理出来了，有好几个朋友特意问我文章底部的分享收藏列表插件去哪下载。现在明河就正式发个作品页。

点此下载

这里要感谢灵亦rEd，他是这款插件的第一个使用者，期间不止帮明河做了测试，而且还提了个很好的意见：拖拉排序站点，这个功能明河将在下一个版本加入，同时也要感谢银月帮忙测试。
明河已经将插件上传到wordpress.org，插件有新的更新将同步发出。
插件页面：http://wordpress.org/extend/plugins/wp-share-list/

2010-01-13 v1.6.1.2的更新内容如下：
  • 1.修复升级到1.6.1后不勾选引入jquery库无法初始化插件的问题
2010-01-01 v1.6.1的更新内容如下：
  • 1.修复1.6版几个明显的bug
  • 2.重写了html部分
  • 3.解决部分主题调用失败的问题
  • 4.解决1.6后出现新的样式冲突问题
2010-12-15 v1.6的更新内容如下：
  • 1.增加小图版，小图版的图标大小为25*25
  • 2.优化css样式
  • 3.优化插件管理页面
  • 4.调整了js（js将在日后重构，现在来看这个脚本，写的还是很粗糙的）
2010-11-28 v1.5.5的更新内容如下：
  • 1、紧急修复js存在冲突的问题；
2010-11-26 v1.5.4的更新内容如下：
  • 1、修正插件样式与部分主题依旧存在冲突的问题；
  • 2、修正插件js与主题部分其他插件js冲突而导致报错，无法显示分享列表的问题；
  • 3、修正开心网的标题接口错误的问题；
  • 4、调整了插件的一些细节。
  • 5、修复IE7、IE8下阴影层出现难看的黑色锯齿。
2010-11-05 v1.5.2 更新如下：
  • 1、压缩了插件的js和css文件，加快加载速度
  • 2、修正了插件配置页面的细节问题
  • 3、强制li无内边距，防止出现二行图标问题
2010-11-02 v1.5 更新如下：
  • 1、修正部分主题显示二列的问题
  • 2、修正插件样式和主题样式冲突的问题
  • 3、修正百度收藏网址加到‘分类’的问题
  • 4、增加QQ空间、腾讯微博、搜狐微博、淘江湖四个分享站点
  • 5、增加可以设置是否显示阴影，是否跟随鼠标滚动的功能
  • 6、可重置配置参数
  • 7、调整插件配置页面
2010-08-05 v1.3 更新如下：
  • 修复插件样式与主题样式上存在冲突的问题
2010-07-02 v1.2 更新如下：
  • 修正部分主题调用出错的问题（主要是$这个关键字被主题重写引起，对象找不到的缘故），感谢灵亦rEd的反馈。
  • 修正第一个上移时的bug
2010-07-01 v1.1 更新如下：
  • 修正浮动失效列表成竖状的问题
  • 样式做了微调

wp-share-list的特性：

  • 1、不经过第三方网站的跳转（明河写这个插件的初衷，就是很反感其他插件都带有第三方logo，点击后还要跳转到那网站）
  • 2、ajax加载列表数据，晚加载分享站点图标
  • 3、自由控制分享站点的显示及其排序
  • 4、可控制是否引入jquery库（防止重复加载，毕竟现在很多主题都已经自带jquery了）

使用教程：

1、将wp-share-list文件夹解压到wordpress的插件目录下。

2、进入wordpress后台的插件管理，启动插件。

自定义显示位置：

1、如果你不想插件自动向文章尾部追加分享收藏列表，请将后台的：

勾去掉，保存。

2、在你需要显示分享收藏列表的位置加入如下代码：

  1. <?php if(function_exists('wp_share_list')) wp_share_list() ?>

wp-share-list常见问题回答

Q1.为什么会出现二行图标？

这是最多朋友咨询明河的问题，wp-share-list会出现二行图标的根本原因在于插件的样式与主题的样式冲突引起的。很多朋友是使用

这不是明河提倡的使用方式，因为在文章尾部自动显示，是把插件添加到正文内，会受到主题正文样式，特别是li样式的影响，会出现各种各样的样式冲突问题，比较多的就是二行图标问题（由于主题对li加了padding引起的）。

目前1.5.2已经通过插件样式强制优先级的方式，解决了问题。如果依旧出现二行图标的问题，请使用手动调用的方式。

Q2.如何自定义插件显示位置或如何手动调用？

二个问题，实际上是同一问题。

1、首先先在配置页面取消自动显示；

2、在你要显示分享列表的地方插入以下代码：

  1. <?php if(function_exists('wp_share_list')) wp_share_list() ?>

Q3.更新到1.5后配置页面左侧有QQ空间等新分享站点，但右侧选择区没有出现？

这是由于明河使用ajax获取分享列表，有些浏览器会缓存结果的缘故。
解决方案：清理浏览器换错或重新打开浏览器。

Q4.部分主题不显示分享列表。

这是由于与其他插件的js冲突引起的，1.5.4已经修复这个问题。

Q5.为什么在非白色背景下，分享站点下的阴影，带有难看的白色背景？

这跟IE存在透明bug有关，为了不让IE下阴影呈现难看的黑色锯齿，明河强制给阴影层加了白色背景。目前，用户还无法自定义背景颜色，明河将在1.6追加这个功能。

Q6.为什么1.5.5后启用了插件却没有效果。

1.5.5后插件使用wp_footer()作为钩子，即将插件的代码插入到尾部，而不再是头部，这样可以减少冲突的可能行，同时提高页面加载速度，有很多主题会把wp_footer()函数漏掉，只要在footer.php模板页上，加上这个函数即可。

  1. <?php wp_footer(); ?>

Q7.知更鸟主题（HotNewspro233）下，插件报错，调用失败的问题

这个更新，很大程度上是因为这个问题，这里明河说明，并不是插件的问题，而是知更鸟这个主题引入多个jquery导致的变量覆盖导致的bug。
解决方案是打开知更鸟主题下的header.php，删除如下语句：

  1. <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.min.js" ></script>

插件已经有引入jquery，所以无需重复引入，删除页不会存在问题。

Q8.IE6下存在内存泄露问题

症状是鼠标的手型不断变化闪烁，看到这个问题，明河彻底囧了，调试了一个晚上，无果。一直想重构js脚本，重构结束后将发布个新版本，届时会解决这个问题。

Q9.为什么升级到1.6.1后不勾选“引入插件的jquery1.4.2库”，插件无法加载？为什么与其他插件存在冲突？

请升级到1.6.1.2！这个问题已经修复，详细问题描述，请猛击这里《wp-share-list更新至1.6.1.2》。

]]> http://www.36ria.com/2672/feed 303 实战wordpress3.0的新功能：自定义分类法（入门篇） http://www.36ria.com/2592 http://www.36ria.com/2592#comments Fri, 25 Jun 2010 07:57:19 +0000 明河共影 http://www.36ria.com/?p=2592 wordpress3.0正式版推出已经有一段时间了，wordpress3.0功能上相对于2.9变化不会特别大，但仍有五个重要的更新，关于wordpress3.0的新特性的介绍，想必wordpress3.0的粉丝都已经看到了，不清楚的点此，关于wordpress3.0的更新，明河就不再累述，相对于其他新特性，明河觉得自定义分类法才是wordpress3.0的最大更新，接下来明河将以一个实际例子讲解这个新特性。
明河将通过wordpress3.0的自定义分类法创建豆瓣读书中书籍信息：

实际效果：

（ps：《光年》这本书不错，推荐下O(∩_∩)O哈！样式下有出路，莫怪。）

一、什么是自定义分类法

在wordpress3.0前wordpress只有二种分类法：类别分类法（支持层级结构）和标签分类法。如下图：


但在实际应用中是不够用的，比如我希望把wordpress打造成一个书籍推荐的博客，我希望自定义几个专用于书籍的分类，比如页数、作者、出版社、出版日期等。也许有童鞋会问，直接写在文章正文不就好，直接写在正文的确可以显示，但非常不利于查询，比如我要获取春树这个作者下的所有书籍或获取2010年后出版的书籍，那就很难处理了，而自定义分类法恰恰可以解决这个问题。

二、注册自定义分类函数

跟wordpress2.9的缩略图功能一样，自定义分类函数默认是不启动的，需要你手动启动。
1、打开你主题下function.php
（如果没有就要自己手动建个）
2、注册新的自定义分类法
在function.php加入如下代码：

  1. /**注册新的自定义分类*/
  2. register_taxonomy('Author', 'post',  array('hierarchical' => false, 'label' => '作者','query_var' =>  true, 'rewrite' => true));

这里添加一个新的自定义分类：作者
3、register_taxonomy函数详解

  1. register_taxonomy( 'internal_name', 'object_type', array( 'hierarchical' => {true|false}, 'label' => 'Human Readable Name', 'query_var' => {true|false}, 'rewrite' => {true|false} ) );

register_taxonomy将自动注册个新的分类法，参数说明：

  • internal_name ：接口名（唯一，自定义，英文）
  • object_type ： 在哪种内容模型下显示，post文章，page页面
  • 第三个参数为数组，是对自定义分类的详细配置，参数如下：
  • hierarchical ：是否允许分级，（true类似文章类别，false类似文章标签）
  • label ：分类法的本地名
  • query_var ： 如果设置为‘true’，那么选择该分类法后，我们可以要求WordPress为我们选择相关的文章
  • rewrite ： 如果设置为‘true’，在浏览一个页面时，WordPress将会使用友好的URL地址

4、效果
刷新后台，你就会在左侧菜单发现一个“作者”选项,如下图：

点击添加新文章，你就会在右侧发现个新的分类，如下图：

与之类似我们还需要注册多个书籍的分类，代码如下：

  1. register_taxonomy('ISBN', 'post',  array('hierarchical' => false, 'label' => 'ISBN','query_var' =>  true, 'rewrite' => true));
  2. register_taxonomy('Page', 'post',  array('hierarchical' => false, 'label' => '页数','query_var' =>  true, 'rewrite' => true));
  3. register_taxonomy('Price', 'post',  array('hierarchical' => false, 'label' => '定价','query_var' =>  true, 'rewrite' => true));
  4. register_taxonomy('Publish', 'post',  array('hierarchical' => false, 'label' => '出版社','query_var' =>  true, 'rewrite' => true));
  5. register_taxonomy('Mount', 'post',  array('hierarchical' => false, 'label' => '装帧','query_var' =>  true, 'rewrite' => true));
  6. register_taxonomy('Date', 'post',  array('hierarchical' => false, 'label' => '出版时间','query_var' =>  true, 'rewrite' => true));

三、在文章页面予以显示

打开single.php,添加类似如下代码：

  1. <div class="clearfix">
  2.     <div class="l">
  3.         <?php 
  4.         if(has_post_thumbnail()) {
  5.             the_post_thumbnail();
  6.         } else {
  7.             echo '<img src="'.get_bloginfo("template_url").'/images/no-has-thumbnail.png" />';
  8.         }
  9.         ?>                                           
  10.     </div>
  11.     <ul class="l">
  12.             <li><?php echo get_the_term_list($post->ID,  'Author', '<span>作者：</span>', ', ', ''); ?></li> 
  13.             <li><?php echo get_the_term_list($post->ID,  'ISBN', '<span>ISBN：</span>', ', ', ''); ?></li>
  14.             <li><?php echo get_the_term_list($post->ID,  'Page', '<span>页数：</span>', ', ', ''); ?></li>                                                   <li><?php echo get_the_term_list($post->ID,  'Price', '<span>定价：</span>', ', ', ''); ?></li>                                                   <li><?php echo get_the_term_list($post->ID,  'Publish', '<span>出版社：</span>', ', ', ''); ?></li>                                               <li><?php echo get_the_term_list($post->ID,  'Mount', '<span>装帧：</span>', ', ', ''); ?></li>
  15.             <li><?php echo get_the_term_list($post->ID,  'Date', '<span>出版时间：</span>', ', ', ''); ?></li>                                                                                     
  16.     </ul>
  17. </div>

get_the_term_list函数说明
get_the_term_list将枚举指定分类法下所有的值,第一个参数为文章id，第二个参数为分类法的接口名，第三个为前缀。
浏览页面的就会看到类似的效果：

入门篇到此结束，还有部分内容没讲解到：比如如何获取指定分类的文章，如何实现文章星级评价，明河将在日后讲解。

]]> http://www.36ria.com/2592/feed 14 制作wordpress收藏分享插件（完结篇） http://www.36ria.com/2556 http://www.36ria.com/2556#comments Mon, 21 Jun 2010 03:15:15 +0000 明河共影 http://www.36ria.com/?p=2556

这一期教程将是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的插件机制有个大概的理解，明河就算没白写这个系列的文章。

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

]]> http://www.36ria.com/2556/feed 16 制作wordpress收藏分享插件（wordpress插件开发教程三） http://www.36ria.com/2518 http://www.36ria.com/2518#comments Sat, 19 Jun 2010 03:37:09 +0000 明河共影 http://www.36ria.com/?p=2518 上一期教程，明河讲解了如何构建插件的主文件，主文件是入口，真正干活的是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收藏&分享插件（明河作品）

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

]]> http://www.36ria.com/2518/feed 5 制作wordpress收藏分享插件（wordpress插件开发教程二） http://www.36ria.com/2498 http://www.36ria.com/2498#comments Fri, 18 Jun 2010 02:36:43 +0000 明河共影 http://www.36ria.com/?p=2498 上一期主要是讲解制作wordpress收藏分享插件的准备工作，今天这一篇的教程将讲解，如何构建wordpress插件的主文件，也就是wp-share-list.php。（wp-share-list这款插件请到第一篇文章内下载。）

wp-share-list.php

书写插件描述

插件描述需要遵循wordpress插件开发规范，大致的结构如下：

  1. /*
  2. Plugin Name: wp-share-list
  3. Plugin URI: http://www.36ria.com/2217
  4. Description: 在文章末尾生成一个文章分享站点列表
  5. Version: 1.0
  6. Author: 明河共影
  7. Author URI: http://www.36ria.com/
  8. */

很通俗易懂，明河就不解释了，保存后，你点击wordpress后台的插件，这时候就会发现这个新的插件，如下图：

启动这个插件。

ShareList.php

打开示例wp-share-list的主文件后，大家可以发现，代码很少，不像很多插件大部分的代码都集中在主文件，明河将插件所有的操作都封装成了一个类，放在include/ShareList.php。为什么要使用类，而不采用传统的函数式的编程呢？
原因有三：

  • 类可以起到命名空间的作用，防止插件的函数名与其他插件冲突。
  • 简化函数命名，很多插件为了防止冲突，给函数加个个长前缀，出现wp_XX_XX_XX等过长的形式。
  • 让代码更加的简洁易懂，使主文件不再臃肿。

基本的类结构如下：

  1. if ( ! class_exists ( " ShareList" )) {
  2. class ShareList{
  3. function ShareList() { 
  4. }
  5. }
  6. } 
  7. ?>

这个类我们先留空，等下一期教程再深入探讨。

实例化这个类

  1. include("include/ShareList.php");
  2. //实例化类
  3. if(class_exists("ShareList")){
  4.     $SL = new ShareList();
  5. }

现在来介绍wordpress插件中很重要基础知识.

Actions

什么是Action？
有用过ROR或者php框架CI的朋友会更容易理解，其实Action可以理解为钩子，即wordpress提供的接口，利用这些接口，我们可以在wordpress运行特定php方法时，触发自定义的方法。
举个例子：
我们需要向头部添加新的css和js，代码如下：

  1. add_action("wp_head",array (&$SL, 'addHeader' ));

add_action()这个方法有四个参数分别是钩子名、自定义函数名、优先级（可选）、其他参数（可选）
这里解释下，为什么自定义函数名为array (&$SL, ‘addHeader’ )。
$SL这个变量是ShareList的实例，这里我们要调用ShareList中的addHeader这个方法，如果直接写add_action(“wp_head”,”$this->addHeader”);明显是错误的，所以我们需要获取这个实例的引用，跟函数名组成数组让add_action自行拼接处理。
如何移除Action？
remove_action(‘action_hook’,'action_function’)

主文件的全部Action

  1. if(isset($SL)){
  2.     add_action("wp_head",array (&$SL, 'addHeader' ));
  3.     add_action('the_content', array (&$SL, 'addContent' ));
  4.     add_action ('wp-share-list/wp-share-list.php ' , array (&$SL , 'init' )) ;
  5.     add_action('admin_menu','add_share_list_options_page');
  6. }

有四个Action，明河解释下它们分别的作用：

  • 向模板头部添加插件需要的css和js
  • 向the_content，即生成文章正文后，添加js调用，生成分享列表
  • 初始化配置参数
  • 向wordpress后台添加管理页面

来看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. }

留意add_options_page这个方法，这个函数会向后台添加插件配置项，有四个参数插件名、菜单项名、优先级、文件名、自定义生成页面函数。

这一期教程到此结束，有什么问题，可以给明河留言，下一期教程将深入讲解ShareList这个类。

]]> http://www.36ria.com/2498/feed 9 制作wordpress收藏分享插件（wordpress插件开发教程一） http://www.36ria.com/2491 http://www.36ria.com/2491#comments Thu, 17 Jun 2010 15:03:10 +0000 明河共影 http://www.36ria.com/?p=2491 明河在上周写使用actionscript3.0构建一个异步加载图片的画廊的时候曾预告过这周将发个系列教程讲解如何制作wordpress插件，由于端午假期，到今天才开正式开篇。

这周明河将详解制作wordpress收藏分享插件的全过程，插件应用后的效果如下图：

就是RIA之家文章底部的收藏分享列表。

之前明河就写了这款分项列表的jquery插件版：shareList — jquery收藏&分享插件（明河作品），juliad童鞋建议我将其写成wordpress插件，于是这个wordpress收藏分享插件就这么诞生了，我将这个插件命名为：wp-share-list。（这里还要感谢银月帮忙测试）

点此下载
(V1.1修正浮动无效导致列表变成纵向的问题)
如果不采用自动生成列表，请在你的主题内需要显示分享列表的位置加上：

  1. <?php if(function_exists('wp_share_list')) wp_share_list();?>

准备篇

wordpress的插件实际上不难，只要你有耐心去了解其插件机制，以及自己写个demo，即可大致了解其制作思路。

一、制作wordpress插件应该具备的知识

  1. 熟悉php，了解php面向对象的编程方式（教程中会构建个类）
  2. 熟悉wordpress，了解wordpress插件机制

前几天明河有发出了一本非常好的讲解wordpress插件制作教程的书：插件开发全攻略，有兴趣看接下来明河实战教程的朋友最好先看下这本书，基本上明河沿袭的是教程中的制作方法。

二、工具和环境

  1. Dreamweaver
  2. php运行环境和已经安装的wordpress
  3. Firefox和Firebug

三、了解shareList — jquery收藏&分享插件

wp-share-list实际上就是对shareList参数的配置，点此进入shareList — jquery收藏&分享插件介绍页面。

四、这款插件对shareList 的定制项

我们需要明确制作这款插件需要解决什么问题。
wp-share-list的管理页面如下图：

  • 1、控制分享站点的显示，以及可以更改分享站点的显示顺序。
  • 2、是否引入jquery1.42（现在很多主题都有jquery，防止对此引入）
  • 3、空间分享列表容器的宽度
  • 4、选择自动显示还是自己在主题内部引用

五、创建插件目录

1、在你的wordpress程序目录下找到wp-content/plugins，进入后创建个新的文件夹，文件夹名为：wp-share-list。
2、在该文件夹下创建个wp-share-list.php
wp-share-list.php将是插件的主文件，非常的重要。
3、新建个include文件夹，这个文件夹下的文件为插件所要用到的类。
4、将shareList这个jquery插件的文件夹复制到插件目录下。

至此准备工作结束，下期将进入真正的实战部分。

]]> http://www.36ria.com/2491/feed 43 wordpress插件开发教程电子书 http://www.36ria.com/2460 http://www.36ria.com/2460#comments Fri, 11 Jun 2010 09:39:51 +0000 明河共影 http://www.36ria.com/?p=2460 下周明河将发个系列教程讲解如何开发一个wordpress插件，在教程发布前，先发本讲解wordpress插件开发教程的电子书，书名：《插件开发全攻略》

相当不错的一本书，，明河制作的wordpress插件，思路上将沿用这本书作者的思路，所以很有必要先放出这本书。

 

 

点此下载

目录如下：

1. How to Write a WordPress Plugin – Introduction [1]
2. 介绍 [2]
3. Seven Reasons to Write a WordPress Plugin [3]
4. 编写插件的七个理由 [4]
5. How to Get Ideas for WordPress Plugins [5]
6. 怎样获得 WordPress 插件的创意 [6]
7. Structure of a WordPress Plugin [7]
8. WordPress 插件的结构 [8]
9. WordPress Plugin Actions [9]
10. WordPress 插件 Actions [10]
11. WordPress Plugin Filters [11]
12. WordPress 插件 Filter [12]
13. Constructing a WordPress Plugin Admin Panel [13]
14. 构造一个 WordPress 插件管理员面板 [14]
15. Constructing a WordPress Plugin User ’ s Panel [15]
16. 构建一个 WordPress 插件用户面板 [16]
17. WordPress Plugins and Database Interaction [17]
18. WordPress 插件和数据库交互 [18]
19. Using JavaScript and CSS with your WordPress Plugin [19]
20. 在你的 WordPress 插件中使用 Javascript 和 CSS [20]
21. Using AJAX with your WordPress Plugin [21]
22. 在你的 WP 插件中使用 AJAX [22]
23. Releasing and Promoting Your WordPress Plugin [23]
24. 发布并推广你的 WordPress 插件 [24]

之前有朋友建议我把收藏分享的jquery插件改造成worspress插件，于是明河就写了一个收藏分享的wordpress插件，而系列教程也是以此为例。发张插件截图：

]]> http://www.36ria.com/2460/feed 9 推荐十个精美的wordpress模板 http://www.36ria.com/2111 http://www.36ria.com/2111#comments Sat, 22 May 2010 04:21:16 +0000 明河共影 http://www.36ria.com/?p=2111 今天在浏览http://themeforest.net/时发现了很多非常不错的网站，当然里面的模板都是需要money，虽然无法将上面的资源弄down下来，但里面很多模板的设计值得借鉴，这里推荐十个精美的wordpress付费模板。

1、SPINR

看过之前我写的《推荐5个jquery/flash幻灯片》的朋友应该觉得中间幻灯片效果非常眼熟，没错，幻灯片采用就是Coin Slider。

这个模板还有个看点：图片翻转，关于使用js来实现图片翻转，明河将在如后介绍。
推荐指数：

2、Mygen

杂志型wordpress博客，亮点在于红色的大胆运用。

推荐指数：

3、The Jewelry Shop

商务性wordpress博客模板，亮点华丽花边背景的应用。
推荐指数：

4、MiniBuzz

非常简洁的wordpress博客模板，亮点在于宽大的幻灯片部分。
推荐指数：

5、Creative Juice WP

非常简洁的wordpress博客模板，亮点在于艳粉和黑色的配色方案。
推荐指数：

6、Dark Nature

简洁但不平凡的wordpress模板，亮点在于半透明效果应用。
推荐指数：

7、Handcraft 7 in 1


推荐指数：

8、Revoltz


推荐指数：

9、Blitz


推荐指数：

10、Glamorous Universal WordPress Template

非常漂亮wordpress模板，非常漂亮的配色方案
推荐指数：

]]> http://www.36ria.com/2111/feed 6 WordPress使用Google自定义搜索引擎来实现站内搜索 http://www.36ria.com/1965 http://www.36ria.com/1965#comments Wed, 12 May 2010 05:40:57 +0000 明河共影 http://www.36ria.com/?p=1965 很多朋友向明河反应，RIA之家少了个搜索功能，非常不方便，明河将在新版中加入搜索。

WordPress的站内搜索引擎，性能相当一般，其实可以利用Google提供的自定义搜索引擎，来实现站内搜索，当然，我们同时也希望搜索结果直接显示在页博客内。

如何实现wordpress和Google自定义搜索引擎的无缝集成呢？

1、自定义一个Google搜索引擎

进入：http://www.google.com/cse/

如果没出现如上界面，请先登录google账号。

2、填写自定义搜索引擎信息

标准版的搜索结果页会显示google的广告哦，这是美中不足的地方，但速度和准确度还是有保证的。

网址上务必填写上正确的博客路径。

填写成功就会出现如下界面：

3、获取代码

进入“控制面板”,点击左侧的“获取代码”（这时候的搜索样式是采用默认的，而样式是可以自定义的）

4、自定义外观

选择“搜索元素”。

非常人性化，你可以自定义大部分的样式，赞一个。

然后再获取代码。

以下是明河对其自定义后的效果：

当然最常用的情况是在头部自定义搜索表单表单，点击搜索之后跳转到一个自定义的搜索结果页面，该页面读取url后的关键字参数，然后显示搜索结果，接着看。

5、在首页创建一个搜索表单

  1. </p>
  2. <form method="get" action="http://localhost/wordpress/site-search/">
  3. <div class="l input">
  4. <input type="text" value="" name="q" id="q" /><br /><br />
  5. <input type="hidden" value="UTF-8" name="ie"/></div>
  6. <div class="l"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/header/search-input-r.jpg" /></div>
  7. <div class="l">
  8. <input type="submit" id="searchsubmit" class="icon" value="搜 索" /></div>
  9. </p>
  10. </form>
  11. <p>

使用“get”方法，表单结构自定义，只要可以正确提交到搜索结果页面即可。搜索结果页面的创建请看下文

 6、创建一个搜索结果页面

这里需要用到wordpress的自定义页面的功能。

在你的主题下新创建一个site-search.php

  1. </p>
  2. <p><?php</p>
  3. <p>/*</p>
  4. <p>Template Name: site-search</p>
  5. <p>*/</p>
  6. <p>?></p>
  7. <p>

新建个页面

选择site-search模板

这是该页面的链接，也是搜索框提交后的处理页面。

7、读取关键字，并显示搜索结果

在site-search.php页面模板上加入google代码：

  1. </p>
  2. <div id="cse" style="width:100%;"></div>
  3. <p><script src="http://www.google.com/jsapi" type="text/javascript"></script>
  4.  
  5. <script type="text/javascript">
  6.   google.load('search', '1', {language : 'zh-CN'});
  7.   google.setOnLoadCallback(function(){
  8.     var customSearchControl = new google.search.CustomSearchControl('015918306757214125490:q3jdq9kuhmm');
  9.     customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
  10.     var options = new google.search.DrawOptions();
  11.     options.setSearchFormRoot('cse-search-form');
  12.     customSearchControl.draw('cse', options);
  13.     var match = location.search.match(/q=([^&#038;]*)(&#038;|$)/);
  14.     if(match &#038;& match[1]){
  15.         var search = decodeURIComponent(match[1]);           
  16.  
  17.         customSearchControl.execute(search);
  18.     }
  19.   }, true);
  20. </script></p>
  21. <p>

嘿嘿，使用css将广告iframe隐藏掉,大功告成！

效果详见新版的RIA之家搜索功能。

]]> http://www.36ria.com/1965/feed 9 玩转wordpress2.9缩略图功能 http://www.36ria.com/1942 http://www.36ria.com/1942#comments Mon, 10 May 2010 05:56:07 +0000 明河共影 http://www.36ria.com/?p=1942 在wordpress2.9之前想要在首页或列表页调用出文章的缩略图是件相当麻烦的一件事，RIA之家使用的是调用文章的第一张图片，这种方式最简单，但灵活性很差，你无法控制缩略图的尺寸，更无法自定义缩略图。还有一种方式是使用自定义区域的方法，大部分的wordpress缩略图插件都采用这种方式。

wordpress2.9后，开始自带缩略图功能！只是很多朋友不懂如何使用该功能，明河正好这月要改版RIA之家，打算使用wordpress2.9自带的缩略图功能，这里分享下其调用方法。

1、开启缩略图功能

最为关键的一步，默认的wordpress并没有开启缩略图功能，需要手动添加到functions.php中。

打开你所正在使用的主题中的functions.php，添加如下代码：

  1. add_theme_support('post-thumbnails');

这时候你新建个新文章，在右侧就会发现多出了一个缩略图功能界面，如下图：

2、上传缩略图

点击“设置缩略图”，出现添加新图片的界面，这个大家很熟悉了，不得不发句牢骚，wordpress插入图片功能固然强大，但加载实在太慢了。

3、设置缩略图尺寸

点击左侧菜单的“设置”—“媒体”，出现如下界面：

4、在主题模板中调用缩略图

把下面的代码添加到你主题需要显示缩略图的位置：

  1. &lt;?php  the_post_thumbnail(); ?&gt;

5、没有缩略图，显示自定义的缺省图片

并不是所有的文章都存在缩略图，为了保持布局的一致性，给缩略图加个判断，修改后的代码：
在wordpress2.9之前想要在首页或列表页调用出文章的缩略图是件相当麻烦的一件事，RIA之家使用的是调用文章的第一张图片，这种方式最简单，但灵活性很差，你无法控制缩略图的尺寸，更无法自定义缩略图。还有一种方式是使用自定义区域的方法，大部分的wordpress缩略图插件都采用这种方式。

wordpress2.9后，开始自带缩略图功能！只是很多朋友不懂如何使用该功能，明河正好这月要改版RIA之家，打算使用wordpress2.9自带的缩略图功能，这里分享下其调用方法。

1、开启缩略图功能

最为关键的一步，默认的wordpress并没有开启缩略图功能，需要手动添加到functions.php中。

打开你所正在使用的主题中的functions.php，添加如下代码：

  1. add_theme_support('post-thumbnails');

这时候你新建个新文章，在右侧就会发现多出了一个缩略图功能界面，如下图：

2、上传缩略图

点击“设置缩略图”，出现添加新图片的界面，这个大家很熟悉了，不得不发句牢骚，wordpress插入图片功能固然强大，但加载实在太慢了。

3、设置缩略图尺寸

点击左侧菜单的“设置”—“媒体”，出现如下界面：

4、在主题模板中调用缩略图

把下面的代码添加到你主题需要显示缩略图的位置：

  1. <?php 
  2.                                                 if(has_post_thumbnail()) {
  3.                                                     the_post_thumbnail();
  4.                                                 } else {
  5.                                                     echo '<img src="'.get_bloginfo("template_url").'/images/no-has-thumbnail.png" />';
  6.                                                 }
  7.                                                 ?>
当然缺省图片路径请自行定义。

6、控制缩略图输出尺寸

打开你所正在使用的主题中的functions.php，在add_theme_support(‘post-thumbnails’);下加上如下代码：

  1. set_post_thumbnail_size( 50, 50, true );
]]> http://www.36ria.com/1942/feed 3 5个颇为实用的wordpress插件 http://www.36ria.com/1933 http://www.36ria.com/1933#comments Fri, 07 May 2010 01:26:13 +0000 明河共影 http://www.36ria.com/?p=1933 1、Vote it up

这是个模拟奇客的用户投票插件。

2、NextGEN Gallery

非常朴实的一个图片画廊wordpress插件，没什么花销的地方，但该有的功能都有了。

3、Top 10

这个插件很好理解，就是生成最受欢迎的文章列表。

4、TDO Mini Forms

顾名思义，这是个wordpress表单插件，你可以在你的page中插件这样的人性化表单，用于用户自助投稿，联系博主等。

5、Filosofo Home Page Control

这个插件就有点意思，你可以通过这个插件来自定义首页。

原文：http://www.queness.com/post/3235/8-incredible-wordpress-plugins

]]> http://www.36ria.com/1933/feed 1 WP-RecentComments — 最好的获取wordpress最新评论列表插件 http://www.36ria.com/1735 http://www.36ria.com/1735#comments Mon, 29 Mar 2010 09:26:40 +0000 明河共影 http://www.36ria.com/?p=1735

WP-RecentComments算是最好的获取wordpress最新评论列表插件了，非常多人用（需要用到jquery库，后台配置下jquery库路径即可）。

使用WP-RecentComments，你可以限制显示评论的数量, 设置评论摘要的最大长度, 过滤反链接评论. 你还可以显示或屏蔽评论者头像, 调整头像的尺寸和位置等, 你可以通过点击分页按钮来查看新旧评论，使用ajax方式，使用过程非常流畅。

点此下载

按正常的方式将插件上传到wordpress的插件目录，并启用插件。

后台配置选项就一个jquery库路径配置（希望日后版本可以出现更多的配置选项，而不是在函数里面传参）。

在你的模板页面上，加入如下代码：

  1. <?php wp_recentcomments(); ?>

关于更详细的配置参数，请看：http://www.neoease.com/wp-recentcomments/

我把我博客样式贴出来：

  1. .rc_item{}
  2. .rc_item .rc_left img{border:1px solid #CCC;}
  3. .rc_item .rc_info .post_title a{color:#999;}
  4. .rc_item .rc_info .post_title .author_name{color:#333 !important;}
]]> http://www.36ria.com/1735/feed 0 关于wordpress侧边栏并排显示的使用 http://www.36ria.com/1239 http://www.36ria.com/1239#comments Fri, 08 Jan 2010 09:24:27 +0000 xp1987101 http://www.36ria.cn/?p=1239 像通常看到的有的wp博客侧边栏上并排显示的2个widget，实现的原理也很简单。

首先需要在你的主题里面的sidebar.php页面写好相应的div+css。

我的写法就是先写一个大的div，用来包含这2个并排显示的widget，同时写好css。

  1. <div class="merge">   //这个是大的div
  2. <div id="leftsidebar">   //显示在左边widget的div
  3. <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('left_sidebar') ) : ?>   //这表示如果不启用默认的Widget的话，会在下面显示sidebar中自定义的widget，我们写的并排widget就是默认显示的,默认显示的是分类，当然如果你在后台自己设置并排的widget也是可以的。
  4. <!-- categories -->  //这里我让他左边显示的是分类的widget
  5. <div class="widget widget_category">   //这个是wp默认的widget的class名称，或者也可以写成别的，以便自己到时候修改css
  6. <ul>
  7. <?php wp_list_cats('sort_column=name&optioncount=0&depth=1'); ?>   //这是wp分类的函数，里面的参数代表的不同的含义，具体可以去wp官网上查看
  8. </ul>
  9. </div>
  10. </div>
  11. <div id="rightsidebar">
  12. <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('right_sidebar') ) : ?>  //和上面是相同的道理，这里我们默认让他显示为Archive的widget
  13. <div class="widget widget_archive">
  14. <ul>
  15. <?php wp_get_archives('type=monthly'); ?>
  16. </ul>
  17. </div>
  18. </div>
  19. </div>

sidebar.php页面就写完了，下面让我们看看functions.php的写法

既然是widget，那么就要用widget来操作了。

在functions.php里面注册2个sidebar，分别用来显示并排的widget

  1. if( function_exists('register_sidebar') ) {
  2. register_sidebar(array(                                                          //注册sidebar
  3. 'name' => 'left_sidebar',                                                          //名称
  4. 'before_widget' => '<div id="%1$s">',                              //文本之前的标签
  5. 'after_widget' => '</div>',                                                     //之后的标签
  6. 'before_title' => '<h3>',                                                          //标题的标签
  7. 'after_title' => '</h3>'                                                            //之后的标签
  8. ));
  9. register_sidebar(array(
  10. 'name' => 'right_sidebar',
  11. 'before_widget' => '<div id="%1$s">',                            //和上面的同理
  12. 'after_widget' => '</div>'
  13. 'before_title' => '<h3>',
  14. 'after_title' => '</h3>'
  15. ));
  16. }

这样当你选择了widget以后，会看见右边多出2个sidebar，分别是用来控制左右2边显示哪个widget的。

如果不选择，就会显示前面我们默认填写的widget！

如果有不对的地方，请及时指出，以便修改！

]]> http://www.36ria.com/1239/feed 3 YARPP-强大的wordpress相关日志插件 http://www.36ria.com/1213 http://www.36ria.com/1213#comments Tue, 05 Jan 2010 05:02:00 +0000 明河共影 http://www.36ria.cn/?p=1213 演示：请看RIA之家文章页面中的相关日志

Yet Another Related Posts Plugin（YARPP）是个非常强悍的wordpress相关日志插件。

作者博客：http://mitcho.com/code/yarpp/

最新版本：3.0

点此下载

特性：

  • 强大的后台配置，你可以指定不显示特定分类的日志
  • 带有一个简易的模板系统（作者博客上提供其他样式的相关日志模板）
  • 可以在rss中加入相关日志
  • 已经经过汉化，后台全中文
  • 相当准确的关联算法

使用教程：

第一步、先将Yet Another Related Posts Plugin上传至wp-content/plugins/

第二步、点击后台左侧菜单的“关联文章（YARPP）”，配置插件

由于是全中文的，这里不再累述。有不明白的可以给我留言

]]> http://www.36ria.com/1213/feed 2 博客升级到 WordPress 2.9 中文版 http://www.36ria.com/1189 http://www.36ria.com/1189#comments Fri, 01 Jan 2010 03:39:35 +0000 明河共影 http://www.36ria.cn/?p=1189 博客被停8天后，严重影响到网站在搜索引擎上的排名，那个苦闷。趁这个机会，今天下定决定将博客升级到2.9。

不知道是啥原因，自动升级无法使用。只要采用手动升级的方式。

wordpress的升级还是非常方便的，风险很小，虽然如此，前期的准备工作还是要做的。

第一步：备份数据库

可以使用phpmyadmin或其他数据库工具，备份下数据库。

第二步：备份wp-config.php

第三步：禁用所有插件

第四步：上传所有新版本的文件

第五步：上传备份的wp-config.php

第六步：运行/wp-admin/upgrade.php，升级下数据库。

大功告成！

]]> http://www.36ria.com/1189/feed 5 [转]wordpress日期时间参数详解 http://www.36ria.com/685 http://www.36ria.com/685#comments Tue, 10 Nov 2009 06:32:03 +0000 明河共影 http://www.36ria.cn/?p=685  

WordPress的全部时间参数及显示效果：

1.a代表小写的英语的上下午，如am、pm；

2.A代表大写的英语的上下午，如AM、PM；

3.d代表英语的日期（小于10仍为两位数写法），如05、12；

4.D代表中文的星期，如五、七；

5.F代表中文的月份（包括“月”这个字），如5月、12月；

6.g代表英语的小时12小时制（小于10为一位数写法），如5、12；

7.G代表英语的小时24小时制（小于10为一位数写法），如5、12；

8.h代表英语的小时，12 小时格式，有前导零，01到12；

9.H代表英语的小时，24 小时格式，有前导零，00到23；

10.i有前导零的分钟数，00到59；

11.s秒数，有前导零，00到59；

12.j代表英语的日期（小于10为一位数写法），如08-02-09；

13.l代表中文的星期（包括“星期”这两个字），如星期五、星期七；

14.m代表英语的月份（小于10仍为两位数写法），如05、12；

15.M代表英语的月份（以单词的形式显示），如Jun；

16.n代表英语的月份（小于10为一位数写法），如5、12；

17.O代表英语的时区，如+0800；

18.r代表完整的日期时间，如Tue, 06 Jun 2006 18:37:11 +0800；

19.S代表日期的序数后缀，如st、th；

20.T代表英语的时区（以单词的形式显示），如CST；

21.w代表英语的星期，如5、7；

22.W代表周数，如23；

23.y代表两位数年份，如07、08；

24.Y代表四位数年份，如2007、2008；

25.z代表天数，如156。

]]> http://www.36ria.com/685/feed 5 玩转wordpress评论头像 http://www.36ria.com/346 http://www.36ria.com/346#comments Tue, 25 Aug 2009 03:54:03 +0000 明河共影 http://www.36ria.cn/?p=346 开启wordpress评论头像功能

进入后台点击设置，找到“设置”子选项下“讨论”这一项，把“默认头像”打开。其实现在的wordpress头像默认是打开的，所以可以忽略这步骤

新增wordpress评论头像

默认的wordpress头像还是非常单调的，接下来我们试着新增头像。

这里要用到一个网站了：Gravatar，这个网站专门用于头像制作、头像处理、头像外链。

到该网站注册一个号码，需要真实的邮箱哦，网站要验证。

注册完后就可以上传头像了，界面如图。

addemail

如果上传成功的话，就可以看到如下界面。这时候查看里面的图片属性，就可以得到一个外链的地址了，复制到你要用的地方即可。但在wordpress里面还不算完，还差个调用步骤。

snap2

调用与修改wordpress默认头像

打开你模板里的comments.php文件，找到

  1. <?php echo get_avatar( $comment, 60 ); ?>

替换为：

  1. <?php echo get_avatar( $comment, 60 ,$default='http://xxx.xxx.xxx/xxx.png'); ?>

‘http://xxx.xxx.xxx/xxx.png’这个修改为你默认头像的地址 ，60是头像的大小。

]]> http://www.36ria.com/346/feed 2 wordpress图片插件-Lightbox http://www.36ria.com/168 http://www.36ria.com/168#comments Thu, 18 Jun 2009 04:03:45 +0000 明河共影 http://www.39ajax.cn/?p=168 点此下载

简介：Lightbox plus 允许用户在不离开往前网页的情况下，查看完整图片，同时也支持幻灯效果和显示的图片的标题。

 

 

将插件上传到wordpress插件文件夹。启用该插件，就可以在设置里面看到其插件设置。

 

在新建文章时候，给图片加个链接：

比如下面这种形式：

  1. <a title="my caption" rel="lightbox" href="images/image-1.jpg">image #1</a>

如果想组成画廊：

  1. <a rel="lightbox[roadtrip]" href="images/image-1.jpg">image #1</a>
  2. <a rel="lightbox[roadtrip]" href="images/image-2.jpg">image #2</a>
  3. <a rel="lightbox[roadtrip]" href="images/image-3.jpg">image #3</a>
]]> http://www.36ria.com/168/feed 3