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

文本是《WordPress 插件开发教程(共4篇)》专题的第 4 篇。阅读本文前,建议先阅读前面的文章:

本节内容

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

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

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

文章目录

添加菜单和子菜单

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

创建顶级菜单

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

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

add_menu_page() 所接受的参数:

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

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

  1. <?php
  2. add_action( ‘admin_menu’, ‘boj_menuexample_create_menu’ );
  3. function boj_menuexample_create_menu() {
  4. // 创建顶级菜单
  5. add_menu_page(
  6. ‘My Plugin Settings Page’,
  7. ‘Menu Example Settings’,
  8. ‘manage_options’,
  9. __FILE__,
  10. ‘boj_menuexample_settings_page’,
  11. plugins_url( ‘/images/wp-icon.png’, __FILE )
  12. );
  13. }
  14. ?>

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

添加子菜单

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

  1. <?php
  2. add_submenu_page( parent_slug, page_title, menu_title, capability, menu_slug, function );
  3. ?>

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

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

  1. <?php
  2. add_action( ‘admin_menu’, ‘boj_menuexample_create_menu’ );
  3. function boj_menuexample_create_menu() {
  4. // 创建顶级菜单
  5. add_menu_page(
  6. ‘My Plugin Settings Page’,
  7. ‘Menu Example Settings’,
  8. ‘manage_options’,
  9. __FILE__,
  10. ‘boj_menuexample_settings_page’,
  11. plugins_url( ‘/images/wp-icon.png’, __FILE )
  12. );
  13. // 创建子菜单
  14. add_submenu_page(
  15. __FILE__,
  16. ‘About My Plugin’,
  17. ‘About’,
  18. ‘manage_options’,
  19. __FILE__.‘_about’,
  20. boj_menuexample_about_page
  21. );
  22. add_submenu_page(
  23. __FILE__,
  24. ‘Help with My Plugin’,
  25. ‘Help’,
  26. ‘manage_options’,
  27. __FILE__.‘_help’,
  28. boj_menuexample_help_page
  29. );
  30. add_submenu_page(
  31. __FILE__,
  32. ‘Uninstall My Plugin’,
  33. ‘Uninstall’,
  34. ‘manage_options’,
  35. __FILE__.‘_uninstall’,
  36. boj_menuexample_uninstall_page
  37. );
  38. }
  39. ?>

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

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

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

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

  1. <?php
  2. add_options_page( page_title, menu_title, capability, menu_slug, function );
  3. ?>

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

示例:

  1. <?php
  2. add_action( ‘admin_menu’, ‘boj_menuexample_create_menu’ );
  3. function boj_menuexample_create_menu() {
  4. // 在 Settings 下添加子菜单
  5. add_options_page(
  6. ‘My Plugin Settings Page’,
  7. ‘Menu Example Settings’,
  8. ‘manage_options’,
  9. __FILE__,
  10. ‘boj_menuexample_settings_page’
  11. );
  12. }
  13. ?>

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

  • 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. <?php
  2. class My_Widget extends WP_Widget {
  3. function My_Widget() {
  4. // processes the widget 构造函数
  5. }
  6. function form( $instance ) {
  7. // 在管理面板中显示小工具的表单
  8. }
  9. function update( $new_instance, $old_instance ) {
  10. // 小工具选项的保存过程
  11. }
  12. function widget( $args, $instance ) {
  13. // 显示小工具
  14. }
  15. }
  16. ?>

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

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

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

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

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

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

  1. <?php
  2. // boj_widgetexample_widget_my_info class
  3. class boj_widgetexample_widget_my_info extends WP_Widget {
  4. }
  5. ?>

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

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

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

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

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

  1. <?php
  2. // 创建小工具的设置表单
  3. function form($instance) {
  4. $defaults = array( ‘title’ => ‘My Info’, ‘movie’ => , ‘song’ => );
  5. $instance = wp_parse_args( (array) $instance, $defaults );
  6. $title = $instance[‘title’];
  7. $movie = $instance[‘movie’];
  8. $song = $instance[‘song’];
  9. ?>
  10. <p>Title: <input class=”widefat” name=”
  11. <?php echo $this->get_field_name( ‘title’ ); ?>” type=”text”
  12. value=”<?php echo esc_attr( $title ); ?>” /></p>
  13. <p> Favorite Movie: <input class=”widefat” name=”
  14. <?php echo $this-> get_field_name( ‘movie’ ); ?> “type=”text”
  15. value=” < ?php echo esc_attr( $movie ); ?> ” /> </p>
  16. <p> Favorite Song: <textarea class=”widefat” name=”
  17. <?php echo $this-> get_field_name( ‘song’ ); ?> ” />
  18. <?php echo esc_attr( $song ); ?> </textarea> </p>
  19. <?php
  20. }
  21. ?>

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

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

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

  1. <?php
  2. // 保存小工具设置
  3. function update( $new_instance, $old_instance ) {
  4. $instance = $old_instance;
  5. $instance[‘title’] = strip_tags( $new_instance[‘title’] );
  6. $instance[‘movie’] = strip_tags( $new_instance[‘movie’] );
  7. $instance[‘song’] = strip_tags( $new_instance[‘song’] );
  8.  
  9. return $instance;
  10. }
  11. ?>

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

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

  1. <?php
  2. // 显示小工具
  3. function widget( $args, $instance ) {
  4. extract( $args );
  5.  
  6. echo $before_widget;
  7. $title = apply_filters( ‘widget_title’, $instance[‘title’] );
  8. $movie = empty( $instance[‘movie’] ) ? ‘ ‘ : $instance[‘movie’];
  9. $song = empty( $instance[‘song’] ) ? ‘ ‘ : $instance[‘song’];
  10.  
  11. if ( !empty( $title ) ) { echo $before_title . $title . $after_title; };
  12. echo ‘<p> Fav Movie: ‘ . $movie . ‘</p>’;
  13. echo ‘<p> Fav Song: ‘ . $song . ‘</p>’;
  14. echo $after_widget;
  15. }
  16. ?>

第一步是提取 $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. <?php
  2. /*
  3. Plugin Name: Widget Example Plugin
  4. Plugin URI: http://example.com/wordpress-plugins/my-plugin
  5. Description: A plugin to create widgets in WordPress
  6. Version: 1.0
  7. Author: Brad Williams
  8. Author URI: http://wrox.com
  9. License: GPLv2
  10. */
  11.  
  12. // 使用 widgets_init 动作钩子来执行自定义的函数
  13. add_action( ‘widgets_init’, ‘boj_widgetexample_register_widgets’ );
  14. // 注册小工具
  15. function boj_widgetexample_register_widgets() {
  16. register_widget( ‘boj_widgetexample_widget_my_info’ );
  17. }
  18. // boj_widgetexample_widget_my_info class
  19. class boj_widgetexample_widget_my_info extends WP_Widget {
  20. // process the new widget
  21. function boj_widgetexample_widget_my_info() {
  22. $widget_ops = array(
  23. ‘classname’ => ‘boj_widgetexample_widget_class’,
  24. ‘description’ => ‘Display a user\’s favorite movie and song.’
  25. );
  26. $this->WP_Widget( ‘boj_widgetexample_widget_my_info’, ‘My Info Widget’, $widget_ops );
  27. }
  28. // 创建小工具的设置表单
  29. function form($instance) {
  30. $defaults = array( ‘title’ => ‘My Info’, ‘movie’ => , ‘song’ => );
  31. $instance = wp_parse_args( (array) $instance, $defaults );
  32. $title = $instance[‘title’];
  33. $movie = $instance[‘movie’];
  34. $song = $instance[‘song’];
  35. ?>
  36. <p>Title: <input class=”widefat” name=”
  37. <?php echo $this->get_field_name( ‘title’ ); ?>” type=”text”
  38. value=”<?php echo esc_attr( $title ); ?>” /></p>
  39. <p> Favorite Movie: <input class=”widefat” name=”
  40. <?php echo $this-> get_field_name( ‘movie’ ); ?> “type=”text”
  41. value=” < ?php echo esc_attr( $movie ); ?> ” /> </p>
  42. <p> Favorite Song: <textarea class=”widefat” name=”
  43. <?php echo $this-> get_field_name( ‘song’ ); ?> ” />
  44. <?php echo esc_attr( $song ); ?> </textarea> </p>
  45. <?php
  46. }
  47. // 保存小工具设置
  48. function update( $new_instance, $old_instance ) {
  49. $instance = $old_instance;
  50. $instance[‘title’] = strip_tags( $new_instance[‘title’] );
  51. $instance[‘movie’] = strip_tags( $new_instance[‘movie’] );
  52. $instance[‘song’] = strip_tags( $new_instance[‘song’] );
  53.  
  54. return $instance;
  55. }
  56. // 显示小工具
  57. function widget( $args, $instance ) {
  58. extract( $args );
  59.  
  60. echo $before_widget;
  61. $title = apply_filters( ‘widget_title’, $instance[‘title’] );
  62. $movie = empty( $instance[‘movie’] ) ? ‘ ‘ : $instance[‘movie’];
  63. $song = empty( $instance[‘song’] ) ? ‘ ‘ : $instance[‘song’];
  64.  
  65. if ( !empty( $title ) ) { echo $before_title . $title . $after_title; };
  66. echo ‘<p> Fav Movie: ‘ . $movie . ‘</p>’;
  67. echo ‘<p> Fav Song: ‘ . $song . ‘</p>’;
  68. echo $after_widget;
  69. }
  70. }
  71.  
  72. ?>

高级小工具

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

  1. <?php
  2. // use widgets_init action hook to execute custom function
  3. add_action( ‘widgets_init’, ‘boj_awe_register_widgets’ );
  4.  
  5. // register our widget
  6. function boj_awe_register_widgets() {
  7. register_widget( ‘boj_awe_widget’ );
  8. }
  9. ?>

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

  1. <?php
  2. // boj_awe_widget class
  3. class boj_awe_widget extends WP_Widget {
  4. // process the new widget
  5. function boj_awe_widget() {
  6. $widget_ops = array(
  7. ‘classname’ => ‘boj_awe_widget_class’,
  8. ‘description’ => ‘Display an RSS feed with options.’
  9. );
  10. $this->WP_Widget( ‘boj_awe_widget’, ‘Advaced RSS Widget’, $widget_ops );
  11. }
  12. // 接下面…
  13. ?>

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

  1. <?php
  2. // 创建小工具的设置表单
  3. function form( $instance ) {
  4. $defaults = array(
  5. ‘title’ => ‘RSS Feed’,
  6. ‘rss_feed’ => ‘http://strangework.com/feed’,
  7. ‘rss_items’ => ‘2’
  8. );
  9. $instance = wp_parse_args( (array) $instance, $defaults );
  10. $title = $instance[‘title’];
  11. $rss_feed = $instance[‘rss_feed’];
  12. $rss_items = $instance[‘rss_items’];
  13. $rss_date = $instance[‘rss_data’];
  14. $rss_summary = $instance[‘rss_summary’];
  15. ?>
  16. <p>Title: <input class=”widefat” name=”
  17. <?php echo $this->get_field_name( ‘title’ ); ?>
  18. type = “text” value=”<?php echo esc_attr( $title ); ?>” /></p>
  19. <p>RSS Feed: <input class=”widefat” name=”
  20. <?php echo $this->get_field_name( ‘rss_feed’ ); ?>
  21. type=”text” value=”<?php echo esc_attr( $rss_feed ); ?>” /></p>
  22. <p>Items to Display:
  23. <select name=”<?php echo $this->get_field_name( ‘rss_items’ ); ?>“>
  24. <option value=”1″ <?php selected( $rss_items, 1 ); ?>>1</option>
  25. <option value=”2″ <?php selected( $rss_items, 2 ); ?>>2</option>
  26. <option value=”3″ <?php selected( $rss_items, 3 ); ?>>3</option>
  27. <option value=”4″ <?php selected( $rss_items, 4 ); ?>>4</option>
  28. <option value=”5″ <?php selected( $rss_items, 5 ); ?>>5</option>
  29. </select>
  30. </p>
  31. <p>Show Date?: <input name=”
  32. <?php echo $this->get_field_name( ‘rss_date’ ); ?>
  33. type=”checkbox” <?php checked( $rss_date, ‘on’ ); ?> /></p>
  34. <p>Show Summary?: <input name=”
  35. <?php echo $this->get_field_name( ‘rss_summary’ ); ?>
  36. type=”checkbox” <?php checked( $rss_summary, ‘on’ ); ?> /></p>
  37. <?php
  38. }
  39. ?>

这个小工具提供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. <?php
  2. // 保存小工具设置
  3. function update( $new_instance, $old_instance ) {
  4. $instance = $old_instance;
  5. $instance[‘title’] = strip_tags( $new_instance[‘title’] );
  6. $instance[‘rss_feed’] = strip_tags( $new_instance[‘rss_feed’] );
  7. $instance[‘rss_items’] = strip_tags( $new_instance[‘rss_items’] );
  8. $instance[‘rss_date’] = strip_tags( $new_instance[‘rss_date’] );
  9. $instance[‘rss_summary’] = strip_tags( $new_instance[‘rss_summary’] );
  10. return $instance;
  11. }
  12. ?>

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

  1. <?php
  2. // 显示小工具
  3. function widget( $args, $instance ) {
  4. extract( $args );
  5. echo $before_widget;
  6. // load the widget settings
  7. $title = appply_filters( ‘widget_title’, $instance[‘title’] );
  8. $rss_feed = empty( $instance[‘rss_feed’] ) ? : $instance[‘rss_feed’];
  9. $rss_items = empty( $instance[‘rss_items’] ) ? 2 : $instance[‘rss_items’];
  10. $rss_date = empty( $instance[‘rss_date’] ) ? 0 : 1;
  11. $rss_summary = empty( $instance[‘rss_summary’] ) ? 0 : 1;
  12. if ( !empty( $title ) ) { echo $before_title . $title . $after_title; };
  13. if ( $rss_feed ) {
  14. // display the RSS feed
  15. wp_widget_rss_output( array(
  16. ‘url’ => $rss_feed,
  17. ‘title’ => $title,
  18. ‘items’ => $rss_items,
  19. ‘show_summary’ => $rss_summary,
  20. ‘show_author’ => 0,
  21. ‘show_date’ => $rss_date
  22. ) );
  23. }
  24.  
  25. echo $after_widget;
  26. }
  27. ?>

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

回顾整个代码:

  1. <?php
  2. /*
  3. Plugin Name: Advanced Widget Example Plugin
  4. Plugin URI: http://example.com/wordpress-plugins/my-plugin
  5. Description: A plugin to create widgets in WordPress
  6. Version: 1.0
  7. Author: Brad Williams
  8. Author URI: http://wrox.com
  9. License: GPLv2
  10. */
  11.  
  12. // use widgets_init action hook to execute custom function
  13. add_action( ‘widgets_init’, ‘boj_awe_register_widgets’ );
  14.  
  15. // register our widget
  16. function boj_awe_register_widgets() {
  17. register_widget( ‘boj_awe_widget’ );
  18. }
  19. // boj_awe_widget class
  20. class boj_awe_widget extends WP_Widget {
  21. // process the new widget
  22. function boj_awe_widget() {
  23. $widget_ops = array(
  24. ‘classname’ => ‘boj_awe_widget_class’,
  25. ‘description’ => ‘Display an RSS feed with options.’
  26. );
  27. $this->WP_Widget( ‘boj_awe_widget’, ‘Advaced RSS Widget’, $widget_ops );
  28. }
  29. // 创建小工具的设置表单
  30. function form( $instance ) {
  31. $defaults = array(
  32. ‘title’ => ‘RSS Feed’,
  33. ‘rss_feed’ => ‘http://strangework.com/feed’,
  34. ‘rss_items’ => ‘2’
  35. );
  36. $instance = wp_parse_args( (array) $instance, $defaults );
  37. $title = $instance[‘title’];
  38. $rss_feed = $instance[‘rss_feed’];
  39. $rss_items = $instance[‘rss_items’];
  40. $rss_date = $instance[‘rss_data’];
  41. $rss_summary = $instance[‘rss_summary’];
  42. ?>
  43. <p>Title: <input class=”widefat” name=”
  44. <?php echo $this->get_field_name( ‘title’ ); ?>
  45. type = “text” value=”<?php echo esc_attr( $title ); ?>” /></p>
  46. <p>RSS Feed: <input class=”widefat” name=”
  47. <?php echo $this->get_field_name( ‘rss_feed’ ); ?>
  48. type=”text” value=”<?php echo esc_attr( $rss_feed ); ?>” /></p>
  49. <p>Items to Display:
  50. <select name=”<?php echo $this->get_field_name( ‘rss_items’ ); ?>“>
  51. <option value=”1″ <?php selected( $rss_items, 1 ); ?>>1</option>
  52. <option value=”2″ <?php selected( $rss_items, 2 ); ?>>2</option>
  53. <option value=”3″ <?php selected( $rss_items, 3 ); ?>>3</option>
  54. <option value=”4″ <?php selected( $rss_items, 4 ); ?>>4</option>
  55. <option value=”5″ <?php selected( $rss_items, 5 ); ?>>5</option>
  56. </select>
  57. </p>
  58. <p>Show Date?: <input name=”
  59. <?php echo $this->get_field_name( ‘rss_date’ ); ?>
  60. type=”checkbox” <?php checked( $rss_date, ‘on’ ); ?> /></p>
  61. <p>Show Summary?: <input name=”
  62. <?php echo $this->get_field_name( ‘rss_summary’ ); ?>
  63. type=”checkbox” <?php checked( $rss_summary, ‘on’ ); ?> /></p>
  64. <?php
  65. }
  66.  
  67. // 保存小工具设置
  68. function update( $new_instance, $old_instance ) {
  69. $instance = $old_instance;
  70. $instance[‘title’] = strip_tags( $new_instance[‘title’] );
  71. $instance[‘rss_feed’] = strip_tags( $new_instance[‘rss_feed’] );
  72. $instance[‘rss_items’] = strip_tags( $new_instance[‘rss_items’] );
  73. $instance[‘rss_date’] = strip_tags( $new_instance[‘rss_date’] );
  74. $instance[‘rss_summary’] = strip_tags( $new_instance[‘rss_summary’] );
  75. return $instance;
  76. }
  77. // 显示小工具
  78. function widget( $args, $instance ) {
  79. extract( $args );
  80. echo $before_widget;
  81. // load the widget settings
  82. $title = appply_filters( ‘widget_title’, $instance[‘title’] );
  83. $rss_feed = empty( $instance[‘rss_feed’] ) ? : $instance[‘rss_feed’];
  84. $rss_items = empty( $instance[‘rss_items’] ) ? 2 : $instance[‘rss_items’];
  85. $rss_date = empty( $instance[‘rss_date’] ) ? 0 : 1;
  86. $rss_summary = empty( $instance[‘rss_summary’] ) ? 0 : 1;
  87. if ( !empty( $title ) ) { echo $before_title . $title . $after_title; };
  88. if ( $rss_feed ) {
  89. // display the RSS feed
  90. wp_widget_rss_output( array(
  91. ‘url’ => $rss_feed,
  92. ‘title’ => $title,
  93. ‘items’ => $rss_items,
  94. ‘show_summary’ => $rss_summary,
  95. ‘show_author’ => 0,
  96. ‘show_date’ => $rss_date
  97. ) );
  98. }
  99.  
  100. echo $after_widget;
  101. }
  102. }
  103. ?>

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

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

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

  1. <?php
  2. wp_add_dashboard_widget( widget_id, widget_name, callback, control_callback );
  3. ?>

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

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

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

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

  1. <?php
  2. add_action( ‘wp_dashboard_setup’, ‘boj_dashboard_example_widgets’ );
  3. function boj_dashboard_example_widgets() {
  4. // 创建一个自定义的控制板小工具
  5. wp_add_dashboard_widget(
  6. ‘dashboard_custom_feed’,
  7. ‘My Plugin Information’,
  8. ‘boj_dashboard_example_display’
  9. );
  10. }
  11. ?>

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

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

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

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

  1. <?php
  2. /*
  3. Plugin Name: Dashboard Widget Example Plugin
  4. Plugin URI: http://example.com/wordpress-plugins/my-plugin
  5. Description: A plugin to create dashboard widgets in WordPress
  6. Version: 1.0
  7. Author: Brad Williams
  8. Author URI: http://wrox.com
  9. License: GPLv2
  10. */
  11.  
  12. add_action( ‘wp_dashboard_setup’, ‘boj_dashboard_example_widgets’ );
  13. function boj_dashboard_example_widgets() {
  14. // 创建一个自定义的控制板小工具
  15. wp_add_dashboard_widget(
  16. ‘dashboard_custom_feed’,
  17. ‘My Plugin Information’,
  18. ‘boj_dashboard_example_display’
  19. );
  20. }
  21.  
  22. function boj_dashboard_example_display() {
  23. echo ‘<p>Please contact support@example.ccom to report bugs.</p>’;
  24. }
  25. ?>

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

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

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

  1. <?php
  2. add_action( ‘wp_dashboard_setup’, ‘boj_dashboard_example_widgets’ );
  3.  
  4. function boj_dashboard_example_widgets() {
  5. // 创建一个自定义的控制板小工具
  6. wp_add_dashboard_widget(
  7. ‘dashboard_custom_feed’,
  8. ‘My Plugin Information’,
  9. ‘boj_dashboard_example_display’,
  10. ‘boj_dashboard_example_setup’
  11. );
  12. }
  13. ?>

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

  1. <?php
  2. function boj_dashoboard_example_display() {
  3. // 加载小工具选项
  4. boj_option = get_option( ‘boj_dashboard_widget_rss ‘);
  5. // 如果选项为空,则设置默认值
  6. $boj_rss_feed = ( $boj_option ) ? $boj_option : ‘https://wordpress.org/news/feed/’;
  7. // 获得 RSS 源并显示
  8. echo ‘<div class=”rss-widget”>’;
  9. wp_widget_rss_output( array(
  10. ‘url’ => $boj_rss_feed,
  11. ‘title’ => ‘RSS Feed News’,
  12. ‘items’ => 2,
  13. ‘show_summary’ => 1,
  14. ‘show_author’ => 0,
  15. ‘show_date’ => 1
  16. ) );
  17. echo ‘</div>’;
  18. }
  19. ?>

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

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

  1. <?php
  2. function boj_dashboard_example_setup() {
  3. // 在保持前检查选项是否设置
  4. if ( isset( $_POST[‘boj_rss_feed’] ) ) {
  5. // 从表单获得选项的值
  6. $boj_rss_feed = esc_url_raw( $_POST[‘boj_rss_feed’] );
  7. // 作为选项保存
  8. update_option( ‘boj_dashboard_widget_rss’, $boj_rss_feed );
  9. }
  10. // 如果有保存的 feed 加载
  11. $boj_rss_feed = get_option( ‘boj_dashboard_widget_rss ‘);
  12. ?>
  13. <label for=“feed”>
  14. Rss Feed URL: <input type=”text” name=”boj_rss_feed” id=”boj_rss_feed”
  15. value=”<?php echo esc_url( $boj_rss_feed ); ?>” size=”50″ />
  16. </label>
  17. <?php
  18. }
  19. ?>

这个函数处理的第一个任务是保存小工具的选项。在保存之前,都应该检查 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. <?php
  2. /*
  3. Plugin Name: RSS Dashboard Widget Example Plugin
  4. Plugin URI: http://example.com/wordpress-plugins/my-plugin
  5. Description: A plugin to create dashboard widgets in WordPress
  6. Version: 1.0
  7. Author: Brad Williams
  8. Author URI: http://wrox.com
  9. License: GPLv2
  10. */
  11. add_action( ‘wp_dashboard_setup’, ‘boj_dashboard_example_widgets’ );
  12.  
  13. function boj_dashboard_example_widgets() {
  14. // 创建一个自定义的控制板小工具
  15. wp_add_dashboard_widget(
  16. ‘dashboard_custom_feed’,
  17. ‘My Plugin Information’,
  18. ‘boj_dashboard_example_display’,
  19. ‘boj_dashboard_example_setup’
  20. );
  21. }
  22. function boj_dashoboard_example_display() {
  23. // 加载小工具选项
  24. boj_option = get_option( ‘boj_dashboard_widget_rss ‘);
  25. // 如果选项为空,则设置默认值
  26. $boj_rss_feed = ( $boj_option ) ? $boj_option : ‘https://wordpress.org/news/feed/’;
  27. // 获得 RSS 源并显示
  28. echo ‘<div class=”rss-widget”>’;
  29. wp_widget_rss_output( array(
  30. ‘url’ => $boj_rss_feed,
  31. ‘title’ => ‘RSS Feed News’,
  32. ‘items’ => 2,
  33. ‘show_summary’ => 1,
  34. ‘show_author’ => 0,
  35. ‘show_date’ => 1
  36. ) );
  37. echo ‘</div>’;
  38. }
  39. function boj_dashboard_example_setup() {
  40. // 在保持前检查选项是否设置
  41. if ( isset( $_POST[‘boj_rss_feed’] ) ) {
  42. // 从表单获得选项的值
  43. $boj_rss_feed = esc_url_raw( $_POST[‘boj_rss_feed’] );
  44. // 作为选项保存
  45. update_option( ‘boj_dashboard_widget_rss’, $boj_rss_feed );
  46. }
  47. // 如果有保存的 feed 加载
  48. $boj_rss_feed = get_option( ‘boj_dashboard_widget_rss ‘);
  49. ?>
  50. <label for=“feed”>
  51. Rss Feed URL: <input type=”text” name=”boj_rss_feed” id=”boj_rss_feed”
  52. value=”<?php echo esc_url( $boj_rss_feed ); ?>” size=”50″ />
  53. </label>
  54. <?php
  55. }
  56. ?>

元数据框 ( meta boxes )

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

添加一个自定义元数据框

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

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

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

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

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

  1. <?php
  2. add_action( ‘add_meta_boxes’, ‘boj_mbe_create’ );
  3.  
  4. function boj_mbe_create() {
  5. add_meta_box( ‘boj-meta’, ‘My Custom Meta Box’, ‘boj_mbe_function’, ‘post’, ‘normal’, ‘high’ );
  6. }
  7.  
  8. function boj_mbe_function() {
  9. echo ‘Welcom to my meta box!’;
  10. }
  11. ?>

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

保存元数据框的数据

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

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

  1. <?php
  2. add_action( ‘add_meta_boxes’, ‘boj_mbe_create’ );
  3.  
  4. function boj_mbe_create() {
  5. // 创建元数据框
  6. add_meta_box( ‘boj-meta’, ‘My Custom Meta Box’, ‘boj_mbe_function’, ‘post’, ‘normal’, ‘high’ );
  7. }
  8. ?>

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

  1. <?php
  2. function boj_mbe_function( $post ) {
  3. // 获取元数据的值如果存在
  4. $boj_mbe_name = get_post_meta( $post->ID, ‘_boj_mbe_name’, true );
  5. $boj_mbe_costume = get_post_meta( $post->ID, ‘_boj_mbe_costume’, true );
  6.  
  7. echo ‘请填写下面的信息: ‘;
  8. ?>
  9. <p>Name: <input type=”text” name=”boj_mbe_name” value=”
  10. <?php echo esc_attr( $boj_mbe_name ); ?>” /></p>
  11. <p>Costume:
  12. <select name=“boj_mbe_costume”>
  13. <option value=”vampire” <?php selected( $boj_mbe_costume, ‘vampire’ ); ?>
  14. >Vampire
  15. </option>
  16. <option value=”zombie” <?php selected( $boj_mbe_costume, ‘zombie’ ); ?>
  17. >Zombie
  18. </option>
  19. <option value=”smurf” <?php selected( $boj_mbe_costume, ‘smurf’ ); ?>
  20. >Smurf
  21. </option>
  22. </select>
  23. </p>
  24. <?php
  25. }
  26. ?>

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

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

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

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

  1. <?php
  2. // 用钩子来保存元数据
  3. add_action( ‘save_post’, ‘boj_mbe_save_meta’ );
  4.  
  5. function boj_mbe_save_meta( $post_id ) {
  6. // 验证元数据存在
  7. if ( isset( $_POST[‘boj_mbe_name’] ) ) {
  8. // 保存元数据
  9. update_post_meta( $post_id, ‘_boj_mbe_name’,
  10. strip_tags( $_POST[‘boj_mbe_name’] ) );
  11. update_post_meta( $post_id, ‘_boj_mbe_costume’,
  12. strip_tags( $_POST[‘boj_mbe_costume’] ) );
  13. }
  14. }
  15. ?>

首先使用 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. <?php
  2. /*
  3. Plugin Name: Meta Box Example Plugin
  4. Plugin URI: http://example.com/wordpress-plugins/my-plugin
  5. Description: A plugin to create meta boxes in WordPress
  6. Version: 1.0
  7. Author: Brad Williams
  8. Author URI: http://wrox.com
  9. License: GPLv2
  10. */
  11.  
  12. add_action( ‘add_meta_boxes’, ‘boj_mbe_create’ );
  13.  
  14. function boj_mbe_create() {
  15. // 创建元数据框
  16. add_meta_box( ‘boj-meta’, ‘My Custom Meta Box’, ‘boj_mbe_function’, ‘post’, ‘normal’, ‘high’ );
  17. }
  18. function boj_mbe_function( $post ) {
  19. // 获取元数据的值如果存在
  20. $boj_mbe_name = get_post_meta( $post->ID, ‘_boj_mbe_name’, true );
  21. $boj_mbe_costume = get_post_meta( $post->ID, ‘_boj_mbe_costume’, true );
  22.  
  23. echo ‘请填写下面的信息: ‘;
  24. ?>
  25. <p>Name: <input type=”text” name=”boj_mbe_name” value=”
  26. <?php echo esc_attr( $boj_mbe_name ); ?>” /></p>
  27. <p>Costume:
  28. <select name=“boj_mbe_costume”>
  29. <option value=”vampire” <?php selected( $boj_mbe_costume, ‘vampire’ ); ?>
  30. >Vampire
  31. </option>
  32. <option value=”zombie” <?php selected( $boj_mbe_costume, ‘zombie’ ); ?>
  33. >Zombie
  34. </option>
  35. <option value=”smurf” <?php selected( $boj_mbe_costume, ‘smurf’ ); ?>
  36. >Smurf
  37. </option>
  38. </select>
  39. </p>
  40. <?php
  41. }
  42. // 用钩子来保存元数据
  43. add_action( ‘save_post’, ‘boj_mbe_save_meta’ );
  44.  
  45. function boj_mbe_save_meta( $post_id ) {
  46. // 验证元数据存在
  47. if ( isset( $_POST[‘boj_mbe_name’] ) ) {
  48. // 保存元数据
  49. update_post_meta( $post_id, ‘_boj_mbe_name’,
  50. strip_tags( $_POST[‘boj_mbe_name’] ) );
  51. update_post_meta( $post_id, ‘_boj_mbe_costume’,
  52. strip_tags( $_POST[‘boj_mbe_costume’] ) );
  53. }
  54. }
  55. ?>

元数据框 — 提高

现在你已经明白了元数据框如何工作,下面来建立一个更复杂的。下面的例子中,允许用户从 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. <?php
  2. add_action( ‘add_meta_boxes’, ‘boj_mbe_image_create’ );
  3.  
  4. function boj_mbe_image_create() {
  5. // 创建自定义的元数据框
  6. add_meta_box( ‘boj-image-meta’, ‘Set Image’, ‘boj_mbe_image_function’, ‘post’, ‘normal’, ‘high’ );
  7. }
  8.  
  9. function boj_mbe_image_function( $post ) {
  10. // 的到元数据的值,如果存在
  11. boj_mbe_image = get_post_meta( $post->ID, ‘_boj_mbe_image’, true );
  12. ?>
  13. Image <input id=”boj_mbe_image” type=”text” size=”75″
  14. name=”boj_mbe_image” value=”<?php echo esc_url( $boj_mbe_image ); ?>” />
  15. <input id=“upload_image_button” type=“button”
  16. value=“Media Library Image” class=“button-secondary” />
  17. <br /> 输入一个图片的 URL 或从媒体库中选择一个图片
  18. <?php
  19. }
  20.  
  21. // 钩到保存元数据的钩子
  22. add_action( ‘save_post’, ‘boj_mbe_image_save_meta’ );
  23.  
  24. function boj_mbe_image_save_meta( $post_id ) {
  25. // 验证元数据是否设置
  26. if ( isset( $_POST[‘boj_mbe_image’] ) ) {
  27. // 保存元数据
  28. update_post_meta( $post_id, ‘_boj_mbe_image’,
  29. esc_url_raw( $_POST[‘boj_mbe_image’] ) );
  30. }
  31. }
  32.  
  33. // 包含页面检测的 script 动作
  34. add_action(‘admin_print_scripts-post.php’, ‘boj_mbe_image_admin_scripts’);
  35. add_action(‘admin_print_scripts-post-new.php’, ‘boj_mbe_image_admin_scripts’);
  36.  
  37. function boj_mbe_image_admin_scripts() {
  38. wp_enqueue_script( ‘boj-image-upload’,
  39. plugins_url( ‘/boj-meta-box/boj-meta-image.js’ ),
  40. array( ‘jquery’, ‘media-upload’, ‘thickbox’ )
  41. );
  42. }
  43.  
  44. // 包含页面检测的 css style 动作
  45. add_action(‘admin_print_styles-post.php’, ‘boj_mbe_image_admin_styles’);
  46. add_action(‘admin_print_styles-post-new.php’, ‘boj_mbe_image_admin_styles’);
  47.  
  48. function boj_mbe_image_admin_styles() {
  49. wp_enqueue_style( ‘thickbox’ );
  50. }
  51. ?>

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

  1. <?php
  2. jQuery(document).ready(function($) {
  3. var formfield = null;
  4.  
  5. $(‘#upload_image_button’).click(function() {
  6. $(‘html’).addClass(‘Image’);
  7. formfield = $(‘#boj_mbe_image’).attr(‘name’);
  8. tb_show( ‘ ‘, ‘media-upload.php?type=image&TB_iframe=true’ );
  9. return false;
  10. });
  11.  
  12. // 用户插入文件到文章中
  13. // 仅仅当用户开始执行上面的过程才调用自定义
  14. // window.send_to_editor(html) 是 wp 通常处理接收到的数据的做法
  15.  
  16. window.original_send_to_editor = window.send_to_editor;
  17. window.send_to_editor = function(html) {
  18. var fileurl;
  19. if ( formfield != null ) {
  20. fileurl = $(‘img’, html).attr(‘src’);
  21.  
  22. $(‘#boj_mbe_image’).val(fileurl);
  23. tb_remove();
  24. $(‘html’).removeClass(‘Image’);
  25. formfield = null;
  26. } else {
  27. window.original_send_to_editor(html);
  28. }
  29. };
  30. });
  31. ?>

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

保持一致性

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

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

  1. <?php
  2. add_action( ‘admin_menu’, ‘boj_styling_create_menu’ );
  3. function boj_styling_create_menu() {
  4. // 创建顶级菜单
  5. add_menu_page( ‘My Plugin Settings’, ‘Plugin Styling’,
  6. ‘manage_opotion’, __FILE__, ‘boj_styling_settings’ );
  7. }
  8.  
  9. ?>

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

使用 WordPress UI

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

  1. <div class=“wrap”>
  2. Plugin Page
  3. </div>

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

headings

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

  1. <?php
  2. function boj_styling_settings() {
  3. ?>
  4. <div class=“wrap”>
  5. <h2>My Plugin</h2>
  6. <h3>My Plugin</h3>
  7. <h4>My Plugin</h4>
  8. <h5>My Plugin</h5>
  9. <h6>My Plugin</h6>
  10. </div>
  11. <?php
  12. }
  13. ?>

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

图标 Icons

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

  1. <?php
  2. <div id=“icon-index” class=“icon32”></div>
  3. <div id=“icon-edit” class=“icon32”></div>
  4. <div id=“icon-upload” class=“icon32”></div>
  5. <div id=“icon-link-manager” class=“icon32”></div>
  6. <div id=“icon-edit-pages” class=“icon32”></div>
  7. <div id=“icon-edit-comments” class=“icon32”></div>
  8. <div id=“icon-themes” class=“icon32”></div>
  9. <div id=“icon-plugins” class=“icon32”></div>
  10. <div id=“icon-users” class=“icon32”></div>
  11. <div id=“icon-tools” class=“icon32”></div>
  12. <div id=“icon-options-general” class=“icon32”></div>
  13. ?>

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

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

  1. <?php
  2. function boj_styling_settings() {
  3. ?>
  4. <div class=“wrap”>
  5. <?php screen_icon( ‘plugins’ ); ?>
  6. <h2>My Plugin</h2>
  7. </div>
  8. <?php
  9. }
  10. ?>

消息

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

  1. <?php
  2. function boj_styling_settings() {
  3. ?>
  4. <div class=“wrap”>
  5. <h2>My Plugin</h2>
  6. <div id=“message” class=“updated”>设置保存成功</div>
  7. <div id=“message” class=“error”>保存出现错误</div>
  8. </div>
  9. <?php
  10. }
  11. ?>

按钮

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

  1. <p>
  2. <input type=“submit” name=“Save” value=“Save Options” />
  3. <input type=“submit” name=“Save” value=“Save Options” class=“button-primary” />
  4. </p>
  5. <p>
  6. <input type=“submit” name=“Secondary” value=“Secondary Button” />
  7. <input type=“submit” name=“Secondary” value=“Secondary Button” class=“button-secondary “ />
  8. </p>

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

  1. <p>
  2. <input type=“submit” name=“Secondary” value=“Secondary Button” class=“button-secondary “ />
  3. <input type=“submit” name=“Highlighted” value=“Button Highlighted” class=“button-highlighted” />
  4. </p>

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

  1. <a href“#”>Search</a>
  2. <a href=“#” class=“button-secondary’>Search</a>
  3. <a href=“#” class=“button-highlighted’>Search</a>
  4. <a href=“#” class=“button-primary’>Search</a>

超链接

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

  1. <div class=“wrap”>
  2. <?php screen_icon( ‘plugins’ ); ?> <h2> My Plugin</h2>
  3. <h2><a href“#”>Test</a>
  4. <h3><a href=“#”>Test</a>
  5. <h4><a href=“#”>Test</a>
  6. <h5><a href=“#”>Test</a>
  7. <a href=“#”>Test</a>
  8. </div>

表单项

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

  1. <?php
  2. <div class=“wrap”>
  3. <?php screen_icon( ‘plugins’ ); ?>
  4. <h2>My Plugin</h2>
  5. <form method=“POST” action=“”>
  6. <table class=“form-table”>
  7. <tr valign=“top”>
  8. <th scope=“row”><label for=“lname”>Last Name</label></th>
  9. <td><input id=“lname” maxlength=“45” size=“25” name=“lname” /></td>
  10. </tr>
  11. <tr valign=“top”>
  12. <th scope=“row”><label for=“fname”>First Name</label></th>
  13. <td><input maxlength=“45” size=“25” name=“fname” /></td>
  14. </tr>
  15. <tr valign=“top”>
  16. <th scope=“row”><label for=“color”>Favorite Color</label></th>
  17. <td>
  18. <select name=“color”>
  19. <option value=“orange”>Orange</option>
  20. <option value=“black”>Black</option>
  21. </select>
  22. </td>
  23. </tr>
  24. <tr valign=“top”>
  25. <th scope=“row”><label for=“featured”>Featured?</label></th>
  26. <td><input type=“checkbox” name=“favorite” /></td>
  27. </tr>
  28. <tr valign=“top”>
  29. <th scope=“row”><label for=“gender”>Gender</label></th>
  30. <td>
  31. <input type=“radio” name=“gender” value=“male” /> Male
  32. <input type=“radio” name=“gender” value=“female” /> Female
  33. </td>
  34. </tr>
  35. <tr valign=“top”>
  36. <th scope=“row”><label for=“bio”>Bio</label></th>
  37. <td><input maxlength=“45” size=“25” name=“fname” /></td>
  38. </tr>
  39. <tr valign=“top”>
  40. <th scope=“row”><label for=“fname”>First Name</label></th>
  41. <td><textarea name=“bio”></textarea></td>
  42. </tr>
  43. <tr valign=“top”>
  44. <td>
  45. <input type=“submit” name=“save” value=“Save Options”
  46. class=“button-primary” />
  47. <input type=“submit” name=“reset” value=“Reset”
  48. class=“button-secondary” />
  49. </td>
  50. </tr>
  51. </table>
  52. </form>
  53. </div>
  54. ?>

表格

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

  1. <table class=“widefat”>
  2. <thead>
  3. <tr>
  4. <th>Name</th>
  5. <th>Favorite Holiday</th>
  6. </tr>
  7. </thead>
  8. <tfoot>
  9. <tr>
  10. <th>Name</th>
  11. <th>Favorite Holiday</th>
  12. </tr>
  13. </tfoot>
  14. <tbody>
  15. <tr>
  16. <td>First</td>
  17. <td>Second</td>
  18. </tr>
  19. </tbody>
  20. </table>

分页

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

  1. <div class=“tablenav”>
  2. <div class=“tablenav-pages”>
  3. <span class=“displaying-num”>Displaying 1-20 of 66</span>
  4. <span class=“page-numbers current”>1</span>
  5. <a href=“#” class=“page-numbers”>2</a>
  6. <a href=“#” class=“page-numbers”>3</a>
  7. <a href=“#” class=“page-numbers”>4</a>
  8. <a href=“#” class=“next page-numbers”>»</a>
  9. </div>
  10. </div>

总结

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 lk2768783601@gmail.com 举报,一经查实,本站将立刻删除。

(0)
上一篇 2023年9月5日 下午3:14
下一篇 2023年9月5日 下午3:22

相关推荐

  • WordPress入门:手动更新WordPress核心、主题和插件

    文本是《WordPress 入门教程(共19篇)》专题的第 11 篇。阅读本文前,建议先阅读前面的文章: 你可以在WordPress官网下载到最新版的WordPress安装包。如果不能在后台直接更新WordPress,那下载到的WordPress安装包又如何手动更新到服务器?今天,就来简单介绍一下如何手动更新WordPress核心、主题和插件。 手动更新Wo…

    2023年8月29日
    1360
  • 让 Rank Math SEO 输出关键词 keywords meta 字段信息

    在《6个优秀的WordPress SEO插件》和《WordPress网站SEO优化插件:Rank Math》中,我们简单介绍了 Rank Math SEO 插件。也许很多WordPress用户比较熟悉SEO插件还是 Yoast SEO 和 All in One SEO Pack,但是比较这3个插件的免费版本,我们还是极力推荐采用 Rank Math SEO,…

    2023年9月6日
    1140
  • WordPress免费图片压缩优化插件 reSmush.it Image Optimizer

    reSmush.it 是国外专门提供免费图片压缩优化服务api接口,它提供了基于几种高级算法的图片压缩功能,支持jpg、png和gif文件,单张图片最大支持5MB。对图片数量没有任何限制。 reSmush.it Image Optimizer 是一个基于reSmush.it API的免费的图片优化插件。该插件提供了一键批量优化已有图片的功能,还支持设置上传时…

    2023年9月6日
    1320
  • WordPress入门 之 WordPress基本设置

    文本是《WordPress 入门教程(共19篇)》专题的第 4 篇。阅读本文前,建议先阅读前面的文章: 前面说了 如何安装WordPress,接下来我们需要快速熟悉WordPress,以及进行一些必要的基本设置。 开始设置之前,建议大家先点击一篇左边菜单栏的每一个选项,看看到底是做什么用的。下面开始说一下一个新的WordPress站点应该要进行的一些最基本的…

    2023年8月29日
    1150
  • WordPress网站SEO优化插件:Rank Math(堪比Yoast SEO)

    今天我们要讲的是一款可以比肩Yoast seo的谷歌seo插件 Rank Math 。提到自建网站谷歌seo优化工具的时候,基本上的同学都会首先想到的是Yoast Seo或者是All in One SEO Pack。确实这两款插件的功能都非常强大,能够将很多其他插件的功能整合在一起. 但是世界上是没有完美无瑕的事物的,就拿Yoast SEO来说,改版之前和改…

    2023年9月6日
    1380
关注微信