目录
首页 笔记 详情

为WordPress添加自定义小工具(widget),扩展小工具功能


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

<?php
//搜索
add_action('widgets_init', 'widgetsearchInit');

function widgetsearchInit()
{
    register_widget('widgetSearch');
}

class widgetSearch extends WP_Widget
{

    /**
     * widgetProfile setup
     */
    function widgetSearch()
    {
        $widget_ops = array('classname' => 'widget-search', 'description' => '显示自定义的搜索框');
        // init widgetProfile
        parent::__construct('widget-search', "搜索框", $widget_ops);
    }

    /**
     * How to display the widgetProfile on the screen.
     */
    function widget($args, $instance)
    {
        extract($args);
        /* Our variables from the widget settings. */
        $title = apply_filters('widget_name', $instance['title']);
        echo $before_widget;
        echo $this->showWidget($title, $before_title, $after_title);
        echo $after_widget;
    }

    /**
     * Update the widget settings.
     */
    function update($new_instance, $old_instance)
    {
        $instance = $old_instance;
        /* Strip tags for title and name to remove HTML (important for text inputs). */
        $instance['title'] = strip_tags($new_instance['title']);
        return $instance;
    }

    /**
     * Displays the widget settings controls on the widget panel.
     * Make use of the get_field_id() and get_field_name() function
     * when creating your form elements. This handles the confusing stuff.
     */
    function form($instance)
    {
        /* Set up some default widget settings. */
        $defaults = array(
            'title' => '搜索',
        );
        $instance = wp_parse_args((array) $instance, $defaults); ?>
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>">标题</label>
            <input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" />
        </p>
    <?php
    }

    function showWidget($title, $before_title, $after_title)
    {
    ?>
        <?php echo $before_title . $title . $after_title;  ?>
        <div class="search_form">
            <form method="get" id="searchform" action="<?php echo home_url('/'); ?>">
                <input name="s" id="s" required="" class="form-control" placeholder="请输入搜索的关键字" type="text">
                <button type="submit" title="Subscribe" class="btn icon_search" name="submit" value="Submit">
                    <i class="ion-ios-search-strong"></i>
                </button>
            </form>
        </div>
    <?php }
}


 

# 注册侧边栏
# --------------------------------------------------------------------
if (function_exists('register_sidebar')){
	register_sidebar( array(
		'name'          => '文章布局侧边栏',
		'id'            => 'sidebar-article',
		'description'   => '显示在文章布局侧边栏',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h5 class="widget_title">',
		'after_title'   => '</h5>',
    ) );
    register_sidebar( array(
		'name'          => '首页布局',
		'id'            => 'index-post',
		'description'   => '显示在首页布局',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h5 class="widget_title">',
		'after_title'   => '</h5>',
    ) );
    register_sidebar( array(
		'name'          => '通用底部',
		'id'            => 'index-foot',
		'description'   => '显示在页脚',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h5 class="widget_title">',
		'after_title'   => '</h5>',
	) );
}

 

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

wp_register_sidebar_widget()

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

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

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

热门文章代码:

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

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

if( function_exists( 'register_sidebar_widget' ) ) {   
    register_sidebar_widget('热门文章','mb_hot');   
}  
function mb_mb_hot() { include(TEMPLATEPATH . '/mb_hot.php'); }   
wp_register_sidebar_widget(
    'wpdocs_widget_1',      // wpdocs unique widget id
    'Wpdocs Widget',        // widget name
    'wpdocs_widget_display',    // callback function
    array(              // options
        'description' => 'Description of what the widget does'
    )
);
 
/**
 * Display the wpdocs widget
 */
function wpdocs_widget_display($args) {
   echo $args['before_widget'];
   echo $args['before_title'] . 'The Wpdocs Widget' .  $args['after_title'];
   echo $args['after_widget'];
   // Print some HTML for the widget to display here.
   echo __( 'Wpdocs Widget Test', 'textdomain' );
}
wp_register_sidebar_widget( int|string $id, string $name, callable $output_callback, array $options = array(), mixed $params )

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

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

相关参考:

Function Reference/register sidebar widget

Widgets API


写笔记

咨询

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