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/


Comments

Post a Comment

Popular posts from this blog

Drawing textured cube with Vulkan on Android

-
Image
Vulkan is a modern hardware-accelerated Graphics API. Its goal is providing an high efficient way in low-level graphics and compute on modern GPUs for PC, mobile, and embedded devices. I am personally working a self training project, vulkan-android , to teach myself how to use this new APIs. The difference between OpenGL and Vulkan OpenGL: Higher level API in comparison with Vulkan, and the next generation of OpenGL 4 will be Vulkan.   Cross-platform and Cross-language (mostly still based on C/C++, but people implemented diverse versions and expose similar API binding based on OpenGL C++, WebGL is a good example).  Mainly used in 3D graphics and 2D image processing to interact with GPU in order to achieve hardware acceleration. Don't have a command buffer can be manipulated at the application side. That means we will be easily see draw calls being the performance bottleneck in a big and complex 3D scene. Vulkan: Cross-platform and low-overhead. Erase the boundary bet...
Read more

Fast subsurface scattering

-
Image
Fig.1 - Fast Subsurface scattering of Stanford Bunny Based on the implementation of three.js . It provides a cheap, fast, and convincing approach to do ray-tracing in translucent surfaces. It refers the sharing in GDC 2011  [1], and the approach is used by Frostbite 2 and Unity engines [1][2][3]. Traditionally, when a ray intersects with surfaces, it needs to calculate the bouncing result after intersections. Materials can be divided into three types roughly.  Opaque , lights can't go through its geometry and the ray will be bounced back.  Transparency , the ray passes and allow it through the surface totally, it probably would loose a little energy after leaving.  Translucency , the ray after entering the surface will be bounced internally like below Fig. 2. Fig.2 - BSSRDF [1] In the case of translucency, we have several subsurface scattering approaches to solve our problem. When a light is traveling inside the shape, that needs to consider the ...
Read more

glTF loader for Android Vulkan

-
Image
This post is going to introduce how we integrate with an existing glTF loader library to make it be able to show glTF models in our Vulkan rendering framework,  vulkan-android . tinygltf In the beginning, we don't want to make our new own wheel, so choosing  tinygltf as our glTF loader. tinygltf is a C++11 based library that would help us support all possible cross-platform project easily. tinygltf setup in Android Studio In  vulkan-android  project, we put third party libraries into third_party folder. Therefore, we need to include tinygltf from third_party folder in app/CMakeLists.txt as below. set(THIRD_PARTY_DIR ../../third_party) include_directories(${THIRD_PARTY_DIR}/tinygltf) Model loading from tinygltf We are going to load a gltf ASCII or binary format model from the storage. tinygltf provides two APIs , they are LoadBinaryFromFile() and LoadASCIIFromFile() respectively based on the extension name is *.glb or *.gltf. TinyGLTF loader will return a tiny...
Read more