chemin du thème dans un fichier javascript

10

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 actuel. Des idées? Merci d'avance!

    
posée charlenemasters 07.03.2013 - 11:48

6 réponses

25

Ce que vous recherchez, c'est la fonction wp_localize_script .

Vous l'utilisez comme ceci lorsque vous écrivez un 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 y aura:

var templateUrl = object_name.templateUrl;
...
    
réponse donnée david.binda 07.03.2013 - 11:59
5

Voici les deux méthodes 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 functions.php. fichier. Cela créera un objet Javascript dans l'en-tête, qui sera disponible pour vos scripts au moment 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 pouvez utiliser dans votre fichier js comme suit:

alert(directory_uri.stylesheet_directory_uri); 

2) Vous pouvez créer un extrait de code Javascript qui enregistre le répertoire de modèles uri dans une variable et l'utiliser ultérieurement 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 pouvez utiliser dans votre fichier js comme suit:

alert(stylesheet_directory_uri);
    
réponse donnée Vinod Dalvi 07.03.2013 - 11:53
1

Vous pouvez localiser vos fichiers javascript, ce qui vous permet de générer un tableau javascript contenant des valeurs définies par PHP (telles que la localisation ou des répertoires).

Si vous chargez votre fichier javascript dans wp_enqueue_script ou wp_register_script , sa configuration est simple, 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
    
réponse donnée Mike Madern 07.03.2013 - 11:59
1

Voici comment je l'ai fait.

Placez le fichier javascript et les images dans le dossier theme / assets

Et éditez 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/';
    
réponse donnée Takao Shibamoto 01.01.2017 - 09:46
0

Si le fichier javascript est chargé à partir du tableau de bord de l'administrateur, vous pouvez utiliser cette fonction 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;
}

Il vous suffit ensuite de contacter le chemin d'accès à votre thème, comme ci-dessous.

var myThemePath = getHomeUrl() + '/wp-content/themes/myTheme';
    
réponse donnée Jam Risser 14.06.2016 - 07:59
0

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 de code est exécuté via un fichier JavaScript externe, semblable à celui-ci:

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

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

    
réponse donnée blizzrdof77 12.08.2016 - 20:39

Lire d'autres questions sur les étiquettes