Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

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

คุณต้องการค้นหาวิธีโหลด 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', จริง);

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

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

 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' => ",

ค้นพบเครื่องมือที่ดีที่สุดสำหรับเว็บไซต์ของคุณ

ดาวน์โหลดปลั๊กอินและธีม WordPress ที่ดีที่สุดใน Envato และสามารถสร้างเว็บไซต์ของคุณได้ง่ายๆ ดาวน์โหลดมากกว่า 49.720.000 [EXCLUSIVE]

 ), $ 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 เป็นปลั๊กอิน WordPress ที่ปรับแต่ง SEO ของคุณและบีบอัด CSS เพื่อปรับปรุงความเร็วในการโหลดเว็บไซต์ของคุณ

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

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

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

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

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

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

3 เมนูฮีโร่

ดาวน์โหลดเครื่องมือมากกว่า 11 ล้านรายการ

Envato Elements นำเสนอทรัพยากรที่ดีที่สุดในการสร้างและพัฒนาเว็บไซต์ของคุณทุกด้าน คุณจะพบเทมเพลต WordPress กราฟิก แหล่งข้อมูลเสียง และอื่นๆ อีกมากมายนับล้านรายการ เหมาะสำหรับผู้เริ่มต้น

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

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

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

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

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

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

สรุป

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

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

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

...

%d บล็อกเกอร์ชอบหน้านี้: