wake-up-neo.com

WordPress-Pfad-URL in der js-Skriptdatei

Ich habe ein benutzerdefiniertes Skript hinzugefügt: 

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

Es funktioniert super, außer im functions.js, den ich habe:

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

Das hat früher funktioniert, bis ich zu ziemlich Permalinks und .htaccess gewechselt bin

Die Ordnerhierarchie sieht folgendermaßen aus:

themename/js themename/images (der Ordner images und js befindet sich im Ordner themename)

Ich habe versucht ../images - ./image -/images 

Normalerweise sollte es 1 Ebene zurückgehen, wo auch immer sich die js-Datei befindet.

Ich möchte keinen vollständigen Pfad verwenden.

Gibt es eine andere Möglichkeit, die WordPress in der Javascript-Datei erkennt, um den richtigen Pfad zu haben?

Momentan bin ich nur verwirrt, was ich falsch mache.

42
Cam

Sie können das Festcodieren des vollständigen Pfads vermeiden, indem Sie eine JS-Variable im Header Ihrer Vorlage festlegen, bevor wp_head() aufgerufen wird und die Vorlagen-URL enthält. Mögen:

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

Und verwenden Sie diese Variable, um den Hintergrund festzulegen (ich weiß, dass Sie wissen, wie das geht, ich füge nur diese Details hinzu, falls sie anderen helfen):

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

In der Wordpress-Dokumentation sollten Sie wp_localize_script() in Ihrer Datei "functions.php" verwenden. Dadurch wird im Header ein Javascript-Objekt erstellt, das Ihren Skripts zur Laufzeit zur Verfügung steht.

Siehe Codex

Beispiel:

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

Um auf diese Variable in Javascript zuzugreifen, würden Sie einfach Folgendes tun:

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

und in custom.js

alert(wnm_custom.template_url);
23
keithics

Wenn die Javascript-Datei aus dem Admin-Dashboard geladen wird, erhalten Sie mit dieser JavaScript-Funktion das Stammverzeichnis Ihrer WordPress-Installation. Ich verwende dies häufig, wenn ich Plugins baue, die Ajax-Anforderungen vom Admin-Dashboard aus erstellen müssen.

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

Für Benutzer, die mit dem Genesis-Framework arbeiten.

Fügen Sie Ihrem untergeordneten Thema Folgendes hinzu: functions.php

add_action( 'genesis_before', 'script_urls' );

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

Und verwenden Sie diese Variable, um die relative URL in Ihrem Skript festzulegen. Zum Beispiel:

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