เส้นทางธีมในไฟล์จาวาสคริปต์

ฉันต้องรวมเส้นทางไปยังไฟล์ธีมของฉันภายในไฟล์จาวาสคริปต์ ฉันจะไปเกี่ยวกับเรื่องนี้อย่างไร ฉันได้ลองแล้ว:

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

นี่ไม่ได้ให้เส้นทางแก่ฉัน แต่เพียงแค่แทรก<?php get_stylesheet_directory_uri(); ?>แทนที่จะเป็นเส้นทางที่แท้จริง ความคิดใด ๆ ขอบคุณล่วงหน้า!

สิ่งที่คุณกำลังมองหาคือฟังก์ชั่น wp_localize_script

คุณใช้มันในลักษณะนี้เมื่อทำการ enqueing script

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

ในสไตล์ของคุณจะมี:

var templateUrl = object_name.templateUrl;
...

ต่อไปนี้เป็นสองวิธีในการเพิ่มธีมพา ธ ในไฟล์ javascript

1)คุณสามารถใช้wp_localize_script () ที่แนะนำโดย wordpress ในไฟล์ functions.php ของคุณ สิ่งนี้จะสร้าง Javascript Object ในส่วนหัวซึ่งจะพร้อมใช้งานกับสคริปต์ของคุณเมื่อรันไทม์

ตัวอย่าง:

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

และสามารถใช้ในไฟล์ js ของคุณดังต่อไปนี้:

alert(directory_uri.stylesheet_directory_uri); 

2)คุณสามารถสร้างตัวอย่าง Javascript ที่บันทึกแม่แบบไดเรกทอรี uri ในตัวแปรและใช้ในภายหลังดังต่อไปนี้: เพิ่มรหัสนี้ในไฟล์ header.php ก่อนไฟล์ js ที่คุณต้องการใช้เส้นทางนี้ ตัวอย่าง:

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

และสามารถใช้ในไฟล์ js ของคุณดังต่อไปนี้:

alert(stylesheet_directory_uri);

คุณสามารถแปลไฟล์จาวาสคริปต์ของคุณซึ่งเปิดโอกาสให้คุณสร้างอาร์เรย์จาวาสคริปต์ที่เต็มไปด้วยค่าที่กำหนดโดย PHP (เช่นการแปลหรือไดเรกทอรี)

หากคุณโหลดไฟล์จาวาสคริปต์ของคุณwp_enqueue_scriptหรือwp_register_scriptติดตั้งง่ายเช่น:

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

และในไฟล์จาวาสคริปต์ของคุณคุณสามารถเรียกตัวแปรเหล่านี้ได้โดย:

my_unique_name.stylesheet_directory

ฉันเริ่มใช้วิธีการเล็ก ๆ น้อย ๆ ที่สะดวกสบายนี้เพื่อรับไดเรกทอรีธีม WordPress และเก็บไว้เป็นตัวแปร 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();

สิ่งนี้จะใช้งานได้หากตรงตามเงื่อนไขต่อไปนี้ :

    1.ตัวอย่างนี้จะถูกดำเนินการผ่านไฟล์ JavaScript ภายนอก - เช่นนี้:

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

    2.ไฟล์ js อยู่ในไดเรกทอรีธีมของเว็บไซต์ (หรือไดเรกทอรีย่อย)

นี่คือวิธีที่ฉันทำ

วางไฟล์ javascript และรูปภาพใน theme-folder / assets

และแก้ไขไฟล์ต่อไปนี้

ในฟังก์ชั่น

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

ในไฟล์จาวาสคริปต์ของคุณ

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

หากโหลดไฟล์จาวาสคริปต์จากแผงควบคุมของผู้ดูแลระบบคุณสามารถใช้ฟังก์ชันจาวาสคริปต์นี้เพื่อรับรูทของการติดตั้ง WordPress ของคุณ

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

จากนั้นเพียงติดต่อเส้นทางไปยังชุดรูปแบบของคุณด้านล่าง

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