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

本节内容

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

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

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

文章目录

Toggle

添加菜单和子菜单

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

创建顶级菜单

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

&lt;?php
	add_menu_page( page_title, menu_title, capability, menu_slug, function, icon_url, position );
?&gt;

add_menu_page() 所接受的参数：

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

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

&lt;?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 )
        );
    }
?&gt;

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

添加子菜单

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

&lt;?php
    add_submenu_page( parent_slug, page_title, menu_title, capability, menu_slug, function );
?&gt;

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

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

&lt;?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
        );
    }
?&gt;

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

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

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

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

&lt;?php
    add_options_page( page_title, menu_title, capability, menu_slug, function );
?&gt;

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

示例：

&lt;?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'
        );
    }
?&gt;

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

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 类来创建小工具。了解一下这个类有助于理解小工具是如何工作的。

&lt;?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 ) {
            // 显示小工具
        }
    }
?&gt;

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

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

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

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

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

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

&lt;?php
    // boj_widgetexample_widget_my_info class
    class boj_widgetexample_widget_my_info extends WP_Widget {
 
    }
?&gt;

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

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

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

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

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

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

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

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

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

&lt;?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;
    }
?&gt;

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

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

&lt;?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 '&lt;p&gt; Fav Movie: ' . $movie . '&lt;/p&gt;';
        echo '&lt;p&gt; Fav Song: ' . $song . '&lt;/p&gt;';
        echo $after_widget;
    }
?&gt;

第一步是提取 $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 中。

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

&lt;?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' =&gt; 'boj_widgetexample_widget_class',
                'description' =&gt; 'Display a user\'s favorite movie and song.'
            );
            $this-&gt;WP_Widget( 'boj_widgetexample_widget_my_info', 'My Info Widget', $widget_ops );
        }
 
		 // 创建小工具的设置表单
        function form($instance) {
            $defaults = array( 'title' =&gt; 'My Info', 'movie' =&gt; '', 'song' =&gt; '' );
            $instance = wp_parse_args( (array) $instance, $defaults );
            $title = $instance['title'];
            $movie = $instance['movie'];
            $song = $instance['song'];
            ?&gt;
 
            &lt;p&gt;Title: &lt;input class=&quot;widefat&quot; name=&quot;
                &lt;?php echo $this-&gt;get_field_name( 'title' ); ?&gt;&quot; type=&quot;text&quot;
                value=&quot;&lt;?php echo esc_attr( $title ); ?&gt;&quot; /&gt;&lt;/p&gt;
            &lt;p&gt; Favorite Movie: &lt;input class=”widefat&quot; name=&quot;
                &lt;?php echo $this-&gt; get_field_name( 'movie' ); ?&gt; &quot;type=&quot;text&quot;
                value=&quot; &lt; ?php echo esc_attr( $movie ); ?&gt; &quot; /&gt; &lt;/p&gt;
            &lt;p&gt; Favorite Song: &lt;textarea class=&quot;widefat&quot; name=&quot;
                &lt;?php echo $this-&gt; get_field_name( 'song' ); ?&gt; &quot; /&gt;
                &lt;?php echo esc_attr( $song ); ?&gt; &lt;/textarea&gt; &lt;/p&gt;
            &lt;?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 '&lt;p&gt; Fav Movie: ' . $movie . '&lt;/p&gt;';
            echo '&lt;p&gt; Fav Song: ' . $song . '&lt;/p&gt;';
            echo $after_widget;
        }
    }
 
?&gt;

<?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 源并显示结果的小工具。首先，需要注册小工具。

&lt;?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' );
    }
?&gt;

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

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

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

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

<?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。

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

&lt;?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;
    }
?&gt;

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

&lt;?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' =&gt; $rss_feed,
                'title' =&gt; $title,
                'items' =&gt; $rss_items,
                'show_summary' =&gt; $rss_summary,
                'show_author' =&gt; 0,
                'show_date' =&gt; $rss_date
            ) );
        }
 
         echo $after_widget;
    }
?&gt;

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

回顾整个代码：

&lt;?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' =&gt; 'boj_awe_widget_class',
                'description' =&gt; 'Display an RSS feed with options.'
            );
            $this-&gt;WP_Widget( 'boj_awe_widget', 'Advaced RSS Widget', $widget_ops );
        }
 
        // 创建小工具的设置表单
        function form( $instance ) {
            $defaults = array(
                'title' =&gt; 'RSS Feed',
                'rss_feed' =&gt; 'http://strangework.com/feed',
                'rss_items' =&gt; '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'];
            ?&gt;
                &lt;p&gt;Title: &lt;input class=&quot;widefat&quot; name=&quot;
                    &lt;?php echo $this-&gt;get_field_name( 'title' ); ?&gt;&quot;
                    type = &quot;text&quot; value=&quot;&lt;?php echo esc_attr( $title ); ?&gt;&quot; /&gt;&lt;/p&gt;
                &lt;p&gt;RSS Feed: &lt;input class=&quot;widefat&quot; name=&quot;
                    &lt;?php echo $this-&gt;get_field_name( 'rss_feed' ); ?&gt;&quot;
                    type=&quot;text&quot; value=&quot;&lt;?php echo esc_attr( $rss_feed ); ?&gt;&quot; /&gt;&lt;/p&gt;
                &lt;p&gt;Items to Display:
                    &lt;select name=&quot;&lt;?php echo $this-&gt;get_field_name( 'rss_items' ); ?&gt;&quot;&gt;
                        &lt;option value=&quot;1&quot; &lt;?php selected( $rss_items, 1 ); ?&gt;&gt;1&lt;/option&gt;
                        &lt;option value=&quot;2&quot; &lt;?php selected( $rss_items, 2 ); ?&gt;&gt;2&lt;/option&gt;
                        &lt;option value=&quot;3&quot; &lt;?php selected( $rss_items, 3 ); ?&gt;&gt;3&lt;/option&gt;
                        &lt;option value=&quot;4&quot; &lt;?php selected( $rss_items, 4 ); ?&gt;&gt;4&lt;/option&gt;
                        &lt;option value=&quot;5&quot; &lt;?php selected( $rss_items, 5 ); ?&gt;&gt;5&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/p&gt;
                &lt;p&gt;Show Date?: &lt;input name=&quot;
                    &lt;?php echo $this-&gt;get_field_name( 'rss_date' ); ?&gt;&quot;
                    type=&quot;checkbox&quot; &lt;?php checked( $rss_date, 'on' ); ?&gt; /&gt;&lt;/p&gt;
                &lt;p&gt;Show Summary?: &lt;input name=&quot;
                    &lt;?php echo $this-&gt;get_field_name( 'rss_summary' ); ?&gt;&quot;
                    type=&quot;checkbox&quot; &lt;?php checked( $rss_summary, 'on' ); ?&gt; /&gt;&lt;/p&gt;
                &lt;?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' =&gt; $rss_feed,
                	'title' =&gt; $title,
                	'items' =&gt; $rss_items,
                	'show_summary' =&gt; $rss_summary,
                	'show_author' =&gt; 0,
                	'show_date' =&gt; $rss_date
            	) );
        	}
 
         	echo $after_widget;
    	}
	}
?&gt;

<?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() 函数。示例：

&lt;?php
    wp_add_dashboard_widget( widget_id, widget_name, callback, control_callback ); 
?&gt;

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

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

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

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

&lt;?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' 
        );
    }
?&gt;

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

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

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

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

&lt;?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 '&lt;p&gt;Please contact support@example.ccom to report bugs.&lt;/p&gt;';
    }
?&gt;

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

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

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

&lt;?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'
        );
    }
?&gt;

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

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

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

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

&lt;?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 ');
        ?&gt;
        &lt;label for=&quot;feed&quot;&gt;
            Rss Feed URL: &lt;input type=&quot;text&quot; name=&quot;boj_rss_feed&quot; id=&quot;boj_rss_feed&quot;
                value=&quot;&lt;?php echo esc_url( $boj_rss_feed ); ?&gt;&quot; size=&quot;50&quot; /&gt;
        &lt;/label&gt;
        &lt;?php
    }
?&gt;

这个函数处理的第一个任务是保存小工具的选项。在保存之前，都应该检查 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。

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

&lt;?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 : 'https://wordpress.org/news/feed/';
 
        // 获得 RSS 源并显示
        echo '&lt;div class=&quot;rss-widget&quot;&gt;';
 
        wp_widget_rss_output( array(
            'url' =&gt; $boj_rss_feed,
            'title' =&gt; 'RSS Feed News',
            'items' =&gt; 2,
            'show_summary' =&gt; 1,
            'show_author' =&gt; 0,
            'show_date' =&gt; 1
        ) );
 
        echo '&lt;/div&gt;';
    }
 
     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 ');
        ?&gt;
        &lt;label for=&quot;feed&quot;&gt;
            Rss Feed URL: &lt;input type=&quot;text&quot; name=&quot;boj_rss_feed&quot; id=&quot;boj_rss_feed&quot;
                value=&quot;&lt;?php echo esc_url( $boj_rss_feed ); ?&gt;&quot; size=&quot;50&quot; /&gt;
        &lt;/label&gt;
        &lt;?php
    }
?&gt;

<?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 : 'https://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() 函数。这个函数可以让你定义元数据框的方方面面。下面是这个函数的用法：

&lt;?php
    add_meta_box( id, title, callback, page, context, priority, callback_args ); 
?&gt;

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

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

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

&lt;?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!';
    }
?&gt;

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

保存元数据框的数据

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

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

&lt;?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' );
    }
?&gt;

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

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

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

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

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

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

&lt;?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'] ) );
        }
    }
?&gt;

首先使用 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 中。下面来回顾真个代码。

&lt;?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-&gt;ID, '_boj_mbe_name', true );
        $boj_mbe_costume = get_post_meta( $post-&gt;ID, '_boj_mbe_costume', true );
 
        echo '请填写下面的信息: ';
        ?&gt;
        &lt;p&gt;Name: &lt;input type=&quot;text&quot; name=&quot;boj_mbe_name&quot; value=&quot;
            &lt;?php echo esc_attr( $boj_mbe_name ); ?&gt;&quot; /&gt;&lt;/p&gt;
        &lt;p&gt;Costume:
            &lt;select name=&quot;boj_mbe_costume&quot;&gt;
                &lt;option value=&quot;vampire&quot; &lt;?php selected( $boj_mbe_costume, 'vampire' ); ?&gt;
                    &gt;Vampire
                &lt;/option&gt;
                &lt;option value=&quot;zombie&quot; &lt;?php selected( $boj_mbe_costume, 'zombie' ); ?&gt;
                    &gt;Zombie 
                &lt;/option&gt;
                &lt;option value=&quot;smurf&quot; &lt;?php selected( $boj_mbe_costume, 'smurf' ); ?&gt;
                    &gt;Smurf
                &lt;/option&gt;
            &lt;/select&gt;
            &lt;/p&gt;
            &lt;?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'] ) );
        }
    }
?&gt;

<?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

&lt;?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-&gt;ID, '_boj_mbe_image', true );
        ?&gt;
        Image &lt;input id=&quot;boj_mbe_image&quot; type=&quot;text&quot; size=&quot;75&quot;
            name=&quot;boj_mbe_image&quot; value=&quot;&lt;?php echo esc_url( $boj_mbe_image ); ?&gt;&quot; /&gt;
        &lt;input id=&quot;upload_image_button&quot; type=&quot;button&quot;
            value=&quot;Media Library Image&quot; class=&quot;button-secondary&quot; /&gt;
        &lt;br /&gt; 输入一个图片的 URL 或从媒体库中选择一个图片
        &lt;?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' );
    }
?&gt;

<?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 函数，完成从媒体库中选取图片的功能。

&lt;?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&amp;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);
            }
        };
    });
?&gt;

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

保持一致性

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

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

&lt;?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' );
    }
 
?&gt;

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

使用 WordPress UI

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

&lt;div class=&quot;wrap&quot;&gt;
    Plugin Page
&lt;/div&gt;

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

headings

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

&lt;?php
    function boj_styling_settings() {
        ?&gt;
        &lt;div class=&quot;wrap&quot;&gt;
            &lt;h2&gt;My Plugin&lt;/h2&gt;
            &lt;h3&gt;My Plugin&lt;/h3&gt;
            &lt;h4&gt;My Plugin&lt;/h4&gt;
            &lt;h5&gt;My Plugin&lt;/h5&gt;
            &lt;h6&gt;My Plugin&lt;/h6&gt;
        &lt;/div&gt;
        &lt;?php
    }
?&gt;

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

图标 Icons

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

&lt;?php
    &lt;div id=&quot;icon-index&quot; class=&quot;icon32&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;icon-edit&quot; class=&quot;icon32&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;icon-upload&quot; class=&quot;icon32&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;icon-link-manager&quot; class=&quot;icon32&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;icon-edit-pages&quot; class=&quot;icon32&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;icon-edit-comments&quot; class=&quot;icon32&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;icon-themes&quot; class=&quot;icon32&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;icon-plugins&quot; class=&quot;icon32&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;icon-users&quot; class=&quot;icon32&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;icon-tools&quot; class=&quot;icon32&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;icon-options-general&quot; class=&quot;icon32&quot;&gt;&lt;/div&gt;
?&gt;

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

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

&lt;?php
    function boj_styling_settings() {
        ?&gt;
        &lt;div class=&quot;wrap&quot;&gt;
            &lt;?php screen_icon( 'plugins' ); ?&gt;
            &lt;h2&gt;My Plugin&lt;/h2&gt;
        &lt;/div&gt;
        &lt;?php
    }
?&gt;

消息

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

&lt;?php
    function boj_styling_settings() {
        ?&gt;
        &lt;div class=&quot;wrap&quot;&gt;
            &lt;h2&gt;My Plugin&lt;/h2&gt;
            &lt;div id=&quot;message&quot; class=&quot;updated&quot;&gt;设置保存成功&lt;/div&gt;
            &lt;div id=&quot;message&quot; class=&quot;error&quot;&gt;保存出现错误&lt;/div&gt;
        &lt;/div&gt;
        &lt;?php
    }
?&gt;

按钮

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

&lt;p&gt;
&lt;input type=&quot;submit&quot; name=&quot;Save&quot; value=&quot;Save Options&quot; /&gt;
&lt;input type=&quot;submit&quot; name=&quot;Save&quot; value=&quot;Save Options&quot; class=&quot;button-primary&quot; /&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;input type=&quot;submit&quot; name=&quot;Secondary&quot; value=&quot;Secondary Button&quot; /&gt;
&lt;input type=&quot;submit&quot; name=&quot;Secondary&quot; value=&quot;Secondary Button&quot; class=&quot;button-secondary &quot; /&gt;
&lt;/p&gt;

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

&lt;p&gt;
&lt;input type=&quot;submit&quot; name=&quot;Secondary&quot; value=&quot;Secondary Button&quot; class=&quot;button-secondary &quot; /&gt;
&lt;input type=&quot;submit&quot; name=&quot;Highlighted&quot; value=&quot;Button Highlighted&quot; class=&quot;button-highlighted&quot; /&gt;
&lt;/p&gt;

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

&lt;a href-&quot;#&quot;&gt;Search&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button-secondary'&gt;Search&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button-highlighted'&gt;Search&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button-primary'&gt;Search&lt;/a&gt;

超链接

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

&lt;div class=&quot;wrap&quot;&gt;
    &lt;?php screen_icon( 'plugins' ); ?&gt; &lt;h2&gt; My Plugin&lt;/h2&gt;
    &lt;h2&gt;&lt;a href-&quot;#&quot;&gt;Test&lt;/a&gt;
    &lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Test&lt;/a&gt;
    &lt;h4&gt;&lt;a href=&quot;#&quot;&gt;Test&lt;/a&gt;
    &lt;h5&gt;&lt;a href=&quot;#&quot;&gt;Test&lt;/a&gt;
    &lt;a href=&quot;#&quot;&gt;Test&lt;/a&gt;
&lt;/div&gt;

表单项

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

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

<?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 类可以快速的添加样式。

&lt;table class=&quot;widefat&quot;&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;Favorite Holiday&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tfoot&gt;
        &lt;tr&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;Favorite Holiday&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/tfoot&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;First&lt;/td&gt;
            &lt;td&gt;Second&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;

分页

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

&lt;div class=&quot;tablenav&quot;&gt;
    &lt;div class=&quot;tablenav-pages&quot;&gt;
        &lt;span class=&quot;displaying-num&quot;&gt;Displaying 1-20 of 66&lt;/span&gt;
        &lt;span class=&quot;page-numbers current&quot;&gt;1&lt;/span&gt;
        &lt;a href=&quot;#&quot; class=&quot;page-numbers&quot;&gt;2&lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;page-numbers&quot;&gt;3&lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;page-numbers&quot;&gt;4&lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;next page-numbers&quot;&gt;»&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;

总结

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

注：本文出自《Professional WordPress Plugin Development》一书，由 sixpoint.me 翻译，倡萌整编。

来源：

https://www.wpdaxue.com/integrating-in-wordpress.html