web-dev-qa-db-fra.com

URL du chemin WordPress dans le fichier script js

J'ai ajouté un script personnalisé: 

wp_enqueue_script('functions', get_bloginfo('template_url') . '/js/functions.js', 'search', null, false);

Cela fonctionne très bien, sauf dans le functions.js j'ai:

Reset.style.background = "url('../images/searchfield_clear.png') no-repeat top left";

Cela fonctionnait auparavant, jusqu'à ce que je change en jolis permaliens et .htaccess

La hiérarchie des dossiers est comme:

themename/js themename/images (les images et le dossier js se trouvent dans le dossier nommé)

J'ai essayé ../images - ./image -/images 

Normalement, il faut remonter d’un niveau quel que soit le lieu où se trouve le fichier js ....

Je ne veux pas utiliser le chemin complet.

Existe-t-il un autre moyen que WordPress peut reconnaître dans le fichier javascript pour obtenir le chemin correct?

Actuellement, je ne comprends plus ce que je fais mal.

javascriptwordpresswordpress-theming
42
Cam

Vous pouvez éviter de coder en dur le chemin complet en définissant une variable JS dans l'en-tête de votre modèle, avant l'appel de wp_head() et en maintenant l'URL du modèle. Comme:

<script type="text/javascript">
var templateUrl = '<?= get_bloginfo("template_url"); ?>';
</script>

Et utilisez cette variable pour définir l’arrière-plan (je réalise que vous savez comment faire cela, n’incluez ces détails que s’ils aident les autres):

Reset.style.background = " url('"+templateUrl+"/images/searchfield_clear.png') ";
61
AJJ

Selon la documentation Wordpress, vous devez utiliser wp_localize_script() 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.

Voir Codex

Exemple:

<?php wp_localize_script('mylib', 'WPURLS', array( 'siteurl' => get_option('siteurl') )); ?>

Pour accéder à cette variable en Javascript, vous feriez simplement:

<script type="text/javascript">
    var url = WPURLS.siteurl;
</script>
94
Chris
    wp_register_script('custom-js',WP_PLUGIN_URL.'/PLUGIN_NAME/js/custom.js',array(),NULL,true);
    wp_enqueue_script('custom-js');

    $wnm_custom = array( 'template_url' => get_bloginfo('template_url') );
    wp_localize_script( 'custom-js', 'wnm_custom', $wnm_custom );

et dans custom.js

alert(wnm_custom.template_url);
23
keithics

Si le fichier javascript est chargé à partir du tableau de bord de l’administrateur, cette fonction javascript vous donnera la racine de votre installation WordPress. J'utilise beaucoup cela lorsque je crée des plugins qui doivent émettre des requêtes ajax à partir du tableau de bord de l'administrateur.

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

Pour les utilisateurs travaillant avec le framework Genesis.

Ajoutez ce qui suit à votre thème enfant functions.php

add_action( 'genesis_before', 'script_urls' );

function script_urls() {
?>
    <script type="text/javascript">
     var stylesheetDir = '<?= get_bloginfo("stylesheet_directory"); ?>';
    </script>
<?php
}

Et utilisez cette variable pour définir l'URL relative dans votre script. Par exemple:

Reset.style.background = " url('"+stylesheetDir+"/images/searchfield_clear.png') ";
0
Toine Pel