Thème WordPress : JavaScript ne fonctionne pas

Publié par Jean-Michel le

J’essaie de concevoir mon propre wordpressthème, mais j’ai des problèmes pour le JavaScriptfaire fonctionner, et rien de ce que j’ai recherché ne semble avoir la réponse. Si quelqu’un peut m’aider, je lui en serais très reconnaissant !

Choses que j’ai faites :

Mettez en file d’attente mon fichier javascript dans functions.php :

function sorenTheme_scripts() {
    wp_enqueue_style('style', get_stylesheet_uri());
    wp_register_script( 'soren-script', get_template_directory_uri() . '/js/soren-script.js', array( 'jquery', 'jquery-ui-core' ), '1', true );
    wp_enqueue_script('soren-script');
}
add_action('wp_enqueue_scripts', 'sorenTheme_scripts'); 

Créez un simple fichier javaScript dans le répertoire {template folder}/js nommé soren-script.js, qui contient actuellement juste un test d’alerte très simple

alert('Hello World');

et c’est tout. Lorsque j’ai essayé de mettre l’alerte index.php filedirectement en utilisant le script tags, l’alerte s’est déclenchée comme prévu, mais lorsque je la déplace vers le fichier js, je n’obtiens rien. Dois-je ajouter quelque chose aux fichiers .phpou ?.js

EDIT : Lorsque je regarde la console du développeur, les fichiers source incluent jquery, mon fichier css, etc., mais pas soren-script.js

Donc je suppose que l’affichage de soren-script.js résoudrait le problème mais je ne sais pas comment faire cela, je pensais que la mise en file d’attente le ferait apparaître automatiquement en tant que source, comme c’était le cas avec ma feuille de style

Solution n°1 trouvée

Dans votre functions.php, ajoutez ce qui suit ;

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
       'script name', 
       get_template_directory_uri() . '/functions/js/script.js', 
       array('jquery') // any script dependancies. i.e. jquery
    );
});

Dans votre gestionnaire de fichiers, placez votre script dans le dossier functions/js/.

Assurez-vous que ce qui suit ouvre et ferme votre script.

jQuery(document).ready(function($) {
}

Cela a fonctionné pour moi et devrait être tout ce dont vous avez besoin pour que js fonctionne correctement sur un thème wordpress

Solution n°2 trouvée

Vous n’avez probablement pas la fonction wp_footer() dans votre modèle. Étant donné que dans ce crochet, le code sera chargé, il n’apparaîtra pas si vous n’avez pas défini le crochet.

$in_footer
(booléen) (facultatif) Normalement, les scripts sont placés dans le document HTML. Si ce paramètre est vrai, le script est placé avant la balise de fin. Cela nécessite que le thème ait la balise de modèle wp_footer() à l’endroit approprié. Par défaut : faux

réf : http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Notez que get_footer()et wp_footer()sont 2 choses différentes :

La balise de modèle get_footer() est un wrapper personnalisé pour la fonction locate_template(), utilisée pour inclure un fichier de partie de modèle dans un fichier de modèle. La balise de modèle get_footer() fait partie du système de modèles WordPress et est principalement utilisée par le thème lui-même pour spécifier le fichier footer.php ou footer-{slug}.php à inclure dans le modèle actuel.

La balise de modèle wp_footer() est un wrapper personnalisé pour le crochet d’action wp_footer, qui est invoqué via do_action( ‘wp_footer’ ). La balise de modèle wp_footer() fait partie de l’API WordPress Hooks et est principalement utilisée par les plugins pour injecter des scripts dans le pied de page HTML du site.

Le crochet wp_footer est généralement placé juste avant la balise body de fermeture :

<?php
    wp_footer();
?>
</body>

cf. : http://codex.wordpress.org/Function_Reference/wp_footer

Solution n°3 trouvée

Essayez d’inclure votre script comme ceci :

wp_enqueue_script('scriptname', get_template_directory_uri() . '/js/scriptname.js', array(), '20140520', true);

Deuxième chose. Avez-vous mis l’alerte dans un document.ready ou quelque chose?

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *