ฉันต้องการจัดคิวไฟล์. js ให้กับธีมลูกของฉัน


16

ฉันพยายามจัดคิวไฟล์. js ที่กำหนดเองในไดเรกทอรีธีมลูกของฉัน

ใน function.php ของชุดรูปแบบลูกของฉันฉันค้นหารหัสต่อไปนี้

/* After this. you can override Accessible Zen's pluggable functions or add your own.
 * Remember, do your best to stay accessible! :)
 *
 */
 add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_script( 'custom-script.js', 'js/custom-script.js', array('jquery') );
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}

ที่ฉันใช้งานส่วนนี้เท่านั้นและควรโหลด custom.script.js ของฉันจากโฟลเดอร์ js /

wp_enqueue_script( 'custom-script.js', 'js/custom-script.js', array('jquery') );

น่าเสียดายที่มันไม่ทำเช่นนั้นใครช่วยได้บ้าง

* อัปเดต 2

รหัสดูเหมือนตอนนี้และใช้งานได้มันไม่ทำงานเมื่อฉันเพิ่งเพิ่มฟังก์ชั่นไปยัง add_action อื่น ขอบคุณทุกคนสำหรับความช่วยเหลือ! ยังฉันสงสัยว่าไม่มีวิธีที่จะตัดรหัสนี้เล็กน้อย

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}

/*add my custom jquery script*/
add_action( 'wp_enqueue_scripts', 'menu_scripts' );
function menu_scripts() {
wp_enqueue_script( 'responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script(
    'custom-script',
    get_stylesheet_directory_uri() . '/js/custom-script.js',
    array( 'jquery' )
);
        }

สายนี้มีไว้เพื่ออะไร?

wp_enqueue_script( 'responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );

จำเป็นหรือไม่


wp_enqueue_script( 'custom-script.js', get_stylesheet_directory_uri() . 'js/custom-script.js', array('jquery') );
Pieter Goosen

@ ปีเตอร์ฉันปรับการเปลี่ยนแปลงของคุณ แต่ก็ยังไม่ทำงาน นี่คือสิ่งที่ฉันมีในไฟล์. js ของฉันและทำงานได้ถ้าฉันใส่ไว้ใน page.php โดยตรงเช่น: <script> if (jQuery) {alert ("โหลดไลบรารี jQuery!"); } else {alert ("ไม่พบ jQuery library!"); } </script>
MrKainig

@Pieter โอเคฉันใส่รหัสในคำถาม
MrKainig

ลบแท็กสคริปต์ออกจากไฟล์ js ของคุณ
Pieter Goosen

คำตอบ:


32

นี่คือตัวอย่างการทำงาน:

add_action( 'wp_enqueue_scripts', 'menu_scripts' );
function menu_scripts() {
wp_enqueue_script( 'responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script(
    'custom-script',
    get_stylesheet_directory_uri() . '/js/custom_script.js',
    array( 'jquery' )
);
        }

หรืออย่างนี้โหลดเร็วกว่า:

function my_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        get_stylesheet_directory_uri() . '/js/custom_script.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

แหล่งที่มาhttp://codex.wordpress.org/Function_Reference/wp_enqueue_script

get_template_directory_uri() จะทำงานในธีมหลักเท่านั้น


1
ทำไมคุณไม่ใช้get_stylesheet_directory_uri()?
Pieter Goosen

พวกเขาทั้งสองทำงานตามการทดสอบของฉัน
แบรดดัลตัน

ฉันลองอันแรกมันไม่ทำงาน คุณสามารถโพสต์บล็อกโค้ดแบบเต็ม (รวมถึงคิวที่มีอยู่และที่ทำงานอยู่ของฉัน) ได้ไหม เพราะฉันไม่ทราบวิธีการใช้รหัสของคุณอย่างถูกต้องกับรหัสที่มีอยู่ในฟังก์ชั่นของฉันแล้ว
MrKainig

2
ใช่พวกเขาทำ แต่get_stylesheet_directory_uri()เร็วกว่า :-)
Pieter Goosen

มันเป็นเพียงตัวอย่างการทำงาน คุณต้องทำงานบางอย่างเพื่อเรียนรู้วิธีการทำงานกับโค้ดของคุณ ตอนนี้คุณสามารถทำงานซ้ำรหัสของคุณเพื่อให้โหลดสคริปต์ของคุณในชุดรูปแบบของคุณ
แบรดดัลตัน
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.