Logo

WordPress 创建自定义小工具

photo

2024年04月19日

之前介绍了如何让 WordPress 主题支持小工具的方法,默认的情况,只有不几个小工具,而且在国内这些小工具好多都不太常用。

如果你想给你的主题添加一个自定义小工具,或者你要开发一个添加小工具的插件,那就需要查看本文了。

 

创建小工具

创建一个小工具,需要使用 register_widget() 函数挂载一个继承于 WP_Widget 类的类,下边是一个简单的例子,创建了一个随机文章小工具。

注意,register_widget() 函数需要在 widgets_init 钩子上调用。

class widget_tags extends WP_Widget{
 
    //添加小工具
    function __construct(){
        $this->WP_Widget( 'random_posts', __( '随机文章', 'Bing' ), array( 'description' => __( '显示几篇随机文章', 'Bing' ) ) );
    }
 
    //小工具内容
    function widget( $args, $instance ){
 
        //导入当前侧边栏设置
        extract( $args, EXTR_SKIP );
 
        //输出小工具前代码
        echo $before_widget;
 
            //输出小工具标题
            echo $before_title . '随机文章' . $after_title;
 
            //随机文章
            query_posts( 'orderby=rand&showposts=10' );
            if( have_posts() ):
                echo '<ul>';
                    while( have_posts() ):
                        the_post();
                        printf( '<li><a href="%s" title="%s">%s</a></li>', get_permalink(), get_the_title(), get_the_title() );
                    endwhile;
                echo '</ul>';
            endif;
 
        //输出小工具后代码
        echo $after_widget;
    }
 
}
function Bing_add_widget_tags(){
    register_widget( 'widget_tags' );
}
add_action( 'widgets_init', 'Bing_add_widget_tags' );

这样,后台就会出现了一个随机文章小工具,拖动到侧边栏上,会在前台显示十篇随机文章。

小工具设置

但我们会发现这个小工具并没有设置选项,那如何给这个小工具添加设置选项呢?设置选项涉及类的两个函数,update()(更新小工具设置时的处理函数)和 form()(设置表单)。

下边的代码添加了一个标题设置和显示文章数量的设置:

class widget_tags extends WP_Widget{
 
    //添加小工具
    function __construct(){
        $this->WP_Widget( 'random_posts', __( '随机文章', 'Bing' ), array( 'description' => __( '显示几篇随机文章', 'Bing' ) ) );
    }
 
    //小工具内容
    function widget( $args, $instance ){
 
        //导入当前侧边栏设置
        extract( $args, EXTR_SKIP );
 
        //输出小工具前代码
        echo $before_widget;
 
            //输出小工具标题
            echo $before_title . '随机文章' . $after_title;
 
            //随机文章
            query_posts( 'orderby=rand&showposts=10' );
            if( have_posts() ):
                echo '<ul>';
                    while( have_posts() ):
                        the_post();
                        printf( '<li><a href="%s" title="%s">%s</a></li>', get_permalink(), get_the_title(), get_the_title() );
                    endwhile;
                echo '</ul>';
            endif;
 
        //输出小工具后代码
        echo $after_widget;
    }
 
    //更新选项
    function update( $instance, $old_instance ){
        $instance['title'] = strip_tags( $instance['title'] );
        $instance['number'] = (int) strip_tags( $instance['number'] );
        return $instance;
    }
 
    //选项表单
    function form( $instance ){
 
        //添加默认设置
        $instance = wp_parse_args( $instance, array(
            'title' => __( '随机文章', 'Bing' ),
            'number' => 10
        ) );
 
        //设置表单
?>
        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( '标题', 'Bing' ); ?>:</label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $instance['title']; ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id( 'number' ); ?>"><?php _e( '文章数量', 'Bing' ); ?>:</label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="number" value="<?php echo $instance['number']; ?>" />
        </p>
<?php
    }
 
}
function Bing_add_widget_tags(){
    register_widget( 'widget_tags' );
}
add_action( 'widgets_init', 'Bing_add_widget_tags' );

这样再展开小工具,就能看到设置了:

然后,在生成小工具内容的时候使用选项,就能达到用户自定义的效果。

class widget_tags extends WP_Widget{
 
    //添加小工具
    function __construct(){
        $this->WP_Widget( 'random_posts', __( '随机文章', 'Bing' ), array( 'description' => __( '显示几篇随机文章', 'Bing' ) ) );
    }
 
    //小工具内容
    function widget( $args, $instance ){
 
        //导入当前侧边栏设置
        extract( $args, EXTR_SKIP );
 
        //添加小工具标题过滤器
        $title = apply_filters( 'widget_name', $instance['title'] );
 
        //输出小工具前代码
        echo $before_widget;
 
            //输出小工具标题
            echo $before_title . $title . $after_title;
 
            //随机文章
            query_posts( 'orderby=rand&showposts=' . $instance['number'] );
            if( have_posts() ):
                echo '<ul>';
                    while( have_posts() ):
                        the_post();
                        printf( '<li><a href="%s" title="%s">%s</a></li>', get_permalink(), get_the_title(), get_the_title() );
                    endwhile;
                echo '</ul>';
            endif;
 
        //输出小工具后代码
        echo $after_widget;
    }
 
    //更新选项
    function update( $instance, $old_instance ){
        $instance['title'] = strip_tags( $instance['title'] );
        $instance['number'] = (int) strip_tags( $instance['number'] );
        return $instance;
    }
 
    //选项表单
    function form( $instance ){
 
        //添加默认设置
        $instance = wp_parse_args( $instance, array(
            'title' => __( '随机文章', 'Bing' ),
            'number' => 10
        ) );
 
        //设置表单
?>
        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( '标题', 'Bing' ); ?>:</label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $instance['title']; ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id( 'number' ); ?>"><?php _e( '文章数量', 'Bing' ); ?>:</label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="number" value="<?php echo $instance['number']; ?>" />
        </p>
<?php
    }
 
}
function Bing_add_widget_tags(){
    register_widget( 'widget_tags' );
}
add_action( 'widgets_init', 'Bing_add_widget_tags' );

 

橙子主题打折出售

其实我不卖,主要是这里是放广告的,所以就放了一个
毕竟主题都没做完,卖了也是坑.

购买它
所有附件
本文为原创文章,请注意保留出处!
1-2 wordpress 模板文件 2024年04月19日

模板文件在整个WordPress主题中使用,但首先让我们了解一下术语。一、模板术语使用Wo...1-2wordpress模板文件

热门文章

西游记之大圣归来 《西游记之大圣归来》是根据中国传统神话故事《西游记》进行拓展和演绎的3D动画电影。由横店影视、天空之城、燕城十月与微影时代作为出品方,高路动画、恭梓兄弟、世纪长龙、山东影视、东台龙行盛世、淮安西游产业与永康壹禾作为联合出品方出品,田晓鹏执导,张磊、林子杰、刘九容和童自荣等联袂配音。影片讲述了已于五行山下寂寞沉潜五百年的孙悟空被儿时的唐僧——俗名江流儿的小和尚误打误撞地解除了封印,在相互陪伴的冒险之旅中找回初心,完成自我救赎的故事。 作者:Pastore Antonio
1511 浏览量
ffmpeg+srs 实现直播流 这篇文章是我在做直播流的时候收集的所有素材,没有太多的整理,都放到了脑袋里面了,之后有时间了再整理成...ffmpeg+srs实现直播流 作者:Pastore Antonio
1424 浏览量
[ Office 365 开发系列 ] 身份认证 前言本文完全原创,转载请说明出处,希望对大家有用。通常我们在开发一个应用时,需要考虑用户身份认证...[Office365开发系列]身份认证 作者:Pastore Antonio
1411 浏览量
WordPress 后台编辑器样式实现直接预览 在WordPress3.0以后,有一个新的实用功能:你可以更改默认后台编辑器(TinyMCE)的样...WordPress后台编辑器样式实现直接预览 作者:Pastore Antonio
1396 浏览量
使用Office Online Server在线预览Office 微软官方文档介绍⒈介绍  OfficeOnlineServer是OfficeWebA...使用OfficeOnlineServer在线预览Office 作者:Pastore Antonio
1378 浏览量