J'aimerais conserver les styles javascript et css utilisés par mon widget dans leurs propres fichiers (et non les ajouter au thème).
Mais je n'arrive pas à obtenir WordPress pour les ajouter lorsque le widget est réellement utilisé dans une barre latérale.
J'ai essayé ceci:
à l'intérieur de la déclaration de classe, j'ai ajouté 2 fonctions
class EssentielleRubriquesPosts extends WP_Widget {
function addFrontendCss(){
wp_enqueue_style('erw-frontend-css', ESSENTIELLE_RUBRIQUE_WIDGET_PLUGIN_PATH . 'css/EssentielleRubriqueWidget-frontend.css');
}
function addFrontendJavascript(){
wp_register_script('jq-hoverintent', PLUGIN_PATH . 'js/jquery.hoverintent.js', array('jquery'), '1.0',true);
wp_enqueue_script('jq-hoverintent');
wp_enqueue_script('jq-tools', PLUGIN_PATH . 'js/jquery.tools.js', array('jquery'),'1.0',true);
wp_enqueue_script('erw-frontend-js', PLUGIN_PATH . 'js/widget-frontend.js', array('jquery', 'jq-hoverintent', 'jq-tools'),'1.0',true);
}
et à l'intérieur de la fonction widget ():
function widget($args, $instance) {
add_action( 'wp_print_scripts', 'addFrontendJavascript' );
add_action( 'wp_print_styles', 'addFrontendCss' );
}
Mais ça ne fait rien ...
Les hooks wp_print_scripts
et wp_print_styles
sont déclenchés bien avant que votre widget ne fonctionne, ce qui signifie que cela ne fonctionne pas.
Une solution à ce problème consisterait à inclure les scripts dans le pied de page à l'aide de wp_print_footer_scripts
hook, jetez un oeil à Réponse de Jan à une question similaire
Ou une solution beaucoup plus agréable, jetez un oeil à La réponse de Sorich à une autre question similaire
La meilleure solution consiste d'abord à enregistrer vos actifs, puis à mettre en file d'attente les fichiers CSS et JS à l'intérieur de la fonction widget()
de votre WP_Widget (mettre en file d'attente directement, sans ajouter de nouveaux points d'ancrage).
J'ai testé cette solution et cela fonctionne dans la version actuelle de WordPress (4.5.3) - le JS et le CSS sont ajoutés dans le pied de page.
<?php
// Register your assets during `wp_enqueue_scripts` hook.
function custom_register_scripts() {
wp_register_style('erw-frontend-css', '...frontend.css');
wp_register_script('jq-hoverintent', '...hoverintent.js', ...);
wp_register_script('jq-tools', '...tools.js', ...);
}
// Use wp_enqueue_scripts hook
add_action('wp_enqueue_scripts', 'custom_register_scripts');
class YourWidget extends WP_Widget {
public function __construct() {
}
public function widget( $args, $instance ) {
// Enqueue needed assets inside the `widget` function.
wp_enqueue_style('erw-frontend-css');
wp_enqueue_script('jq-hoverintent');
wp_enqueue_script('jq-tools');
// Output widget contents.
}
public function form( $instance ) {
}
public function update( $new_instance, $old_instance ) {
}
}