wordpress自定义侧边栏小工具widget

wordpress提供了主题小工具支持(后台——外观——小工具),可以实现自由拖动功能模板到侧边栏,实现相关的调用显示。wordpress默认提供了若干个小工具,但大部分不能满足博主的建站需求,因此对小工具自定义扩展非常有必要。以下通过转载添加分类文章列表小工具的教程详细了解如何自定义侧边栏小工具。

wordpress自定义侧边栏小工具widget

概念性的东西:wordpress提供了一个WP_Widget类,我们只需要扩展WP_Widget类,就可以制作自己的小工具(widget),此类文件位于 wp-includes\widgets.php

下面老季给出一个完整的调用分类文章模块的widget工具完整代码:

<?php
/**
* 功能:调用某分类下的文章列表
* 调用:在主题functions.php文件里引入本文件
**/
/** 
 * Add function to widgets_init that'll load our widget. 
 * @since 0.1 
 */
add_action('widgets_init', 'load_relation_widgets');
/** 
 * Register our widget. 
 * 'Example_Widget' is the widget class used below. 
 * 
 * @since 0.1 
 */
function load_relation_widgets()
{
    register_widget('jtag_post_widget');
}


class jtag_post_widget extends WP_Widget
{
    public function jtag_post_widget()
    {
        $widget_ops  = array(
            'classname'                   => 'widget_custom_html',
            'description'                 => __( '关联标签分类文章调用.' ),
            'customize_selective_refresh' => true,
            'show_instance_in_rest'       => true,
        );
        $this->__construct('jtag_post_widget', $name = '关联标签分类文章调用', $widget_ops);
    }

    //小工具的选项设置表单
    public function form($instance)
    {
        $instance = wp_parse_args((array)$instance, array('title' => '分类文章', 'showPosts' => 10, 'cat' => 0)); //默认值
        $title = htmlspecialchars($instance['title']);
        $showPosts = htmlspecialchars($instance['showPosts']);
        $cat = htmlspecialchars($instance['cat']);
        echo '<p style="text-align:left;"><label for="' . $this->get_field_name('title') . '">标题:<input style="width:200px;" id="' . $this->get_field_id('title') . '" name="' . $this->get_field_name('title') . '" type="text" value="' . $title . '" /></label></p>';
        echo '<p style="text-align:left;"><label for="' . $this->get_field_name('showPosts') . '">文章数量:<input style="width:200px;" id="' . $this->get_field_id('showPosts') . '" name="' . $this->get_field_name('showPosts') . '" type="text" value="' . $showPosts . '" /></label></p>';
        echo '<p style="text-align:left;"><label for="' . $this->get_field_name('cat') . '">分类ID(多个分类ID,可用逗号分割):<input style="width:200px" id="' . $this->get_field_id('cat') . '" name="' . $this->get_field_name('cat') . '" type="text" value="' . $cat . '" /></label></p>';
    }

    public function update($new_instance, $old_instance)
    {
        $instance = $old_instance;
        $instance['title'] = strip_tags(stripslashes($new_instance['title']));
        $instance['showPosts'] = strip_tags(stripslashes($new_instance['showPosts']));
        $instance['cat'] = strip_tags(stripslashes($new_instance['cat']));
        return $instance;
    }

    public function the_rand_posts($args = '')
    {
        $default = array('showPosts' => 10, 'cat' => '1');
        $r = wp_parse_args($args, $default);
        extract($r);
        $args = array(
            'cat'   =>  $cat,
            'showposts' =>  $showPosts,
            'orderby'   =>  'desc',
        );
        $the_query = new WP_Query($args);
        if ($the_query->have_posts()) {
            echo '<ul>';
            while ($the_query->have_posts()) {
                $the_query->the_post();
                echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
            }
            echo '</ul>';
        }
        // Restore original Post Data
        wp_reset_postdata();
    }

    //小工具在前台显示效果
    public function widget($args, $instance)
    {
        extract($args);
        $title = apply_filters('widget_title', empty($instance['title']) ? __('分类文章<i>Title</i>') : $instance['title']);
        $showPosts = empty($instance['showPosts']) ? 10 : $instance['showPosts'];
        $cat = empty($instance['cat']) ? 0 : $instance['cat'];
        echo $before_widget;
        if ($title) echo $before_title . $title . $after_title;
        $this->the_rand_posts("showPosts=$showPosts&cat='$cat'");
        echo $after_widget;
    }
}
链接到文章: https://ixvps.com/47493.html

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注