Wie füge ich CSS und jQuery in mein WordPress-Plugin ein?

Wie füge ich CSS und jQuery in mein WordPress-Plugin ein?

Für Stile wp_register_style( 'namespace', 'http://locationofcss.com/mycss.css' );

Verwenden wp_enqueue_style('namespace');Sie dann: wo immer Sie das CSS laden möchten.

Skripte sind wie oben beschrieben, aber der schnellere Weg zum Laden von jquery besteht darin, die in einem Init geladene Warteschlange für die Seite zu verwenden, auf die sie geladen werden soll: wp_enqueue_script('jquery');

Es sei denn, Sie möchten das Google-Repository für jquery verwenden.

Sie können die JQuery-Bibliothek, von der Ihr Skript abhängig ist, auch bedingt laden:

wp_enqueue_script('namespaceformyscript', 'http://locationofscript.com/myscript.js', array('jquery'));

Update Sept. 2017

Ich habe diese Antwort vor einiger Zeit geschrieben. Ich sollte klarstellen, dass der beste Ort, um Ihre Skripte und Stile in die Warteschlange zu stellen, im wp_enqueue_scriptsHaken liegt. Also zum Beispiel:

add_action('wp_enqueue_scripts', 'callback_for_setting_up_scripts');
function callback_for_setting_up_scripts() {
    wp_register_style( 'namespace', 'http://locationofcss.com/mycss.css' );
    wp_enqueue_style( 'namespace' );
    wp_enqueue_script( 'namespaceformyscript', 'http://locationofscript.com/myscript.js', array( 'jquery' ) );
}

Die wp_enqueue_scriptsAktion wird die Dinge für das "Frontend" einrichten. Sie können die admin_enqueue_scriptsAktion für das Backend (irgendwo innerhalb von wp-admin) und die login_enqueue_scriptsAktion für die Anmeldeseite verwenden.

Fügen Sie es in die init()Funktion für Ihr Plugin ein.

function your_namespace() {
    wp_register_style('your_namespace', plugins_url('style.css',__FILE__ ));
    wp_enqueue_style('your_namespace');
    wp_register_script( 'your_namespace', plugins_url('your_script.js',__FILE__ ));
    wp_enqueue_script('your_namespace');
}

add_action( 'admin_init','your_namespace');

Es hat auch einige Zeit gedauert, bis ich die (für mich) beste Lösung gefunden habe, die imho kinderleicht ist.

Prost

Versuchen Sie Folgendes, um CSS und jQuery einfach in Ihr Plugin aufzunehmen:

// register jquery and style on initialization
add_action('init', 'register_script');
function register_script() {
    wp_register_script( 'custom_jquery', plugins_url('/js/custom-jquery.js', __FILE__), array('jquery'), '2.5.1' );

    wp_register_style( 'new_style', plugins_url('/css/new-style.css', __FILE__), false, '1.0.0', 'all');
}

// use the registered jquery and style above
add_action('wp_enqueue_scripts', 'enqueue_style');

function enqueue_style(){
   wp_enqueue_script('custom_jquery');

   wp_enqueue_style( 'new_style' );
}

Ich fand das großartig von dieser Seite abgeschnitten. Wie man jQuery und CSS in WordPress - The WordPress Way einbindet

Hoffentlich hilft das.

Die akzeptierte Antwort ist unvollständig. Sie sollten den richtigen Haken verwenden:wp_enqueue_scripts

Beispiel:

    function add_my_css_and_my_js_files(){
        wp_enqueue_script('your-script-name', $this->urlpath  . '/your-script-filename.js', array('jquery'), '1.2.3', true);
        wp_enqueue_style( 'your-stylesheet-name', plugins_url('/css/new-style.css', __FILE__), false, '1.0.0', 'all');
    }
    add_action('wp_enqueue_scripts', "add_my_css_and_my_js_files");

Siehe http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Beispiel

<?php
function my_init_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js');
}    

add_action('init', 'my_init_method');
?> 

Nur um an die Antwort von @ pixeline anzuhängen (habe versucht, einen einfachen Kommentar hinzuzufügen, aber die Seite sagte, ich brauche 50 Ruf).

Wenn Sie Ihr Plugin für den Admin-Bereich schreiben, sollten Sie Folgendes verwenden:

add_action('admin_enqueue_scripts', "add_my_css_and_my_js_files");

Das admin_enqueueu_scripts ist der richtige Hook für den Admin-Bereich. Verwenden Sie wp_enqueue_scripts für das Front-End.

Zuerst müssen Sie den Stil und das CSS mit den Funktionen wp_register_script () und wp_register_style () registrieren

 //registering javascript and css
 wp_register_script ( 'mysample', plugins_url ( 'js/myjs.js', __FILE__ ) );
 wp_register_style ( 'mysample', plugins_url ( 'css/mystyle.css', __FILE__ ) );

Danach können Sie die Funktionen wp_enqueue_script () und wp_enqueue_style () aufrufen, um js und css auf der gewünschten Seite zu laden

wp_enqueue_script('mysample');
wp_enqueue_style('mysample');

Ich finde hier ein schönes Beispiel: http://wiki.workassis.com/wordpress-create-advanced-custom-plugin-using-oop/

Sehr einfach:

Hinzufügen von JS / CSS im Frontend :

function enqueue_related_pages_scripts_and_styles(){
        wp_enqueue_style('related-styles', plugins_url('/css/bootstrap.min.css', __FILE__));
        wp_enqueue_script('releated-script', plugins_url( '/js/custom.js' , __FILE__ ), array('jquery','jquery-ui-droppable','jquery-ui-draggable', 'jquery-ui-sortable'));
    }
add_action('wp_enqueue_scripts','enqueue_related_pages_scripts_and_styles');

Hinzufügen von JS / CSS im WP- Verwaltungsbereich :

function enqueue_related_pages_scripts_and_styles(){
        wp_enqueue_style('related-pages-admin-styles',  get_stylesheet_directory_uri() . '/admin-related-pages-styles.css');
        wp_enqueue_script('releated-pages-admin-script', plugins_url( '/js/custom.js' , __FILE__ ), array('jquery','jquery-ui-droppable','jquery-ui-draggable', 'jquery-ui-sortable'));
    }
add_action('admin_enqueue_scripts','enqueue_related_pages_scripts_and_styles');

Mit der folgenden Funktion können Sie Skripte oder Stile aus dem Plugin in die Warteschlange stellen.

function my_enqueued_assets() {
    wp_enqueue_script('my-js-file', plugin_dir_url(__FILE__) . '/js/script.js', '', time());
    wp_enqueue_style('my-css-file', plugin_dir_url(__FILE__) . '/css/style.css', '', time());
}
add_action('wp_enqueue_scripts', 'my_enqueued_assets');

Mit dem folgenden Code können Sie Skripte und CSS im Backend und Frontend hinzufügen: Dies ist eine einfache Klasse, und die Funktionen werden objektorientiert aufgerufen.

class AtiBlogTest {
function register(){
    //for backend
    add_action( 'admin_enqueue_scripts', array($this,'backendEnqueue'));
    //for frontend
    add_action( 'wp_enqueue_scripts', array($this,'frontendEnqueue'));
}
function backendEnqueue(){
    wp_enqueue_style( 'AtiBlogTestStyle', plugins_url( '/assets/css/admin_mystyle.css', __FILE__ ));
    wp_enqueue_script( 'AtiBlogTestScript', plugins_url( '/assets/js/admin_myscript.js', __FILE__ ));
}
function frontendEnqueue(){
    wp_enqueue_style( 'AtiBlogTestStyle', plugins_url( '/assets/css/front_mystyle.css', __FILE__ ));
    wp_enqueue_script( 'AtiBlogTestScript', plugins_url( '/assets/js/front_myscript.js', __FILE__ ));
}
}

if(class_exists('AtiBlogTest')){
$atiblogtest=new AtiBlogTest();
$atiblogtest->register();
}