web-dev-qa-db-fra.com

Comment ajouter un fichier JavaScript en utilisant wp_enqueue_scripts?

J'ai créé un script JavaScript très simple. Il y a 1 fichier .js avec beaucoup de code et dans le fichier HTML, il n'y a que 2 lignes. Le script fonctionne correctement lorsque je le teste sur une page HTML simple, mais lorsque je l’essaye avec WordPress, cela ne fonctionne pas.

Je suppose que cela a quelque chose à voir avec le chemin du fichier .js externe (src="js/file.js").

Qu'est-ce que je rate? Pourquoi mon script ne se charge-t-il pas correctement?

Edit: Voir le commentaire pour répondre ci-dessous, j'ai maintenant ajouté le code au functions.php, mais ne fonctionne toujours pas.

Edit2: C’est le code que j’utilise dans le functions.php:

add_action( 'wp_enqueue_scripts', 'my_enqueue_front_scripts' );
function my_enqueue_front_scripts(){
    wp_enqueue_script( 'my-custom-scripts', get_stylesheet_directory_uri() . '/js/file.js' );
}

Et voici le code dans ma balise head:

<script type="text/javascript"> url_detect.OnBack = function() { window.location.replace("URL.org"); } </script>
javascriptwp-enqueue-script
1
Alex

En supposant que votre version file.js est 1.0 et que vous voulez que le fichier js soit chargé dans l'en-tête du document (au lieu du pied de page), et conformément au Codex , vous pouvez ajouter des fichiers de script à votre document en utilisant:

Thème actif functions.php

function my_add_js(){
    $theme_uri = get_template_directory_uri();
    wp_enqueue_script( $handle,  $theme_uri . '/js/file.js', array(), '1.0', false );
}

en l'ajoutant sur une action à réaliser:

add_action( 'wp_enqueue_scripts', 'my_add_js' );

Thème actif header.php

<!DOCTYPE html>
<html>
    <head>

    <!-- other head section stuff here ... -->

    wp_head();?>
    </head>
    <body>

    <!-- some other html stuff maybe here ... -->

Remarque

Si vous avez un extrait de code JavaScript et souhaitez l'ajouter à votre pied de page à l'aide du fichier functions.php de votre thème:

function my_add_js(){
    ?>
    <script>
    // This is my script ...
    </script>
    <?php
}

add_action( 'wp_footer', 'my_add_js' );
1
Trix

Dans WordPress, vous devez mettre vos scripts (et vos styles) en file d'attente à l'aide du crochet d'action wp_enqueue_scripts.

La raison principale en est de s’assurer que votre script/style n’est ajouté qu’une fois. Si vous le souhaitez, vous pouvez également ajouter des conditions afin qu'un script/style ne soit ajouté qu'à certaines pages.

Dans votre question, vous dites que votre script se trouve dans js/file.js - cela se trouve-t-il dans votre thème?

Si c'est le cas, essayez le code ci-dessous (placez-le dans functions.php), sinon, veuillez fournir des détails supplémentaires.

add_action('wp_enqueue_scripts', 'my_enqueue_front_scripts');
function my_enqueue_front_scripts(){

    wp_enqueue_script('my-custom-scripts', get_stylesheet_directory_uri().'/js/file.js');

}

Notez que malgré le nom, ce crochet d'action doit également être utilisé pour mettre en file d'attente vos feuilles de style. Pour plus d’informations, prenez le temps de regarder les pages ci-dessous -

1
David Gard