คุณต้องการค้นหาวิธีโหลด JavaScript บน WordPress หรือไม่?

ทั้งหมด ธีม WordPress มักจะประกอบด้วยไฟล์ PHP, HTML, CSS และ JavaScript JavaScript เป็นภาษาโปรแกรมยอดนิยมในหมู่นักพัฒนา ธีม WordPress. เป็นภาษาที่ทำให้หน้า HTML โต้ตอบได้ และยังช่วยให้คุณสามารถโต้ตอบกับเซิร์ฟเวอร์ได้อีกด้วย

การรู้วิธีใช้งานบนเว็บไซต์ของคุณจะเป็นข้อได้เปรียบอย่างมาก

ในการใช้งาน JavaScript คุณจำเป็นต้องรู้วิธีโหลดบนเว็บไซต์ของคุณ

แต่ก่อนหน้านี้หากคุณไม่เคยติดตั้ง WordPress ให้ค้นพบ วิธีการติดตั้งขั้นตอน 7 บล็อก WordPress et วิธีการหาติดตั้งและเปิดใช้งานธีมเวิร์ดเพรสบนบล็อกของคุณ 

จากนั้นกลับไปที่สาเหตุที่เราอยู่ที่นี่

วิธีการโหลดจาวาสคริปต์ WordPress

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

ค้นพบการสอนของเราด้วย วิธีบีบอัดไฟล์ CSS, HTML และ Javascript ของคุณ

WordPress ทำสิ่งเดียวกันทุกประการ แต่คุณไม่สามารถวางแท็กสคริปต์เหล่านี้ลงในไฟล์ส่วนหัวหรือส่วนท้ายของคุณได้ ธีม WordPress. WordPress ใช้กลไกการโหลดอัจฉริยะที่เรียกว่า “ enqueueing '

กลไกนี้จำเป็นต่อการให้ความหมายต่อการพึ่งพา หากคุณกำลังเขียนโค้ด jQuery สำหรับธีม WordPress ของคุณจะต้องโหลด jQuery เองก่อน

คุณเขียนโค้ดที่ต้องใช้ปลั๊กอิน jQuery ในกรณีนี้จะต้องโหลด jQuery ก่อนจากนั้นจึงปลั๊กอิน jQuery ตามด้วยรหัสของคุณ

วิธีการ "Enqueueing" สคริปต์ (เพิ่มลงในคิว)

คุณสามารถจัดคิวสคริปต์ในโฟลเดอร์ธีม WordPress หรือของคุณ WordPress ปลั๊กอิน. นี่คือรหัสที่สมบูรณ์เพื่อรวมสคริปต์ที่อาศัย jQuery:

my_theme_scripts ของฟังก์ชัน () {

 wp_enqueue_script ('my-script ", get_template_directory_uri ().' /js/my-script.js ', array (' jquery '),' 1.0.0 ', จริง);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

ก่อนอื่นฟังก์ชันต้องเป็น " ติดยาเสพติด บน WordPress (ใช้ตะขอ WordPress) อาร์กิวเมนต์แรกของฟังก์ชัน add_action () บอก WordPress ว่าควรวางสคริปต์เหล่านี้ไว้ที่ใด:

• บนพื้นที่สาธารณะ
• บนแดชบอร์ด

ถ้าคุณใช้ " wp_enqueue_scripts พวกเขาจะถูกโหลดในพื้นที่สาธารณะถ้าคุณใช้ " admin_enqueue_scripts พวกเขาจะถูกโหลดบนแผงควบคุม

ในฟังก์ชั่น« add_action คุณสามารถใช้ " wp_enqueue_script ในการเพิ่มสคริปต์ที่คุณต้องการ ฟังก์ชันใช้พารามิเตอร์ที่จำเป็นและพารามิเตอร์ทางเลือกสี่ตัว:

• พารามิเตอร์แรกคือชื่อสคริปต์ของคุณ คุณสามารถเลือกสิ่งที่คุณต้องการ แต่ให้แน่ใจว่าใช้ชื่อที่ไม่ซ้ำกัน
• พารามิเตอร์ที่สองควรมีตำแหน่งของไฟล์ในธีม WordPress หรือ WordPress ปลั๊กอิน.
• พารามิเตอร์ที่สามประกอบด้วยอาร์เรย์ของการอ้างอิง ในตัวอย่างด้านบนฉันบอกว่า jQuery เป็นการพึ่งพา การอ้างอิงทั้งหมดจะถูกโหลดก่อนสคริปต์ที่เป็นปัญหา
• พารามิเตอร์ที่สี่คือหมายเลขเวอร์ชัน
• พารามิเตอร์ที่ห้าและสุดท้ายระบุว่าคุณต้องการโหลดสคริปต์ที่ส่วนหัวหรือส่วนท้าย ใช้ "true" เพื่อโหลดที่ส่วนท้ายหรือ "false" เพื่อโหลดสคริปต์บนส่วนหัว (คุณไม่สามารถเติมพารามิเตอร์นี้ได้).

เรือน

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

หากคุณรวมสคริปต์อิสระหลายรายการคุณสามารถเพิ่มสคริปต์เหล่านั้นเป็นการอ้างอิงได้ในลักษณะเดียวกัน ดูตัวอย่างด้านล่าง:

my_theme_scripts ของฟังก์ชัน () {

 wp_enqueue_script ("my-base script", get_template_directory_uri (). '/js/my-base-script.js', array ('jquery'), '1.0.0', จริง);

 wp_enqueue_script ("my-script-extension", get_template_directory_uri (). '/js/my-script-extension.js', array ("my-script-base '),' 1.0.0 ', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

เนื่องจากสคริปต์แรกขึ้นอยู่กับ jQuery ดังนั้นสคริปต์ถัดไปก็ขึ้นอยู่กับสคริปต์ด้วยเช่นกัน ดังนั้นคุณไม่จำเป็นต้องเพิ่ม jQuery เป็นการพึ่งพาสำหรับทั้งสอง ทำให้การจัดการการพึ่งพาง่ายขึ้น

เงื่อนไขการโหลด

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

my_theme_scripts ของฟังก์ชัน () {

 wp_register_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', จริง);

 wp_enqueue_script ('สคริปต์ของฉัน');

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

เราได้บันทึกสคริปต์เพื่อให้ WordPress เรียนรู้เกี่ยวกับสคริปต์ แต่เราใช้ " enqueue " ด้วยวิธีนี้สคริปต์จะถูกเพิ่มไปยังหน้าเท่านั้นหากมีการใช้รหัสย่อในหน้านี้

อีกวิธีหนึ่งในการโหลดสคริปต์ที่มีเงื่อนไขคือการใช้ฟังก์ชันตามเงื่อนไข หากคุณต้องการโหลดสคริปต์ในหน้าเก็บถาวรทั้งหมดของหมวดหมู่คุณสามารถใช้ฟังก์ชัน is_category ().

ตัวอย่างเช่นคุณสามารถสร้างภาพหมุนที่ผู้ใช้สามารถเพิ่มลงในบทความเช่นนี้: [carousel ids = '42,124,123,331,90, XNUMX ′] ภาพหมุนจะถูกสร้างขึ้นในหน้าบทความโดยใช้ภาพที่กำหนดโดย ID

ในการทำเช่นนี้คุณต้องสร้างไฟล์ " carousel.js ซึ่งขึ้นอยู่กับ jQuery นี่คือรหัสสำหรับการไปถึงที่นั่น (ไม่ได้สร้างม้าหมุน แต่ให้คุณดูว่ากระบวนการโหลดเกิดขึ้นได้อย่างไร):

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

my_theme_scripts ของฟังก์ชัน () {

 wp_register_script ('my-carousel', get_template_directory_uri (). '/js/my-carousel.js', อาร์เรย์ ('jquery'), '1.0.0', จริง);

}

add_shortcode ('carousel', 'my_carousel');

ฟังก์ชัน my_carousel ($ args) {

 $ atts = shortcode_atts (อาร์เรย์ (

 'Ids' => ",

 ), $ Atts, 'carousel');

 wp_enqueue_script ('my-carousel');

 // รหัสเพื่อแสดงภาพหมุนที่นี่

}

การถอดและเปลี่ยนสคริปต์

นี่เป็นสถานการณ์ทั่วไป แต่บางครั้งคุณอาจต้องลบหรือแทนที่สคริปต์ ฉันตกอยู่ในสถานการณ์ที่สคริปต์เพิ่มโดยปลั๊กอิน (แต่ไม่ได้ใช้โดยธีม) ทำให้เกิดปัญหาความเข้ากันได้ "การถอน" เป็นตัวเลือกที่ดีที่สุดเนื่องจากข้อผิดพลาดหายไปอย่างสมบูรณ์

คุณยังสามารถแทนที่ jQuery ด้วยเวอร์ชันที่ใหม่กว่าได้หากคุณกำลังทดสอบบางอย่างเพื่อให้แน่ใจว่าจะเข้ากันได้กับเวอร์ชันที่ใหม่กว่า

ในสถานการณ์เหล่านี้ฟังก์ชั่น wp_deregister_script () "และ" wp_dequeue_script () มีประโยชน์ ต่อไปนี้เป็นวิธีแก้ไขโค้ดที่เพิ่มไว้ใน WordPress

my_theme_scripts ของฟังก์ชัน () {

 wp_deregister_script ('jquery');

 wp_enqueue_script ('jquery', get_template_directory_uri (). '/js/jquery3.0.0.js', array (), '3.0.0', จริง);

 wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', จริง);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

คิดสุดท้าย

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

ค้นพบปลั๊กอิน WordPress พรีเมียมบางอย่าง  

คุณสามารถใช้อื่นๆ ปลั๊กอิน WordPress เพื่อให้ดูทันสมัยและเพิ่มประสิทธิภาพการจัดการบล็อกหรือเว็บไซต์ของคุณ

เราเสนอปลั๊กอิน WordPress พรีเมี่ยมให้คุณที่นี่ซึ่งจะช่วยคุณได้

1 Premium SEO Pack

Premium SEO Pack คือ a WordPress ปลั๊กอิน ซึ่งเพิ่มประสิทธิภาพ SEO ของคุณและบีบอัด CSS เพื่อปรับปรุงความเร็วในการโหลดเว็บไซต์ของคุณ

ปลั๊กอินยังช่วยให้คุณจัดการการออกแบบเว็บไซต์ของคุณได้ในไม่กี่คลิก ฟังก์ชันอื่น ๆ ได้แก่ การบีบอัด CSS และ JS การรวมแผนผังไซต์วิดีโอและข้อมูลโค้ดการจัดรูปแบบไฟล์ HTML และ XML การเปลี่ยนเส้นทางของหน้า 404 และ 301 การแบ่งปันบนเครือข่ายสังคม 'ป้ายกำกับ ALT รูปแบบที่ปรับแต่งได้สูง

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

2 Woocommerce เวลาจัดส่งสินค้าสำหรับจัดส่ง

Woocommerce Delivery Time Picker for Shipping เป็นส่วนขยาย WooCommerce ที่ช่วยให้ลูกค้าสามารถเลือกวันที่และเวลาในการจัดส่งได้ในหน้าชำระเงิน 

ลูกค้าจะสามารถเลือกเวลาจัดส่งของแพ็คเกจที่บ้านได้ เวลาการส่งมอบจะปรากฏแก่ผู้ดูแลระบบของเว็บไซต์และจะถูกส่งทางอีเมลไปยังผู้ดูแลระบบของเว็บไซต์หรือร้านค้าออนไลน์

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

3 เมนูฮีโร่

ปลั๊กอินนี้ช่วยให้คุณสร้างเมนู WordPress ของคุณเองได้ในไม่กี่ขั้นตอนที่ค่อนข้างง่าย โดยเฉพาะอย่างยิ่งช่วยให้คุณสร้างเมนู WordPress ที่สวยงามและเป็นมืออาชีพได้อย่างง่ายดายและเป็นธรรมชาติ 

จากเมนู mega ที่ซับซ้อนที่สุดที่เต็มไปด้วยคุณสมบัติต่างๆไปจนถึงเมนูที่ง่ายที่สุดพร้อมด้วยเมนูแบบเลื่อนลงปลั๊กอิน WordPress HeroMenu ตั้งค่าเมนูประเภทใดก็ได้และเริ่มใช้งานได้ในไม่กี่นาที

ในแง่ของคุณสมบัติที่มีให้ในหมู่ผู้อื่น: การทำงานที่สมบูรณ์แบบบนพีซีแท็บเล็ตและสมาร์ทโฟนจาก CSS ที่กำหนดเอง เพื่อเพิ่มสไตล์ของคุณเองในเมนูตัวสร้าง megamenu เบราว์เซอร์ที่รองรับหลายตัว: Chrome, Firefox, Safari, Opera, IE9 และอีกมากมาย

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

ทรัพยากรที่แนะนำ

ดูแหล่งข้อมูลที่แนะนำอื่น ๆ ที่จะช่วยคุณแก้ไขข้อผิดพลาดทั่วไปของ WordPress 

• วิธีการแก้ไขข้อผิดพลาดในการเปลี่ยนเส้นทาง WordPress
• วิธีการสร้างรูปแบบกำหนดเองด้วย Elementor
• วิธีการสร้าง WordPress อินทราเน็ตสำหรับองค์กรของคุณ
• วิธีการสร้างหน้าเข้าสู่ระบบใน WordPress

สรุป

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

อย่างไรก็ตามคุณยังจะสามารถปรึกษาเราได้ บริการสารสนเทศหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress

แต่ในระหว่างนี้บอกเราเกี่ยวกับคุณ ความเห็น และข้อเสนอแนะในส่วนเฉพาะ

...