+ 收藏我们

网站模板

网站模板搜索
404模板 营销型模板 外贸网站模板 单页模板 双语模板 标签大全
电话:18630701785
首页 > wordpress > WordPress主题开发教程 14_自定义小工具 >

WordPress主题开发教程 14_自定义小工具

时间:2024-08-11 11:39:19

大家好!又到 WordPress 主题开发教程的时间了!

 

开发一个 WordPress 主题,需要掌握的知识点,虽然难度不大,但是多且杂。能坚持到现在的朋友,相信已经对如何开发 WordPress 主题,有了一定的心得。希望我们能一起完成这个 WordPress 主题及教程。

 

咱们闲言少叙,书归正传。上回我们了解了 WordPress 主题中的小工具。使用系统自带的小工具,相信对于各位已不在话下。这一次要搞定的是如何自定义小工具。

 

 

上图中的 【酱茄-标签云】、【酱茄-热门文章】、【酱茄-猜你喜欢】就是自定义小工具。

 

从何说起呢?咱们先上代码:

 

add_action('widgets_init', 'the_first_widget_rand_list');
function the_first_widget_rand_list()
{
    register_widget('The_First_Widget_RandList');
}
class The_First_Widget_RandList extends WP_Widget
{
    function __construct()
{
        parent::__construct('the_first-widget-rand-list', 'TheFirst-猜你喜欢', ['description' => '随机文章']);
    }
    
    function widget($args, $instance)
{
        extract($args, EXTR_SKIP);
        
        //输出小工具前代码
        echo $before_widget;

        //输出小工具标题
        echo $before_title . '随机文章' . $after_title;

        // 输出随机文章列表
        // TODO:这里是前台显示的小工具的内容
        
        //输出小工具后代码
        echo $after_widget;
    }
    
    /**
     * 输出小工具设置表单
     *
     * @param array $instance 现有设置值
     */
    function form($instance)
    {
        // 输出小工具设置表单
        // TODO:这里是小工具的设置表单,可以让用户自定义小工具的显示内容
    }
    
    /**
     * 保存小工具设置
     *
     * @param array $new_instance 新设置值
     * @param array $old_instance 旧设置值
     * @return array 处理后的新设置值
     */
    function update($new_instance, $old_instance)
    {
        // TODO:处理小工具设置的参数,比如屏蔽某些值
        return $new_instance;
    }
}

 

上面的代码,可以看作是一个注册 WordPress 自定义小工具的模板。

 

1. 继承 WP_Widget 类,在类中完成小工具的细节

 

2. 在 widgets_init 钩子中,使用函数 register_widget 注册刚才的自定义小工具类

 

我们把上面的代码添加到 functions.php 中,就可以在小工具中看到:

 

 

把 【TheFirst-猜你喜欢】拖拽到 全站边栏中:

 

 

然后,在网页首页就可以看到

有问题可以加入网站技术QQ群一起交流学习

本站会员学习、解决问题QQ群(691961965)

客服微信号:lpf010888

pbootcms教程

织梦教程

站长学院

SEO

wordpress

竞价教程

信息流

Title