chemin du thème dans le fichier javascript

Je dois inclure le chemin d'accès à mon fichier de thème dans un fichier javascript. Comment pourrais-je m'y prendre? J'ai déjà essayé:

var templateUrl = "<?php get_stylesheet_directory_uri(); ?>";

function LightboxOptions() {
  this.fileLoadingImage = "'"+templateUrl+"/img/loading.gif'";
  this.fileCloseImage = "'"+templateUrl+"/img/close.png'";
  this.resizeDuration = 700;
  this.fadeDuration = 500;
  this.labelImage = "Image";
  this.labelOf = "of";
}

Cela ne me donne pas le chemin, mais insère simplement <?php get_stylesheet_directory_uri(); ?>au lieu du chemin réel. Des idées? Merci d'avance!

Ce que vous recherchez est la fonction wp_localize_script .

Vous l'utilisez comme ceci lors de l'exécution du script

wp_register_script( 'my-script', 'myscript_url' );
wp_enqueue_script( 'my-script' );
$translation_array = array( 'templateUrl' => get_stylesheet_directory_uri() );
//after wp_enqueue_script
wp_localize_script( 'my-script', 'object_name', $translation_array );

Dans votre style.js, il va y avoir:

var templateUrl = object_name.templateUrl;
...

Ce sont les deux façons suivantes pour ajouter un chemin de thème dans un fichier javascript.

1) Vous pouvez utiliser wp_localize_script () suggéré par wordpress dans votre fichier functions.php. Cela créera un objet Javascript dans l'en-tête, qui sera disponible pour vos scripts lors de l'exécution.

Exemple :

wp_register_script('custom-js',get_stylesheet_directory_uri().'/js/custom.js',array(),NULL,true);
wp_enqueue_script('custom-js');

$wnm_custom = array( 'stylesheet_directory_uri' => get_stylesheet_directory_uri() );
wp_localize_script( 'custom-js', 'directory_uri', $wnm_custom );

et peut utiliser dans votre fichier js comme suit:

alert(directory_uri.stylesheet_directory_uri); 

2) Vous pouvez créer un extrait Javascript qui enregistre le répertoire du modèle uri dans une variable et l'utiliser plus tard comme suit: Ajoutez ce code dans le fichier header.php avant le fichier js dans lequel vous souhaitez utiliser ce chemin. Exemple:

<script type="text/javascript">
var stylesheet_directory_uri = "<?php echo get_stylesheet_directory_uri(); ?>";
</script>

et peut utiliser dans votre fichier js comme suit:

alert(stylesheet_directory_uri);

Vous pouvez localiser vos fichiers javascript, ce qui vous donne la possibilité de générer un tableau javascript rempli de valeurs définies par PHP (comme la localisation ou les répertoires).

Si vous chargez votre fichier javascript wp_enqueue_scriptou wp_register_scriptsa configuration facile comme suit:

function localize_vars() {
    return array(
        'stylesheet_directory' => get_stylesheet_directory_uri()
    );
}

wp_enqueue_script( 'my_script', plugins_url( 'my_plugin/my_script.js' ), array( 'jquery' ) );
wp_localize_script( 'my_script', 'my_unique_name', localize_vars() );

Et dans vos fichiers javascript, vous pouvez appeler ces variables par:

my_unique_name.stylesheet_directory

J'ai commencé à utiliser cette petite méthode pratique pour obtenir le répertoire de thèmes WordPress et le stocker en tant que variable JavaScript globale (le tout à partir d'un fichier javascript):

function getThemeDir() {
    var scripts = document.getElementsByTagName('script'),
        index = scripts.length - 1,
        myScript = scripts[index];

    return myScript.src.replace(/themes\/(.*?)\/(.*)/g, 'themes/$1');
}
themeDir = getThemeDir();

Cela ne fonctionnera que si les conditions suivantes sont remplies:

    1. Cet extrait est exécuté via un fichier JavaScript externe - comme ceci:

<script src="/wp-content/themes/themename/assets/app.js"></script>

    2. Le fichier js réside dans le répertoire de thème de votre site (ou sous-répertoire).

C'est comme ça que je l'ai fait.

Placez le fichier javascript et les images dans le dossier-thème / actifs

Et modifiez les fichiers suivants.

Dans functions.php

/* for javascript (only when using child theme) */
wp_enqueue_script('my-script', get_template_directory_uri() . '-child/assets/test.js');
wp_localize_script('my-script', 'myScript', array(
    'theme_directory' => get_template_directory_uri() 
));

Dans votre fichier javascript

var url = myScript.theme_directory + '-child/assets/';

Si le fichier javascript est chargé à partir du tableau de bord d'administration, vous pouvez utiliser cette fonction javascript pour obtenir la racine de votre installation WordPress.

function getHomeUrl() {
  var href = window.location.href;
  var index = href.indexOf('/wp-admin');
  var homeUrl = href.substring(0, index);
  return homeUrl;
}

Ensuite, contactez simplement le chemin d'accès à votre thème comme ci-dessous.

var myThemePath = getHomeUrl() + '/wp-content/themes/myTheme';