LAMP开发精要(5)：在 Wordpress 插件中使用样式表

    要让插件功能非凡，难免需要 Javascript 和 CSS 的参与。本节将举例在 WP 插件中插入 CSS 代码。下一节将试图添加 JS 脚本。

    1，插件的文件夹结构

    插件主文件可以直接放置在 plugin 文件夹下，也可以建立一个文件夹，放置在该文件夹下。由于插件的相关文件可能较多，所以为了清晰的管理插件，建议把插件文件部署于自己的文件夹下。而且，JS、CSS、图片文件也按文件夹分类放置，通常的文件夹可以取名为 js、css 和 images。

    一个示例的文件夹结构如下：

    ~/plugins

       css           (样式表文件)

       images        (图片文件)

       js            (脚本文件)

       php           (相关php脚本)

       myplugin.php  (插件主文件)

    2，示例插件实现的功能

    在文章末尾加一段文字：<span id="myalert">弹出警告对话框</span>，用样式表中的样式代码改变其样式。文章末尾添加的文字，可以在插件设置面板里进行定制修改，比较灵活。

    3，完整代码及其解释

    要往文章中加入 CSS 代码，一种是直接打开 WP 的 themes 有关模板文件直接添加，但仅仅作用于这个模板页面。这样做可以系统的运行效率比较高，但不够灵活。而使用插件来实现，实现的结果对所有的 themes 有效。

    在 WP 插件中使用样式表，主要使用了 add_head 这个 API 事件。

    首先编辑 css.css 文件，内容如下：

    #myalert

    {

      background-color:#006;

      color:#fff;

      cursor:hand;

    }

    保存于 css 文件夹下。该段样式表可以按需要定制，但要确保不能与其它样式冲突，否则得不到预期的结果。该段样式表代码对 id="myalert" 的标签进行修饰。

    然后定义插件类的成员函数 why100000_addHeaderCode()，输出引用样式表的标签。注意css文件的路径。函数完整代码如下：

    function why100000_addHeaderCode()

    {

      echo '<link type="text/css" rel="stylesheet" href="'

         . get_bloginfo('wpurl') . '/wp-content/plugins/test-css-js/css/css.css">';

    }

    然后调用以下代码：

    add_action('wp_head',array(&$MyPlugin_testcssjs, 'why100000_addHeaderCode'));

    使生成文章页面 head 部分时，添加 <link ...> 对样式表的调用。

    本例的完整代码如下，关键代码有注释：

    <?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/">弹出警告对话框</a>");

        }

        //添加head信息

        function why100000_addHeaderCode()

        {

          echo '<link type="text/css" rel="stylesheet" href="'

             . get_bloginfo('wpurl') . '/wp-content/plugins/test-css-js/css/css.css">';

        }

        //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_addHeaderCode'),1);

      add_filter('the_content', array(&$MyPlugin_testcssjs, 'why100000_appendString'));

    }

    ?>

    作者：张庆(网眼) 2010-4-6

    来自“网眼视界”：http://blog.why100000.com

    “十万个为什么”电脑学习网：http://www.why100000.com