文本是《WordPress 插件開發(fā)教程（共4篇）》專題的第 4 篇。閱讀本文前，建議先閱讀前面的文章：
本節(jié)內(nèi)容
- 創(chuàng)建菜單和子菜單
- 創(chuàng)建小工具( widgets )和控制板小工具( dashboard widgets )
- 為內(nèi)容定義meta內(nèi)容框
- 設(shè)計(jì)并裝飾插件
在開發(fā)插件的時(shí)候與 WordPress 整合是一個(gè)關(guān)鍵步驟。WordPress 提供多種不同的方法來整合插件，包括添加頂級(jí)菜單和子菜單項(xiàng)，創(chuàng)建小工具和控制板小工具，以及為你的內(nèi)容頁(yè)面添加meta內(nèi)容框
本節(jié)你會(huì)學(xué)到如果正確的在 WordPress 的各種不同地方整合插件。也會(huì)學(xué)到插件可用到的合適的設(shè)計(jì)和裝飾方法，來為用戶提供一致的用戶界面體驗(yàn)。
添加菜單和子菜單
你創(chuàng)建的插件都需要一些菜單項(xiàng)，通常鏈接到插件的選項(xiàng)配置頁(yè)面。WordPress 提供創(chuàng)建兩種菜單的方法：頂級(jí)菜單或者子菜單。
創(chuàng)建頂級(jí)菜單
第一種菜單是直接添加到 WordPress 管理頁(yè)面菜單列表中的頂級(jí)菜單。例如，Settings( 設(shè)置 ) 是一個(gè)頂級(jí)菜單。頂級(jí)菜單是有多個(gè)選項(xiàng)頁(yè)面的插件常用的。要注冊(cè)一個(gè)頂級(jí)菜單，使用 add_menu_page() 函數(shù)。
<?php
add_menu_page( page_title, menu_title, capability, menu_slug, function, icon_url, position );
?>
add_menu_page() 所接受的參數(shù)：
- page_title – 頁(yè)面的 title, 和顯示在 <title> 標(biāo)簽里的一樣
- menu_title – 在控制面板中顯示的名稱
- capability – 要瀏覽菜單所要的最低權(quán)限
- menu_slug – 要引用該菜單的別名; 必須是唯一的
- function – 要顯示菜單對(duì)應(yīng)的頁(yè)面內(nèi)容所調(diào)用的函數(shù)
- icon_url – 菜單的 icon 圖片的 URL
- position – 出現(xiàn)在菜單列表中的次序
下面演示創(chuàng)建菜單的過程。使用 admin_menu 動(dòng)作鉤子來觸發(fā)菜單代碼。不管是頂級(jí)菜單還是子菜單，這個(gè)鉤子都適用。
<?php
add_action( 'admin_menu', 'boj_menuexample_create_menu' );
function boj_menuexample_create_menu() {
// 創(chuàng)建頂級(jí)菜單
add_menu_page(
'My Plugin Settings Page',
'Menu Example Settings',
'manage_options',
__FILE__,
'boj_menuexample_settings_page',
plugins_url( '/images/wp-icon.png', __FILE )
);
}
?>
admin_menu 動(dòng)作鉤子調(diào)用了自定義的 boj_menuexample_create_menu() 函數(shù)。接著調(diào)用 add_menu_page() 函數(shù)把自定義的菜單注冊(cè)到 WordPress。菜單的名字為 Menu Example Settings, 需要 manage_options 權(quán)限( 也就是管理員 )才能訪問。并設(shè)置了位于插件下面 /images 目錄中的 icon。
添加子菜單
現(xiàn)在已經(jīng)有了頂級(jí)菜單，可以為頂級(jí)菜單添加子菜單項(xiàng)了。要注冊(cè)一個(gè)子菜單，使用 add_submenu_page() 函數(shù)。
<?php
add_submenu_page( parent_slug, page_title, menu_title, capability, menu_slug, function );
?>
與上面的 add_menu_page() 函數(shù)類似。要注意的是:
parent_slug – 父級(jí)菜單的別名( 前面提到的 menu_slgu )。接著上面的例子繼續(xù)注冊(cè)子菜單：
<?php
add_action( 'admin_menu', 'boj_menuexample_create_menu' );
function boj_menuexample_create_menu() {
// 創(chuàng)建頂級(jí)菜單
add_menu_page(
'My Plugin Settings Page',
'Menu Example Settings',
'manage_options',
__FILE__,
'boj_menuexample_settings_page',
plugins_url( '/images/wp-icon.png', __FILE )
);
// 創(chuàng)建子菜單
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
);
}
?>
上面的代碼在主菜單下創(chuàng)建了三個(gè)子菜單：About，Help，和 Uninstall。每一個(gè)子菜單鏈接到一個(gè)不同的包含子菜單頁(yè)面內(nèi)容的自定義函數(shù)。
向已經(jīng)存在的菜單中添加一個(gè)菜單項(xiàng)
如果你的菜單只有一個(gè)單獨(dú)的設(shè)置頁(yè)面，就沒必要?jiǎng)?chuàng)建一個(gè)自定義的頂級(jí)菜單了。你可以簡(jiǎn)單的把它添加到已經(jīng)存在菜單下。例如 Settings 菜單。
WordPress 提供許多不同的函數(shù)像一個(gè)已經(jīng)存在的默認(rèn)菜單添加一個(gè)子菜單。其中一個(gè)函數(shù)是 add_options_page() 。add_options_page() 函數(shù)向 Settings 菜單添加子菜單項(xiàng)。
<?php
add_options_page( page_title, menu_title, capability, menu_slug, function );
?>
參數(shù)和上面兩個(gè)函數(shù)類似。
示例：
<?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'
);
}
?>
下面是所有可用的添加子菜單的函數(shù)：
- 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 )
小工具可以很好的向插件使用者提供顯示插件信息或者數(shù)據(jù)的方法。WordPress 提供了一系列和小工具相關(guān)的 API 來使用小工具。這一節(jié)會(huì)介紹創(chuàng)建小工具，添加并保存小工具的選項(xiàng)，以及在小工具中顯示插件信息。
創(chuàng)建小工具
在 WordPress 中，使用 WP_Widget 類來創(chuàng)建小工具。了解一下這個(gè)類有助于理解小工具是如何工作的。
<?php
class My_Widget extends WP_Widget {
function My_Widget() {
// processes the widget 構(gòu)造函數(shù)
}
function form( $instance ) {
// 在管理面板中顯示小工具的表單
}
function update( $new_instance, $old_instance ) {
// 小工具選項(xiàng)的保存過程
}
function widget( $args, $instance ) {
// 顯示小工具
}
}
?>
WP_Widget 為你的小工具提供負(fù)責(zé)不同功能的多個(gè)函數(shù)。
下面來為你的插件創(chuàng)建一個(gè)小工具。這是一個(gè)簡(jiǎn)單的文本小工具，用來保存和顯示你喜歡的電影和歌曲。它展示了如何在 WordPress 小工具中保存 text 數(shù)據(jù)。
這里使用 widgets_init 動(dòng)作鉤子。這個(gè)鉤子在默認(rèn)的小工具注冊(cè)到 WordPress 中之后被觸發(fā)。
<?php
// 使用 widgets_init 動(dòng)作鉤子來執(zhí)行自定義的函數(shù)
add_action( 'widgets_init', 'boj_widgetexample_register_widgets' );
// 注冊(cè)小工具
function boj_widgetexample_register_widgets() {
register_widget( 'boj_widgetexample_widget_my_info' );
}
?>
widgets_init 鉤子觸發(fā)自定義的函數(shù)。接著使用 register_widget() 函數(shù)來注冊(cè)小工具，這個(gè)函數(shù)接受一個(gè)參數(shù) — 將要繼承( extends ) WP_Widget 的類的類名。你可以使用這個(gè)函數(shù)注冊(cè)任意多個(gè)小工具。
注冊(cè)了小工具之后，接著來看小工具類。
<?php
// boj_widgetexample_widget_my_info class
class boj_widgetexample_widget_my_info extends WP_Widget {
}
?>
是用你在注冊(cè)小工具時(shí)定義的唯一的類名來從 WP_Widget 繼承一個(gè)新類。接下來開始創(chuàng)建小工具。
<?php
// process the new widget
function boj_widgetexample_widget_my_info() {
$widget_ops = array(
'classname' => 'boj_widgetexample_widget_class',
'description' => 'Display a user\'s favorite movie and song.'
);
$this->WP_Widget( 'boj_widgetexample_widget_my_info', 'My Info Widget', $widget_ops );
}
?>
首先，用一個(gè)數(shù)組 $widget_ops 來存儲(chǔ)小工具的選項(xiàng)：classname 和 description。classname 是添加到 <li> 元素的類名。默認(rèn)情況下，Sidebars 將所有的小工具都顯示成 unordered 列表( ul )。每一個(gè)單獨(dú)的小工具是那個(gè)列表中的一個(gè)列表項(xiàng)( li )，所以通過添加一個(gè)自定義的 classname 和 ID，就可以方便的為小工具定義樣式了。description 顯示在 外觀 => 小工具 下面，描述小工具的功能。
接著，把這個(gè)數(shù)據(jù)值傳遞給 WP_Widget。傳遞的第一個(gè)值是前面提到的小工具的列表項(xiàng)( li )的 ID 值。第二個(gè)值是小工具的名字。最后一個(gè)值是前面創(chuàng)建的選項(xiàng)數(shù)組。
我們接著來創(chuàng)建小工具的設(shè)置表單項(xiàng)。這個(gè)小工具接受三個(gè)值：標(biāo)題，最愛的電影，最愛的歌曲。
<?php
// 創(chuàng)建小工具的設(shè)置表單
function form($instance) {
$defaults = array( 'title' => 'My Info', 'movie' => '', 'song' => '' );
$instance = wp_parse_args( (array) $instance, $defaults );
$title = $instance['title'];
$movie = $instance['movie'];
$song = $instance['song'];
?>
<p>Title: <input class="widefat" name="
<?php echo $this->get_field_name( 'title' ); ?>" type="text"
value="<?php echo esc_attr( $title ); ?>" /></p>
<p> Favorite Movie: <input class=”widefat" name="
<?php echo $this-> get_field_name( 'movie' ); ?> "type="text"
value=" < ?php echo esc_attr( $movie ); ?> " /> </p>
<p> Favorite Song: <textarea class="widefat" name="
<?php echo $this-> get_field_name( 'song' ); ?> " />
<?php echo esc_attr( $song ); ?> </textarea> </p>
<?php
}
?>
首先，聲明 $defaults 變量來設(shè)置每個(gè)選項(xiàng)的默認(rèn)值。接著填充實(shí)例的值。這樣就已經(jīng)保存了小插件的設(shè)置了。如果新建一個(gè)小工具到 sidebar，沒有保存任何設(shè)置，那么這些值就是空的。
小工具設(shè)置的最后一部分就是顯示提供信息輸入的表單項(xiàng)。使用三個(gè)標(biāo)準(zhǔn)的 HTML input text 字段分別給：title，movie，和 song。在這里不需要提供 <form> 標(biāo)簽或提交按鈕。widget 類會(huì)自動(dòng)處理這些。同時(shí)使用 esc_attr() 函數(shù)來得到之前保持的值并顯示在字段上。
接下來使用 widget 類的 update 函數(shù)來保持這些設(shè)置。
<?php
// 保存小工具設(shè)置
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['movie'] = strip_tags( $new_instance['movie'] );
$instance['song'] = strip_tags( $new_instance['song'] );
return $instance;
}
?>
如上所示，widget 類處理了所有的保存工作。你只用簡(jiǎn)單的為每一個(gè)小工具的設(shè)置傳遞 $new_instance 的值就可以了。一定要注意任何用戶輸入的數(shù)據(jù)，這里使用了 PHP 函數(shù) strip_tags()。
創(chuàng)建小工具的最后一步就是在 sidebar 上顯示小工具。這里使用 widget 類的 widget 函數(shù)來完成。
<?php
// 顯示小工具
function widget( $args, $instance ) {
extract( $args );
echo $before_widget;
$title = apply_filters( 'widget_title', $instance['title'] );
$movie = empty( $instance['movie'] ) ? ' ' : $instance['movie'];
$song = empty( $instance['song'] ) ? ' ' : $instance['song'];
if ( !empty( $title ) ) { echo $before_title . $title . $after_title; };
echo '<p> Fav Movie: ' . $movie . '</p>';
echo '<p> Fav Song: ' . $song . '</p>';
echo $after_widget;
}
?>
第一步是提取 $args 參數(shù)。這個(gè)變量保存著全局的模板值，比如 $before_widget 和 $after_widget。這些值可以在注冊(cè)一個(gè) sidebar 的時(shí)候定義，從而可以自定義包圍你的小工具的代碼，例如添加自定義的 <div> 標(biāo)簽。
接著將 $title 變量賦值為小工具的 title。給 title 使用 widget_title 過濾器鉤子。這就使得其他開發(fā)者可以根據(jù)需要修改小工具的 title。同樣對(duì) $movie 和 $song 變量賦值。
現(xiàn)在已經(jīng)定義了小工具的所有變量，是時(shí)候顯示它們了。首先顯示 $title 變量。用 $before_title 和 $after_title 變量包住它很重要。這兩個(gè)全局變量同樣可以在注冊(cè)一個(gè) sidebar 的時(shí)候自定義。接著顯示 favorite movie 和 favorite song 的值。最后記住用 $after_widget 全局變量做結(jié)束。
恭喜你創(chuàng)建成功了一個(gè) WordPress 小工具。現(xiàn)在可以添加并配置你的小工具了。接著你的小工具就顯示到了 sidebar 中。
下面我們把整個(gè)小工具的代碼放在一起回顧一下：
<?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 動(dòng)作鉤子來執(zhí)行自定義的函數(shù)
add_action( 'widgets_init', 'boj_widgetexample_register_widgets' );
// 注冊(cè)小工具
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 );
}
// 創(chuàng)建小工具的設(shè)置表單
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
}
// 保存小工具設(shè)置
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;
}
}
?>
高級(jí)小工具
現(xiàn)在你已經(jīng)明白了最基本的小工具如何工作，是時(shí)候創(chuàng)建更高級(jí)的小工具了。下面的例子中，創(chuàng)建一個(gè)獲得 RSS 源并顯示結(jié)果的小工具。首先，需要注冊(cè)小工具。
<?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' );
}
?>
注冊(cè)完小工具 boj_awe_widget 之后，將你的新小工具繼承 WP_Widget 類。
<?php
// boj_awe_widget class
class boj_awe_widget extends WP_Widget {
// process the new widget
function boj_awe_widget() {
$widget_ops = array(
'classname' => 'boj_awe_widget_class',
'description' => 'Display an RSS feed with options.'
);
$this->WP_Widget( 'boj_awe_widget', 'Advaced RSS Widget', $widget_ops );
}
// 接下面...
?>
和之前一樣，設(shè)置類名和小插件的描述。接下來創(chuàng)建小工具選項(xiàng)。
<?php
// 創(chuàng)建小工具的設(shè)置表單
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
}
?>
這個(gè)小工具提供5個(gè)選項(xiàng)分別讓用戶來設(shè)置 title, RSS feed 源, 要顯示的 items, 以及是否顯示日期和摘要。title 和 RSS 源是標(biāo)準(zhǔn)的 text 表單項(xiàng)。
items to display 選項(xiàng)是一個(gè) HTML select 列表。注意 selected() 函數(shù)的使用，它是非常有用的工具，通過比較 select 字段中兩個(gè)值來確定是否那個(gè) option 是被選中。如果比較的 option 的值是保存的值，WordPress 為那個(gè) option 字段添加 selected=”selected” 值，使得它被選中。
show date 和 show summary 選項(xiàng)都是 checkbox 表單項(xiàng)。類似于前面的 selected() 函數(shù)，使用 WordPress 的 checked() 函數(shù)，通過比較來確定是否被選中，并添加 checked=”checked” 來選中 checkbox。
這樣你的小工具的表單就設(shè)置好了，接著來保持小工具的選項(xiàng)。
<?php
// 保存小工具設(shè)置
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;
}
?>
小工具的選項(xiàng)已經(jīng)保存了，接著就根據(jù)這些選項(xiàng)來顯示小工具。
<?php
// 顯示小工具
function widget( $args, $instance ) {
extract( $args );
echo $before_widget;
// load the widget settings
$title = appply_filters( 'widget_title', $instance['title'] );
$rss_feed = empty( $instance['rss_feed'] ) ? '' : $instance['rss_feed'];
$rss_items = empty( $instance['rss_items'] ) ? 2 : $instance['rss_items'];
$rss_date = empty( $instance['rss_date'] ) ? 0 : 1;
$rss_summary = empty( $instance['rss_summary'] ) ? 0 : 1;
if ( !empty( $title ) ) { echo $before_title . $title . $after_title; };
if ( $rss_feed ) {
// display the RSS feed
wp_widget_rss_output( array(
'url' => $rss_feed,
'title' => $title,
'items' => $rss_items,
'show_summary' => $rss_summary,
'show_author' => 0,
'show_date' => $rss_date
) );
}
echo $after_widget;
}
?>
通過加載所有的小工具選項(xiàng)來確定如何顯示 RSS feed。
回顧整個(gè)代碼：
<?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 );
}
// 創(chuàng)建小工具的設(shè)置表單
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
}
// 保存小工具設(shè)置
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;
}
}
?>
創(chuàng)建控制板小工具( Dashboard Widgets )
WordPress 同時(shí)還提供了控制板小工具的 API。你可以使用這個(gè) API 在 WordPress 的控制板頁(yè)面創(chuàng)建自定義的小工具。
創(chuàng)建控制板小工具，要用到 wp_add_dashboard_widget() 函數(shù)。示例：
<?php
wp_add_dashboard_widget( widget_id, widget_name, callback, control_callback );
?>
wp_add_dashboard_widget() 函數(shù)接受下面的參數(shù)：
- widget_id — 添加到 widget DIV 元素的 CSS ID
- widget_name — 在小插件頭部顯示的名稱
- callback — 被調(diào)用的用來顯示插件的函數(shù)
- control_callback — 被調(diào)用的用來處理元素和提交的函數(shù)
下面是幾個(gè)不同的例子。第一個(gè)，創(chuàng)建一個(gè)簡(jiǎn)單的控制板小工具來向用戶顯示一些內(nèi)容。
要?jiǎng)?chuàng)建控制板小工具，使用 wp_dashboard_setup 動(dòng)作鉤子。這個(gè)鉤子在默認(rèn)的控制板鉤子初始化完畢后，但是還沒有顯示時(shí)立即執(zhí)行，
<?php
add_action( 'wp_dashboard_setup', 'boj_dashboard_example_widgets' );
function boj_dashboard_example_widgets() {
// 創(chuàng)建一個(gè)自定義的控制板小工具
wp_add_dashboard_widget(
'dashboard_custom_feed',
'My Plugin Information',
'boj_dashboard_example_display'
);
}
?>
用 wp_dashboard_setup 鉤子來調(diào)用自定義的 boj_dashboard_example_widgets() 函數(shù)。接著使用 wp_add_dashboard_widget() 函數(shù)來注冊(cè)你的控制板小工具。將小工具的 title 設(shè)置成 My Plugin Information，并調(diào)用自定義的函數(shù) boj_dashboard_example_display()。在注冊(cè)完自定義的小工具后，需要完成自定義函數(shù)來向用戶顯示信息。
<?php
function boj_dashboard_example_display() {
echo '<p>Please contact support@example.ccom to report bugs.</p>';
}
?>
這樣就完成了一個(gè)控制板小工具向用戶顯示一條信息。控制板小工具 API 自動(dòng)使你的小工具可以拖拽，收放，以及將你的小工具添加到 “顯示選項(xiàng)” 中，可以讓用戶選擇顯示或隱藏。
我們來回顧一下全部的代碼：
<?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() {
// 創(chuàng)建一個(gè)自定義的控制板小工具
wp_add_dashboard_widget(
'dashboard_custom_feed',
'My Plugin Information',
'boj_dashboard_example_display'
);
}
function boj_dashboard_example_display() {
echo '<p>Please contact support@example.ccom to report bugs.</p>';
}
?>
創(chuàng)建一個(gè)帶配置選項(xiàng)的控制板小工具
你已經(jīng)了解了控制板小工具，可以接著創(chuàng)建帶高級(jí)配置選項(xiàng)的小工具了。控制板小工具可以保存選項(xiàng)，使得用戶可以方便的配置它們。如果一個(gè)控制板小工具有任何的選項(xiàng)，在你 hover 這個(gè)小工具的標(biāo)題的時(shí)候就會(huì)出現(xiàn)一個(gè) “配置” 鏈接。
接下來的例子中，創(chuàng)建一個(gè)可以自定義 RSS URL 并顯示內(nèi)容的控制板小工具。
<?php
add_action( 'wp_dashboard_setup', 'boj_dashboard_example_widgets' );
function boj_dashboard_example_widgets() {
// 創(chuàng)建一個(gè)自定義的控制板小工具
wp_add_dashboard_widget(
'dashboard_custom_feed',
'My Plugin Information',
'boj_dashboard_example_display',
'boj_dashboard_example_setup'
);
}
?>
注意，這次 wp_add_dashboard_widget() 函數(shù)有四個(gè)參數(shù)，boj_dashboard_example_setup() 函數(shù)是控制回調(diào)，用來顯示小工具的配置選項(xiàng)數(shù)據(jù)，并保存。下面我們來創(chuàng)建 boj_dashboard_example_display() 函數(shù)在小工具中顯示自定義的 RSS 訂閱。
<?php
function boj_dashoboard_example_display() {
// 加載小工具選項(xiàng)
boj_option = get_option( 'boj_dashboard_widget_rss ');
// 如果選項(xiàng)為空，則設(shè)置默認(rèn)值
$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>';
}
?>
前兩行加載 作為小工具選項(xiàng)保存的 RSS feed 地址。在 Part-7 “插件設(shè)置” 中，會(huì)涉及更多插件設(shè)置和選項(xiàng)的信息。接著使用 wp_widget_rss_output() 函數(shù)來取得 RSS 訂閱并顯示。這個(gè)好用的函數(shù)是在 WordPress 中獲取并顯示 RSS 訂閱到好辦法。
現(xiàn)在已經(jīng)有了小工具的顯示頁(yè)面，接著創(chuàng)建控制回調(diào)函數(shù) boj_dashboard_example_setup()。這個(gè)函數(shù)向你的小工具添加 form 字段，讓用戶可以自定義配置小工具。
<?php
function boj_dashboard_example_setup() {
// 在保持前檢查選項(xiàng)是否設(shè)置
if ( isset( $_POST['boj_rss_feed'] ) ) {
// 從表單獲得選項(xiàng)的值
$boj_rss_feed = esc_url_raw( $_POST['boj_rss_feed'] );
// 作為選項(xiàng)保存
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
}
?>
這個(gè)函數(shù)處理的第一個(gè)任務(wù)是保存小工具的選項(xiàng)。在保存之前，都應(yīng)該檢查 POST 值是否存在，這里使用 PHP 函數(shù) isset()。接著將 $_POST[‘boj_rss_feed’] 值賦給 $boj_rss_feed 變量。注意 POST 的值是如何使用 esc_url_raw() 函數(shù)來獲取的。它在保存數(shù)據(jù)之前驗(yàn)證值是否為合法的 URL 形式。最后，使用 update_option() 函數(shù)來保存小工具的選項(xiàng)。
現(xiàn)在小工具選項(xiàng)已經(jīng)保存了，你還需要提供 form 字段，好讓用戶來輸入并保持他們想要的 RSS URL。首先從數(shù)據(jù)庫(kù)中得到小工具選項(xiàng)，用來顯示在 form 字段中。接著創(chuàng)建一個(gè)叫做 boj_rss_feed 的 text input 字段。注意 value 字段設(shè)置成了 $boj_rss_feed，用來保存用戶輸入的 RSS URL。
到此，這個(gè)控制板小工具就完成了，我們?cè)倩仡櫼幌抡鎮(zhèn)€的代碼。
<?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() {
// 創(chuàng)建一個(gè)自定義的控制板小工具
wp_add_dashboard_widget(
'dashboard_custom_feed',
'My Plugin Information',
'boj_dashboard_example_display',
'boj_dashboard_example_setup'
);
}
function boj_dashoboard_example_display() {
// 加載小工具選項(xiàng)
boj_option = get_option( 'boj_dashboard_widget_rss ');
// 如果選項(xiàng)為空，則設(shè)置默認(rèn)值
$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() {
// 在保持前檢查選項(xiàng)是否設(shè)置
if ( isset( $_POST['boj_rss_feed'] ) ) {
// 從表單獲得選項(xiàng)的值
$boj_rss_feed = esc_url_raw( $_POST['boj_rss_feed'] );
// 作為選項(xiàng)保存
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
}
?>
元數(shù)據(jù)框 ( meta boxes )
WordPress 在 post，page，和 link 管理頁(yè)面中提供多個(gè)塊 ( sections ) 或者元數(shù)據(jù)框。這些元數(shù)據(jù)框讓你可以方便的向內(nèi)容中添加附加到數(shù)據(jù)。例如，post 的 tags 元數(shù)據(jù)框讓你可以設(shè)置文章的 tags。
添加一個(gè)自定義元數(shù)據(jù)框
要在 WordPress 中添加一個(gè)自定義的元數(shù)據(jù)框，使用 add_meta_box() 函數(shù)。這個(gè)函數(shù)可以讓你定義元數(shù)據(jù)框的方方面面。下面是這個(gè)函數(shù)的用法：
<?php
add_meta_box( id, title, callback, page, context, priority, callback_args );
?>
add_meta_box() 函數(shù)接受下面的參數(shù)：
- id — 包圍元數(shù)據(jù)框的 DIV 的 CSS ID
- title — 元數(shù)據(jù)框顯示的標(biāo)題名稱
- callback — 用來顯示元數(shù)據(jù)框內(nèi)容的回調(diào)函數(shù)
- page — 元數(shù)據(jù)框要顯示的頁(yè)面
- context — 元數(shù)據(jù)框要出現(xiàn)在這個(gè)頁(yè)面的某個(gè)部分
- priority — 元數(shù)據(jù)框顯示的優(yōu)先級(jí)
- callback_args — 要傳入回調(diào)函數(shù)的參數(shù)
下面向 post 頁(yè)面添加一個(gè)自定義的元數(shù)據(jù)框。
<?php
add_action( 'add_meta_boxes', 'boj_mbe_create' );
function boj_mbe_create() {
add_meta_box( 'boj-meta', 'My Custom Meta Box', 'boj_mbe_function', 'post', 'normal', 'high' );
}
function boj_mbe_function() {
echo 'Welcom to my meta box!';
}
?>
使用 add_meta_boxes 動(dòng)作鉤子觸發(fā) boj_mbe_create() 函數(shù)來添加一個(gè)新的元數(shù)據(jù)框。注意，將 context 參數(shù)設(shè)置為 normal，并將 priority 設(shè)置為 high，則這個(gè)元數(shù)據(jù)框直接顯示在 post 頁(yè)面 內(nèi)容編輯器 的下面。
保存元數(shù)據(jù)框的數(shù)據(jù)
元數(shù)據(jù)框的真正作用是用來保存數(shù)據(jù)到一篇文章、一個(gè)頁(yè)面或者 WordPress 中其他類型的內(nèi)容。和 content 關(guān)聯(lián)的所有數(shù)據(jù)都叫做元數(shù)據(jù)。在 WordPress 編輯頁(yè)面，用來保存元數(shù)據(jù)的 “自定義字段” 默認(rèn)存在。自定義字段是向 content 添加元數(shù)據(jù)的快速方法。在 Part-11 “擴(kuò)展文章” 包含更多關(guān)于元數(shù)據(jù)的信息，但你需要理解在元數(shù)據(jù)框中保存數(shù)據(jù)概念。
在下面的例子中，在 “文章” 頁(yè)面創(chuàng)建一個(gè)元數(shù)據(jù)框，并保存兩個(gè)字段的元數(shù)據(jù)到文章中。
<?php
add_action( 'add_meta_boxes', 'boj_mbe_create' );
function boj_mbe_create() {
// 創(chuàng)建元數(shù)據(jù)框
add_meta_box( 'boj-meta', 'My Custom Meta Box', 'boj_mbe_function', 'post', 'normal', 'high' );
}
?>
創(chuàng)建過程和前面一個(gè)例子類似，下面創(chuàng)建用來顯示 form 字段的函數(shù)。
<?php
function boj_mbe_function( $post ) {
// 獲取元數(shù)據(jù)的值如果存在
$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 '請(qǐng)?zhí)顚懴旅娴男畔? ';
?>
<p>Name: <input type="text" name="boj_mbe_name" value="
<?php echo esc_attr( $boj_mbe_name ); ?>" /></p>
<p>Costume:
<select name="boj_mbe_costume">
<option value="vampire" <?php selected( $boj_mbe_costume, 'vampire' ); ?>
>Vampire
</option>
<option value="zombie" <?php selected( $boj_mbe_costume, 'zombie' ); ?>
>Zombie
</option>
<option value="smurf" <?php selected( $boj_mbe_costume, 'smurf' ); ?>
>Smurf
</option>
</select>
</p>
<?php
}
?>
首先要注意的是 $post 對(duì)象作為一個(gè)參數(shù)傳遞到你自定義的函數(shù)。這使得你可以訪文章對(duì)象中所有可用的數(shù)據(jù)，這個(gè)例子中用到了 post ID。
接著從 WordPress 中獲得兩個(gè)元數(shù)據(jù)的值，如果存在的話。使用 get_post_meta() 函數(shù)來實(shí)現(xiàn)。這個(gè)函數(shù)接受3個(gè)參數(shù)。
- post_id — 要加載元數(shù)據(jù)的文章 ID
- key — 要加載的元數(shù)據(jù)的唯一的名稱
- single — 將 string 返回成一個(gè)數(shù)組(false) 還是單獨(dú)的 string (true)
如果你創(chuàng)建一篇新文章，這兩個(gè)元數(shù)據(jù)還不存在，因?yàn)樗麄冞€沒有被創(chuàng)建。注意到，這里并不用添加一個(gè)提交按鈕或者 form 標(biāo)簽。使用 save_post 動(dòng)作鉤子來完成保存，
<?php
// 用鉤子來保存元數(shù)據(jù)
add_action( 'save_post', 'boj_mbe_save_meta' );
function boj_mbe_save_meta( $post_id ) {
// 驗(yàn)證元數(shù)據(jù)存在
if ( isset( $_POST['boj_mbe_name'] ) ) {
// 保存元數(shù)據(jù)
update_post_meta( $post_id, '_boj_mbe_name',
strip_tags( $_POST['boj_mbe_name'] ) );
update_post_meta( $post_id, '_boj_mbe_costume',
strip_tags( $_POST['boj_mbe_costume'] ) );
}
}
?>
首先使用 add_action() 函數(shù)來觸發(fā) save_post 動(dòng)作鉤子。它會(huì)在文章保存的時(shí)候調(diào)用 boj_mbe_save_meta() 函數(shù)。這個(gè)函數(shù)保存用戶輸入到元數(shù)據(jù)框中的數(shù)據(jù)。注意將 $post_id 變量作為參數(shù)傳遞給你的函數(shù)。post ID 在保存元數(shù)據(jù)的時(shí)候用到。最后使用 update_post_meta() 函數(shù)添加或者更新用戶輸入的元數(shù)據(jù)。這個(gè)函數(shù)接受4個(gè)參數(shù)。
- post_id — 要保存元數(shù)據(jù)的文章 ID
- meta_key — 要保存的元數(shù)據(jù)的唯一的名稱
- meta_value — 要保存的元數(shù)據(jù)的值
- prev_value — 元數(shù)據(jù)字段的舊值，用來區(qū)分具有相同名字的多個(gè)字段。
這個(gè)例子中只用到了前面的三個(gè)參數(shù)，第四個(gè)參數(shù)是可選的。
如果你的元數(shù)據(jù)名稱以 “下劃線(_)” 開始，那么它不會(huì)出現(xiàn)在 WordPress 默認(rèn)的自定義字段元數(shù)據(jù)框中。這樣便可以消除用戶在輸入元數(shù)據(jù)時(shí)候的疑惑。
這樣便成功的創(chuàng)建了自定義元數(shù)據(jù)并保存到 WordPress 中。下面來回顧真?zhèn)€代碼。
<?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() {
// 創(chuàng)建元數(shù)據(jù)框
add_meta_box( 'boj-meta', 'My Custom Meta Box', 'boj_mbe_function', 'post', 'normal', 'high' );
}
function boj_mbe_function( $post ) {
// 獲取元數(shù)據(jù)的值如果存在
$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 '請(qǐng)?zhí)顚懴旅娴男畔? ';
?>
<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
}
// 用鉤子來保存元數(shù)據(jù)
add_action( 'save_post', 'boj_mbe_save_meta' );
function boj_mbe_save_meta( $post_id ) {
// 驗(yàn)證元數(shù)據(jù)存在
if ( isset( $_POST['boj_mbe_name'] ) ) {
// 保存元數(shù)據(jù)
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'] ) );
}
}
?>
元數(shù)據(jù)框 — 提高
現(xiàn)在你已經(jīng)明白了元數(shù)據(jù)框如何工作，下面來建立一個(gè)更復(fù)雜的。下面的例子中，允許用戶從 WordPress 的 Media Library 中選擇一個(gè)圖片并在元數(shù)據(jù)框中保存這個(gè)圖片的 URL。
<?php
add_action( 'add_meta_boxes', 'boj_mbe_image_create' );
function boj_mbe_image_create() {
// 創(chuàng)建自定義的元數(shù)據(jù)框
add_meta_box( 'boj-image-meta', 'Set Image', 'boj_mbe_image_function', 'post', 'normal', 'high' );
}
function boj_mbe_image_function( $post ) {
// 的到元數(shù)據(jù)的值，如果存在
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 /> 輸入一個(gè)圖片的 URL 或從媒體庫(kù)中選擇一個(gè)圖片
<?php
}
// 鉤到保存元數(shù)據(jù)的鉤子
add_action( 'save_post', 'boj_mbe_image_save_meta' );
function boj_mbe_image_save_meta( $post_id ) {
// 驗(yàn)證元數(shù)據(jù)是否設(shè)置
if ( isset( $_POST['boj_mbe_image'] ) ) {
// 保存元數(shù)據(jù)
update_post_meta( $post_id, '_boj_mbe_image',
esc_url_raw( $_POST['boj_mbe_image'] ) );
}
}
// 包含頁(yè)面檢測(cè)的 script 動(dòng)作
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' )
);
}
// 包含頁(yè)面檢測(cè)的 css style 動(dòng)作
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 函數(shù)，完成從媒體庫(kù)中選取圖片的功能。
<?php
jQuery(document).ready(function($) {
var formfield = null;
$('#upload_image_button').click(function() {
$('html').addClass('Image');
formfield = $('#boj_mbe_image').attr('name');
tb_show( ' ', 'media-upload.php?type=image&TB_iframe=true' );
return false;
});
// 用戶插入文件到文章中
// 僅僅當(dāng)用戶開始執(zhí)行上面的過程才調(diào)用自定義
// window.send_to_editor(html) 是 wp 通常處理接收到的數(shù)據(jù)的做法
window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function(html) {
var fileurl;
if ( formfield != null ) {
fileurl = $('img', html).attr('src');
$('#boj_mbe_image').val(fileurl);
tb_remove();
$('html').removeClass('Image');
formfield = null;
} else {
window.original_send_to_editor(html);
}
};
});
?>
首先，這段代碼在 upload_image_button 被點(diǎn)擊的時(shí)候打開媒體庫(kù)彈出層。第二部分代碼獲得圖片的 URL 并把它插入到你的元數(shù)據(jù)表單的圖片 URL text 字段，即 boj_mbe_image。
保持一致性
有人說一致性是優(yōu)秀的 UI 設(shè)計(jì)的一個(gè)原則。創(chuàng)建一個(gè) WordPress 插件也沒什么區(qū)別，所以最好讓你的插件和 WordPress 用戶界面盡可能的接近。這有助于對(duì)終端用戶保持界面的一致性，同時(shí)可以使你的插件從一開始就提供專業(yè)的用戶界面。
WordPress 提供了許多不同的可以直接應(yīng)用到插件中的樣式。在這一節(jié)你會(huì)學(xué)到如何在插件中使用 WordPress 提供的樣式。作為示例，創(chuàng)建一個(gè)簡(jiǎn)單的有配置頁(yè)面的插件：
<?php
add_action( 'admin_menu', 'boj_styling_create_menu' );
function boj_styling_create_menu() {
// 創(chuàng)建頂級(jí)菜單
add_menu_page( 'My Plugin Settings', 'Plugin Styling',
'manage_opotion', __FILE__, 'boj_styling_settings' );
}
?>
這一部分都會(huì)修改 boj_styling_settings() 函數(shù)。
使用 WordPress UI
使用 WordPress 樣式最重要的部分就是將你的插件包圍在 wrap 類 的 div中。
<div class="wrap">
Plugin Page
</div>
這個(gè)類是所有管理界面樣式的基礎(chǔ)。
headings
WordPress 對(duì)所有的 heading 標(biāo)簽都提供了自定義樣式。下面來看看這些 heading 標(biāo)簽如何顯示：
<?php
function boj_styling_settings() {
?>
<div class="wrap">
<h2>My Plugin</h2>
<h3>My Plugin</h3>
<h4>My Plugin</h4>
<h5>My Plugin</h5>
<h6>My Plugin</h6>
</div>
<?php
}
?>
注意是沒有定義 <h1> 標(biāo)簽的。因?yàn)?<h1> 標(biāo)簽是用在你的網(wǎng)站頂部顯示網(wǎng)站名稱的。所以你應(yīng)該從 <h2> 標(biāo)簽開始。
圖標(biāo) Icons
WordPress 為每一個(gè)部分提供了許多不同的圖標(biāo)。這些圖標(biāo)同樣可以在你的插件中使用。
<?php
<div id="icon-index" class="icon32"></div>
<div id="icon-edit" class="icon32"></div>
<div id="icon-upload" class="icon32"></div>
<div id="icon-link-manager" class="icon32"></div>
<div id="icon-edit-pages" class="icon32"></div>
<div id="icon-edit-comments" class="icon32"></div>
<div id="icon-themes" class="icon32"></div>
<div id="icon-plugins" class="icon32"></div>
<div id="icon-users" class="icon32"></div>
<div id="icon-tools" class="icon32"></div>
<div id="icon-options-general" class="icon32"></div>
?>
WordPress 提供了一個(gè)函數(shù) screen_icon() 來生成這些圖標(biāo)的 div，而并不是硬編碼的。這個(gè)函數(shù)接受一個(gè)參數(shù)，即你想加載的圖標(biāo)。
現(xiàn)在修改 boj_styling_sttings() 函數(shù)來顯示一個(gè)圖標(biāo)和頭部。
<?php
function boj_styling_settings() {
?>
<div class="wrap">
<?php screen_icon( 'plugins' ); ?>
<h2>My Plugin</h2>
</div>
<?php
}
?>
消息
當(dāng)你的插件中一個(gè)動(dòng)作發(fā)生是，例如保存設(shè)置，顯示一個(gè)信息高速用戶是否保存成功非常的重要。WordPress 提供了一些不同的樣式來顯示消息。
<?php
function boj_styling_settings() {
?>
<div class="wrap">
<h2>My Plugin</h2>
<div id="message" class="updated">設(shè)置保存成功</div>
<div id="message" class="error">保存出現(xiàn)錯(cuò)誤</div>
</div>
<?php
}
?>
按鈕
在你的表單中添加按鈕是，你可以使用多個(gè)類。首先是 button-primary 類和 button-secondary 類。這兩個(gè)類為你的按鈕設(shè)置和 WordPress UI 相匹配的樣式。
<p>
<input type="submit" name="Save" value="Save Options" />
<input type="submit" name="Save" value="Save Options" class="button-primary" />
</p>
<p>
<input type="submit" name="Secondary" value="Secondary Button" />
<input type="submit" name="Secondary" value="Secondary Button" class="button-secondary " />
</p>
同時(shí)你還可以使用 button-highlighted 類來強(qiáng)調(diào)特殊的按鈕。
<p>
<input type="submit" name="Secondary" value="Secondary Button" class="button-secondary " />
<input type="submit" name="Highlighted" value="Button Highlighted" class="button-highlighted" />
</p>
超鏈接同樣可以通過應(yīng)用適合的類來代替按鈕。
<a href-"#">Search</a>
<a href="#" class="button-secondary'>Search</a>
<a href="#" class="button-highlighted'>Search</a>
<a href="#" class="button-primary'>Search</a>
超鏈接
在 wrap 類 內(nèi)部的超鏈接自動(dòng)應(yīng)用了標(biāo)準(zhǔn)的 WordPress 管理頁(yè)面的超鏈接樣式。不過，你可以使用不同的方式來改變這些默認(rèn)樣式。
<div class="wrap">
<?php screen_icon( 'plugins' ); ?> <h2> My Plugin</h2>
<h2><a href-"#">Test</a>
<h3><a href="#">Test</a>
<h4><a href="#">Test</a>
<h5><a href="#">Test</a>
<a href="#">Test</a>
</div>
表單項(xiàng)
WordPress 提供一個(gè)專門為表單元素的特殊的 table 類叫做 form-table。這個(gè)類用在所有的 WordPress 管理面板的表單中，包括每一個(gè)設(shè)置頁(yè)面。這個(gè)是創(chuàng)建任何類型的配置選項(xiàng)的時(shí)候很有用的一個(gè)類。
<?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 類可以快速的添加樣式。
<table class="widefat">
<thead>
<tr>
<th>Name</th>
<th>Favorite Holiday</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Favorite Holiday</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>First</td>
<td>Second</td>
</tr>
</tbody>
</table>
分頁(yè)
如果你的插件包括一個(gè)記錄的列表，你或許需要分頁(yè)。WordPress 有幾個(gè)不同的類提供分頁(yè)樣式。
<div class="tablenav">
<div class="tablenav-pages">
<span class="displaying-num">Displaying 1-20 of 66</span>
<span class="page-numbers current">1</span>
<a href="#" class="page-numbers">2</a>
<a href="#" class="page-numbers">3</a>
<a href="#" class="page-numbers">4</a>
<a href="#" class="next page-numbers">?</a>
</div>
</div>
總結(jié)
本節(jié)介紹了許多不同的方法在 WordPress 中整合你的插件。你可能不會(huì)在插件中全部用的，但是關(guān)鍵是了解插件開發(fā)過程中有哪些是可用的。
注：本文出自《Professional WordPress Plugin Development》一書，由 sixpoint.me 翻譯，倡萌整編。
創(chuàng)建頂級(jí)菜單，怎么加入已有的子菜單如“文章”下的“寫文章”
十分感謝
真心不錯(cuò)！！！
好好學(xué)習(xí)，天天向上
php學(xué)的不好 學(xué)習(xí)起來有些吃力啊 校長(zhǎng)搞的東西越來越高深了