Question

我决定尝试使用Wordpress插件生成器创建一个调用几个javascript文件和一个css文件的插件。它有点工作 - 它调用的是其中一个javascript文件，而不是其他两个。

我正在使用wp_enqueue_script函数，但可能错了。任何帮助将不胜感激！

<?php

/*
Plugin Name: Tab Header Code
Plugin URI: [insert the plugin uri here]
Description: Inserts appropriate javascript and css libraries for tabs
Author: Jesse Wallace
Version: 0.1
Author URI: http://www.enticent.com
Generated At: www.wp-fun.co.uk;
*/ 

if (!class_exists('tabstyles')) {
    class tabstyles {

    /**
    * PHP 4 Compatible Constructor
    */

    function tabstyles(){$this->__construct();}

    /**
    * PHP 5 Constructor
    */      

    function __construct(){
    add_action("init", array(&amp;$this,"add_script1"));
    add_action("init", array(&amp;$this,"add_script2"));
    add_action("init", array(&amp;$this,"add_script3"));
    add_action("wp_head", array(&amp;$this,"add_css"));
    }

    /**
    * Tells WordPress to load the scripts
    */

    function add_script1(){
    wp_enqueue_script('tab_header_code_script1', '/wp-content/plugins/tab-header-code/js/tabview-min.js', NULL , 0.1);
    }

    function add_script2(){
    wp_enqueue_script('tab_header_code_script2', '/wp-content/plugins/tab-header-code/js/element-min.js', NULL , 0.1);
    }

    function add_script3(){
    wp_enqueue_script('tab_header_code_script3', '/wp-content/plugins/tab-header-code/js/yahoo-dom-event.js', NULL , 0.1);
    }

    /**
    * Adds a link to the stylesheet to the header
    */

    function add_css(){
    echo '<link rel="stylesheet" href="'.get_bloginfo('wpurl').'/wp-content/plugins/tab-header-code/css/tabstyle.css" type="text/css" media="screen"  />';
    }
}
}

//instantiate the class
if (class_exists('tabstyles')) {
    $tabstyles = new tabstyles();
}

?>

Answer 1

wp_enqueue_script是正确的做法。你可以做同样的事情，Scott建议，但wp_enqueue_script的目的是避免冲突，这是WP自动处理的事情。

您是在前端还是后端加载？

如果是后端，我强烈建议将您的JS文件限制为仅在您的插件页面上加载，以下是您的操作方法：

add_action('admin_menu', 'add_pages');

function add_pages() {
    $my_plugin_page = add_menu_page('Plugin Name', 'Plugin Name',  8,__FILE__, 'invoice_overview',"images/plugin_icon.png");

    // This is the trick, notice the "$my_plugin_page" being tacked on the end of admin_print_scripts
    add_action( "admin_print_scripts-$my_plugin_page", 'admin_head');

}

function admin_head() {
    global $path_to_your_files;

    // You may notice array('jquery') at the end, that means jQuery is required to make that particular file function, and WP will include it automatically
    wp_enqueue_script('jquery.whatever',$path_to_your_files . "/js/jquery.whatever.js", array('jquery'));
    wp_enqueue_script('jquery.autocomplete',$path_to_your_files . "/js/jquery.autocomplete.js", array('jquery'));
    wp_enqueue_script('your_custom_file',$path_to_your_files . "/js/your_custom_file.js", array('jquery'));

}

对于前端，将JS文件隔离到特定页面更加困难。插入js文件的正确方法是类似的，除了我通常将它们加载到init中，就像你一样。

还有一件事，小心在PHP代码中使用__construct，因为它在PHP4中不起作用，如果你打算分发你的插件，请记住有些人仍在使用PHP4。

祝你好运。

Answer 2

我认为正确的方法应该是这样的：

<?php

if (!class_exists('tabstyles')) {
    class tabstyles {

        /**
        * PHP 4 Compatible Constructor
        */

        function tabstyles(){$this->__construct();}

        /**
        * PHP 5 Constructor
        */              

        function __construct(){
            add_action("init", array(&$this,"on_init"));
        }

        /**
        * Tells WordPress to load the scripts
        */

        function on_init(){
            // scripts
            wp_enqueue_script('tab-view-min', get_bloginfo('wpurl').'/wp-content/plugins/tab-header-code/js/tabview-min.js');
            wp_enqueue_script('element-min', get_bloginfo('wpurl').'/wp-content/plugins/tab-header-code/js/element-min.js');
            wp_enqueue_script('yahoo-dom-event', get_bloginfo('wpurl').'/wp-content/plugins/tab-header-code/js/yahoo-dom-event.js');

            //css
            wp_enqueue_style('tabstyle', get_bloginfo('wpurl').'/wp-content/plugins/tab-header-code/css/tabstyle.css');

        }

    }
}

//instantiate the class
if (class_exists('tabstyles')) {
    $tabstyles = new tabstyles();
}

＆GT;

我更像是一个主题开发人员，而不是插件开发者，但我认为你可以从一个回调中排除所有内容。

干杯

Answer 3

为什么不使用

add_action('wp_head', 'insert_head');

然后有一个insert_js函数

function insert_head() {
    ?>
    <script type="text/javascript" src="<?php bloginfo('wpurl') ?>/wp-content/plugins/tab-header-code/js/tabview-min.js"></script>
    <script type="text/javascript" src="<?php bloginfo('wpurl') ?>/wp-content/plugins/tab-header-code/js/element-min.js"></script>
    <script type="text/javascript" src="<?php bloginfo('wpurl') ?>/wp-content/plugins/tab-header-code/js/yahoo-dom-event.js"></script>
    <link type="text/css" src="<?php bloginfo('wpurl') ?>/wp-content/plugins/tab-header-code/css/tabstyle.csss"></link>
    <?php
}

Wordpress自定义插件（如何调用多个javascript文件）

3 个答案: