Wordpressカスタムプラグ（複数のjavascriptファイルを呼び出す方法）

Question

Wordpress Plugin Generatorを使用して、いくつかのjavascriptファイルとcssファイルを呼び出すプラグインを作成しようとしました。 これは幾分か動作しています - それはjavascriptファイルの1つを呼び出していますが、他の2つのファイルは呼び出していません。

私は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

私は正しい方法はこのようなものであるべきだと思う？

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

>

私は、開発者がプラグインよりも、テーマの開発者のより多くのだが、私はあなたがすべてをエンキューことができると思います1つのコールバックから。

add_action('wp_head', 'insert_head'); 

を使用しない理由

乾杯

Answer 2

はその後

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 
} 

Answer 3

wp_enqueue_scriptがそれを行うための正しい方法であるinsert_js機能を持っています。 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にロードする点が異なります。

もう1つ、PHPコードで__constructを使用することに注意してください.Pluginを配布する予定がある場合、PHP4を使用している人もいることを覚えておいてください。

幸運。