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

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 

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.

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

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

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/

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

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