วิธีเชื่อมโยงไฟล์ jQuery / Javascript ภายนอกกับ WordPress

ดังนั้นฉันจึงใช้ Starkers ในการสร้างธีม WP ต่อไปของฉันและฉันพบปัญหาเล็ก ๆ ฉันรวม jQuery เวอร์ชันของตัวเองในheader.phpไฟล์ แต่เมื่อตรวจสอบเว็บไซต์ของฉันโดยใช้ Firebug ฉันสังเกตว่า jquery กำลังดาวน์โหลดสองครั้งฉัน ทำการขุดเล็กน้อยและสังเกตว่าไม่เพียง แต่ฉันรวมถึงไฟล์เท่านั้น แต่ยังมีwp_head()ฟังก์ชั่น

ในการพยายามแก้ไขปัญหาฉันสังเกตเห็นความคิดเห็นในไฟล์ส่วนหัวซึ่งมีต้นกำเนิดมาจากชุดรูปแบบยี่สิบยี่สิบ:

/* Always have wp_head() just before the closing </head>
 * tag of your theme, or you will break many plugins, which
 * generally use this hook to add elements to <head>, such 
 * as styles, scripts, and meta tags
 */

ดังนั้นนี่คือปัญหาของฉันฉันอยู่ภายใต้การแสดงผลที่ต้องตั้งค่าไฟล์ jQuery ก่อนไฟล์อื่น ๆ ที่ต้องการใช้และwp_head()ควรเป็นสิ่งสุดท้ายใน<head>องค์ประกอบฉันสับสนเล็กน้อยในขณะนี้เพราะฉันสงสัยว่าควร ฉันใส่wp_head()ที่ด้านบนเพื่อให้ไฟล์ WP รวม jQuery จะใช้สำหรับปลั๊กอินทั้งหมดของฉันแม้ว่ามันจะบอกว่าจะไม่ทำเช่นนั้น

ฉันแสดงความคิดเห็นในบรรทัด jQuery ในwp_head()ฟังก์ชั่น แต่มันจำเป็นสำหรับหน้าผู้ดูแลระบบดังนั้นฉันจึงต้องนำมันกลับมา

ฉันต้องการใช้ (อย่างน้อยการทดลอง) ด้วยการใช้ jQuery เวอร์ชัน Google CDN แต่ไม่ต้องการรวมสองครั้ง!

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

ขอบคุณ!

— Ben Everard
แหล่งที่มา

สิ่งนี้ควรได้รับการตั้งชื่อใหม่เป็น "วิธีลิงก์ไฟล์ jQuery / Javascript ภายนอกกับ WordPress"

— MikeSchinkel

ฉันเห็นด้วยฉันไม่แน่ใจว่าจะเรียกมันว่าอะไรเพราะฉันไม่คุ้นเคยกับปัญหาที่ฉันมี :-)

— เบ็นเอเวอราร์ด

คำตอบ:

จากถ้อยคำของคำถามของคุณคุณจะต้องเพิ่มสคริปต์โดยการเขียน<script>แท็กในแม่แบบของคุณ เพิ่มสคริปต์ของคุณเองผ่านทางwp_enqueue_script()แม่แบบของคุณfunctions.phpตั้งค่าการพึ่งพา jQuery อย่างเหมาะสมและwp_head()จะเพิ่มสคริปต์ให้คุณ

function my_scripts() {
    wp_enqueue_script( 'my-sweet-script', get_bloginfo('template_directory') . '/script.js', array('jquery') );
}
add_action('template_redirect', 'my_scripts');

ดูหน้า codexสำหรับข้อมูลเพิ่มเติม

— Annika Backstrom
แหล่งที่มา

คุณคิดถูกแล้วว่าฉันกำลังเพิ่มสคริปต์โดยใช้<script>แท็กนี่เป็นทางเลือกที่ฉันกำลังมองหาขอบคุณมาก! :-)

— เบ็น Everard

หากคุณต้องการเพิ่มสคริปต์ของคุณเฉพาะในปลายด้านหน้าเบ็ดบนแทน'template_redirect' 'init'

— John P Bloch

สิ่งที่ดีฉันจะอัปเดตคำตอบของฉัน ฉันเกือบจะแนะนำห่อ enqueue is_admin()ใน

— Annika Backstrom

โดยทั่วไปฉันเข้าคิวสคริปต์ในไฟล์เท็มเพลตด้านบนการget_header()ทำในfunctions.phpจะจัดคิวไว้ในทุก ๆ หน้าซึ่งอาจไม่จำเป็น หากฉันมีโลกที่เป็นสากลฉันเข้าแถวheader.phpก่อนหน้าwp_head()นี้เรียกว่า ด้วยวิธีการเหล่านี้เป็นที่ที่คุณคาดหวังว่าพวกเขาจะอยู่ใน<head>

— โจ Hoyle

บางครั้งการเพิ่มสคริปต์ที่ด้านล่างของหน้าจะเป็นการดีกว่า มันเป็นพารามิเตอร์สุดท้ายของcodex.wordpress.org/Function_Reference/wp_enqueue_script (อันดับที่ 5, $ in_footer) ตั้งค่าเป็นจริง ข้อมูลเล็กน้อยสำหรับผู้ที่ต้องการการควบคุมมากขึ้น

— hakre

ผมขอแนะนำการดูที่5 เคล็ดลับสำหรับการใช้ jQuery กับ WordPress เหนือสิ่งอื่นใดก็แสดงรหัสที่จำเป็นในการโหลด jQuery จากห้องสมุดของ Google:

function my_init() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'my_init');

คุณสามารถตรวจสอบปลั๊กอินใช้ Google Libraries

— เทรวิส Northcutt
แหล่งที่มา

นี่เป็นคำตอบที่ดีกว่าเนื่องจากแสดงวิธีจัดคิว jQuery เวอร์ชัน Google CDN แม้ว่าปัญหาเหมือนจอห์นที่อื่น ๆ ถ้าคุณเพียงต้องการที่จะไปเกี่ยวกับเรื่องนี้ front-end, ตะขอไปแทนtemplate_redirect init

— EAMann

จุดที่ดีเกี่ยวกับที่โหลด แม้ว่าจริงๆแล้วพื้นที่ผู้ดูแลระบบใช้ประโยชน์จาก jQuery ด้วยใช่ไหม? ขอบคุณสำหรับการแสดงวิธีการควบคุม

— Travis Northcutt

ใช่ฉันเพิ่งพบ 5 เคล็ดลับสำหรับการโพสต์ jquery / wp ขอบคุณสำหรับคำตอบของคุณ :-)

— เบ็น Everard

5 เคล็ดลับในการใช้ jQuery กับ WordPress ลิงก์ไม่ทำงานอีกต่อไป

— hakre

หมายเหตุ: ตัวอย่างประกอบด้วย jQuery เวอร์ชัน "เก่ากว่า" รุ่น WP ปัจจุบัน (3.0.1) กำลังเรียกใช้ jQuery 1.4.2 ...

— t31os

แม้ว่า @tnorthcutt นั้นถูกต้องที่คุณควร dequeue jQuery ดั้งเดิมของ WP อย่างถูกต้องหากคุณต้องการโหลดของคุณเองคุณมั่นใจได้ว่าจะมีปัญหาเมื่อคุณโหลด jquery รุ่นอื่นที่แกน WP ทั้งคอร์และปลั๊กอินต้องพึ่งพามัน ดังนั้นหากคุณไม่ได้อัปเดตชุดรูปแบบด้วย jquery ใหม่ล่าสุดทุกครั้งที่มีการอัปเดต WP เว็บไซต์ของคุณอาจเสียหาย

รหัสต่อไปนี้จะทำให้แน่ใจว่าธีมของคุณจะโหลด jquery เวอร์ชันที่ถูกต้องเสมอโดยค้นหาครั้งแรกว่า WP รุ่นใดที่ใช้แล้วโหลดหนึ่งจาก Google:

$wp_jquery_version = $GLOBALS['wp_scripts']->registered['jquery-core']->ver;
$jquery_version = ( $wp_jquery_version == '' ) ? '1.8.3' : $wp_jquery_version; // fallback, just in case 
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/'. $jquery_version .'/jquery.min.js', $jquery_version, false );
wp_enqueue_script('jquery');

— cjbj
แหล่งที่มา