Ich muss den Pfad zu meiner Designdatei in eine Javascript-Datei einfügen. Wie würde ich das machen? Ich habe schon versucht:
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";
}
Dies gibt mir nicht den Pfad, sondern fügt nur <?php get_stylesheet_directory_uri(); ?>
anstelle des tatsächlichen Pfades ein. Irgendwelche Ideen? Danke im Voraus!
Was Sie suchen, ist wp_localize_script function .
Sie verwenden es so, wenn Sie ein Skript einreihen
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 );
In Ihrem style.js wird es geben:
var templateUrl = object_name.templateUrl;
...
Dies sind die folgenden zwei Möglichkeiten, um einen Themenpfad in eine Javascript-Datei einzufügen.
1) Sie können wp_localize_script () verwenden, das von wordpress in Ihrer functions.php-Datei vorgeschlagen wird. Dadurch wird im Header ein Javascript-Objekt erstellt, das Ihren Skripten zur Laufzeit zur Verfügung steht.
Beispiel:
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 );
und kann in Ihrer js-Datei wie folgt verwendet werden:
alert(directory_uri.stylesheet_directory_uri);
2) Sie können ein Javascript-Snippet erstellen, das das Vorlagenverzeichnis uri in einer Variablen speichert, und es später wie folgt verwenden: Fügen Sie diesen Code in der Datei header.php vor der js-Datei hinzu, in der Sie dies verwenden möchten Pfad. Beispiel:
<script type="text/javascript">
var stylesheet_directory_uri = "<?php echo get_stylesheet_directory_uri(); ?>";
</script>
und kann in Ihrer js-Datei wie folgt verwendet werden:
alert(stylesheet_directory_uri);
Ich habe mit dieser praktischen kleinen Methode begonnen, das WordPress-Designverzeichnis abzurufen und es als globale JavaScript-Variable zu speichern (alles in einer Javascript-Datei):
function getThemeDir() {
var scripts = document.getElementsByTagName('script'),
index = scripts.length - 1,
myScript = scripts[index];
return myScript.src.replace(/themes\/(.*?)\/(.*)/g, 'themes/$1');
}
themeDir = getThemeDir();
Dies funktioniert nur, wenn die folgenden Bedingungen erfüllt sind:
1. Dieses Snippet wird über eine externe JavaScript-Datei ausgeführt - so:
<script src="/wp-content/themes/themename/assets/app.js"></script>
2. Die js-Datei befindet sich im Themenverzeichnis (oder im Unterverzeichnis) Ihrer Site.
So habe ich es gemacht.
Legen Sie die Javascript-Datei und die Bilder in den Themenordner/Assets
Und bearbeiten Sie die folgenden Dateien.
In 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()
));
In Ihrer Javascript-Datei
var url = myScript.theme_directory + '-child/assets/';
Sie können Ihre Javascript-Dateien lokalisieren, wodurch Sie die Möglichkeit haben, ein Javascript-Array mit PHP definierten Werten (wie Lokalisierung oder Verzeichnissen) zu generieren.
Wenn Sie Ihre Javascript-Datei über wp_enqueue_script
oder wp_register_script
laden, ist die Einrichtung wie folgt einfach:
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() );
In Ihren Javascript-Dateien können Sie diese Variablen folgendermaßen aufrufen:
my_unique_name.stylesheet_directory
Wenn die Javascript-Datei aus dem Admin-Dashboard geladen wird, können Sie mit dieser Javascript-Funktion das Stammverzeichnis Ihrer WordPress-Installation abrufen.
function getHomeUrl() {
var href = window.location.href;
var index = href.indexOf('/wp-admin');
var homeUrl = href.substring(0, index);
return homeUrl;
}
Dann kontaktieren Sie einfach den Pfad zu Ihrem Thema wie unten.
var myThemePath = getHomeUrl() + '/wp-content/themes/myTheme';