Write your own WordPress plugin

我將介紹如何撰寫一個JQuery的WordPress plugin

首先在%WordPressRoot%/wp-content/plugins下建立一個你plugin名稱的資料夾，這個名稱儘量獨特一點，避免之後跟WordPress plugin store上的套件撞名，ex: ellis123456．接著再產生一個跟資料夾名稱一樣的php檔案，ellis123456.php．

首先加上描述，說明版本與作者資訊．此定義內容會存在WordPress的plugin簡介，請勿務必填寫完整

  
/**
 * Plugin Name: ellisJQuery
 * Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates
 * Description: Ellis's specific version of JQuery for WordPress.
 * Version: 0.0.003
 * Author: Ellis Mu
 * Author URI: http://URI_Of_The_Plugin_Author
 * License: GPL2
 */

定義plugin的unique id以及需要多國語言時它的目錄

load_plugin_textdomain('ellis123456', false, basename( dirname( __FILE__ ) ) . '/languages' );

定義完成後，我們就可以開始載入JQuery函式庫，

function initJQuery() {
    wp_register_style( 'jquery', plugins_url('style/eggplant/jquery-ui-1.10.4.custom.min.css', __FILE__) );
    wp_enqueue_style( 'jquery' );

   /*
    * We should load jquery before load jquery ui.
    */
   wp_register_script( 'jquery', 'js/jquery-1.10.2.js');  // I don't know why newer version has error
   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'jqueryui', plugins_url( '/js/jquery-ui-1.10.4.custom.min.js', __FILE__ ), array('jquery') );
   wp_enqueue_script( 'ellis123456', plugins_url( '/js/ellis123456.js', __FILE__ ), array('jquery') );
 }

 add_action('wp_enqueue_scripts', 'initJQuery'); // 呼叫wp_enqueue_scripts來載入外部的JQuery, JQuery-UI關聯檔

開始定義shortcode

function popup_dialog($atts, $content = null) {
     extract(shortcode_atts(array(
         "id" => '',
         "width" => '684',
         "height" => '385',
         "title" => '',
         "text" => '',
         "left" => ''
     ), $atts));

    return '



';  //popDialogFunc為JavaScript所定義的function待會我們再解釋
}

add_shortcode("popDialog", "popup_dialog");  //註冊popDialog為我們未來要使用WordPress的方式

接著我們在plugin的js/目錄下建立ellis123456.js，在裡面實做

function popDialogFunc() {

 var opt = {
        autoOpen: false,
        modal: true,
        open: function(){
            jQuery('.ui-widget-overlay').bind('click',function(){
                 jQuery("#dialog-modal1").dialog('close');
            })
        } };
 
        
 document.getElementById("dialog-modal1").style.visibility='visible';
 jQuery(document).ready(function($) {

        $("#dialog-modal1 p" ).show();
    $("#dialog-modal1").dialog(opt).dialog('open'); });
 
}

最後在我們的WordPress頁面寫入popDialog就可以完成我們的plugin實驗

[popDialog id ="abc" width="122" height="66" title="Who are you?" text="I am the god123" left = "40"]

Reference:
http://codex.wordpress.org/Writing_a_Plugin
http://markjaquith.wordpress.com/2006/03/04/wp-tutorial-your-first-wp-plugin/