jalur tema dalam file javascript

Saya perlu memasukkan path ke file tema saya dalam file javascript. Bagaimana saya melakukan ini? Saya sudah mencoba:

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";
}

Ini tidak memberi saya jalan, tetapi hanya menyisipkan <?php get_stylesheet_directory_uri(); ?>jalan yang sebenarnya. Ada ide? Terima kasih sebelumnya!

Apa yang Anda cari adalah fungsi wp_localize_script .

Anda menggunakannya seperti ini saat membuat skrip enqueing

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

Di style.js Anda, akan ada:

var templateUrl = object_name.templateUrl;
...

Ini adalah dua cara berikut untuk menambahkan jalur tema dalam file javascript.

1) Anda dapat menggunakan wp_localize_script () yang disarankan oleh wordpress di file functions.php Anda. Ini akan membuat Objek Javascript di header, yang akan tersedia untuk skrip Anda saat runtime.

Contoh:

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

dan dapat digunakan dalam file js Anda sebagai berikut:

alert(directory_uri.stylesheet_directory_uri); 

2) Anda dapat membuat cuplikan Javascript yang menyimpan direktori template uri dalam sebuah variabel, dan menggunakannya nanti sebagai berikut: Tambahkan kode ini dalam file header.php sebelum file js di mana Anda ingin menggunakan jalur ini. Contoh:

<script type="text/javascript">
var stylesheet_directory_uri = "<?php echo get_stylesheet_directory_uri(); ?>";
</script>

dan dapat digunakan dalam file js Anda sebagai berikut:

alert(stylesheet_directory_uri);

Anda dapat melokalkan file javascript Anda, yang memberi Anda kesempatan untuk menghasilkan array javascript yang diisi dengan nilai yang ditentukan PHP (seperti lokalisasi atau direktori).

Jika Anda memuat file javascript Anda wp_enqueue_scriptatau wp_register_scriptmudah diatur seperti berikut:

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

Dan dalam file javascript Anda, Anda dapat memanggil variabel-variabel ini dengan:

my_unique_name.stylesheet_directory

Saya mulai menggunakan metode kecil yang mudah digunakan ini untuk mendapatkan direktori tema WordPress dan menyimpannya sebagai variabel JavaScript global (semuanya dari dalam file javascript):

function getThemeDir() {
    var scripts = document.getElementsByTagName('script'),
        index = scripts.length - 1,
        myScript = scripts[index];

    return myScript.src.replace(/themes\/(.*?)\/(.*)/g, 'themes/$1');
}
themeDir = getThemeDir();

Ini hanya akan berfungsi jika kondisi berikut dipenuhi:

    1. Cuplikan ini dijalankan melalui file JavaScript eksternal - seperti ini:

<script src="/wp-content/themes/themename/assets/app.js"></script>

    2. File js berada di dalam direktori tema situs Anda (atau subdirektori).

Beginilah cara saya melakukannya.

Tempatkan file javascript dan gambar di folder-tema / aset

Dan edit file-file berikut.

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

Dalam file javascript Anda

var url = myScript.theme_directory + '-child/assets/';

Jika file javascript dimuat dari admin dashboard, Anda dapat menggunakan fungsi javascript ini untuk mendapatkan root dari instalasi WordPress Anda.

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

Maka cukup hubungi jalur ke tema Anda seperti di bawah ini.

var myThemePath = getHomeUrl() + '/wp-content/themes/myTheme';