web-dev-qa-db-fra.com

Comment inclure CSS et jQuery dans mon plugin wordpress?

Comment inclure CSS et jQuery dans mon plugin wordpress?

javascriptjquerycsswordpresswordpress-plugin
54
faressoft

Pour les styles wp_register_style( 'namespace', 'http://locationofcss.com/mycss.css' );

Ensuite, utilisez: wp_enqueue_style('namespace'); où vous voulez que le fichier css soit chargé.

Les scripts sont les mêmes que ci-dessus, mais le moyen le plus rapide de charger jQuery consiste simplement à utiliser la mise en file d'attente chargée dans un init pour la page sur laquelle vous souhaitez le charger: wp_enqueue_script('jquery');.

Sauf si vous souhaitez utiliser le référentiel Google pour jQuery.

Vous pouvez également charger de manière conditionnelle la bibliothèque jquery dont dépend votre script:

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

Mise à jour septembre 2017

J'ai écrit cette réponse il y a quelque temps. Je devrais préciser que le meilleur endroit pour mettre en file d'attente vos scripts et vos styles est dans le crochet wp_enqueue_scripts. Donc par exemple:

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

L'action wp_enqueue_scripts configurera le "frontend". Vous pouvez utiliser l'action admin_enqueue_scripts pour le backend (n'importe où dans wp-admin) et l'action login_enqueue_scripts pour la page de connexion.

62
Darren

Mettez-le dans la fonction init() pour votre 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');

Il m'a fallu aussi un certain temps avant de trouver (pour moi) la meilleure solution, qui est imho infaillible.

À votre santé 

45
Calimero

Pour inclure CSS et jQuery dans votre plugin, rien de plus simple, essayez ceci:

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

J'ai trouvé ce super extrait de ce site Comment inclure jQuery et CSS dans WordPress - The WordPress Way

J'espère que cela pourra aider.

16
Ryan S

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

Exemple 

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

Juste pour ajouter à la réponse de @ pixeline (essayé d'ajouter un simple commentaire mais le site disait qu'il me fallait 50 points de réputation).

Si vous écrivez votre plugin pour la section admin, vous devriez utiliser:

add_action('admin_enqueue_scripts', "add_my_css_and_my_js_files");

Admin_enqueueu_scripts est le bon raccord pour la section admin, utilisez wp_enqueue_scripts pour le serveur frontal. 

7
John T

La réponse acceptée est incomplète. Vous devriez utiliser le bon crochet: wp_enqueue_scripts

Exemple:

    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

Vous devez d’abord enregistrer le style et les CSS à l’aide des fonctions wp_register_script () et wp_register_style () 

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

Ensuite, vous pouvez appeler les fonctions wp_enqueue_script () et wp_enqueue_style () pour charger les fichiers js et css dans la page requise. 

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

Je trouve un bel exemple ici http://wiki.workassis.com/wordpress-create-advanced-custom-plugin-using-oop/

5
Bikesh M Annur

Très simple:

Ajout de JS/CSS dans le 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');

Ajout de JS/CSS dans WP Espace administrateur :

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

Vous pouvez utiliser la fonction suivante pour mettre en file d'attente un script ou un style à partir d'un plugin.

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

Vous pouvez ajouter des scripts et des css en back-end et en front-end avec le code suivant: 

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();
}
0
Chandan Kumar Thakur