web-dev-qa-db-fra.com

chemin du thème dans un 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!

theme-developmentthemesjavascriptpaths
12
charlenemasters

Ce que vous cherchez, c'est 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;
...
30
david.binda

Voici les deux manières suivantes d’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 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 fragment de code Javascript qui enregistre le répertoire de modèles uri dans une variable, puis l’utiliser comme suit: Ajoutez ce code dans le fichier header.php avant le fichier js dans lequel vous souhaitez utiliser ce fichier. 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);
5
Vinod Dalvi

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 (ou sous-répertoire) de votre site.

1
blizzrdof77

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/';
1
TakaSoft

Vous pouvez localiser vos fichiers javascript, ce qui vous permet de générer un tableau javascript contenant les valeurs définies par PHP (telles que la localisation ou les 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
1
Mike Madern

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;
}

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

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