คุณต้องการค้นหาวิธีโหลด 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
แต่ในระหว่างนี้บอกเราเกี่ยวกับคุณ ความเห็น และข้อเสนอแนะในส่วนเฉพาะ
...
ขอบคุณมากสำหรับข้อมูลในหน้านี้:
<>
ฉันดิ้นรนมานานแล้ว pcq ฉันไม่เคยเห็นสคริปต์ JS ของฉันในแดชบอร์ดเนื่องจากอาร์กิวเมนต์แรกของ add_action () ตั้งค่าเป็น wp และไม่ใช่ผู้ดูแลระบบ