为WordPress添加自定义小工具(widget)

2011年07月23日13:14:46 53 43,965

很多主题设计者都喜欢添加固定的侧边功能模块替换Wordpress默认小工具(widget)功能,但上下排列位置是固定的,重新排序需要修改模版文件,对新手来说有一定难度,如果能像Wordpress默认小工具一样,可通过拖拽移动位置是不是会很方便,这篇文章就教大家实现这一功能。

其实强大的Wordpress早已为我们提供了这方面的接口(API),很多国外主题已集成该功能,只是国内主题中很少见到,实现这一功能要用到:

  1. wp_register_sidebar_widget()  

 

通过上面函数可以向Wordpress小工具(widget)页面注册添加自定义小工具项目。

一、首先将主题固定的模块函数提取出来,放到单独的模版文件中。

比如将下面这两段“热门文章及分类目录”代码,分别粘贴到新建的两个:hot.php和categories.php文件模版中,

热门文章代码:

  1. <?php $popular = new WP_Query('orderby=comment_count&posts_per_page=10'); ?>   
  2. <?php while ($popular->have_posts()) : $popular->the_post(); ?>   
  3. <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>   
  4. <?php endwhile; ?>  

文章分类代码:

  1. <ul><?php wp_list_cats("sort_column=name&hierarchical=0&exclude="); ?></ul>  

二、打开主题的functions.php,添加:

  1. if( function_exists( 'register_sidebar_widget' ) ) {   
  2.     register_sidebar_widget('热门文章','mb_hot');   
  3.     register_sidebar_widget('文章分类','mb_categories');   
  4. }  

及:

  1. function mb_mb_hot() { include(TEMPLATEPATH . '/mb_hot.php'); }   
  2. function mb_categories() { include(TEMPLATEPATH . '/categories.php'); }  

之后,打开Wordpress小工具页面,会多出两个小工具“热门文章和文章分类”,与默认小工具一样可任意拖拽到侧边widget中,加上相应的样式基本就大功造成了。

另外还可以替换和隐藏默认的小工具,可以下面参考官网Codex

即将升级的HotNews Pro 主题已将大部分侧边固定功能模块,移到Wordpress小工具(widget)面板中,方便用户灵活安排侧边模块位置。

相关参考:

Function Reference/register sidebar widget

Widgets API

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:53   其中:访客  44   博主  4   引用   5

    • 网赚理想 2

      哈哈,我来抢个沙发!看来鸟哥的下一版主题是不是要引入该功能?期待新主题。。。

      • Boss方 4

        鸟哥的博客一天一个样。。

        • 小艾 0

          请问博主,你主题首页上部的图片幻灯片效果是集成在2.5pro版里面么?为什么我在主题设置里面找不到哦~

          • 轩辕轼轲 4

            鸟哥,腾讯微博的APP列表里面公布了一个Wp的插件,很不错。你看看,如果能集成到你的主题里面就完美了。http://fairyfish.net/2010/12/20/qq-connect/
            上面是那个插件的地址。

            • 玉满斋 4

              期待新版本的发布呀!支持一下!

              • 数据恢复培训 4

                很繁忙啊

                • 气动攻丝机 0

                  学习下,谢谢博主分享

                  • 刘印博客 3

                    这个东西好。

                    • 一蓑烟雨 3

                      期待鸟哥的的主题。。升级版本。。。鸟哥。。辛苦了。。。

                      • 青岛策划 1

                        恩,版本不错

                        • 天津网站建设 1

                          真的不错啊,路过看看

                          • ★Extreme★ 4

                            谢谢你了,这个对我非常有用啊!

                            • 自在 1

                              学习了~

                              • 熊猫大侠 5

                                请问怎么去掉小工具的标题栏? 就像2.6的热门标签一样?

                                • 我爱面试 1

                                  鸟哥,我按你的方法试了,没成功啊,后台小工具没显示我要添加的!

                                  • 我爱面试 1

                                    鸟哥啊,我刚才认真了看了下,发现代码错了,function mb_mb_hot() { include(TEMPLATEPATH . ‘/mb_hot.php’); }
                                    function mb_categories() { include(TEMPLATEPATH . ‘/categories.php’); }
                                    这段代码,多了mb,改了过来还是不行,新建的PHP文件老提示出错,不知道哪出问题

                                    • 蓝星天宇 2

                                      学习了,收藏一下!

                                      • prestan 0

                                        下面的两行代码有问题,mb那个字母写了两遍,,

                                        • qintag 1

                                          register_sidebar_widget函数已经放弃了,官方建议使用wp_register_sidebar_widget,鸟哥能不能将代码更新了,以便我等使用。

                                            • Tanky Woo 1

                                              @qintag 我记的官方是不提倡以wp_开头的吧

                                              • Tanky Woo 1

                                                @qintag sorry,看错了,我记的看了官方其他的位置写过不赞成用wp_开头的,不过在register_sidebar_widget的文档里已经写了:Deprecated: 2.8.0 Use wp_register_sidebar_widget()

                                              • 鳳梨果凍 1

                                                学习了,谢谢~~~~很好用的说~~~~为边栏widgets的问题发愁好久了…
                                                但是有一个问题,我添加的小工具[比如说我添加了饭否],就只写了饭否挂件的代码,于是后台的自定义小工具无法设置标题~~~就是在首页显示时没有标题,是光秃秃的…有什么办法解决么? 谢谢了….

                                                  • 知更鸟 Admin

                                                    @鳳梨果凍 我作的主题未抵制任何其它功能,也从未准备兼容其它任何挂件
                                                    自己折腾吧

                                                      • 鳳梨果凍 1

                                                        @知更鸟 不是啦,我是个人博客,用的是另外的人做的主题,><只是用了你的方法添加了自定义小工具,成功了,可以不能设置标题,比如"近期文章"这样的在首页显示的… 可是我又不知道用什么代码可以设置标题..
                                                        谢谢了TAT…我慢慢学习吧~~

                                                          • 知更鸟 Admin

                                                            @鳳梨果凍 参考我写的主题widget目录中的模板文件写法
                                                            加上个类似

                                                            <h3>年度排行</h3>  
                                                            就会有标题了

                                                              • 鳳梨果凍 1

                                                                @知更鸟 可以了,谢谢^ ^

                                                        • ikobe 1

                                                          刚用鸟哥的主题,今天就进来学习了,值得鼓励吧!

                                                          • MR.HUA博客 0

                                                            你好,请问贵站可以做广告吗?

                                                            • Tanky Woo 1

                                                              wp_register_sidebar_widget
                                                              和使用WP_Widget的API有什么不同吗?

                                                              • 小莫骚麦 0

                                                                请问要把这个涵数写在哪呢

                                                                • w4rd3n 0

                                                                  我很奇怪,这代码是你写的吗?你是看不懂代码还是故意要写错呢?你丫下次别发所谓的技术文章了,揪心

                                                                  • 鱼竿 0

                                                                    这样可以吗?

                                                                    • 童佳倩 3

                                                                      非常感谢,测试成功,不过只成功一个categories.php,其它的如何自定义都不成功,后来发现把categories.php的名称改了(functions里面也作相应的更改),也不行,,,,,,

                                                                      • 广州营销Bar 0

                                                                        鸟哥,在右侧栏添加小工具,如百度分享,但我不知道怎么给这个插件添加标题,尝试用文本小工具,把标题写上,和加入百度分享的代码,还是存在错位。。如何解决下鸟哥。谢谢

                                                                        • 斌果 1

                                                                          自定义的小工具只能用一次,但博主的主题可以用无数次,是怎么实现的呢?

                                                                            • 知更鸟 Admin

                                                                              @斌果 参考此文:
                                                                              http://zmingcx.com/another-way-to-add-customizable-gadget-method.html

                                                                                • 斌果 1

                                                                                  @知更鸟 哦,那怎么给小工具添加设置选项呢?

                                                                                    • 知更鸟 Admin

                                                                                      @斌果 那篇文章后面有相关教程链接

                                                                                • 欧美小清新头像 3

                                                                                  不知道有那种小工具,是三合一的不?
                                                                                  很想知道下呢。自己又是代码白痴。揪心了。

                                                                                  • sunny 1

                                                                                    include(TEMPLATEPATH . ‘/mb_hot.php’); } 多了个mb_吧!

                                                                                    • 爱分享 0

                                                                                      • 超級efly 3

                                                                                        前來支持一下~挺不錯的!

                                                                                        • 明亮 1

                                                                                          这个小工具不能重复使用呢?

                                                                                          • zhennvxing 0

                                                                                            感谢分享!终于找到你了!http://www.so-woman.cn/

                                                                                            • 筛宝 2

                                                                                              不错。收了。管用。

                                                                                              • iMboya 0

                                                                                                使用代码添加小工具之后,热门文章的小工具显示在侧边栏时,评论是混乱的,所有文章显示的都是某一篇文章的评论内容。
                                                                                                但如果只显示分类目录这个小工具时,就没有问题。鸟哥这是怎么回事呢?

                                                                                                • 123 0

                                                                                                  我想知道你文章底下的打赏按钮怎么弄

                                                                                                • 来自外部的引用: 5

                                                                                                  • 另一个添加可定制小工具的方法 | 知更鸟
                                                                                                  • 另一个添加可定制小工具的方法 | 沂蒙山商贸网
                                                                                                  • 不用插件添加随机文章小工具 | 微服私访
                                                                                                  • 为WordPress添加自定义小工具(widget) – 涢岸风吟
                                                                                                  • 为WordPress添加自定义小工具 | 刘召考的博客