欢迎光临
我们一直在努力
当前位置：IDC资讯中心 > 网络编程 > 正文

WordPress 插件开发教程 Part 4 – 与WordPress整合

2019-01-22 分类：网络编程 阅读(791) 评论(0)
建站超值云服务器，限时71元/月

本文目录
[隐藏]

  • 1添加菜单和子菜单
    • 1.1创建顶级菜单
    • 1.2添加子菜单
    • 1.3向已经存在的菜单中添加一个菜单项
  • 2使用小工具 ( widgets )
    • 2.1
      • 2.1.1创建小工具
    • 2.2高级小工具
    • 2.3创建控制板小工具( Dashboard Widgets )
    • 2.4创建一个带配置选项的控制板小工具
  • 3元数据框 ( meta boxes )
    • 3.1添加一个自定义元数据框
    • 3.2保存元数据框的数据
    • 3.3元数据框 — 提高
  • 4保持一致性
    • 4.1使用 WordPress UI
    • 4.2headings
    • 4.3图标 Icons
    • 4.4消息
    • 4.5按钮
    • 4.6超链接
    • 4.7表单项
    • 4.8表格
    • 4.9分页
  • 5总结

本文是《WordPress 插件开发教程》系列教程的第 4 部分，该系列共包含以下 4 个部分：

  1. WordPress 插件开发教程 Part 1 – WordPress 插件简介
  2. WordPress 插件开发教程 Part 2 – WordPress 插件基础
  3. WordPress 插件开发教程 Part 3 – 钩子( Hooks )
  4. WordPress 插件开发教程 Part 4 – 与WordPress整合

本节内容

  • 创建菜单和子菜单
  • 创建小工具( widgets )和控制板小工具( dashboard widgets )
  • 为内容定义meta内容框
  • 设计并装饰插件

在开发插件的时候与 WordPress 整合是一个关键步骤。WordPress 提供多种不同的方法来整合插件，包括添加顶级菜单和子菜单项，创建小工具和控制板小工具，以及为你的内容页面添加meta内容框

本节你会学到如果正确的在 WordPress 的各种不同地方整合插件。也会学到插件可用到的合适的设计和装饰方法，来为用户提供一致的用户界面体验。

添加菜单和子菜单

你创建的插件都需要一些菜单项，通常链接到插件的选项配置页面。WordPress 提供创建两种菜单的方法：顶级菜单或者子菜单。

创建顶级菜单

第一种菜单是直接添加到 WordPress 管理页面菜单列表中的顶级菜单。例如，Settings( 设置 ) 是一个顶级菜单。顶级菜单是有多个选项页面的插件常用的。要注册一个顶级菜单，使用 add_menu_page() 函数。

1
2
3

<?php
	add_menu_page( page_title, menu_title, capability, menu_slug, function, icon_url, position );
?>

<?php add_menu_page( page_title, menu_title, capability, menu_slug, function, icon_url, position ); ?>

add_menu_page() 所接受的参数：

  • page_title – 页面的 title, 和显示在 <title> 标签里的一样
  • menu_title – 在控制面板中显示的名称
  • capability – 要浏览菜单所要的最低权限
  • menu_slug – 要引用该菜单的别名; 必须是唯一的
  • function – 要显示菜单对应的页面内容所调用的函数
  • icon_url – 菜单的 icon 图片的 URL
  • position – 出现在菜单列表中的次序

下面演示创建菜单的过程。使用 admin_menu 动作钩子来触发菜单代码。不管是顶级菜单还是子菜单，这个钩子都适用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php
    add_action( 'admin_menu', 'boj_menuexample_create_menu' );
        function boj_menuexample_create_menu() {
            // 创建顶级菜单
                add_menu_page( 
                'My Plugin Settings Page', 
                'Menu Example Settings', 
                'manage_options', 
                __FILE__, 
                'boj_menuexample_settings_page',
                plugins_url( '/images/wp-icon.png', __FILE )
        );
    }
?>

<?php add_action( ‘admin_menu’, ‘boj_menuexample_create_menu’ ); function boj_menuexample_create_menu() { // 创建顶级菜单 add_menu_page( ‘My Plugin Settings Page’, ‘Menu Example Settings’, ‘manage_options’, __FILE__, ‘boj_menuexample_settings_page’, plugins_url( ‘/images/wp-icon.png’, __FILE ) ); } ?>

admin_menu 动作钩子调用了自定义的 boj_menuexample_create_menu() 函数。接着调用 add_menu_page() 函数把自定义的菜单注册到 WordPress。菜单的名字为 Menu Example Settings, 需要 manage_options 权限( 也就是管理员 )才能访问。并设置了位于插件下面 /images 目录中的 icon。

添加子菜单

现在已经有了顶级菜单，可以为顶级菜单添加子菜单项了。要注册一个子菜单，使用 add_submenu_page() 函数。

1
2
3

<?php
    add_submenu_page( parent_slug, page_title, menu_title, capability, menu_slug, function );
?>

<?php add_submenu_page( parent_slug, page_title, menu_title, capability, menu_slug, function ); ?>

与上面的 add_menu_page() 函数类似。要注意的是:

parent_slug – 父级菜单的别名( 前面提到的 menu_slgu )。接着上面的例子继续注册子菜单：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<?php
    add_action( 'admin_menu', 'boj_menuexample_create_menu' );
 
    function boj_menuexample_create_menu() {
        // 创建顶级菜单
        add_menu_page( 
            'My Plugin Settings Page', 
            'Menu Example Settings', 
            'manage_options', 
            __FILE__, 
            'boj_menuexample_settings_page',
            plugins_url( '/images/wp-icon.png', __FILE )
        );
 
        // 创建子菜单
        add_submenu_page( 
            __FILE__, 
            'About My Plugin', 
            'About', 
            'manage_options',
            __FILE__.'_about',
            boj_menuexample_about_page
        );
        add_submenu_page( 
            __FILE__, 
            'Help with My Plugin', 
            'Help', 
            'manage_options',
            __FILE__.'_help',
            boj_menuexample_help_page
        );
        add_submenu_page( 
            __FILE__, 
            'Uninstall My Plugin', 
            'Uninstall', 
            'manage_options',
            __FILE__.'_uninstall',
            boj_menuexample_uninstall_page
        );
    }
?>

<?php add_action( ‘admin_menu’, ‘boj_menuexample_create_menu’ ); function boj_menuexample_create_menu() { // 创建顶级菜单 add_menu_page( ‘My Plugin Settings Page’, ‘Menu Example Settings’, ‘manage_options’, __FILE__, ‘boj_menuexample_settings_page’, plugins_url( ‘/images/wp-icon.png’, __FILE ) ); // 创建子菜单 add_submenu_page( __FILE__, ‘About My Plugin’, ‘About’, ‘manage_options’, __FILE__.’_about’, boj_menuexample_about_page ); add_submenu_page( __FILE__, ‘Help with My Plugin’, ‘Help’, ‘manage_options’, __FILE__.’_help’, boj_menuexample_help_page ); add_submenu_page( __FILE__, ‘Uninstall My Plugin’, ‘Uninstall’, ‘manage_options’, __FILE__.’_uninstall’, boj_menuexample_uninstall_page ); } ?>

上面的代码在主菜单下创建了三个子菜单：About，Help，和 Uninstall。每一个子菜单链接到一个不同的包含子菜单页面内容的自定义函数。

向已经存在的菜单中添加一个菜单项

如果你的菜单只有一个单独的设置页面，就没必要创建一个自定义的顶级菜单了。你可以简单的把它添加到已经存在菜单下。例如 Settings 菜单。

WordPress 提供许多不同的函数像一个已经存在的默认菜单添加一个子菜单。其中一个函数是 add_options_page() 。add_options_page() 函数向 Settings 菜单添加子菜单项。

1
2
3

<?php
    add_options_page( page_title, menu_title, capability, menu_slug, function );
?>

<?php add_options_page( page_title, menu_title, capability, menu_slug, function ); ?>

参数和上面两个函数类似。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php
    add_action( 'admin_menu', 'boj_menuexample_create_menu' );
 
    function boj_menuexample_create_menu() {
        // 在 Settings 下添加子菜单
        add_options_page( 
            'My Plugin Settings Page', 
           'Menu Example Settings',
           'manage_options',
           __FILE__,
           'boj_menuexample_settings_page'
        );
    }
?>

<?php add_action( ‘admin_menu’, ‘boj_menuexample_create_menu’ ); function boj_menuexample_create_menu() { // 在 Settings 下添加子菜单 add_options_page( ‘My Plugin Settings Page’, ‘Menu Example Settings’, ‘manage_options’, __FILE__, ‘boj_menuexample_settings_page’ ); } ?>

下面是所有可用的添加子菜单的函数：

  • add_dashboard_page
  • add_posts_page
  • add_media_page
  • add_links_page
  • add_pages_page
  • add_comments_page
  • add_theme_page
  • add_plugins_page
  • add_users_page
  • add_management_page
  • add_options_page

使用小工具 ( widgets )

小工具可以很好的向插件使用者提供显示插件信息或者数据的方法。WordPress 提供了一系列和小工具相关的 API 来使用小工具。这一节会介绍创建小工具，添加并保存小工具的选项，以及在小工具中显示插件信息。

创建小工具

在 WordPress 中，使用 WP_Widget 类来创建小工具。了解一下这个类有助于理解小工具是如何工作的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?php
    class My_Widget extends WP_Widget {
        function My_Widget() {
            // processes the widget  构造函数
        }
 
        function form( $instance ) {
            // 在管理面板中显示小工具的表单
        }
 
        function update( $new_instance, $old_instance ) {
            // 小工具选项的保存过程
        }
 
        function widget( $args, $instance ) {
            // 显示小工具
        }
    }
?>

<?php class My_Widget extends WP_Widget { function My_Widget() { // processes the widget 构造函数 } function form( $instance ) { // 在管理面板中显示小工具的表单 } function update( $new_instance, $old_instance ) { // 小工具选项的保存过程 } function widget( $args, $instance ) { // 显示小工具 } } ?>

WP_Widget 为你的小工具提供负责不同功能的多个函数。

下面来为你的插件创建一个小工具。这是一个简单的文本小工具，用来保存和显示你喜欢的电影和歌曲。它展示了如何在 WordPress 小工具中保存 text 数据。

这里使用 widgets_init 动作钩子。这个钩子在默认的小工具注册到 WordPress 中之后被触发。

1
2
3
4
5
6
7
8
9

<?php
    // 使用 widgets_init 动作钩子来执行自定义的函数
    add_action( 'widgets_init', 'boj_widgetexample_register_widgets' );
 
    // 注册小工具
    function boj_widgetexample_register_widgets() {
        register_widget( 'boj_widgetexample_widget_my_info' );
    }
?>

<?php // 使用 widgets_init 动作钩子来执行自定义的函数 add_action( ‘widgets_init’, ‘boj_widgetexample_register_widgets’ ); // 注册小工具 function boj_widgetexample_register_widgets() { register_widget( ‘boj_widgetexample_widget_my_info’ ); } ?>

widgets_init 钩子触发自定义的函数。接着使用 register_widget() 函数来注册小工具，这个函数接受一个参数 — 将要继承( extends ) WP_Widget 的类的类名。你可以使用这个函数注册任意多个小工具。

注册了小工具之后，接着来看小工具类。

1
2
3
4
5
6

<?php
    // boj_widgetexample_widget_my_info class
    class boj_widgetexample_widget_my_info extends WP_Widget {
 
    }
?>

<?php // boj_widgetexample_widget_my_info class class boj_widgetexample_widget_my_info extends WP_Widget { } ?>

是用你在注册小工具时定义的唯一的类名来从 WP_Widget 继承一个新类。接下来开始创建小工具。

1
2
3
4
5
6
7
8
9
10

<?php
    // process the new widget
    function boj_widgetexample_widget_my_info() {
        $widget_ops = array(
            'classname' => 'boj_widgetexample_widget_class',
            'description' => 'Display a user\'s favorite movie and song.'
        );
        $this->WP_Widget( 'boj_widgetexample_widget_my_info', 'My Info Widget', $widget_ops );
    }
?>

<?php // process the new widget function boj_widgetexample_widget_my_info() { $widget_ops = array( ‘classname’ => ‘boj_widgetexample_widget_class’, ‘description’ => ‘Display a user\’s favorite movie and song.’ ); $this->WP_Widget( ‘boj_widgetexample_widget_my_info’, ‘My Info Widget’, $widget_ops ); } ?>

首先，用一个数组 $widget_ops 来存储小工具的选项：classname 和 description。classname 是添加到 <li> 元素的类名。默认情况下，Sidebars 将所有的小工具都显示成 unordered 列表( ul )。每一个单独的小工具是那个列表中的一个列表项( li )，所以通过添加一个自定义的 classname 和 ID，就可以方便的为小工具定义样式了。description 显示在 外观 => 小工具 下面，描述小工具的功能。

接着，把这个数据值传递给 WP_Widget。传递的第一个值是前面提到的小工具的列表项( li )的 ID 值。第二个值是小工具的名字。最后一个值是前面创建的选项数组。

我们接着来创建小工具的设置表单项。这个小工具接受三个值：标题，最爱的电影，最爱的歌曲。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?php
    // 创建小工具的设置表单
    function form($instance) {
        $defaults = array( 'title' => 'My Info', 'movie' => '', 'song' => '' );
        $instance = wp_parse_args( (array) $instance, $defaults );
        $title = $instance['title'];
        $movie = $instance['movie'];
        $song = $instance['song'];
        ?>
 
        <p>Title: <input class="widefat" name="
            <?php echo $this->get_field_name( 'title' ); ?>" type="text"
            value="<?php echo esc_attr( $title ); ?>" /></p>
        <p> Favorite Movie: <input class=”widefat" name="
            <?php echo $this-> get_field_name( 'movie' ); ?> "type="text"
            value=" < ?php echo esc_attr( $movie ); ?> " /> </p>
        <p> Favorite Song: <textarea class="widefat" name="
            <?php echo $this-> get_field_name( 'song' ); ?> " />
            <?php echo esc_attr( $song ); ?> </textarea> </p>
        <?php
    }
?>

<?php // 创建小工具的设置表单 function form($instance) { $defaults = array( ‘title’ => ‘My Info’, ‘movie’ => ”, ‘song’ => ” ); $instance = wp_parse_args( (array) $instance, $defaults ); $title = $instance[‘title’]; $movie = $instance[‘movie’]; $song = $instance[‘song’]; ?> <p>Title: <input class=”widefat” name=” <?php echo $this->get_field_name( ‘title’ ); ?>” type=”text” value=”<?php echo esc_attr( $title ); ?>” /></p> <p> Favorite Movie: <input class=”widefat” name=” <?php echo $this-> get_field_name( ‘movie’ ); ?> “type=”text” value=” < ?php echo esc_attr( $movie ); ?> ” /> </p> <p> Favorite Song: <textarea class=”widefat” name=” <?php echo $this-> get_field_name( ‘song’ ); ?> ” /> <?php echo esc_attr( $song ); ?> </textarea> </p> <?php } ?>

首先，声明 $defaults 变量来设置每个选项的默认值。接着填充实例的值。这样就已经保存了小插件的设置了。如果新建一个小工具到 sidebar，没有保存任何设置，那么这些值就是空的。

小工具设置的最后一部分就是显示提供信息输入的表单项。使用三个标准的 HTML input text 字段分别给：title，movie，和 song。在这里不需要提供 <form> 标签或提交按钮。widget 类会自动处理这些。同时使用 esc_attr() 函数来得到之前保持的值并显示在字段上。

接下来使用 widget 类的 update 函数来保持这些设置。

1
2
3
4
5
6
7
8
9
10
11

<?php
    // 保存小工具设置
    function update( $new_instance, $old_instance ) {
        $instance = $old_instance;
        $instance['title'] = strip_tags( $new_instance['title'] );
        $instance['movie'] = strip_tags( $new_instance['movie'] );
        $instance['song'] = strip_tags( $new_instance['song'] );
 
        return $instance;
    }
?>

<?php // 保存小工具设置 function update( $new_instance, $old_instance ) { $instance = $old_instance; $instance[‘title’] = strip_tags( $new_instance[‘title’] ); $instance[‘movie’] = strip_tags( $new_instance[‘movie’] ); $instance[‘song’] = strip_tags( $new_instance[‘song’] ); return $instance; } ?>

如上所示，widget 类处理了所有的保存工作。你只用简单的为每一个小工具的设置传递 $new_instance 的值就可以了。一定要注意任何用户输入的数据，这里使用了 PHP 函数 strip_tags()。

创建小工具的最后一步就是在 sidebar 上显示小工具。这里使用 widget 类的 widget 函数来完成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php
    // 显示小工具
    function widget( $args, $instance ) {
        extract( $args );
 
        echo $before_widget;
        $title = apply_filters( 'widget_title', $instance['title'] );
        $movie = empty( $instance['movie'] ) ? ' ' : $instance['movie'];
        $song = empty( $instance['song'] ) ? ' ' : $instance['song'];
 
        if ( !empty( $title ) ) { echo $before_title . $title . $after_title; };
        echo '<p> Fav Movie: ' . $movie . '</p>';
        echo '<p> Fav Song: ' . $song . '</p>';
        echo $after_widget;
    }
?>

<?php // 显示小工具 function widget( $args, $instance ) { extract( $args ); echo $before_widget; $title = apply_filters( ‘widget_title’, $instance[‘title’] ); $movie = empty( $instance[‘movie’] ) ? ‘ ‘ : $instance[‘movie’]; $song = empty( $instance[‘song’] ) ? ‘ ‘ : $instance[‘song’]; if ( !empty( $title ) ) { echo $before_title . $title . $after_title; }; echo ‘<p> Fav Movie: ‘ . $movie . ‘</p>’; echo ‘<p> Fav Song: ‘ . $song . ‘</p>’; echo $after_widget; } ?>

第一步是提取 $args 参数。这个变量保存着全局的模板值，比如 $before_widget 和 $after_widget。这些值可以在注册一个 sidebar 的时候定义，从而可以自定义包围你的小工具的代码，例如添加自定义的 <div> 标签。

接着将 $title 变量赋值为小工具的 title。给 title 使用 widget_title 过滤器钩子。这就使得其他开发者可以根据需要修改小工具的 title。同样对 $movie 和 $song 变量赋值。

现在已经定义了小工具的所有变量，是时候显示它们了。首先显示 $title 变量。用 $before_title 和 $after_title 变量包住它很重要。这两个全局变量同样可以在注册一个 sidebar 的时候自定义。接着显示 favorite movie 和 favorite song 的值。最后记住用 $after_widget 全局变量做结束。

恭喜你创建成功了一个 WordPress 小工具。现在可以添加并配置你的小工具了。接着你的小工具就显示到了 sidebar 中。

下面我们把整个小工具的代码放在一起回顾一下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

<?php
    /*
    Plugin Name: Widget Example Plugin
    Plugin URI: http://example.com/wordpress-plugins/my-plugin
    Description: A plugin to create widgets in WordPress
    Version: 1.0
    Author: Brad Williams
    Author URI: http://wrox.com
    License: GPLv2
    */
 
    // 使用 widgets_init 动作钩子来执行自定义的函数
    add_action( 'widgets_init', 'boj_widgetexample_register_widgets' );
 
    // 注册小工具
    function boj_widgetexample_register_widgets() {
        register_widget( 'boj_widgetexample_widget_my_info' );
    }
 
	// boj_widgetexample_widget_my_info class
    class boj_widgetexample_widget_my_info extends WP_Widget {
        // process the new widget
        function boj_widgetexample_widget_my_info() {
            $widget_ops = array(
                'classname' => 'boj_widgetexample_widget_class',
                'description' => 'Display a user\'s favorite movie and song.'
            );
            $this->WP_Widget( 'boj_widgetexample_widget_my_info', 'My Info Widget', $widget_ops );
        }
 
		 // 创建小工具的设置表单
        function form($instance) {
            $defaults = array( 'title' => 'My Info', 'movie' => '', 'song' => '' );
            $instance = wp_parse_args( (array) $instance, $defaults );
            $title = $instance['title'];
            $movie = $instance['movie'];
            $song = $instance['song'];
            ?>
 
            <p>Title: <input class="widefat" name="
                <?php echo $this->get_field_name( 'title' ); ?>" type="text"
                value="<?php echo esc_attr( $title ); ?>" /></p>
            <p> Favorite Movie: <input class=”widefat" name="
                <?php echo $this-> get_field_name( 'movie' ); ?> "type="text"
                value=" < ?php echo esc_attr( $movie ); ?> " /> </p>
            <p> Favorite Song: <textarea class="widefat" name="
                <?php echo $this-> get_field_name( 'song' ); ?> " />
                <?php echo esc_attr( $song ); ?> </textarea> </p>
            <?php
        }
 
		// 保存小工具设置
        function update( $new_instance, $old_instance ) {
            $instance = $old_instance;
            $instance['title'] = strip_tags( $new_instance['title'] );
            $instance['movie'] = strip_tags( $new_instance['movie'] );
            $instance['song'] = strip_tags( $new_instance['song'] );
 
            return $instance;
        }
 
		// 显示小工具
        function widget( $args, $instance ) {
            extract( $args );
 
            echo $before_widget;
            $title = apply_filters( 'widget_title', $instance['title'] );
            $movie = empty( $instance['movie'] ) ? ' ' : $instance['movie'];
            $song = empty( $instance['song'] ) ? ' ' : $instance['song'];
 
            if ( !empty( $title ) ) { echo $before_title . $title . $after_title; };
            echo '<p> Fav Movie: ' . $movie . '</p>';
            echo '<p> Fav Song: ' . $song . '</p>';
            echo $after_widget;
        }
    }
 
?>

<?php /* Plugin Name: Widget Example Plugin Plugin URI: http://example.com/wordpress-plugins/my-plugin Description: A plugin to create widgets in WordPress Version: 1.0 Author: Brad Williams Author URI: http://wrox.com License: GPLv2 */ // 使用 widgets_init 动作钩子来执行自定义的函数 add_action( ‘widgets_init’, ‘boj_widgetexample_register_widgets’ ); // 注册小工具 function boj_widgetexample_register_widgets() { register_widget( ‘boj_widgetexample_widget_my_info’ ); } // boj_widgetexample_widget_my_info class class boj_widgetexample_widget_my_info extends WP_Widget { // process the new widget function boj_widgetexample_widget_my_info() { $widget_ops = array( ‘classname’ => ‘boj_widgetexample_widget_class’, ‘description’ => ‘Display a user\’s favorite movie and song.’ ); $this->WP_Widget( ‘boj_widgetexample_widget_my_info’, ‘My Info Widget’, $widget_ops ); } // 创建小工具的设置表单 function form($instance) { $defaults = array( ‘title’ => ‘My Info’, ‘movie’ => ”, ‘song’ => ” ); $instance = wp_parse_args( (array) $instance, $defaults ); $title = $instance[‘title’]; $movie = $instance[‘movie’]; $song = $instance[‘song’]; ?> <p>Title: <input class=”widefat” name=” <?php echo $this->get_field_name( ‘title’ ); ?>” type=”text” value=”<?php echo esc_attr( $title ); ?>” /></p> <p> Favorite Movie: <input class=”widefat” name=” <?php echo $this-> get_field_name( ‘movie’ ); ?> “type=”text” value=” < ?php echo esc_attr( $movie ); ?> ” /> </p> <p> Favorite Song: <textarea class=”widefat” name=” <?php echo $this-> get_field_name( ‘song’ ); ?> ” /> <?php echo esc_attr( $song ); ?> </textarea> </p> <?php } // 保存小工具设置 function update( $new_instance, $old_instance ) { $instance = $old_instance; $instance[‘title’] = strip_tags( $new_instance[‘title’] ); $instance[‘movie’] = strip_tags( $new_instance[‘movie’] ); $instance[‘song’] = strip_tags( $new_instance[‘song’] ); return $instance; } // 显示小工具 function widget( $args, $instance ) { extract( $args ); echo $before_widget; $title = apply_filters( ‘widget_title’, $instance[‘title’] ); $movie = empty( $instance[‘movie’] ) ? ‘ ‘ : $instance[‘movie’]; $song = empty( $instance[‘song’] ) ? ‘ ‘ : $instance[‘song’]; if ( !empty( $title ) ) { echo $before_title . $title . $after_title; }; echo ‘<p> Fav Movie: ‘ . $movie . ‘</p>’; echo ‘<p> Fav Song: ‘ . $song . ‘</p>’; echo $after_widget; } } ?>

高级小工具

现在你已经明白了最基本的小工具如何工作，是时候创建更高级的小工具了。下面的例子中，创建一个获得 RSS 源并显示结果的小工具。首先，需要注册小工具。

1
2
3
4
5
6
7
8
9

<?php
    // use widgets_init action hook to execute custom function
    add_action( 'widgets_init', 'boj_awe_register_widgets' );
 
    // register our widget
    function boj_awe_register_widgets() {
        register_widget( 'boj_awe_widget' );
    }
?>

<?php // use widgets_init action hook to execute custom function add_action( ‘widgets_init’, ‘boj_awe_register_widgets’ ); // register our widget function boj_awe_register_widgets() { register_widget( ‘boj_awe_widget’ ); } ?>

注册完小工具 boj_awe_widget 之后，将你的新小工具继承 WP_Widget 类。

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
    // boj_awe_widget class
    class boj_awe_widget extends WP_Widget {
        // process the new widget
        function boj_awe_widget() {
            $widget_ops = array(
                'classname' => 'boj_awe_widget_class',
                'description' => 'Display an RSS feed with options.'
            );
            $this->WP_Widget( 'boj_awe_widget', 'Advaced RSS Widget', $widget_ops );
        }
// 接下面...
?>

<?php // boj_awe_widget class class boj_awe_widget extends WP_Widget { // process the new widget function boj_awe_widget() { $widget_ops = array( ‘classname’ => ‘boj_awe_widget_class’, ‘description’ => ‘Display an RSS feed with options.’ ); $this->WP_Widget( ‘boj_awe_widget’, ‘Advaced RSS Widget’, $widget_ops ); } // 接下面… ?>

和之前一样，设置类名和小插件的描述。接下来创建小工具选项。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<?php
        // 创建小工具的设置表单
        function form( $instance ) {
            $defaults = array(
                'title' => 'RSS Feed',
                'rss_feed' => 'http://strangework.com/feed',
                'rss_items' => '2'
            );
            $instance = wp_parse_args( (array) $instance, $defaults );
            $title = $instance['title'];
            $rss_feed = $instance['rss_feed'];
            $rss_items = $instance['rss_items'];
            $rss_date = $instance['rss_data'];
            $rss_summary = $instance['rss_summary'];
            ?>
                <p>Title: <input class="widefat" name="
                    <?php echo $this->get_field_name( 'title' ); ?>"
                    type = "text" value="<?php echo esc_attr( $title ); ?>" /></p>
                <p>RSS Feed: <input class="widefat" name="
                    <?php echo $this->get_field_name( 'rss_feed' ); ?>"
                    type="text" value="<?php echo esc_attr( $rss_feed ); ?>" /></p>
                <p>Items to Display:
                    <select name="<?php echo $this->get_field_name( 'rss_items' ); ?>">
                        <option value="1" <?php selected( $rss_items, 1 ); ?>>1</option>
                        <option value="2" <?php selected( $rss_items, 2 ); ?>>2</option>
                        <option value="3" <?php selected( $rss_items, 3 ); ?>>3</option>
                        <option value="4" <?php selected( $rss_items, 4 ); ?>>4</option>
                        <option value="5" <?php selected( $rss_items, 5 ); ?>>5</option>
                    </select>
                </p>
                <p>Show Date?: <input name="
                    <?php echo $this->get_field_name( 'rss_date' ); ?>"
                    type="checkbox" <?php checked( $rss_date, 'on' ); ?> /></p>
                <p>Show Summary?: <input name="
                    <?php echo $this->get_field_name( 'rss_summary' ); ?>"
                    type="checkbox" <?php checked( $rss_summary, 'on' ); ?> /></p>
                <?php
        }    
?>

<?php // 创建小工具的设置表单 function form( $instance ) { $defaults = array( ‘title’ => ‘RSS Feed’, ‘rss_feed’ => ‘http://strangework.com/feed’, ‘rss_items’ => ‘2’ ); $instance = wp_parse_args( (array) $instance, $defaults ); $title = $instance[‘title’]; $rss_feed = $instance[‘rss_feed’]; $rss_items = $instance[‘rss_items’]; $rss_date = $instance[‘rss_data’]; $rss_summary = $instance[‘rss_summary’]; ?> <p>Title: <input class=”widefat” name=” <?php echo $this->get_field_name( ‘title’ ); ?>” type = “text” value=”<?php echo esc_attr( $title ); ?>” /></p> <p>RSS Feed: <input class=”widefat” name=” <?php echo $this->get_field_name( ‘rss_feed’ ); ?>” type=”text” value=”<?php echo esc_attr( $rss_feed ); ?>” /></p> <p>Items to Display: <select name=”<?php echo $this->get_field_name( ‘rss_items’ ); ?>”> <option value=”1″ <?php selected( $rss_items, 1 ); ?>>1</option> <option value=”2″ <?php selected( $rss_items, 2 ); ?>>2</option> <option value=”3″ <?php selected( $rss_items, 3 ); ?>>3</option> <option value=”4″ <?php selected( $rss_items, 4 ); ?>>4</option> <option value=”5″ <?php selected( $rss_items, 5 ); ?>>5</option> </select> </p> <p>Show Date?: <input name=” <?php echo $this->get_field_name( ‘rss_date’ ); ?>” type=”checkbox” <?php checked( $rss_date, ‘on’ ); ?> /></p> <p>Show Summary?: <input name=” <?php echo $this->get_field_name( ‘rss_summary’ ); ?>” type=”checkbox” <?php checked( $rss_summary, ‘on’ ); ?> /></p> <?php } ?>

这个小工具提供5个选项分别让用户来设置 title, RSS feed 源, 要显示的 items, 以及是否显示日期和摘要。title 和 RSS 源是标准的 text 表单项。

items to display 选项是一个 HTML select 列表。注意 selected() 函数的使用，它是非常有用的工具，通过比较 select 字段中两个值来确定是否那个 option 是被选中。如果比较的 option 的值是保存的值，WordPress 为那个 option 字段添加 selected=”selected” 值，使得它被选中。

show date 和 show summary 选项都是 checkbox 表单项。类似于前面的 selected() 函数，使用 WordPress 的 checked() 函数，通过比较来确定是否被选中，并添加 checked=”checked” 来选中 checkbox。

这样你的小工具的表单就设置好了，接着来保持小工具的选项。

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
    // 保存小工具设置
    function update( $new_instance, $old_instance ) {
        $instance = $old_instance;
        $instance['title'] = strip_tags( $new_instance['title'] );
        $instance['rss_feed'] = strip_tags( $new_instance['rss_feed'] );
        $instance['rss_items'] = strip_tags( $new_instance['rss_items'] );
        $instance['rss_date'] = strip_tags( $new_instance['rss_date'] );
        $instance['rss_summary'] = strip_tags( $new_instance['rss_summary'] );
 
        return $instance;
    }
?>

<?php // 保存小工具设置 function update( $new_instance, $old_instance ) { $instance = $old_instance; $instance[‘title’] = strip_tags( $new_instance[‘title’] ); $instance[‘rss_feed’] = strip_tags( $new_instance[‘rss_feed’] ); $instance[‘rss_items’] = strip_tags( $new_instance[‘rss_items’] ); $instance[‘rss_date’] = strip_tags( $new_instance[‘rss_date’] ); $instance[‘rss_summary’] = strip_tags( $new_instance[‘rss_summary’] ); return $instance; } ?>

小工具的选项已经保存了，接着就根据这些选项来显示小工具。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?php
    // 显示小工具
    function widget( $args, $instance ) {
        extract( $args );
 
        echo $before_widget;
 
        // load the widget settings
        $title = appply_filters( 'widget_title', $instance['title'] );
        $rss_feed = empty( $instance['rss_feed'] ) ? '' : $instance['rss_feed'];
        $rss_items = empty( $instance['rss_items'] ) ? 2 : $instance['rss_items'];
        $rss_date = empty( $instance['rss_date'] ) ? 0 : 1;
        $rss_summary = empty( $instance['rss_summary'] ) ? 0 : 1;
 
        if ( !empty( $title ) ) { echo $before_title . $title . $after_title; };
 
        if ( $rss_feed ) {
            // display the RSS feed
            wp_widget_rss_output( array(
                'url' => $rss_feed,
                'title' => $title,
                'items' => $rss_items,
                'show_summary' => $rss_summary,
                'show_author' => 0,
                'show_date' => $rss_date
            ) );
        }
 
         echo $after_widget;
    }
?>

<?php // 显示小工具 function widget( $args, $instance ) { extract( $args ); echo $before_widget; // load the widget settings $title = appply_filters( ‘widget_title’, $instance[‘title’] ); $rss_feed = empty( $instance[‘rss_feed’] ) ? ” : $instance[‘rss_feed’]; $rss_items = empty( $instance[‘rss_items’] ) ? 2 : $instance[‘rss_items’]; $rss_date = empty( $instance[‘rss_date’] ) ? 0 : 1; $rss_summary = empty( $instance[‘rss_summary’] ) ? 0 : 1; if ( !empty( $title ) ) { echo $before_title . $title . $after_title; }; if ( $rss_feed ) { // display the RSS feed wp_widget_rss_output( array( ‘url’ => $rss_feed, ‘title’ => $title, ‘items’ => $rss_items, ‘show_summary’ => $rss_summary, ‘show_author’ => 0, ‘show_date’ => $rss_date ) ); } echo $after_widget; } ?>

通过加载所有的小工具选项来确定如何显示 RSS feed。

回顾整个代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

<?php
    /*
    Plugin Name: Advanced Widget Example Plugin
    Plugin URI: http://example.com/wordpress-plugins/my-plugin
    Description: A plugin to create widgets in WordPress
    Version: 1.0
    Author: Brad Williams
    Author URI: http://wrox.com
    License: GPLv2
    */
 
    // use widgets_init action hook to execute custom function
    add_action( 'widgets_init', 'boj_awe_register_widgets' );
 
    // register our widget
    function boj_awe_register_widgets() {
        register_widget( 'boj_awe_widget' );
    }
 
    // boj_awe_widget class
    class boj_awe_widget extends WP_Widget {
        // process the new widget
        function boj_awe_widget() {
            $widget_ops = array(
                'classname' => 'boj_awe_widget_class',
                'description' => 'Display an RSS feed with options.'
            );
            $this->WP_Widget( 'boj_awe_widget', 'Advaced RSS Widget', $widget_ops );
        }
 
        // 创建小工具的设置表单
        function form( $instance ) {
            $defaults = array(
                'title' => 'RSS Feed',
                'rss_feed' => 'http://strangework.com/feed',
                'rss_items' => '2'
            );
            $instance = wp_parse_args( (array) $instance, $defaults );
            $title = $instance['title'];
            $rss_feed = $instance['rss_feed'];
            $rss_items = $instance['rss_items'];
            $rss_date = $instance['rss_data'];
            $rss_summary = $instance['rss_summary'];
            ?>
                <p>Title: <input class="widefat" name="
                    <?php echo $this->get_field_name( 'title' ); ?>"
                    type = "text" value="<?php echo esc_attr( $title ); ?>" /></p>
                <p>RSS Feed: <input class="widefat" name="
                    <?php echo $this->get_field_name( 'rss_feed' ); ?>"
                    type="text" value="<?php echo esc_attr( $rss_feed ); ?>" /></p>
                <p>Items to Display:
                    <select name="<?php echo $this->get_field_name( 'rss_items' ); ?>">
                        <option value="1" <?php selected( $rss_items, 1 ); ?>>1</option>
                        <option value="2" <?php selected( $rss_items, 2 ); ?>>2</option>
                        <option value="3" <?php selected( $rss_items, 3 ); ?>>3</option>
                        <option value="4" <?php selected( $rss_items, 4 ); ?>>4</option>
                        <option value="5" <?php selected( $rss_items, 5 ); ?>>5</option>
                    </select>
                </p>
                <p>Show Date?: <input name="
                    <?php echo $this->get_field_name( 'rss_date' ); ?>"
                    type="checkbox" <?php checked( $rss_date, 'on' ); ?> /></p>
                <p>Show Summary?: <input name="
                    <?php echo $this->get_field_name( 'rss_summary' ); ?>"
                    type="checkbox" <?php checked( $rss_summary, 'on' ); ?> /></p>
                <?php
        }    
 
        // 保存小工具设置
        function update( $new_instance, $old_instance ) {
            $instance = $old_instance;
            $instance['title'] = strip_tags( $new_instance['title'] );
            $instance['rss_feed'] = strip_tags( $new_instance['rss_feed'] );
            $instance['rss_items'] = strip_tags( $new_instance['rss_items'] );
            $instance['rss_date'] = strip_tags( $new_instance['rss_date'] );
            $instance['rss_summary'] = strip_tags( $new_instance['rss_summary'] );
 
            return $instance;
        }
 
		// 显示小工具
    	function widget( $args, $instance ) {
        	extract( $args );
 
        	echo $before_widget;
 
        	// load the widget settings
        	$title = appply_filters( 'widget_title', $instance['title'] );
        	$rss_feed = empty( $instance['rss_feed'] ) ? '' : $instance['rss_feed'];
        	$rss_items = empty( $instance['rss_items'] ) ? 2 : $instance['rss_items'];
        	$rss_date = empty( $instance['rss_date'] ) ? 0 : 1;
        	$rss_summary = empty( $instance['rss_summary'] ) ? 0 : 1;
 
        	if ( !empty( $title ) ) { echo $before_title . $title . $after_title; };
 
        	if ( $rss_feed ) {
            	// display the RSS feed
            	wp_widget_rss_output( array(
                	'url' => $rss_feed,
                	'title' => $title,
                	'items' => $rss_items,
                	'show_summary' => $rss_summary,
                	'show_author' => 0,
                	'show_date' => $rss_date
            	) );
        	}
 
         	echo $after_widget;
    	}
	}
?>

<?php /* Plugin Name: Advanced Widget Example Plugin Plugin URI: http://example.com/wordpress-plugins/my-plugin Description: A plugin to create widgets in WordPress Version: 1.0 Author: Brad Williams Author URI: http://wrox.com License: GPLv2 */ // use widgets_init action hook to execute custom function add_action( ‘widgets_init’, ‘boj_awe_register_widgets’ ); // register our widget function boj_awe_register_widgets() { register_widget( ‘boj_awe_widget’ ); } // boj_awe_widget class class boj_awe_widget extends WP_Widget { // process the new widget function boj_awe_widget() { $widget_ops = array( ‘classname’ => ‘boj_awe_widget_class’, ‘description’ => ‘Display an RSS feed with options.’ ); $this->WP_Widget( ‘boj_awe_widget’, ‘Advaced RSS Widget’, $widget_ops ); } // 创建小工具的设置表单 function form( $instance ) { $defaults = array( ‘title’ => ‘RSS Feed’, ‘rss_feed’ => ‘http://strangework.com/feed’, ‘rss_items’ => ‘2’ ); $instance = wp_parse_args( (array) $instance, $defaults ); $title = $instance[‘title’]; $rss_feed = $instance[‘rss_feed’]; $rss_items = $instance[‘rss_items’]; $rss_date = $instance[‘rss_data’]; $rss_summary = $instance[‘rss_summary’]; ?> <p>Title: <input class=”widefat” name=” <?php echo $this->get_field_name( ‘title’ ); ?>” type = “text” value=”<?php echo esc_attr( $title ); ?>” /></p> <p>RSS Feed: <input class=”widefat” name=” <?php echo $this->get_field_name( ‘rss_feed’ ); ?>” type=”text” value=”<?php echo esc_attr( $rss_feed ); ?>” /></p> <p>Items to Display: <select name=”<?php echo $this->get_field_name( ‘rss_items’ ); ?>”> <option value=”1″ <?php selected( $rss_items, 1 ); ?>>1</option> <option value=”2″ <?php selected( $rss_items, 2 ); ?>>2</option> <option value=”3″ <?php selected( $rss_items, 3 ); ?>>3</option> <option value=”4″ <?php selected( $rss_items, 4 ); ?>>4</option> <option value=”5″ <?php selected( $rss_items, 5 ); ?>>5</option> </select> </p> <p>Show Date?: <input name=” <?php echo $this->get_field_name( ‘rss_date’ ); ?>” type=”checkbox” <?php checked( $rss_date, ‘on’ ); ?> /></p> <p>Show Summary?: <input name=” <?php echo $this->get_field_name( ‘rss_summary’ ); ?>” type=”checkbox” <?php checked( $rss_summary, ‘on’ ); ?> /></p> <?php } // 保存小工具设置 function update( $new_instance, $old_instance ) { $instance = $old_instance; $instance[‘title’] = strip_tags( $new_instance[‘title’] ); $instance[‘rss_feed’] = strip_tags( $new_instance[‘rss_feed’] ); $instance[‘rss_items’] = strip_tags( $new_instance[‘rss_items’] ); $instance[‘rss_date’] = strip_tags( $new_instance[‘rss_date’] ); $instance[‘rss_summary’] = strip_tags( $new_instance[‘rss_summary’] ); return $instance; } // 显示小工具 function widget( $args, $instance ) { extract( $args ); echo $before_widget; // load the widget settings $title = appply_filters( ‘widget_title’, $instance[‘title’] ); $rss_feed = empty( $instance[‘rss_feed’] ) ? ” : $instance[‘rss_feed’]; $rss_items = empty( $instance[‘rss_items’] ) ? 2 : $instance[‘rss_items’]; $rss_date = empty( $instance[‘rss_date’] ) ? 0 : 1; $rss_summary = empty( $instance[‘rss_summary’] ) ? 0 : 1; if ( !empty( $title ) ) { echo $before_title . $title . $after_title; }; if ( $rss_feed ) { // display the RSS feed wp_widget_rss_output( array( ‘url’ => $rss_feed, ‘title’ => $title, ‘items’ => $rss_items, ‘show_summary’ => $rss_summary, ‘show_author’ => 0, ‘show_date’ => $rss_date ) ); } echo $after_widget; } } ?>

创建控制板小工具( Dashboard Widgets )

WordPress 同时还提供了控制板小工具的 API。你可以使用这个 API 在 WordPress 的控制板页面创建自定义的小工具。

创建控制板小工具，要用到 wp_add_dashboard_widget() 函数。示例：

1
2
3

<?php
    wp_add_dashboard_widget( widget_id, widget_name, callback, control_callback ); 
?>

<?php wp_add_dashboard_widget( widget_id, widget_name, callback, control_callback ); ?>

wp_add_dashboard_widget() 函数接受下面的参数：

  • widget_id — 添加到 widget DIV 元素的 CSS ID
  • widget_name — 在小插件头部显示的名称
  • callback — 被调用的用来显示插件的函数
  • control_callback — 被调用的用来处理元素和提交的函数

下面是几个不同的例子。第一个，创建一个简单的控制板小工具来向用户显示一些内容。

要创建控制板小工具，使用 wp_dashboard_setup 动作钩子。这个钩子在默认的控制板钩子初始化完毕后，但是还没有显示时立即执行，

1
2
3
4
5
6
7
8
9
10
11
12

<?php
    add_action( 'wp_dashboard_setup', 'boj_dashboard_example_widgets' );
 
    function boj_dashboard_example_widgets() {
        // 创建一个自定义的控制板小工具
        wp_add_dashboard_widget( 
            'dashboard_custom_feed',
            'My Plugin Information',
            'boj_dashboard_example_display' 
        );
    }
?>

<?php add_action( ‘wp_dashboard_setup’, ‘boj_dashboard_example_widgets’ ); function boj_dashboard_example_widgets() { // 创建一个自定义的控制板小工具 wp_add_dashboard_widget( ‘dashboard_custom_feed’, ‘My Plugin Information’, ‘boj_dashboard_example_display’ ); } ?>

用 wp_dashboard_setup 钩子来调用自定义的 boj_dashboard_example_widgets() 函数。接着使用 wp_add_dashboard_widget() 函数来注册你的控制板小工具。将小工具的 title 设置成 My Plugin Information，并调用自定义的函数 boj_dashboard_example_display()。在注册完自定义的小工具后，需要完成自定义函数来向用户显示信息。

1
2
3
4
5

<?php
    function boj_dashboard_example_display() {
        echo '<p>Please contact support@example.ccom to report bugs.</p>';
    }
?>

<?php function boj_dashboard_example_display() { echo ‘<p>Please contact support@example.ccom to report bugs.</p>’; } ?>

这样就完成了一个控制板小工具向用户显示一条信息。控制板小工具 API 自动使你的小工具可以拖拽，收放，以及将你的小工具添加到 “显示选项” 中，可以让用户选择显示或隐藏。

我们来回顾一下全部的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<?php
    /*
    Plugin Name: Dashboard Widget Example Plugin
    Plugin URI: http://example.com/wordpress-plugins/my-plugin
    Description: A plugin to create dashboard widgets in WordPress
    Version: 1.0
    Author: Brad Williams
    Author URI: http://wrox.com
    License: GPLv2
    */
 
    add_action( 'wp_dashboard_setup', 'boj_dashboard_example_widgets' );
 
    function boj_dashboard_example_widgets() {
        // 创建一个自定义的控制板小工具
        wp_add_dashboard_widget( 
            'dashboard_custom_feed',
            'My Plugin Information',
            'boj_dashboard_example_display' 
        );
    }
 
    function boj_dashboard_example_display() {
        echo '<p>Please contact support@example.ccom to report bugs.</p>';
    }
?>

<?php /* Plugin Name: Dashboard Widget Example Plugin Plugin URI: http://example.com/wordpress-plugins/my-plugin Description: A plugin to create dashboard widgets in WordPress Version: 1.0 Author: Brad Williams Author URI: http://wrox.com License: GPLv2 */ add_action( ‘wp_dashboard_setup’, ‘boj_dashboard_example_widgets’ ); function boj_dashboard_example_widgets() { // 创建一个自定义的控制板小工具 wp_add_dashboard_widget( ‘dashboard_custom_feed’, ‘My Plugin Information’, ‘boj_dashboard_example_display’ ); } function boj_dashboard_example_display() { echo ‘<p>Please contact support@example.ccom to report bugs.</p>’; } ?>

创建一个带配置选项的控制板小工具

你已经了解了控制板小工具，可以接着创建带高级配置选项的小工具了。控制板小工具可以保存选项，使得用户可以方便的配置它们。如果一个控制板小工具有任何的选项，在你 hover 这个小工具的标题的时候就会出现一个 “配置” 链接。

接下来的例子中，创建一个可以自定义 RSS URL 并显示内容的控制板小工具。

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
    add_action( 'wp_dashboard_setup', 'boj_dashboard_example_widgets' );
 
    function boj_dashboard_example_widgets() {
        // 创建一个自定义的控制板小工具
        wp_add_dashboard_widget( 
            'dashboard_custom_feed',
            'My Plugin Information',
            'boj_dashboard_example_display',
            'boj_dashboard_example_setup'
        );
    }
?>

<?php add_action( ‘wp_dashboard_setup’, ‘boj_dashboard_example_widgets’ ); function boj_dashboard_example_widgets() { // 创建一个自定义的控制板小工具 wp_add_dashboard_widget( ‘dashboard_custom_feed’, ‘My Plugin Information’, ‘boj_dashboard_example_display’, ‘boj_dashboard_example_setup’ ); } ?>

注意，这次 wp_add_dashboard_widget() 函数有四个参数，boj_dashboard_example_setup() 函数是控制回调，用来显示小工具的配置选项数据，并保存。下面我们来创建 boj_dashboard_example_display() 函数在小工具中显示自定义的 RSS 订阅。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?php
    function boj_dashoboard_example_display() {
        // 加载小工具选项
        boj_option = get_option( 'boj_dashboard_widget_rss ');
 
        // 如果选项为空，则设置默认值
        $boj_rss_feed = ( $boj_option ) ? $boj_option : 'http://wordpress.org/news/feed/';
 
        // 获得 RSS 源并显示
        echo '<div class="rss-widget">';
 
        wp_widget_rss_output( array(
            'url' => $boj_rss_feed,
            'title' => 'RSS Feed News',
            'items' => 2,
            'show_summary' => 1,
            'show_author' => 0,
            'show_date' => 1
        ) );
 
        echo '</div>';
    }
?>

<?php function boj_dashoboard_example_display() { // 加载小工具选项 boj_option = get_option( ‘boj_dashboard_widget_rss ‘); // 如果选项为空，则设置默认值 $boj_rss_feed = ( $boj_option ) ? $boj_option : ‘http://wordpress.org/news/feed/’; // 获得 RSS 源并显示 echo ‘<div class=”rss-widget”>’; wp_widget_rss_output( array( ‘url’ => $boj_rss_feed, ‘title’ => ‘RSS Feed News’, ‘items’ => 2, ‘show_summary’ => 1, ‘show_author’ => 0, ‘show_date’ => 1 ) ); echo ‘</div>’; } ?>

前两行加载 作为小工具选项保存的 RSS feed 地址。在 Part-7 “插件设置” 中，会涉及更多插件设置和选项的信息。接着使用 wp_widget_rss_output() 函数来取得 RSS 订阅并显示。这个好用的函数是在 WordPress 中获取并显示 RSS 订阅到好办法。

现在已经有了小工具的显示页面，接着创建控制回调函数 boj_dashboard_example_setup()。这个函数向你的小工具添加 form 字段，让用户可以自定义配置小工具。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?php
    function boj_dashboard_example_setup() {
        // 在保持前检查选项是否设置
        if ( isset( $_POST['boj_rss_feed'] ) ) {
            // 从表单获得选项的值
           $boj_rss_feed = esc_url_raw( $_POST['boj_rss_feed'] );
 
           // 作为选项保存
           update_option( 'boj_dashboard_widget_rss', $boj_rss_feed );
        }
 
        // 如果有保存的 feed 加载
        $boj_rss_feed = get_option( 'boj_dashboard_widget_rss ');
        ?>
        <label for="feed">
            Rss Feed URL: <input type="text" name="boj_rss_feed" id="boj_rss_feed"
                value="<?php echo esc_url( $boj_rss_feed ); ?>" size="50" />
        </label>
        <?php
    }
?>

<?php function boj_dashboard_example_setup() { // 在保持前检查选项是否设置 if ( isset( $_POST[‘boj_rss_feed’] ) ) { // 从表单获得选项的值 $boj_rss_feed = esc_url_raw( $_POST[‘boj_rss_feed’] ); // 作为选项保存 update_option( ‘boj_dashboard_widget_rss’, $boj_rss_feed ); } // 如果有保存的 feed 加载 $boj_rss_feed = get_option( ‘boj_dashboard_widget_rss ‘); ?> <label for=”feed”> Rss Feed URL: <input type=”text” name=”boj_rss_feed” id=”boj_rss_feed” value=”<?php echo esc_url( $boj_rss_feed ); ?>” size=”50″ /> </label> <?php } ?>

这个函数处理的第一个任务是保存小工具的选项。在保存之前，都应该检查 POST 值是否存在，这里使用 PHP 函数 isset()。接着将 $_POST[‘boj_rss_feed’] 值赋给 $boj_rss_feed 变量。注意 POST 的值是如何使用 esc_url_raw() 函数来获取的。它在保存数据之前验证值是否为合法的 URL 形式。最后，使用 update_option() 函数来保存小工具的选项。

现在小工具选项已经保存了，你还需要提供 form 字段，好让用户来输入并保持他们想要的 RSS URL。首先从数据库中得到小工具选项，用来显示在 form 字段中。接着创建一个叫做 boj_rss_feed 的 text input 字段。注意 value 字段设置成了 $boj_rss_feed，用来保存用户输入的 RSS URL。

到此，这个控制板小工具就完成了，我们再回顾一下真个的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<?php
    /*
    Plugin Name: RSS Dashboard Widget Example Plugin
    Plugin URI: http://example.com/wordpress-plugins/my-plugin
    Description: A plugin to create dashboard widgets in WordPress
    Version: 1.0
    Author: Brad Williams
    Author URI: http://wrox.com
    License: GPLv2
    */
 
    add_action( 'wp_dashboard_setup', 'boj_dashboard_example_widgets' );
 
    function boj_dashboard_example_widgets() {
        // 创建一个自定义的控制板小工具
        wp_add_dashboard_widget( 
            'dashboard_custom_feed',
            'My Plugin Information',
            'boj_dashboard_example_display',
            'boj_dashboard_example_setup'
        );
    }
 
    function boj_dashoboard_example_display() {
        // 加载小工具选项
        boj_option = get_option( 'boj_dashboard_widget_rss ');
 
        // 如果选项为空，则设置默认值
        $boj_rss_feed = ( $boj_option ) ? $boj_option : 'http://wordpress.org/news/feed/';
 
        // 获得 RSS 源并显示
        echo '<div class="rss-widget">';
 
        wp_widget_rss_output( array(
            'url' => $boj_rss_feed,
            'title' => 'RSS Feed News',
            'items' => 2,
            'show_summary' => 1,
            'show_author' => 0,
            'show_date' => 1
        ) );
 
        echo '</div>';
    }
 
     function boj_dashboard_example_setup() {
        // 在保持前检查选项是否设置
        if ( isset( $_POST['boj_rss_feed'] ) ) {
            // 从表单获得选项的值
           $boj_rss_feed = esc_url_raw( $_POST['boj_rss_feed'] );
 
           // 作为选项保存
           update_option( 'boj_dashboard_widget_rss', $boj_rss_feed );
        }
 
        // 如果有保存的 feed 加载
        $boj_rss_feed = get_option( 'boj_dashboard_widget_rss ');
        ?>
        <label for="feed">
            Rss Feed URL: <input type="text" name="boj_rss_feed" id="boj_rss_feed"
                value="<?php echo esc_url( $boj_rss_feed ); ?>" size="50" />
        </label>
        <?php
    }
?>

<?php /* Plugin Name: RSS Dashboard Widget Example Plugin Plugin URI: http://example.com/wordpress-plugins/my-plugin Description: A plugin to create dashboard widgets in WordPress Version: 1.0 Author: Brad Williams Author URI: http://wrox.com License: GPLv2 */ add_action( ‘wp_dashboard_setup’, ‘boj_dashboard_example_widgets’ ); function boj_dashboard_example_widgets() { // 创建一个自定义的控制板小工具 wp_add_dashboard_widget( ‘dashboard_custom_feed’, ‘My Plugin Information’, ‘boj_dashboard_example_display’, ‘boj_dashboard_example_setup’ ); } function boj_dashoboard_example_display() { // 加载小工具选项 boj_option = get_option( ‘boj_dashboard_widget_rss ‘); // 如果选项为空，则设置默认值 $boj_rss_feed = ( $boj_option ) ? $boj_option : ‘http://wordpress.org/news/feed/’; // 获得 RSS 源并显示 echo ‘<div class=”rss-widget”>’; wp_widget_rss_output( array( ‘url’ => $boj_rss_feed, ‘title’ => ‘RSS Feed News’, ‘items’ => 2, ‘show_summary’ => 1, ‘show_author’ => 0, ‘show_date’ => 1 ) ); echo ‘</div>’; } function boj_dashboard_example_setup() { // 在保持前检查选项是否设置 if ( isset( $_POST[‘boj_rss_feed’] ) ) { // 从表单获得选项的值 $boj_rss_feed = esc_url_raw( $_POST[‘boj_rss_feed’] ); // 作为选项保存 update_option( ‘boj_dashboard_widget_rss’, $boj_rss_feed ); } // 如果有保存的 feed 加载 $boj_rss_feed = get_option( ‘boj_dashboard_widget_rss ‘); ?> <label for=”feed”> Rss Feed URL: <input type=”text” name=”boj_rss_feed” id=”boj_rss_feed” value=”<?php echo esc_url( $boj_rss_feed ); ?>” size=”50″ /> </label> <?php } ?>

元数据框 ( meta boxes )

WordPress 在 post，page，和 link 管理页面中提供多个块 ( sections ) 或者元数据框。这些元数据框让你可以方便的向内容中添加附加到数据。例如，post 的 tags 元数据框让你可以设置文章的 tags。

添加一个自定义元数据框

要在 WordPress 中添加一个自定义的元数据框，使用 add_meta_box() 函数。这个函数可以让你定义元数据框的方方面面。下面是这个函数的用法：

1
2
3

<?php
    add_meta_box( id, title, callback, page, context, priority, callback_args ); 
?>

<?php add_meta_box( id, title, callback, page, context, priority, callback_args ); ?>

add_meta_box() 函数接受下面的参数：

  • id — 包围元数据框的 DIV 的 CSS ID
  • title — 元数据框显示的标题名称
  • callback — 用来显示元数据框内容的回调函数
  • page — 元数据框要显示的页面
  • context — 元数据框要出现在这个页面的某个部分
  • priority — 元数据框显示的优先级
  • callback_args — 要传入回调函数的参数

下面向 post 页面添加一个自定义的元数据框。

1
2
3
4
5
6
7
8
9
10
11

<?php
    add_action( 'add_meta_boxes', 'boj_mbe_create' );
 
    function boj_mbe_create() {
        add_meta_box( 'boj-meta', 'My Custom Meta Box', 'boj_mbe_function', 'post', 'normal', 'high' );
    }
 
    function boj_mbe_function() {
        echo 'Welcom to my meta box!';
    }
?>

<?php add_action( ‘add_meta_boxes’, ‘boj_mbe_create’ ); function boj_mbe_create() { add_meta_box( ‘boj-meta’, ‘My Custom Meta Box’, ‘boj_mbe_function’, ‘post’, ‘normal’, ‘high’ ); } function boj_mbe_function() { echo ‘Welcom to my meta box!’; } ?>

使用 add_meta_boxes 动作钩子触发 boj_mbe_create() 函数来添加一个新的元数据框。注意，将 context 参数设置为 normal，并将 priority 设置为 high，则这个元数据框直接显示在 post 页面 内容编辑器 的下面。

保存元数据框的数据

元数据框的真正作用是用来保存数据到一篇文章、一个页面或者 WordPress 中其他类型的内容。和 content 关联的所有数据都叫做元数据。在 WordPress 编辑页面，用来保存元数据的 “自定义字段” 默认存在。自定义字段是向 content 添加元数据的快速方法。在 Part-11 “扩展文章” 包含更多关于元数据的信息，但你需要理解在元数据框中保存数据概念。

在下面的例子中，在 “文章” 页面创建一个元数据框，并保存两个字段的元数据到文章中。

1
2
3
4
5
6
7
8

<?php
    add_action( 'add_meta_boxes', 'boj_mbe_create' );
 
    function boj_mbe_create() {
        // 创建元数据框
        add_meta_box( 'boj-meta', 'My Custom Meta Box', 'boj_mbe_function', 'post', 'normal', 'high' );
    }
?>

<?php add_action( ‘add_meta_boxes’, ‘boj_mbe_create’ ); function boj_mbe_create() { // 创建元数据框 add_meta_box( ‘boj-meta’, ‘My Custom Meta Box’, ‘boj_mbe_function’, ‘post’, ‘normal’, ‘high’ ); } ?>

创建过程和前面一个例子类似，下面创建用来显示 form 字段的函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<?php
    function boj_mbe_function( $post ) {
        // 获取元数据的值如果存在
        $boj_mbe_name = get_post_meta( $post->ID, '_boj_mbe_name', true );
        $boj_mbe_costume = get_post_meta( $post->ID, '_boj_mbe_costume', true );
 
        echo '请填写下面的信息: ';
        ?>
        <p>Name: <input type="text" name="boj_mbe_name" value="
            <?php echo esc_attr( $boj_mbe_name ); ?>" /></p>
        <p>Costume:
            <select name="boj_mbe_costume">
                <option value="vampire" <?php selected( $boj_mbe_costume, 'vampire' ); ?>
                    >Vampire
                </option>
                <option value="zombie" <?php selected( $boj_mbe_costume, 'zombie' ); ?>
                    >Zombie 
                </option>
                <option value="smurf" <?php selected( $boj_mbe_costume, 'smurf' ); ?>
                    >Smurf
                </option>
            </select>
            </p>
            <?php
    }
?>

<?php function boj_mbe_function( $post ) { // 获取元数据的值如果存在 $boj_mbe_name = get_post_meta( $post->ID, ‘_boj_mbe_name’, true ); $boj_mbe_costume = get_post_meta( $post->ID, ‘_boj_mbe_costume’, true ); echo ‘请填写下面的信息: ‘; ?> <p>Name: <input type=”text” name=”boj_mbe_name” value=” <?php echo esc_attr( $boj_mbe_name ); ?>” /></p> <p>Costume: <select name=”boj_mbe_costume”> <option value=”vampire” <?php selected( $boj_mbe_costume, ‘vampire’ ); ?> >Vampire </option> <option value=”zombie” <?php selected( $boj_mbe_costume, ‘zombie’ ); ?> >Zombie </option> <option value=”smurf” <?php selected( $boj_mbe_costume, ‘smurf’ ); ?> >Smurf </option> </select> </p> <?php } ?>

首先要注意的是 $post 对象作为一个参数传递到你自定义的函数。这使得你可以访文章对象中所有可用的数据，这个例子中用到了 post ID。

接着从 WordPress 中获得两个元数据的值，如果存在的话。使用 get_post_meta() 函数来实现。这个函数接受3个参数。

  • post_id — 要加载元数据的文章 ID
  • key — 要加载的元数据的唯一的名称
  • single — 将 string 返回成一个数组(false) 还是单独的 string (true)

如果你创建一篇新文章，这两个元数据还不存在，因为他们还没有被创建。注意到，这里并不用添加一个提交按钮或者 form 标签。使用 save_post 动作钩子来完成保存，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
    // 用钩子来保存元数据
    add_action( 'save_post', 'boj_mbe_save_meta' );
 
    function boj_mbe_save_meta( $post_id ) {
        // 验证元数据存在
        if ( isset( $_POST['boj_mbe_name'] ) ) {
            // 保存元数据
            update_post_meta( $post_id, '_boj_mbe_name',
                strip_tags( $_POST['boj_mbe_name'] ) );
            update_post_meta( $post_id, '_boj_mbe_costume',
                strip_tags( $_POST['boj_mbe_costume'] ) );
        }
    }
?>

<?php // 用钩子来保存元数据 add_action( ‘save_post’, ‘boj_mbe_save_meta’ ); function boj_mbe_save_meta( $post_id ) { // 验证元数据存在 if ( isset( $_POST[‘boj_mbe_name’] ) ) { // 保存元数据 update_post_meta( $post_id, ‘_boj_mbe_name’, strip_tags( $_POST[‘boj_mbe_name’] ) ); update_post_meta( $post_id, ‘_boj_mbe_costume’, strip_tags( $_POST[‘boj_mbe_costume’] ) ); } } ?>

首先使用 add_action() 函数来触发 save_post 动作钩子。它会在文章保存的时候调用 boj_mbe_save_meta() 函数。这个函数保存用户输入到元数据框中的数据。注意将 $post_id 变量作为参数传递给你的函数。post ID 在保存元数据的时候用到。最后使用 update_post_meta() 函数添加或者更新用户输入的元数据。这个函数接受4个参数。

  • post_id — 要保存元数据的文章 ID
  • meta_key — 要保存的元数据的唯一的名称
  • meta_value — 要保存的元数据的值
  • prev_value — 元数据字段的旧值，用来区分具有相同名字的多个字段。

这个例子中只用到了前面的三个参数，第四个参数是可选的。

如果你的元数据名称以 “下划线(_)” 开始，那么它不会出现在 WordPress 默认的自定义字段元数据框中。这样便可以消除用户在输入元数据时候的疑惑。

这样便成功的创建了自定义元数据并保存到 WordPress 中。下面来回顾真个代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

<?php
    /*
    Plugin Name: Meta Box Example Plugin
    Plugin URI: http://example.com/wordpress-plugins/my-plugin
    Description: A plugin to create meta boxes in WordPress
    Version: 1.0
    Author: Brad Williams
    Author URI: http://wrox.com
    License: GPLv2
    */
 
    add_action( 'add_meta_boxes', 'boj_mbe_create' );
 
    function boj_mbe_create() {
        // 创建元数据框
        add_meta_box( 'boj-meta', 'My Custom Meta Box', 'boj_mbe_function', 'post', 'normal', 'high' );
    }
 
    function boj_mbe_function( $post ) {
        // 获取元数据的值如果存在
        $boj_mbe_name = get_post_meta( $post->ID, '_boj_mbe_name', true );
        $boj_mbe_costume = get_post_meta( $post->ID, '_boj_mbe_costume', true );
 
        echo '请填写下面的信息: ';
        ?>
        <p>Name: <input type="text" name="boj_mbe_name" value="
            <?php echo esc_attr( $boj_mbe_name ); ?>" /></p>
        <p>Costume:
            <select name="boj_mbe_costume">
                <option value="vampire" <?php selected( $boj_mbe_costume, 'vampire' ); ?>
                    >Vampire
                </option>
                <option value="zombie" <?php selected( $boj_mbe_costume, 'zombie' ); ?>
                    >Zombie 
                </option>
                <option value="smurf" <?php selected( $boj_mbe_costume, 'smurf' ); ?>
                    >Smurf
                </option>
            </select>
            </p>
            <?php
    }
 
    // 用钩子来保存元数据
    add_action( 'save_post', 'boj_mbe_save_meta' );
 
    function boj_mbe_save_meta( $post_id ) {
        // 验证元数据存在
        if ( isset( $_POST['boj_mbe_name'] ) ) {
            // 保存元数据
            update_post_meta( $post_id, '_boj_mbe_name',
                strip_tags( $_POST['boj_mbe_name'] ) );
            update_post_meta( $post_id, '_boj_mbe_costume',
                strip_tags( $_POST['boj_mbe_costume'] ) );
        }
    }
?>

<?php /* Plugin Name: Meta Box Example Plugin Plugin URI: http://example.com/wordpress-plugins/my-plugin Description: A plugin to create meta boxes in WordPress Version: 1.0 Author: Brad Williams Author URI: http://wrox.com License: GPLv2 */ add_action( ‘add_meta_boxes’, ‘boj_mbe_create’ ); function boj_mbe_create() { // 创建元数据框 add_meta_box( ‘boj-meta’, ‘My Custom Meta Box’, ‘boj_mbe_function’, ‘post’, ‘normal’, ‘high’ ); } function boj_mbe_function( $post ) { // 获取元数据的值如果存在 $boj_mbe_name = get_post_meta( $post->ID, ‘_boj_mbe_name’, true ); $boj_mbe_costume = get_post_meta( $post->ID, ‘_boj_mbe_costume’, true ); echo ‘请填写下面的信息: ‘; ?> <p>Name: <input type=”text” name=”boj_mbe_name” value=” <?php echo esc_attr( $boj_mbe_name ); ?>” /></p> <p>Costume: <select name=”boj_mbe_costume”> <option value=”vampire” <?php selected( $boj_mbe_costume, ‘vampire’ ); ?> >Vampire </option> <option value=”zombie” <?php selected( $boj_mbe_costume, ‘zombie’ ); ?> >Zombie </option> <option value=”smurf” <?php selected( $boj_mbe_costume, ‘smurf’ ); ?> >Smurf </option> </select> </p> <?php } // 用钩子来保存元数据 add_action( ‘save_post’, ‘boj_mbe_save_meta’ ); function boj_mbe_save_meta( $post_id ) { // 验证元数据存在 if ( isset( $_POST[‘boj_mbe_name’] ) ) { // 保存元数据 update_post_meta( $post_id, ‘_boj_mbe_name’, strip_tags( $_POST[‘boj_mbe_name’] ) ); update_post_meta( $post_id, ‘_boj_mbe_costume’, strip_tags( $_POST[‘boj_mbe_costume’] ) ); } } ?>

元数据框 — 提高

现在你已经明白了元数据框如何工作，下面来建立一个更复杂的。下面的例子中，允许用户从 WordPress 的 Media Library 中选择一个图片并在元数据框中保存这个图片的 URL。

  • 像前面一样使用 add_meta_boxes 动作钩子来执行你的创建元数据框的自定义函数
  • 创建函数来显示元数据框的内容
  • 调用 save_post 动作钩子来执行自定义的 boj_mbe_image_save_meta() 函数来保存元数据
  • 添加所需的 js 函数来调用媒体库选择界面: 创建 boj-meta-image.js 文件。
  • 在你的插件中调用上面创建的 JavaScript。
  • 使用 wp_enqueue_styles() 添加相关的 CSS 样式：thickbox
    • 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

    <?php
    add_action( 'add_meta_boxes', 'boj_mbe_image_create' );
 
    function boj_mbe_image_create() {
        // 创建自定义的元数据框
        add_meta_box( 'boj-image-meta', 'Set Image', 'boj_mbe_image_function', 'post', 'normal', 'high' );
    }
 
    function boj_mbe_image_function( $post ) {
        // 的到元数据的值，如果存在
        boj_mbe_image = get_post_meta( $post->ID, '_boj_mbe_image', true );
        ?>
        Image <input id="boj_mbe_image" type="text" size="75"
            name="boj_mbe_image" value="<?php echo esc_url( $boj_mbe_image ); ?>" />
        <input id="upload_image_button" type="button"
            value="Media Library Image" class="button-secondary" />
        <br /> 输入一个图片的 URL 或从媒体库中选择一个图片
        <?php
    }
 
    // 钩到保存元数据的钩子
    add_action( 'save_post', 'boj_mbe_image_save_meta' );
 
    function boj_mbe_image_save_meta( $post_id ) {
        // 验证元数据是否设置
        if ( isset( $_POST['boj_mbe_image'] ) ) {
            // 保存元数据
            update_post_meta( $post_id, '_boj_mbe_image',
                esc_url_raw( $_POST['boj_mbe_image'] ) );
        }
    }
 
    // 包含页面检测的 script 动作
    add_action('admin_print_scripts-post.php', 'boj_mbe_image_admin_scripts');
    add_action('admin_print_scripts-post-new.php', 'boj_mbe_image_admin_scripts');
 
    function boj_mbe_image_admin_scripts() {
        wp_enqueue_script( 'boj-image-upload',
            plugins_url( '/boj-meta-box/boj-meta-image.js' ),
            array( 'jquery', 'media-upload', 'thickbox' )
        );
    }
 
    // 包含页面检测的 css style  动作
    add_action('admin_print_styles-post.php', 'boj_mbe_image_admin_styles');
    add_action('admin_print_styles-post-new.php', 'boj_mbe_image_admin_styles');
 
    function boj_mbe_image_admin_styles() {
        wp_enqueue_style( 'thickbox' );
    }
?>

    <?php add_action( ‘add_meta_boxes’, ‘boj_mbe_image_create’ ); function boj_mbe_image_create() { // 创建自定义的元数据框 add_meta_box( ‘boj-image-meta’, ‘Set Image’, ‘boj_mbe_image_function’, ‘post’, ‘normal’, ‘high’ ); } function boj_mbe_image_function( $post ) { // 的到元数据的值，如果存在 boj_mbe_image = get_post_meta( $post->ID, ‘_boj_mbe_image’, true ); ?> Image <input id=”boj_mbe_image” type=”text” size=”75″ name=”boj_mbe_image” value=”<?php echo esc_url( $boj_mbe_image ); ?>” /> <input id=”upload_image_button” type=”button” value=”Media Library Image” class=”button-secondary” /> <br /> 输入一个图片的 URL 或从媒体库中选择一个图片 <?php } // 钩到保存元数据的钩子 add_action( ‘save_post’, ‘boj_mbe_image_save_meta’ ); function boj_mbe_image_save_meta( $post_id ) { // 验证元数据是否设置 if ( isset( $_POST[‘boj_mbe_image’] ) ) { // 保存元数据 update_post_meta( $post_id, ‘_boj_mbe_image’, esc_url_raw( $_POST[‘boj_mbe_image’] ) ); } } // 包含页面检测的 script 动作 add_action(‘admin_print_scripts-post.php’, ‘boj_mbe_image_admin_scripts’); add_action(‘admin_print_scripts-post-new.php’, ‘boj_mbe_image_admin_scripts’); function boj_mbe_image_admin_scripts() { wp_enqueue_script( ‘boj-image-upload’, plugins_url( ‘/boj-meta-box/boj-meta-image.js’ ), array( ‘jquery’, ‘media-upload’, ‘thickbox’ ) ); } // 包含页面检测的 css style 动作 add_action(‘admin_print_styles-post.php’, ‘boj_mbe_image_admin_styles’); add_action(‘admin_print_styles-post-new.php’, ‘boj_mbe_image_admin_styles’); function boj_mbe_image_admin_styles() { wp_enqueue_style( ‘thickbox’ ); } ?>

    boj-meta-image.js 文件 中的 JQuery 函数，完成从媒体库中选取图片的功能。

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

    <?php
    jQuery(document).ready(function($) {
        var formfield = null;
 
        $('#upload_image_button').click(function() {
            $('html').addClass('Image');
            formfield = $('#boj_mbe_image').attr('name');
            tb_show( ' ', 'media-upload.php?type=image&TB_iframe=true' );
            return false;
        });
 
        // 用户插入文件到文章中
        // 仅仅当用户开始执行上面的过程才调用自定义
        // window.send_to_editor(html) 是 wp 通常处理接收到的数据的做法
 
        window.original_send_to_editor = window.send_to_editor;
        window.send_to_editor = function(html) {
            var fileurl;
 
            if ( formfield != null ) {
                fileurl = $('img', html).attr('src');
 
                $('#boj_mbe_image').val(fileurl);
 
                tb_remove();
 
                $('html').removeClass('Image');
                formfield = null;
            } else {
                window.original_send_to_editor(html);
            }
        };
    });
?>

    <?php jQuery(document).ready(function($) { var formfield = null; $(‘#upload_image_button’).click(function() { $(‘html’).addClass(‘Image’); formfield = $(‘#boj_mbe_image’).attr(‘name’); tb_show( ‘ ‘, ‘media-upload.php?type=image&TB_iframe=true’ ); return false; }); // 用户插入文件到文章中 // 仅仅当用户开始执行上面的过程才调用自定义 // window.send_to_editor(html) 是 wp 通常处理接收到的数据的做法 window.original_send_to_editor = window.send_to_editor; window.send_to_editor = function(html) { var fileurl; if ( formfield != null ) { fileurl = $(‘img’, html).attr(‘src’); $(‘#boj_mbe_image’).val(fileurl); tb_remove(); $(‘html’).removeClass(‘Image’); formfield = null; } else { window.original_send_to_editor(html); } }; }); ?>

    首先，这段代码在 upload_image_button 被点击的时候打开媒体库弹出层。第二部分代码获得图片的 URL 并把它插入到你的元数据表单的图片 URL text 字段，即 boj_mbe_image。

    保持一致性

    有人说一致性是优秀的 UI 设计的一个原则。创建一个 WordPress 插件也没什么区别，所以最好让你的插件和 WordPress 用户界面尽可能的接近。这有助于对终端用户保持界面的一致性，同时可以使你的插件从一开始就提供专业的用户界面。

    WordPress 提供了许多不同的可以直接应用到插件中的样式。在这一节你会学到如何在插件中使用 WordPress 提供的样式。作为示例，创建一个简单的有配置页面的插件：

    1
2
3
4
5
6
7
8
9
10

    <?php
    add_action( 'admin_menu', 'boj_styling_create_menu' );
 
    function boj_styling_create_menu() {
        // 创建顶级菜单
        add_menu_page( 'My Plugin Settings', 'Plugin Styling', 
            'manage_opotion', __FILE__, 'boj_styling_settings' );
    }
 
?>

    <?php add_action( ‘admin_menu’, ‘boj_styling_create_menu’ ); function boj_styling_create_menu() { // 创建顶级菜单 add_menu_page( ‘My Plugin Settings’, ‘Plugin Styling’, ‘manage_opotion’, __FILE__, ‘boj_styling_settings’ ); } ?>

    这一部分都会修改 boj_styling_settings() 函数。

    使用 WordPress UI

    使用 WordPress 样式最重要的部分就是将你的插件包围在 wrap 类 的 div中。

    1
2
3

    <div class="wrap">
    Plugin Page
</div>

    <div class=”wrap”> Plugin Page </div>

    这个类是所有管理界面样式的基础。

    headings

    WordPress 对所有的 heading 标签都提供了自定义样式。下面来看看这些 heading 标签如何显示：

    1
2
3
4
5
6
7
8
9
10
11
12
13

    <?php
    function boj_styling_settings() {
        ?>
        <div class="wrap">
            <h2>My Plugin</h2>
            <h3>My Plugin</h3>
            <h4>My Plugin</h4>
            <h5>My Plugin</h5>
            <h6>My Plugin</h6>
        </div>
        <?php
    }
?>

    <?php function boj_styling_settings() { ?> <div class=”wrap”> <h2>My Plugin</h2> <h3>My Plugin</h3> <h4>My Plugin</h4> <h5>My Plugin</h5> <h6>My Plugin</h6> </div> <?php } ?>

    注意是没有定义 <h1> 标签的。因为 <h1> 标签是用在你的网站顶部显示网站名称的。所以你应该从 <h2> 标签开始。

    图标 Icons

    WordPress 为每一个部分提供了许多不同的图标。这些图标同样可以在你的插件中使用。

    1
2
3
4
5
6
7
8
9
10
11
12
13

    <?php
    <div id="icon-index" class="icon32"></div>
    <div id="icon-edit" class="icon32"></div>
    <div id="icon-upload" class="icon32"></div>
    <div id="icon-link-manager" class="icon32"></div>
    <div id="icon-edit-pages" class="icon32"></div>
    <div id="icon-edit-comments" class="icon32"></div>
    <div id="icon-themes" class="icon32"></div>
    <div id="icon-plugins" class="icon32"></div>
    <div id="icon-users" class="icon32"></div>
    <div id="icon-tools" class="icon32"></div>
    <div id="icon-options-general" class="icon32"></div>
?>

    <?php <div id=”icon-index” class=”icon32″></div> <div id=”icon-edit” class=”icon32″></div> <div id=”icon-upload” class=”icon32″></div> <div id=”icon-link-manager” class=”icon32″></div> <div id=”icon-edit-pages” class=”icon32″></div> <div id=”icon-edit-comments” class=”icon32″></div> <div id=”icon-themes” class=”icon32″></div> <div id=”icon-plugins” class=”icon32″></div> <div id=”icon-users” class=”icon32″></div> <div id=”icon-tools” class=”icon32″></div> <div id=”icon-options-general” class=”icon32″></div> ?>

    WordPress 提供了一个函数 screen_icon() 来生成这些图标的 div，而并不是硬编码的。这个函数接受一个参数，即你想加载的图标。

    现在修改 boj_styling_sttings() 函数来显示一个图标和头部。

    1
2
3
4
5
6
7
8
9
10

    <?php
    function boj_styling_settings() {
        ?>
        <div class="wrap">
            <?php screen_icon( 'plugins' ); ?>
            <h2>My Plugin</h2>
        </div>
        <?php
    }
?>

    <?php function boj_styling_settings() { ?> <div class=”wrap”> <?php screen_icon( ‘plugins’ ); ?> <h2>My Plugin</h2> </div> <?php } ?>

    消息

    当你的插件中一个动作发生是，例如保存设置，显示一个信息高速用户是否保存成功非常的重要。WordPress 提供了一些不同的样式来显示消息。

    1
2
3
4
5
6
7
8
9
10
11

    <?php
    function boj_styling_settings() {
        ?>
        <div class="wrap">
            <h2>My Plugin</h2>
            <div id="message" class="updated">设置保存成功</div>
            <div id="message" class="error">保存出现错误</div>
        </div>
        <?php
    }
?>

    <?php function boj_styling_settings() { ?> <div class=”wrap”> <h2>My Plugin</h2> <div id=”message” class=”updated”>设置保存成功</div> <div id=”message” class=”error”>保存出现错误</div> </div> <?php } ?>

    按钮

    在你的表单中添加按钮是，你可以使用多个类。首先是 button-primary 类和 button-secondary 类。这两个类为你的按钮设置和 WordPress UI 相匹配的样式。

    1
2
3
4
5
6
7
8

    <p>
<input type="submit" name="Save" value="Save Options" />
<input type="submit" name="Save" value="Save Options" class="button-primary" />
</p>
<p>
<input type="submit" name="Secondary" value="Secondary Button" />
<input type="submit" name="Secondary" value="Secondary Button" class="button-secondary " />
</p>

    <p> <input type=”submit” name=”Save” value=”Save Options” /> <input type=”submit” name=”Save” value=”Save Options” class=”button-primary” /> </p> <p> <input type=”submit” name=”Secondary” value=”Secondary Button” /> <input type=”submit” name=”Secondary” value=”Secondary Button” class=”button-secondary ” /> </p>

    同时你还可以使用 button-highlighted 类来强调特殊的按钮。

    1
2
3
4

    <p>
<input type="submit" name="Secondary" value="Secondary Button" class="button-secondary " />
<input type="submit" name="Highlighted" value="Button Highlighted" class="button-highlighted" />
</p>

    <p> <input type=”submit” name=”Secondary” value=”Secondary Button” class=”button-secondary ” /> <input type=”submit” name=”Highlighted” value=”Button Highlighted” class=”button-highlighted” /> </p>

    超链接同样可以通过应用适合的类来代替按钮。

    1
2
3
4

    <a href-"#">Search</a>
<a href="#" class="button-secondary'>Search</a>
<a href="#" class="button-highlighted'>Search</a>
<a href="#" class="button-primary'>Search</a>

    <a href-“#”>Search</a> <a href=”#” class=”button-secondary’>Search</a> <a href=”#” class=”button-highlighted’>Search</a> <a href=”#” class=”button-primary’>Search</a>

    超链接

    在 wrap 类 内部的超链接自动应用了标准的 WordPress 管理页面的超链接样式。不过，你可以使用不同的方式来改变这些默认样式。

    1
2
3
4
5
6
7
8

    <div class="wrap">
    <?php screen_icon( 'plugins' ); ?> <h2> My Plugin</h2>
    <h2><a href-"#">Test</a>
    <h3><a href="#">Test</a>
    <h4><a href="#">Test</a>
    <h5><a href="#">Test</a>
    <a href="#">Test</a>
</div>

    <div class=”wrap”> <?php screen_icon( ‘plugins’ ); ?> <h2> My Plugin</h2> <h2><a href-“#”>Test</a> <h3><a href=”#”>Test</a> <h4><a href=”#”>Test</a> <h5><a href=”#”>Test</a> <a href=”#”>Test</a> </div>

    表单项

    WordPress 提供一个专门为表单元素的特殊的 table 类叫做 form-table。这个类用在所有的 WordPress 管理面板的表单中，包括每一个设置页面。这个是创建任何类型的配置选项的时候很有用的一个类。

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

    <?php
    <div class="wrap">
        <?php screen_icon( 'plugins' ); ?>
        <h2>My Plugin</h2>
        <form method="POST" action="">
            <table class="form-table">
                <tr valign="top">
                    <th scope="row"><label for="lname">Last Name</label></th>
                    <td><input id="lname" maxlength="45" size="25" name="lname" /></td>
                </tr>
                <tr valign="top">
                    <th scope="row"><label for="fname">First Name</label></th>
                    <td><input maxlength="45" size="25" name="fname" /></td>
                </tr>
                <tr valign="top">
                    <th scope="row"><label for="color">Favorite Color</label></th>
                    <td>
                        <select name="color">
                            <option value="orange">Orange</option>
                            <option value="black">Black</option>
                        </select>
                    </td>
                </tr>
                <tr valign="top">
                    <th scope="row"><label for="featured">Featured?</label></th>
                    <td><input type="checkbox" name="favorite" /></td>
                </tr>
                <tr valign="top">
                    <th scope="row"><label for="gender">Gender</label></th>
                    <td>
                        <input type="radio" name="gender" value="male" /> Male
                        <input type="radio" name="gender" value="female" /> Female
                    </td>
                </tr>
                <tr valign="top">
                    <th scope="row"><label for="bio">Bio</label></th>
                    <td><input maxlength="45" size="25" name="fname" /></td>
                </tr>
                <tr valign="top">
                    <th scope="row"><label for="fname">First Name</label></th>
                    <td><textarea name="bio"></textarea></td>
                </tr>
                <tr valign="top">
                    <td>
                        <input type="submit" name="save" value="Save Options"
                            class="button-primary" />
                        <input type="submit" name="reset" value="Reset"
                            class="button-secondary" />
                    </td>
                </tr>
            </table>
        </form>
    </div>
?>

    <?php <div class=”wrap”> <?php screen_icon( ‘plugins’ ); ?> <h2>My Plugin</h2> <form method=”POST” action=””> <table class=”form-table”> <tr valign=”top”> <th scope=”row”><label for=”lname”>Last Name</label></th> <td><input id=”lname” maxlength=”45″ size=”25″ name=”lname” /></td> </tr> <tr valign=”top”> <th scope=”row”><label for=”fname”>First Name</label></th> <td><input maxlength=”45″ size=”25″ name=”fname” /></td> </tr> <tr valign=”top”> <th scope=”row”><label for=”color”>Favorite Color</label></th> <td> <select name=”color”> <option value=”orange”>Orange</option> <option value=”black”>Black</option> </select> </td> </tr> <tr valign=”top”> <th scope=”row”><label for=”featured”>Featured?</label></th> <td><input type=”checkbox” name=”favorite” /></td> </tr> <tr valign=”top”> <th scope=”row”><label for=”gender”>Gender</label></th> <td> <input type=”radio” name=”gender” value=”male” /> Male <input type=”radio” name=”gender” value=”female” /> Female </td> </tr> <tr valign=”top”> <th scope=”row”><label for=”bio”>Bio</label></th> <td><input maxlength=”45″ size=”25″ name=”fname” /></td> </tr> <tr valign=”top”> <th scope=”row”><label for=”fname”>First Name</label></th> <td><textarea name=”bio”></textarea></td> </tr> <tr valign=”top”> <td> <input type=”submit” name=”save” value=”Save Options” class=”button-primary” /> <input type=”submit” name=”reset” value=”Reset” class=”button-secondary” /> </td> </tr> </table> </form> </div> ?>

    表格

    WordPress 中的表格使用 widefat 类可以快速的添加样式。

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    <table class="widefat">
    <thead>
        <tr>
            <th>Name</th>
            <th>Favorite Holiday</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Favorite Holiday</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>First</td>
            <td>Second</td>
        </tr>
    </tbody>
</table>

    <table class=”widefat”> <thead> <tr> <th>Name</th> <th>Favorite Holiday</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Favorite Holiday</th> </tr> </tfoot> <tbody> <tr> <td>First</td> <td>Second</td> </tr> </tbody> </table>

    分页

    如果你的插件包括一个记录的列表，你或许需要分页。WordPress 有几个不同的类提供分页样式。

    1
2
3
4
5
6
7
8
9
10

    <div class="tablenav">
    <div class="tablenav-pages">
        <span class="displaying-num">Displaying 1-20 of 66</span>
        <span class="page-numbers current">1</span>
        <a href="#" class="page-numbers">2</a>
        <a href="#" class="page-numbers">3</a>
        <a href="#" class="page-numbers">4</a>
        <a href="#" class="next page-numbers">»</a>
    </div>
</div>

    <div class=”tablenav”> <div class=”tablenav-pages”> <span class=”displaying-num”>Displaying 1-20 of 66</span> <span class=”page-numbers current”>1</span> <a href=”#” class=”page-numbers”>2</a> <a href=”#” class=”page-numbers”>3</a> <a href=”#” class=”page-numbers”>4</a> <a href=”#” class=”next page-numbers”>»</a> </div> </div>

    总结

    本节介绍了许多不同的方法在 WordPress 中整合你的插件。你可能不会在插件中全部用的，但是关键是了解插件开发过程中有哪些是可用的。

    阅读该系列的其他文章： 上一篇：WordPress 插件开发教程 Part 3 – 钩子( Hooks )

    赞(0)
    版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com 特别注意：本站所有转载文章言论不代表本站观点！ 本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。未经允许不得转载：IDC资讯中心 » WordPress 插件开发教程 Part 4 – 与WordPress整合
    分享到： 更多 (0)
    标签：

    相关推荐

    热门标签

    ldquo (1370)win (1324)活动 (1166)ios (1162)rdquo (818)微信 (747)iphone (728)小米 (722)windows (706)手机 (698)酷跑 (686)飞车 (540)天天 (492)qq (491)网站 (457)全民 (442)discuz (408)充值 (389)安装 (368)更新 (321)华为 (300)浏览器 (292)支付宝 (289)三星 (266)note (264)教程 (262)预览版 (261)小编 (258)越狱 (254)linux (248)

    热门文章

    分类目录