wordpress 添加自定义小工具的通用简便方法!

wordpress 添加自定义小工具的通用简便方法!言归正传,今天,我简单的说一下如何在WordPress后台自定义一个小工具。

正文

先来了解一下最基础的代码结构,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class My_Widget extends WP_Widget { //继承了 WP_Widget 这个类来创建新的小工具(Widget)
	function My_Widget() {
		// 主要内容方法
	}
 
	function form($instance) {
		 // 给小工具(widget) 添加表单内容
	}
 
	function update($new_instance, $old_instance) {
		 // 进行更新保存
	}
 
	function widget($args, $instance) {
		// 输出显示在页面上
	}
 
}
register_widget('My_Widget');

一般的话,使用这种结构来创建的话,还是比较通用的。里面也有相关的注释。下面我用上面的代码结构写一个简单的demo案例来加深一下对它的理解。

比如,在主题目录下新建一个widgets目录,这里一般存放多个不同的小工具,然后我们再新建一个文件,比如:test.php

打开test.php,复制以下代码进去:

<?php
 
class My_Widget extends WP_Widget {
 
	function My_Widget()
	{
	     $widget_ops = array('description' => '海宝的一个简单小测试','classname' => 'widget_test');
	     // $control_ops = array('width' => 400, 'height' => 300);
	     parent::WP_Widget(false,$name='海宝测试小工具',$widget_ops);  
 
             //parent::直接使用父类中的方法
             //$name 这个小工具的名称,
             //$widget_ops 可以给小工具进行描述等等。
             //$control_ops 可以对小工具进行简单的样式定义等等。一般没有特殊要求的话,不需要设置。
	}
 
	function form($instance) { // 给小工具(widget) 添加表单内容
            $title = esc_attr($instance['title']);
            $content = esc_attr($instance['content']);
	?>
	<p><label for="<?php echo $this->get_field_id('title'); ?>"><?php esc_attr_e('Title:'); ?> <input class="widget_ipt" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /></label></p>
	<p><label for="<?php echo $this->get_field_id('content'); ?>">描述: <input class="widget_ipt" id="<?php echo $this->get_field_id('content'); ?>" name="<?php echo $this->get_field_name('content'); ?>" type="text" value="<?php echo $content; ?>" /></label></p>
	<?php
    }
	function update($new_instance, $old_instance) { // 更新保存
	    return $new_instance;
	}
	function widget($args, $instance) { // 输出显示在前台页面上
	    extract( $args );
            // 标题
            $title = apply_filters('widget_title', empty($instance['title']) ? __('如果没有填写,我就默认显示啦') : $instance['title']);
            // 描述
            $content = apply_filters('widget_title', empty($instance['content']) ? __('如果没有填写,我就默认显示啦') : $instance['content']);
            getContent($title, $content);
    }
}
register_widget('My_Widget');
 
// 自定义DOM结构,可以按照你主题的风格来自定义编写
function getContent($title, $content) {
    echo '<section class="aside-tags">
            <h3>'.$title.'</h3>	
            <ul>'.$content.'</ul>
    </section>';
}
?>

此时你打开后台 -> 外观 -> 小工具,看一下,咦怎么没有啊,海宝你是不是忽悠我啊!!

?哈哈,别慌嘛,我们还没有引入这个小工具文件呢,当然没有加载到啦。

那怎么引入呢?

functions.php中加入下列代码:

1
2
include_once get_stylesheet_directory() . '/widgets/test.php';
// 注意:get_stylesheet_directory是我主题中自定义的函数,并不是通用的,得根据你自己主题的来,一般来讲是:get_bloginfo('template_directory')

这步加了之后再看下后台呢,小工具页是不是有如下图这个小工具了:

wordpress 添加自定义小工具的通用简便方法!

点击或拖动这个小工具,到右侧定义的边栏中,输入值保存,如下图:

wordpress 添加自定义小工具的通用简便方法!

前台显示如下图:

wordpress 添加自定义小工具的通用简便方法!

Ok,案例说完了,你学会了吗?

写在最后

好了,本文到此结束!

如果还有什么疑问或者建议,欢迎多多交流,原创文章,文笔有限,文中若有不正之处,万望告知。

本文由[十字会:irober.com]发布,未经允许不得转载:免费的文献资料库 » wordpress 添加自定义小工具的通用简便方法!
微信公众号:十字会
关注我们,随时搜索,随时学习
12000人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

关注:小左家,你想要的这里都可以有!

点击关注

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏