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.

javascriptwordpresswordpress-theming
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