WordPress 創建自定義小工具

之前介紹瞭如何讓 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' );