Wordpress Custom Plug (Wie mehrere Javascript-Dateien aufrufen)

Question

Ich entschied mich zu versuchen, ein Plugin zu erstellen, das ein paar Javascript-Dateien und eine CSS-Datei mit dem Wordpress Plugin Generator ruft. Es funktioniert etwas - es ruft eine der Javascript-Dateien, aber nicht die anderen beiden.

Ich verwende die wp_enqueue_script-Funktion, aber wahrscheinlich falsch. Jede Hilfe würde sehr geschätzt werden!

<?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

Ich denke, die richtige Methode in etwa so sein sollte:

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

>

Ich bin eher ein Thema Entwickler als Entwickler-Plugin, aber ich denke, dass Sie alles einreihen kann? von nur einem Rückruf.

Prost

Answer 2

warum haben verwenden nicht

add_action('wp_head', 'insert_head'); 

dann eine insert_js Funktion

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, es zu tun ist der richtige Weg. Sie könnten dasselbe tun, was Scott vorgeschlagen hat, aber der Zweck von wp_enqueue_script ist es, Konflikte zu vermeiden, die WP automatisch behandelt.

Laden Sie dies am Frontend oder Backend?

Wenn Back-End, empfehle ich Ihre JS-Dateien limitierend nur auf Ihren Plugin-Seiten laden, hier ist, wie Sie das tun:

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')); 

} 

Für das Front-End seiner schwieriger Ihre JS-Dateien zu isolieren zu bestimmten Seiten. Der richtige Weg, um js-Dateien einzufügen, ist ähnlich, außer dass ich sie normalerweise genauso wie du in die init lade.

Noch eine Sache, seien Sie vorsichtig mit __construct in Ihrem PHP-Code, weil es nicht in PHP4 funktioniert, wenn Sie planen, Ihr Plugin zu verteilen, beachten Sie, dass einige Leute immer noch PHP4 verwenden.

Viel Glück.