đường dẫn chủ đề trong tệp javascript

Tôi cần bao gồm đường dẫn đến tệp chủ đề của mình trong tệp javascript. Làm thế nào tôi sẽ đi về điều này? Tôi đã thử:

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

Điều này không cho tôi đường dẫn, mà chỉ chèn <?php get_stylesheet_directory_uri(); ?>thay vì đường dẫn thực tế. Có ý kiến ​​gì không? Cảm ơn trước!

Thứ bạn đang tìm kiếm là hàm wp_localize_script .

Bạn sử dụng nó như thế này khi viết kịch bản

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

Trong style.js của bạn, sẽ có:

var templateUrl = object_name.templateUrl;
...

Đây là hai cách sau để thêm đường dẫn chủ đề trong tệp javascript.

1) Bạn có thể sử dụng wp_localize_script () được đề xuất bởi wordpress trong tệp tin.php . Điều này sẽ tạo một Đối tượng Javascript trong tiêu đề, sẽ có sẵn cho các tập lệnh của bạn khi chạy.

Thí dụ :

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

và có thể sử dụng trong tệp js của bạn như sau:

alert(directory_uri.stylesheet_directory_uri); 

2) Bạn có thể tạo một đoạn mã Javascript lưu uri thư mục mẫu vào một biến và sử dụng nó sau như sau: Thêm mã này vào tệp header.php trước tệp js mà bạn muốn sử dụng đường dẫn này. Thí dụ:

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

và có thể sử dụng trong tệp js của bạn như sau:

alert(stylesheet_directory_uri);

Bạn có thể bản địa hóa các tệp javascript của mình, sẽ cung cấp cho bạn cơ hội để tạo một mảng javascript chứa đầy các giá trị do PHP xác định (chẳng hạn như bản địa hóa hoặc thư mục).

Nếu bạn tải máng tệp javascript của mình wp_enqueue_scripthoặc wp_register_scriptdễ dàng thiết lập như sau:

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

Và trong các tệp javascript của bạn, bạn có thể gọi các biến này bằng cách:

my_unique_name.stylesheet_directory

Tôi bắt đầu sử dụng phương pháp nhỏ tiện lợi này để lấy thư mục chủ đề WordPress và lưu trữ dưới dạng biến JavaScript toàn cầu (tất cả từ trong tệp 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();

Điều này sẽ chỉ hoạt động nếu các điều kiện sau được đáp ứng:

    1. Đoạn mã này được thực thi thông qua tệp JavaScript bên ngoài - như thế này:

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

    2. Tệp js nằm trong thư mục chủ đề của trang web của bạn (hoặc thư mục con).

Đây là cách tôi đã làm nó.

Đặt tệp và hình ảnh javascript vào thư mục chủ đề / tài sản

Và chỉnh sửa các tập tin sau.

Trong hàm.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() 
));

Trong tệp javascript của bạn

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

Nếu tệp javascript được tải từ bảng điều khiển quản trị viên, bạn có thể sử dụng chức năng javascript này để lấy bản gốc cài đặt WordPress của bạn.

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

Sau đó, chỉ cần liên hệ với đường dẫn đến chủ đề của bạn như dưới đây.

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