本文利用 wp-plugin-base.php 簡單介紹 wordpress plugin 的架構。

• 前台產生標準 widget 的外觀，內容則是印出設定值。
• 後台 widget 設定介面，可以修改設定值。
• 沒有直接（使用 SQL ）變更資料庫。

plugin 基本資料

請參考下圖：

程式碼

<?php
/*
Plugin Name:    widget_name
Plugin URI:       網址
Version:            0.1 (版本)
Description:     說明文字
Author:             klcintw(作者)
*/
/*  版權宣告 */

/* 常數宣告 */
$_X_WIDGET_NAME = "widget_name"; // 顯示在後台的 widget 名稱
$_X_WIDGET_ID = "widget_id"; // 程式用 widget id
$_X_OPTIONS_KEY = 'myWidgetOptions'; // 設定存到資料庫的識別鍵
$_X_OPTIONS_WIDTH = 300; // 後台設定的寬度
$_X_OPTIONS_HEIGHT = 200; // 後台設定的高度
$_X_OPTIONS_DEFAILT['title'] = 'TITLE';
$_X_OPTIONS_DEFAILT['int'] = 123;

### Function: 起始Widget
function widget_X_init() {
	if (!function_exists('register_sidebar_widget')) return;

	### Function: 功能
	function widget_content($args) {
		// 將 $args 陣列的資訊展開
		extract($args);
		/*  可用 arg 清單：
			$before_widget => <li id="widget_name" class="widget widget_content">
			$after_widget => </li>
			$before_title => <h2 class="widgettitle">
			$after_title => </h2>

			$name => 側邊欄 1
			$id => sidebar-1
			$widget_id => widget_name // register_sidebar_widget
			$widget_name => widget_name // register_sidebar_widget
		*/
		// 取得設定值
		$options = GET_OPTIONS();
		// 輸出前台UI
		echo $before_widget;
		echo $before_title . $options[title] . $after_title;
		echo '<pre>';
		print_r($options);
		echo '</pre>';
		echo $after_widget;
	} // function

	### Function: 設定
	function widget_options() {
		global $_X_OPTIONS_KEY, $_X_WIDGET_ID;
		$options = GET_OPTIONS();

		if ($_POST[$_X_WIDGET_ID.'_is_postback']) {
			// 讀取新設定值
			$options['title'] = strip_tags($_POST[$_X_WIDGET_ID.'_title']);
			$options['int'] = intval($_POST[$_X_WIDGET_ID.'_int']);
			update_option($_X_OPTIONS_KEY, $options);
		} // if

		/* 設定畫面 */
		echo '
<p><label for="'.$_X_WIDGET_ID.'_title">標題：</label><input type="text" name="'.$_X_WIDGET_ID.'_title" value="'.$options['title'].'" /></p>
<p><label for="'.$_X_WIDGET_ID.'_int">數字：</label><input type="text" name="'.$_X_WIDGET_ID.'_int" value="'.$options['int'].'" /></p>
<input type="hidden" name="'.$_X_WIDGET_ID.'_is_postback" id="is_postback" value="1" />
';
	} // function

	### Helper Function : 取得設定
	function GET_OPTIONS() {
		global $_X_OPTIONS_KEY, $_X_OPTIONS_DEFAILT;
		$options = get_option($_X_OPTIONS_KEY);
		if (!is_array($options)) {
			$options = $_X_OPTIONS_DEFAILT;
		} // if
		return $options;
	}

	/* 註冊 Widget */
	global $_X_WIDGET_NAME,$_X_OPTIONS_WIDTH,$_X_OPTIONS_HEIGHT;
	register_sidebar_widget($_X_WIDGET_NAME, 'widget_content');
	register_widget_control($_X_WIDGET_NAME, 'widget_options',$_X_OPTIONS_WIDTH, $_X_OPTIONS_HEIGHT);

} // function

/* 加入WP系統 */
//add_action('wp_head', 'AddScriptOrCss');
add_action('plugins_loaded', 'widget_X_init');
?>

註冊及登記

1. add_action(‘plugins_loaded’, ‘widget_X_init’);
   將 widget_X_init 註冊到 WP 系統中，在 plugins_loaded 的事件中呼叫執行。
2. register_sidebar_widget($_X_WIDGET_NAME, ‘widget_content’);
   向 WP 系統登記這個 plugin 支援 widget，其內容裡 widget_content 負責處理。
3. register_widget_control($_X_WIDGET_NAME, ‘widget_options’,$_X_OPTIONS_WIDTH, $_X_OPTIONS_HEIGHT);
   向 WP 系統登記這個 plugin 的 widget 可以由使用者變更設定值 ，其內容裡 widget_options 負責處理。

其它函式

• function widget_content($args)
  前台UI呈現
• function widget_options()
  後台設定
• function GET_OPTIONS()
  取得設定，若資料庫沒有就傳回預設參數。

重覆使用 wp-plugin-base.php

1. 取代字串「_X_」成為您的新名稱，避免函式名稱重複而發生系統錯誤。
2. 修改 plugin 的基本資料，如作者、說明、版本等。
3. 修改常數宣告的部份以符合您的需求。
   
   
4. 改寫前台 widget_content
5. 改寫後台 widget_options

以 WP 預設就有的 default 佈景主題（如上圖）為例，要如何在頁尾(footer)的地方可以動態的加上模組(widget) 呢？

• 修改 functions.php 註冊新的 sidebar
• 修改 footer.php 決定 sidebar 的位置
• 從管理介面增加模組

修改 functions.php

在 \wp-content\themes\default\functions.php 一開始就就註冊（register_sidebar^#1）了原本右邊的sidebar。

只要在下面接著加入這段程式就可以在管理介面中看到新的 sidebar 了。

if ( function_exists('register_sidebar') )
    register_sidebar(array(
    	'name' => 'Sidebar_bottom',
        'before_widget' => '<li id="%1$s" class="widget %2$s" x>',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    )); 

修改 footer.php

接下來就要決定 Sidebar_bottom 要放那兒了。
因為我們要放在版面下方，所以要修改 footer.php 。

在 \wp-content\themes\default\footer.php 檔案一開始加入程式。

<br clear="all" />
<div id="Sidebar_bottom">
<?php if ( !function_exists('dynamic_sidebar') ||
	!dynamic_sidebar('Sidebar_bottom') ) : ?>
<p>可以從「Design \ Widgets」設定此內容</p>
<?php endif; ?>
</div>

如果使用者沒有在 Sidebar_bottom 加入模組就會顯示中間的文字。

從管理介面增加模組

進入管理介面後就可以隨意的加入模組了。

說明：

1. register_sidebar 定義在 wp-includes/widget.php

• Author: SKaRCHa｜Plugin Site: WPvideo
• 它可以用[video]http://www.youtube.com/watch?v=osTrMe76kes[/video]這樣的型式在網誌中加入影片。
• 目前（1.10）支援：youtube.com, video.google.com, video.yahoo.com, www.myvideo.es, www.metacafe.com等影音平台。
• 其他網站介紹：wordpress.com.tw » Blog Archive » WPvideo
• 其他網站介紹：活人的幻想世界 » WPvideo – 在你的部落格內插入影片
• 其他網站介紹：[外掛] WordPress 對 Youtube 的外掛程式 » Partner Studio

WordPress Plugin :

• 請先到這裡下載並安裝WPvideo的plugin。

Windows Live Writer Plugin :

1. 請先下載 WPvideo.dll 然後複製到 C:\Program Files\Windows Live Writer\Plugins目錄。
2. 啟動Windows Live Writer程式後應該可以看到右下角會多一個項目，如下圖。
   
3. 用滑鼠點「Insert WPvideo」後會出現如下的畫面：
   
4. 輸入影片網址再勾選你要的選項然後按「插入程式碼」即可。

效果：

請點 許願池的希臘少女

說明：

這個方法主要是改造由Giuseppe Argento製作的外掛程式(plugin) – Lightbox 2

資料來源：http://wordpress.org/extend/plugins/lightbox-2-wordpress-plugin/
This plugin includes the new Lightbox JS v2.04 javascript written by Lokesh Dhakar and got transformed into a WordPress Plugin by me. Use the title attribute if you want to show a caption. Plugin Homepage

並參考Javascritp套件 – Videobox: Lightbox for videos

資料來源：http://videobox-lb.sourceforge.net/
Videobox is a 6kb script, which shows your videos in the page with an overlay. It was inspired from Lightbox.v2 and uses some of the Slimbox‘s code. It’s written for the wonderful mootools library. And used swfobject to embed flash.

改寫成prototype適用的方法並加入swfobject處理Youtube影片播放。

安裝：

1. 下載外掛程式 Lightbox 2，並將檔案解壓縮（如C:\WP\Plugins）。
2. 下載 swfobject，取出其中的 swfobject.js 複製到 C:\WP\Plugins\lightbox-2-wordpress-plugin\lightbox\js
3. 下載經過修改的 lightbox2.js 更名為 lightbox.js 再複製到 C:\WP\Plugins\lightbox-2-wordpress-plugin\lightbox\js
   或
   修改 C:\WP\Plugins\lightbox-2-wordpress-plugin\lightbox.php 將 其中的 lightbox.js 改成 lightbox2.js
4. 將C:\WP\Plugins\lightbox-2-wordpress-plugin 整個目錄上傳到網站上的/wp-content/plugins/
5. 進入管理介面，啟用(activate)外掛程式Lightbox 2。

PS：如果嫌麻煩這裡有打包好的懶人包，請下載使用。

用法：

• 在要使用這個效果的連結加上 rel=”lightbox”，程式會判斷是一般圖片或是Youtube的影片。
  加上 title=”說明”會在lightbox左下角出現說明。

  <a title="許願池的希臘少女" href="http://tw.youtube.com/watch?v=3gluvKTtTNw" rel="lightbox">許願池的希臘少女</a>