it-swarm.com.de

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

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

54
faressoft

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

Verwenden Sie dann: wp_enqueue_style('namespace');, wo immer die CSS geladen werden soll.

Die Skripte sind wie oben beschrieben, aber der schnellste Weg, um jquery zu laden, besteht darin, die in einem Init geladene Enqueue für die Seite zu verwenden, auf die es 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'));

pdate 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, der Hook wp_enqueue_scripts ist. 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 Aktion wp_enqueue_scripts richtet die Dinge für das "Frontend" ein. Sie können die Aktion admin_enqueue_scripts für das Backend (überall in wp-admin) und die Aktion login_enqueue_scripts für die Anmeldeseite verwenden.

59
Darren

Setzen Sie es in die Funktion init() für Ihr Plugin.

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

Ich habe auch einige Zeit gebraucht, bis ich die (für mich) beste Lösung gefunden habe, die imho narrensicher ist.

Prost 

45
Calimero

Um CSS und jQuery in Ihr Plugin aufzunehmen, versuchen Sie Folgendes:

// 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 aus dieser Site Wie man jQuery und CSS in WordPress einbindet - The WordPress Way

Hoffentlich hilft das.

16
Ryan S

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

Nur um die Antwort von @ pixeline anzufügen (versuchte einen einfachen Kommentar hinzuzufügen, aber die Website sagte, ich brauche 50 Reputation).

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

Admin_enqueueu_scripts ist der richtige Hook für den Admin-Bereich. Verwenden Sie wp_enqueue_scripts für das Frontend. 

7
John T

Die akzeptierte Antwort ist unvollständig. Sie sollten den rechten 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");
6
pixeline

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 die js und css in die gewünschte Seite zu laden 

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

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

5
Bikesh M Annur

Sehr einfach:

Hinzufügen von JS/CSS im Front End :

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 in WP Admin-Bereich :

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 ein Skript oder einen Stil aus dem Plugin ausreihen.

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');
1
Mr. HK

Mit dem folgenden Code können Sie Skripts 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();
}