chemin du thème dans le fichier javascript

15

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!

charlenemasters
la source

Réponses:

32

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;
...
david.binda
la source
impressionnant. travaillé comme un charme!
James Hall
6

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);
Vinod Dalvi
la source
wp_localize fonctionne! J'ai aussi essayé la 2ème approche, mais je n'ai pas réussi à la faire fonctionner. wp_localize works est probablement une meilleure pratique, non?
charlenemasters
@charlenemasters pour faire fonctionner la seconde approche dans l'ordre de déclaration de la variable et y accéder est très important.
Vinod Dalvi
2
la deuxième approche devrait être avec echopour travailler
Claudiu Creanga
@ClaudiuCreanga Merci, devrait faire écho: var stylesheet_directory_uri = "<?php echo get_stylesheet_directory_uri(); ?>";
ycc_swe
1

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
Mike Madern
la source
1

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).

blizzrdof77
la source
1

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/';
Takao Shibamoto
la source
0

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';
Jam Risser
la source