Themenpfad in Javascript-Datei

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 nur Einfügungen <?php get_stylesheet_directory_uri(); ?>anstelle des tatsächlichen Pfades. Irgendwelche Ideen? Danke im Voraus!

Was Sie suchen, ist die Funktion wp_localize_script .

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 deinem 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 später wie folgt verwendet: Fügen Sie diesen Code in der Datei header.php vor der js-Datei hinzu, in der Sie diesen Pfad verwenden möchten. 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);

Sie können Ihre Javascript-Dateien lokalisieren, wodurch Sie die Möglichkeit haben, ein Javascript-Array mit PHP-definierten Werten (wie Lokalisierung oder Verzeichnisse) zu generieren.

Wenn Sie Ihre Javascript-Datei durch laden wp_enqueue_script oder wp_register_scriptwie folgt einrichten:

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

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 - wie folgt:

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

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