Insérer un script javascript dans mes pages

Par hatfab, il y a 10 ans

PHP Wordpress

Bonjour,
Je voudrais insérer un script à partir d'un fichier externe qui puisse être valable pour toutes mes pages. Je trouve de la doc sur ce sujet mais je n'arrive pas à comprendre une chose. On parle de déclarer son script comme ça :

function register_my_scripts(){ wp_register_script('pavebas', ("/js/pavebas.js")); }

Très bien, ça c'est dans le fichier functions.php. Ensuite on me dit qu'il faut insérer le script dans la page de mon site, par exemple test.php, comme ceci :

<?php wp_enqueue_script('pavebas'); ?>

ce qui me renvoie un erreur Fatal error: Call to undefined function wp_enqueue_script() .

Comment je dois réaliser cette opération qui consite à faire appele à un script externe ?

Merci de votre aide !

11 réponses

Khalysto, il y a 10 ans

Salut !

L'appel à tous tes scripts doit être fait dans ton functions.php, y compris les enqueue :)

Tu peux, soit tout mettre dans la même fonction, soit en faire 2, mais dans tous les cas, il ne faut pas que tu oublies de dire à WP de prendre en compte ta fonction à un moment donné.

add_action( 'wp_enqueue_scripts', 'nom_de_ta_fonction' );

Ce hook permet d'ajouter tes scripts à la file de WP (pour info)

hatfab, il y a 10 ans

Salut Khalysto,
Merci de ta réponse. Voilà ce que j'ai fait dans le fichier functions.php mais ça ne fonctionne toujours pas :

wp_register_script('pavebas', get_template_directory_uri()."/js/pavebas.js"); function enqueue_front_scripts() { wp_enqueue_style( 'jpbodin-style', get_stylesheet_uri(), '', null, 'all' ); wp_enqueue_style( 'jpbodin-font-style', get_template_directory_uri() .'/fonts.css', array(), null, 'all' ); wp_enqueue_script('pavebas'); } add_action( 'wp_enqueue_scripts', 'enqueue_front_scripts' );

Mon script est celui-ci

var divHeight; var elem = document.querySelector('.pavebas'); divHeight=elem.offsetHeight + 20; var mb = document.querySelector('.left-content'); mb.style.marginBottom = divHeight +"px";

il fonctionne très bien quand je le mets en dur à la fin de ma page. Quand j'inspecte les resourses de ma page je n'ai pas l'impression que mon code est chargé

Khalysto, il y a 10 ans

Met ton register dans ta fonction :)

hatfab, il y a 10 ans

Merci, voilà ce que ça donne

function enqueue_front_scripts() { wp_register_script('pavebas', get_template_directory_uri()."/js/pavebas.js"); wp_enqueue_style( 'jpbodin-style', get_stylesheet_uri(), '', null, 'all' ); wp_enqueue_style( 'jpbodin-font-style', get_template_directory_uri() .'/fonts.css', array(), null, 'all' ); wp_enqueue_script('pavebas'); } add_action( 'wp_enqueue_scripts', 'enqueue_front_scripts' );

Ça ne fonctionne toujours pas :(
Au cas où, voilà mon arbo :

--montheme |--functions.php |--test.php |--js |--pavebas.js
Khalysto, il y a 10 ans

Tu as bien mis wp_head() dans ton fichier header.php ?
Même question pour wp_footer() dans footer.php

hatfab, il y a 10 ans

Oui, en revanche, je me rends compte que ma page test3.php ne contient pas de get_header ni de get_footer puisque je l'ouvre en dehors de la mécanique WP. Je viens de remédier au problème en créant un template test3 et en créant une page WP incluant ce template. Ça fait ça :

<?php /* Template Name: test3 */ get_header(); ?> <div class="contenu"> <div class="left"> <div class="left-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Done </div> <div class="pavebas"> Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. </div> </div> <div class="right"> Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor.Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient </div> <div class="cb"></div> </div> <!-- #contenu --> <?php get_footer(); ?>

Et bien ça ne marche toujours pas... snif

Khalysto, il y a 10 ans

Tu as essayé de mettre la source à la fois dans register ET dans enqueue ?

hatfab, il y a 10 ans

En fait j'ai ça comme erreur :
Uncaught TypeError: Cannot read property 'offsetHeight' of nullaroundhttp://localhost/jpbodin/wp-content/themes/bodin-theme/js/pavebas.js?ver=4.3.1 line 3
Donc il a bien chargé mon script. En revanche j'ai l'impression qu'il le charge trop tôt et qu'il ne trouve pas encore la class .pavebas

Khalysto, il y a 10 ans

Tu as besoin de dépendances pour ton script ?
Si non, la doc te donne les arguments dispos.

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Tu as juste à passer un array vide pour les dépendances, tu peux mettre null pour la version et après, true pour que WP charge le script dans le hook wp_footer

hatfab, il y a 10 ans

Ça y est !

wp_enqueue_script( 'pavebas', get_template_directory_uri()."/js/pavebas.js", array(), null, true);

Tout était dans le true
Merci de ta patience !

Khalysto, il y a 10 ans

Pas de soucis !
My pleasure :)