Wordpress Custom Plug (как вызвать несколько файлов JavaScript) - PullRequest
Новая
       13

Wordpress Custom Plug (как вызвать несколько файлов JavaScript)

1 голос
/ 15 апреля 2009

Я решил попробовать создать плагин, который вызывает пару файлов javascript и файл css, используя генератор плагинов Wordpress. Он работает несколько - он вызывает один из файлов 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();
}

?>

Ответы [ 3 ]

4 голосов
/ 11 мая 2009

wp_enqueue_script - это правильный способ сделать это. Вы могли бы сделать то же самое, что предложил Скотт, но цель 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, как вы это делали.

Еще одна вещь, будьте осторожны, используя __construct в своем PHP-коде, потому что он не работает в PHP4, если вы планируете распространять плагин, имейте в виду, что некоторые люди все еще используют PHP4.

Удачи.

1 голос
/ 09 мая 2009

почему бы не использовать 

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
}
1 голос
/ 15 апреля 2009

Я думаю, что правильный метод должен быть примерно таким: 

<?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();
}

?>

Я скорее разработчик тем, чем разработчик плагинов, но я думаю, что вы можете ставить все в очередь с помощью одного обратного вызова

Приветствия

...