LAMP開發精要(6)：在 WordPress 外掛程式中使用 Javascript 指令碼

    有了前面的一篇文章《在 WordPress 外掛程式中使用樣式表》，則本節《在 WP 外掛程式中使用 Javascript》就好描述，也容易理解的多了。

    1，外掛程式的檔案夾結構與前文相同。外掛程式完成的功能前文已經述及，本節將加一個功能，當在文字上點擊時，彈出一個視窗。本節樣本也在前文樣本的基礎上開發。

    本節的 JS 指令碼放置在 js 檔案夾下，檔案名稱 script.js，內容如下：

    jQuery(document).ready(function(){
    //---------------
      jQuery("#myalert").click(function()
      {
        alert("Hello, WordPress and JQuery!");
      });
    //---------------
    });

    2，完整代碼及其解釋

    本節還介紹了另一種往文章中加入 CSS 代碼的方法，使用了 wp_print_styles 這個 API 事件，與 wp_register_style 和 wp_enqueue_style 函數配合，是更合乎標準的用法。

    加入 JS 指令碼的代碼，與 CSS 很相似，本節以加入一段 JQuery 指令碼為例。不熟悉 jQuery 的朋友可以先去學習以下 jQuery，以在代碼中使用其強大的功能。

    WP 外掛程式中加入 JS 指令碼的代碼，也有 2 種方法，當然最好也是使用 wp_print_scripts API 配合 wp_register_script 和 wp_enqueue_script 為推薦的方法。

    除過幾個函數和部分代碼有少許的差別外，外掛程式的結構與上節一樣，可以參照閱讀。

    代碼執行的結果，就是在頁面的 head 部分添加了以下 JS 代碼：

    <script type='text/javascript' src='http://……/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>
    <script type='text/javascript' src='http://……/wp-content/plugins/test-css-js/js/script.js?ver=20100405'></script>

    本例的完整代碼如下，關鍵代碼有注釋：

    <?php
    /*
      Plugin Name: Test_CSS_JS
      Plugin URI: http://www.why100000.com
      Version: 0.1
      Author: 網眼(張慶-陝西西安-開開工作室-http://www.myopenit.cn)
      Author URI: http://blog.why100000.com
      Description: 測試樣式表和JS指令碼：在文章末尾加一段文字，改變樣式，點擊彈出對話方塊。
    */

    if (!class_exists("why100000_Test_css_js"))
    {
      class why100000_Test_css_js
      {
        //建構函式
        function why100000_Test_css_js()
        {
        }

        //加到“設定”主菜單下
        function why100000_add_options_page()
        {
          add_options_page('Test_CSS_JS', 'Test_CSS_JS-CFG', 8, basename(__FILE__), array(&$this, 'why100000_Test_CSS_JS_mainpage'));
        }

        function why100000_Test_CSS_JS_mainpage()
        {
        ?>
          <form name="formamt" method="post" action="options.php">
            <?php wp_nonce_field('update-options') ?>
            <div class="wrap">
              Test_CSS_JS is active.<br><br>
              <h2>Test_CSS_JS Config (外掛程式配置)</h2>

              <div id="msgall">
                <fieldset class="options">
                  <legend>Word(字串):</legend>
                  <p>
                  <textarea style="width: 80%;" rows="5" cols="40" name="why100000_word"><?php echo get_option("why100000_word");?></textarea>
                  </p>
                </fieldset>
              </div>

              <p class="submit">
                <input type="submit" value="<?php _e('Update Options &raquo;') ?>" name="update_message"/>
              </p>
              <input type="hidden" name="action" value="update">
              <input type="hidden" name="page_options" value="why100000_word">
            </div>
          </form>
        <?php
        }

        //外掛程式第一次被“啟用”時執行，作為初始值儲存到表wp_options中
        function why100000_install()
        {
          add_option("why100000_word", "<span id=/"myalert/">彈出警告對話方塊</span>");
        }

        function why100000_addHeadCode()
        {
          echo '<link type="text/css" rel="stylesheet" href="' . get_bloginfo('wpurl') . '/wp-content/plugins/test-css-js/css/css.css">';
          echo '<script type="text/javascript" src="' . get_bloginfo('wpurl') . '/wp-content/plugins/test-css-js/js/script.js"></script>';
        }

        //添加css
        function why100000_addCss()
        {
          wp_register_style('my_css_handle', get_bloginfo('wpurl') . '/wp-content/plugins/test-css-js/css/css.css');
          wp_enqueue_style('my_css_handle');
          //等價於以下語句：
          //wp_enqueue_style('my_css_handle', get_bloginfo('wpurl') . '/wp-content/plugins/test-css-js/css/css.css');
        }

        //添加js資訊
        function why100000_addJs()
        {
          //選擇 jquery 指令碼類型，會自動載入 jquery.js 檔案
          wp_register_script('my_js_handle', get_bloginfo('wpurl') . '/wp-content/plugins/test-css-js/js/script.js', array('jquery'), '20100405');
          wp_enqueue_script('my_js_handle');
          //等價於以下語句：
          //wp_enqueue_script('my_js_handle', get_bloginfo('wpurl') . '/wp-content/plugins/test-css-js/js/script.js', array('jquery'), '20100405');
        }

        //WP執行the_content函數時，調用該函數，對文章內容進行過濾
        function why100000_appendString($content)
        {
          $content .= get_option("why100000_word");
          return $content;
        }

      }
    }

    if (class_exists("why100000_Test_css_js"))
    {
      //$MyPlugin_testcssjs 變數不能與別的外掛程式衝突！
      $MyPlugin_testcssjs = new why100000_Test_css_js();
    }

    if (isset($MyPlugin_testcssjs))
    {
      add_action('activate_test-css-js/test-css-js.php', array(&$MyPlugin_testcssjs, 'why100000_install'));
      add_action('admin_menu', array(&$MyPlugin_testcssjs, 'why100000_add_options_page'));
      //add_action('wp_head', array(&$MyPlugin_testcssjs, 'why100000_addHeadCode'));
      add_action('wp_print_styles', array(&$MyPlugin_testcssjs, 'why100000_addCss'));
      add_action('wp_print_scripts', array(&$MyPlugin_testcssjs, 'why100000_addJs'));
      //add_action('template_redirect', array(&$MyPlugin_testcssjs, 'why100000_addJs')); 該語句也可
      add_filter('the_content', array(&$MyPlugin_testcssjs, 'why100000_appendString'));
    }
    ?>

    作者：張慶(網眼) 2010-5-4
    來自“網眼視界”：http://blog.why100000.com
    “十萬個為什麼”電腦學習網：http://www.why100000.com