คุณต้องการที่จะเชี่ยวชาญในการเพิ่มรหัส jQuery บน WordPress หรือไม่? ดังนั้นอ่านต่อเพื่อเรียนรู้เพิ่มเติม

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

ดังนั้นเราจะพยายามอธิบายให้ชัดเจน

เนื่องจาก jQuery เป็น JavaScript Framework ที่ใช้กันอย่างแพร่หลาย เราจะแสดงวิธีเพิ่มลงในธีมหรือa WordPress ปลั๊กอิน.

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

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

โหมดความเข้ากันได้ JQuery

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

ค้นหาว่าเขา ควรลบ jQuery จากธีมและปลั๊กอินของคุณ WordPress ?

ซึ่งหมายความว่าคุณไม่สามารถใช้เครื่องหมายดอลลาร์ได้โดยตรงเช่นเดียวกับในโครงการอื่น ๆ เมื่อเขียน jQuery บน WordPress คุณต้องใช้ jQuery แทน

ลองดูโค้ดด้านล่างเพื่อดูว่าฉันหมายถึงอะไร:

/ * โหมดปกติ * / $ (". ซ่อนได้") เปิด ('click', function () {$ (this) .hide ();}) / * Compatibility mode * / jQuery ('. Hideable') ('คลิก', ฟังก์ชัน () {jQuery (this) .hide ();})

สิ่งที่คุณต้องรู้คือด้วยการดัดแปลงเล็กน้อยคุณสามารถใช้สัญลักษณ์ดอลลาร์อีกครั้ง การใช้แต่ละครั้ง "jQuery" ในทุกรหัสของคุณจะยุ่งยากในการเขียนมาก

ตรวจสอบ 10 บรรณาธิการรหัสสำหรับนักพัฒนา WordPress

เพียงเพื่อปะยางรถหากคุณรู้ว่า jQuery เครื่องหมาย $ เป็นเพียงนามแฝงสำหรับ jQuery () แล้วก็นามแฝงสำหรับฟังก์ชั่น ไวยากรณ์พื้นฐานคือ: $ (เลือก) .action () :

  • เครื่องหมายดอลลาร์เพื่อกำหนด jQuery
  • A (ตัวเลือก) เพื่อ "ค้นหา" องค์ประกอบ HTML
  • การกระทำ jQuery () เพื่อดำเนินการกับองค์ประกอบเหล่านี้

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

(function ($) {$ ('. hideable'). on ('click', function () {$ (this) .hide ();})}) (jQuery);

หากคุณต้องการเพิ่มสคริปต์ของคุณบนส่วนหัว (สิ่งที่คุณควรหลีกเลี่ยงถ้าเป็นไปได้คุณสามารถห่อมันในฟังก์ชั่นที่ทำงานเมื่อเอกสารพร้อม

ค้นพบโดยวิธี วิธีเพิ่ม อย่างง่ายดาย รหัสบน WordPress โดยไม่ทำลายเว็บไซต์ของคุณ

jQuery (เอกสาร) .ready (function ($) {$ ('. hideable'). on ('click', function () {$ (this) .hide ();})});

วิธีเชื่อมโยงสคริปต์ของคุณกับ jQuery

ตอนนี้คุณสามารถเขียนรหัส jQuery ที่ถูกต้องบน WordPress แล้วเราจะเชื่อมโยงงานของเรากับเว็บไซต์ของเรา ใน WordPress เรียกว่า ' enqueueing "(ระบบหาง). สำหรับเว็บไซต์ HTML ปกติเราควรใช้แท็กต้นฉบับ> เพื่อเพิ่มสคริปต์

WordPress สามารถทำสิ่งเดียวกันได้ แต่เราจะใช้คุณสมบัติพิเศษของ WordPress เพื่อทำสิ่งนี้ ด้วยวิธีนี้ WordPress จัดการการอ้างอิงทั้งหมดของเราสำหรับเรา

หากคุณกำลังทำงานกับธีมคุณสามารถใช้ฟังก์ชันได้ wp_enqueue_script () ภายในไฟล์ของคุณ functions.php ไฟล์. นี่คือวิธีที่คุณสามารถทำได้:

ฟังก์ชัน my_theme_scripts () {wp_enqueue_script ('my-great-script', get_template_directory_uri (). '/js/my-great-script.js', array ('jquery'), '1.0.0', จริง); } add_action ('wp_enqueue_scripts', 'my_theme_scripts');

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

ฉันเพิ่ม jQuery เป็นการอ้างอิงเนื่องจากสคริปต์ใช้มัน หากคุณสร้างสคริปต์ที่ขึ้นอยู่กับ "ที่ดีที่สคริปต์ของฉัน คุณต้องเพิ่มลงในรายการอ้างอิงเพื่อให้ WordPress รู้ว่าไฟล์ใดที่ต้องโหลดก่อน

ค้นพบด้วย วิธีการโหลด JavaScript บน WordPress

พารามิเตอร์ที่สี่คือหมายเลขเวอร์ชันและตัวที่ห้าช่วยให้ WordPress ทราบตำแหน่งที่จะวางสคริปต์ ตามค่าเริ่มต้นสคริปต์จะถูกโหลดในส่วนหัวซึ่งเป็นการปฏิบัติที่ไม่ดีเนื่องจากจะทำให้การโหลดหน้าเว็บไซต์ของคุณช้าลง (เบราว์เซอร์หยุดการโหลดหน้าเว็บทั้งหมดเมื่อใดก็ตามที่มีการบล็อก est rencontré) คุณต้องโหลดสคริปต์ทั้งหมดของคุณลงในส่วนท้ายหากทำได้โดยกำหนดพารามิเตอร์ตัวที่ห้า " จริง '

วิธีการเพิ่มสคริปต์บนแดชบอร์ด

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

function my_admin_scripts () {wp_enqueue_script ('my-great-script', plugin_dir_url (__FILE__) '/js/my-great-script.js', array ('jquery'), '1.0.0', true); } add_action ('admin_enqueue_scripts', 'my_admin_scripts');

แทนที่จะใช้ wp_enqueue_scripts เราต้องใช้ admin_enqueue_scriptsและนั่นคือทั้งหมด!

การใช้แท็กที่มีเงื่อนไข

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

ค้นพบยังของเรา ปลั๊กอิน WordPress 10 เพื่อปรับปรุงความเร็วในการโหลดบล็อกของคุณ

ลองดูที่ admin_enqueue_scripts เอกสาร ใน WordPress Codex สำหรับข้อมูลเพิ่มเติม

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

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

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

1 แผนที่โลกเชิงโต้ตอบ

แผนที่โลกแบบโต้ตอบคือ WordPress ปลั๊กอิน ซึ่งช่วยให้คุณสร้างแผนที่ได้มากเท่าที่คุณต้องการด้วยเครื่องหมายโต้ตอบและสี ทวีป ประเทศ หรือภูมิภาค

แผนที่โลกแบบโต้ตอบ

มันเข้ากันได้กับเวอร์ชั่นใหม่ของ WordPress และ แต่งภาพ. ขอบคุณปลั๊กอินนี้คุณสามารถแสดงภูมิภาคหลายประเภทเช่น: แผนที่ของทั้งโลกทวีปหรือทวีปย่อย (แอฟริกายุโรปอเมริกาเอเชียเอเชียโอเชียเนียและทวีปย่อยทั้งหมด) ประเทศและ ประเทศหารด้วยภูมิภาครัฐของสหรัฐอเมริกา, สหรัฐอเมริกาหารด้วยพื้นที่นครบาล, รัฐของสหรัฐอเมริกาหารด้วยพื้นที่มหานคร

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

2 ฟอร์มการติดต่อ AJAX พร้อมการติดตาม

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

คุณสมบัติหลักของมันคือคุณสมบัติอื่น ๆ : กสำหรับอีเมลการสนับสนุนของ CAPTCHA คณิตศาสตร์เกี่ยวกับรูปแบบการปรับแต่งและการกำหนดค่า ผ่านทางแดชบอร์ดของ WordPress ความเป็นไปได้ของ dกำหนดระบบตอบรับอัตโนมัติแบบกำหนดเองรองรับ CSS แบบกำหนดเองและอื่น ๆ

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

3 เกตเวย์การชำระเงินมาตรฐานของ PayPal สำหรับแบบฟอร์มนินจา

PayPal Standard Gateway for Ninja Forms ช่วยให้คุณสร้างแบบฟอร์มที่ผสานเข้ากับเกตเวย์การชำระเงินของ PayPal ได้อย่างราบรื่น 

เกตเวย์การชำระเงินมาตรฐาน Paypal สำหรับรูปแบบนินจา

คุณจะสามารถสร้างแบบฟอร์มคำสั่งซื้อส่วนบุคคลและรับการชำระเงินโดยใช้บัญชี Paypal มาตรฐาน คุณสมบัติหลัก ได้แก่ การรวมที่ง่ายและรวดเร็วการรวม IPN ความสามารถในการเปิด / ปิดการใช้งานเกตเวย์ PayPal ในแต่ละรูปแบบรองรับการชำระเงินปกติ ฯลฯ

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

แหล่งข้อมูลอื่น ๆ ที่แนะนำ

นอกจากนี้เรายังขอเชิญคุณให้ศึกษาข้อมูลด้านล่างเพื่อเพิ่มเติมในส่วนที่จับและควบคุมของเว็บไซต์และบล็อกของคุณ

สรุป

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

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

แต่ในระหว่างนี้โปรดแจ้งให้เราทราบเกี่ยวกับไฟล์ ความเห็น และข้อเสนอแนะในส่วนเฉพาะ

...