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 »') ?>" 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