คุณต้องการที่จะเชี่ยวชาญในการเพิ่มรหัส 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 แทน
ลองดูโค้ดด้านล่างเพื่อดูว่าฉันหมายถึงอะไร:
/ * โหมดปกติ * / $ (". ซ่อนได้") เปิด ('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é) คุณต้องโหลดสคริปต์ทั้งหมดของคุณลงในส่วนท้ายหากทำได้โดยกำหนดพารามิเตอร์ตัวที่ห้า " จริง '
วิธีการเพิ่มสคริปต์บนแดชบอร์ด
คุณยังสามารถเพิ่มสคริปต์ใน หน้าปัด. ฟังก์ชั่นที่ใช้เหมือนกันทุกประการคุณต้องใช้ " เบ็ด "แตกต่างกัน. ดูตัวอย่างด้านล่าง:
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. มันมาพร้อมกับตัวจัดการการตั้งค่าที่สามารถเข้าถึงได้โดยตรงผ่านแดชบอร์ดของ WordPress
คุณสมบัติหลักของมันคือคุณสมบัติอื่น ๆ : กสำหรับอีเมลการสนับสนุนของ CAPTCHA คณิตศาสตร์เกี่ยวกับรูปแบบการปรับแต่งและการกำหนดค่า ผ่านทางแดชบอร์ดของ WordPress ความเป็นไปได้ของ dกำหนดระบบตอบรับอัตโนมัติแบบกำหนดเองรองรับ CSS แบบกำหนดเองและอื่น ๆ
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
3 เกตเวย์การชำระเงินมาตรฐานของ PayPal สำหรับแบบฟอร์มนินจา
PayPal Standard Gateway for Ninja Forms ช่วยให้คุณสร้างแบบฟอร์มที่ผสานเข้ากับเกตเวย์การชำระเงินของ PayPal ได้อย่างราบรื่น
คุณจะสามารถสร้างแบบฟอร์มคำสั่งซื้อส่วนบุคคลและรับการชำระเงินโดยใช้บัญชี Paypal มาตรฐาน คุณสมบัติหลัก ได้แก่ การรวมที่ง่ายและรวดเร็วการรวม IPN ความสามารถในการเปิด / ปิดการใช้งานเกตเวย์ PayPal ในแต่ละรูปแบบรองรับการชำระเงินปกติ ฯลฯ
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
แหล่งข้อมูลอื่น ๆ ที่แนะนำ
นอกจากนี้เรายังขอเชิญคุณให้ศึกษาข้อมูลด้านล่างเพื่อเพิ่มเติมในส่วนที่จับและควบคุมของเว็บไซต์และบล็อกของคุณ
- วิธีการใช้หมวดหมู่และแท็กอย่างมีประสิทธิภาพบน WordPress
- วิธีการสร้างเมนูที่ตอบสนองสำหรับ WordPress มือถือ
- วิธีการสร้าง WordPress อินทราเน็ตสำหรับองค์กรของคุณ
- วิธีการติดตั้งปลั๊กอินในเวิร์ดเพรส
สรุป
ที่นี่! สำหรับบทช่วยสอนนี้ หวังว่าตอนนี้คุณจะรู้วิธีเพิ่มสคริปต์ใน WordPress แล้ว อย่าลังเลที่จะ แบ่งปันเคล็ดลับกับเพื่อนของคุณบนเครือข่ายสังคมของคุณ.
อย่างไรก็ตามคุณยังจะสามารถปรึกษาเราได้ บริการสารสนเทศหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress
แต่ในระหว่างนี้โปรดแจ้งให้เราทราบเกี่ยวกับไฟล์ ความเห็น และข้อเสนอแนะในส่วนเฉพาะ
...
ขอบคุณมาก. ผมลองทำด้วยเครื่องหมาย $ เป็นเวลาหนึ่งชั่วโมง การใช้ jquery ไม่ใช่ปัญหา