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

Antworten:

78

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.

— Darren
quelle
Könnten Sie für diejenigen von uns, die neu in der Plugin-Entwicklung sind, bitte klarstellen, "wo immer das CSS geladen werden soll?" Müssen wir Seitenvorlagen für jede Seite erstellen, auf der dies aufgerufen werden soll, und sie dann manuell in der Kopfzeile aufrufen?
— user658182
@ user658182 use add_action('init', 'function_name');, wobei Funktionsname eine Funktion ist, die die Ressourcen in die Warteschlange stellt.
— Ryan Taylor
1
Wie können Sie das Stylesheet nur dann zum Laufen bringen, wenn es sich um ein bestimmtes Plugin handelt?
— Farhad
Könnten Sie uns bitte einen Link zu einer guten Dokumentation geben, die sich auf die neue Art und Weise bezieht, dies zu erreichen;) !!! Vielen Dank
— HanniBaL90
Muss ich nach dem Befehl enqueue etwas neu initialisieren? oder einfach die Seite neu laden?
— Giannis Tzagarakis
57

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

— Calimero
quelle
Wohin geht dieser Code? functions.php? Plugin.php?
— user658182
1
@ user658182 Ihr WordPress-Plugin sollte wahrscheinlich eine eigene .php-Datei oder einen eigenen Ordner in wp-content / plugins / haben
— Ryan Taylor
22

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.

— Ryan S.
quelle
9

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");
— Pixeline
quelle
7

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.

— John T.
quelle
5

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/

— Bikesh M.
quelle
3

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');
— MD. Shafayatul Haque
quelle
1

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');
— Herr HK
quelle
0

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();
}
— Chandan Kumar Thakur
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.