jalur tema dalam file javascript

15

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!

charlenemasters
sumber

Jawaban:

32

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;
...
david.binda
sumber
luar biasa. bekerja seperti pesona!
James Hall
6

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);
Vinod Dalvi
sumber
wp_localize works! Saya mencoba pendekatan ke-2 juga, tetapi saya tidak berhasil membuatnya bekerja. wp_localize works mungkin adalah praktik yang lebih baik, bukan?
charlenemasters
@charlenemasters untuk membuat pendekatan kedua bekerja urutan mendeklarasikan variabel dan mengaksesnya sangat penting.
Vinod Dalvi
2
pendekatan kedua harus dilakukan echountuk bekerja
Claudiu Creanga
@ClaudiuCreanga Terima kasih, harus gema: var stylesheet_directory_uri = "<?php echo get_stylesheet_directory_uri(); ?>";
ycc_swe
1

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
Mike Madern
sumber
1

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

blizzrdof77
sumber
1

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/';
Takao Shibamoto
sumber
0

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';
Jam Risser
sumber