WordPress Javascript: A Beginner's Guide

หากคุณถามนักพัฒนาเว็บหนึ่งล้านคนว่า JavaScript คืออะไร คุณจะได้รับคำตอบที่แตกต่างกันนับล้าน แทบทุกอย่างที่โต้ตอบบนเว็บนั้นทำได้โดยใช้ JavaScript

ในฐานะที่เป็นระบบจัดการเนื้อหาที่ทันสมัย ​​(CMS) WordPress และปลั๊กอินจำนวนมากใช้ JavaScript บางส่วนเพื่อให้งานสำเร็จลุล่วง ตรงกันข้ามกับสิ่งที่อาจดูเหมือน JavaScript ไม่มีความสัมพันธ์กับภาษาการเขียนโปรแกรม Java เรียกว่าเพื่อวัตถุประสงค์ทางการตลาดเท่านั้น

มาดำดิ่งลงไปในทุกสิ่งที่คุณจำเป็นต้องรู้เพื่อควบคุมพลังที่รวมกันของ JavaScript และ WordPress

JavaScript คืออะไร?

นานมาแล้ว อินเทอร์เน็ตอาศัย HTML และ CSS เท่านั้น ชุดค่าผสมนี้ช่วยให้จัดรูปแบบเนื้อหาได้ขั้นพื้นฐาน อย่างไรก็ตาม สามารถทำได้เพียงเล็กน้อยเพื่อทำให้เนื้อหาเป็นไดนามิก และการสร้างเว็บแอปพลิเคชันก็ไม่เป็นปัญหา

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

เว็บเบราว์เซอร์มีเอ็นจิ้น JavaScript ที่รู้วิธีรันโค้ด JavaScript ตัวอย่างเช่น เอ็นจิ้น JavaScript ใน Chrome คือ v8 ในขณะที่เอ็นจิน FireFox JavaScript คือ SpiderMonkey ด้วยเหตุนี้ Javascript จึงอาศัยเบราว์เซอร์ในการ "เข้าใจ" วิธีตีความ จัดการ และจัดการการแสดงข้อมูล

ลักษณะทางเทคนิคของ JavaScript

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

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

JavaScript ทำอะไร?

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

สรุป JavaScript ทำเกือบทุกอย่างที่นักพัฒนาต้องการให้ทำบนเครื่องของลูกค้า JavaScript แคชภายในเครื่องไคลเอ็นต์เมื่อไคลเอ็นต์เยี่ยมชมไซต์ที่ใช้

แม้ว่าข้อมูลที่ละเอียดอ่อนจะต้องได้รับการจัดการบนเซิร์ฟเวอร์ แอปพลิเคชันบนเว็บจำนวนมากใช้ JavaScript อย่างหนักเพื่อใช้ประโยชน์จากพลังการประมวลผลของเครื่องไคลเอนต์ ตอนนี้เราอยู่ในยุคของ "กรอบ" ที่ไม่มีที่สิ้นสุดที่ทำให้การพัฒนาเนื้อหาประเภทต่างๆ เร็วขึ้นมาก ความเป็นไปได้ไม่มีที่สิ้นสุด

JavaScript ปลอดภัยหรือไม่?

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

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

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

ประเภทการโจมตี JavaScript หลักสองประเภท

สุภาษิตที่ว่า "ให้เพื่อนของคุณอยู่ใกล้และศัตรูของคุณใกล้ชิด" เกี่ยวข้องกับการพัฒนาและความปลอดภัย สิ่งสำคัญคือต้องเข้าใจว่าผู้ร้ายใช้ประโยชน์จาก JavaScript อย่างไร เพื่อที่คุณจะได้สามารถขัดขวางความพยายามของพวกเขาได้!

การเขียนสคริปต์ข้ามไซต์ (XSS)

Cross-site scripting (XSS) เป็นประเภทของการโจมตีของมัลแวร์ที่ดำเนินการโดยใช้ประโยชน์จากช่องโหว่ข้ามไซต์บนไซต์ WordPress ใดๆ อันที่จริง เป็นวิธีที่พบได้บ่อยที่สุดสำหรับไซต์ WordPress ที่จะถูกแฮ็ก เนื่องจากมีปลั๊กอิน WordPress จำนวนมากที่มีช่องโหว่ XSS

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

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

การปลอมแปลงคำขอข้ามไซต์ (CSRF)

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

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

สถานการณ์หนึ่งที่เกิดขึ้นจริงกับเว็บไซต์หลักและธนาคารใหญ่คือลิงก์ของธนาคารเพื่อโอนเงินมีลักษณะดังนี้: www.bankwithbadsecurity.com/transfer&amount=1000&toAccount=12345 เพื่อโอนเงิน 1,000 ดอลลาร์ไปยังบัญชีหมายเลข 12345

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

ฉันสามารถใช้ JavaScript ภายใน WordPress ได้หรือไม่?

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

โปรดทราบว่าคุณยังสามารถใช้ JavaScript เมื่อพัฒนาส่วนขยายสำหรับ WordPress แม้ว่าฝั่งเซิร์ฟเวอร์ของ WordPress คือ PHP แต่ฝั่งไคลเอ็นต์นั้นเกือบ 100% ของ JavaScript

ฉันควรเรียนรู้ JavaScript สำหรับ WordPress หรือไม่

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

ในทางกลับกัน การเริ่มต้นใช้งาน JavaScript นั้นค่อนข้างง่าย และคุณจะได้เรียนรู้มากมายเกี่ยวกับวิธีการทำงานของ HTML และ CSS อย่างไรก็ตาม นอกเหนือจากการฝึกอบรม WordPress คุณจะต้องเรียนรู้ JavaScript หากคุณต้องการสร้างไซต์แบบไดนามิกและน่าจดจำ

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

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

นอกจากนี้ หากคุณมีแรงบันดาลใจในการเป็นนักพัฒนาเว็บ การเรียนรู้ JavaScript จะเป็นประโยชน์สำหรับอาชีพเหล่านี้:

• Front-end Developer
• Back-end Developer
• นักพัฒนาแบบฟูลสแตก

นอกจากนี้ การเรียนรู้ JavaScript พร้อมกับ HTML, CSS และ PHP ขั้นสูงทำหน้าที่เป็นพื้นฐาน WP ที่มั่นคงซึ่งจะช่วยลดค่าใช้จ่ายสำหรับคุณ คุณไม่จำเป็นต้องจ่ายเงินให้ผู้รับเหมาภายนอกอีกต่อไป เพื่อทำงานที่ในความเป็นจริงอาจใช้เวลาไม่กี่นาทีกว่าจะเสร็จ เมื่อคุณเชี่ยวชาญ JavaScript แล้ว คุณสามารถไปยังเฟรมเวิร์กยอดนิยม เช่น React และ Angular เพื่อสร้างแอปพลิเคชันที่ตอบสนองและไม่ซ้ำใครได้อย่างแท้จริงภายใน WordPress

ฉันจะเขียน JavaScript เมื่อเข้ารหัสใน WordPress ได้อย่างไร

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

วิธีที่ 1: ในทุกหน้า

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

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

วิธีที่ 2: JavaScript ที่แตกต่างกันในแต่ละหน้า

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

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

ให้ติดตั้งปลั๊กอิน Code Embed บนไซต์ของคุณแทน ซึ่งจะทำให้คุณสามารถเพิ่ม JavaScript และฝังไว้ที่ใดก็ได้ที่คุณต้องการภายในหน้า

การใช้ปลั๊กอิน CodeEmbed

หลังจากติดตั้งปลั๊กอิน Code Embed ให้ไปที่ Screen Options และกดที่ช่องทำเครื่องหมายที่ระบุว่า "Custom Fields" ซึ่งจะทำให้คุณสามารถเพิ่ม JavaScript ของคุณลงในเพจได้

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

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

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

ฉันจะรวมไฟล์ JavaScript และ CSS ของฉันใน WordPress ได้อย่างไร

แม้ว่า WordPress จะมีธีมในตัว แต่นักพัฒนาเว็บจำนวนมากต้องการมีการออกแบบที่เป็นเอกลักษณ์มากกว่าและจะใช้ CSS ของตัวเอง คุณจะต้องมีวิธีจัดเก็บไฟล์ JavaScript เหล่านั้นด้วย

ในส่วนนี้ คุณจะต้องไปที่ตัวจัดการไฟล์และค้นหาไฟล์ชื่อ “functions.php” โปรดทราบว่าสิ่งนี้จะอยู่ในโฟลเดอร์ที่มีธีมหลักสำหรับไซต์ของคุณ

การเพิ่ม CSS ให้กับ functions.php

เมื่อคุณอยู่ในไฟล์ functions.php แล้ว ให้ทำตามขั้นตอนเหล่านี้:

1. ในบรรทัดใหม่ ให้สร้างฟังก์ชันว่างโดยเพิ่มฟังก์ชันโค้ด
   addMyCSS() { #Fill This In Later }
2. “ลงทะเบียน” ไฟล์ CSS ของคุณกับ WordPress โดยใช้ฟังก์ชั่นในตัวที่เรียกว่า wp_register_style ในขั้นตอนถัดไป
3. ลบฟิลเลอร์ที่เราใส่ในโค้ดแล้วใส่ wp_register_style('name_of_css_style',plugins_url('file-location.css',__FILE__));
4. ตอนนี้เราได้บอก WordPress ว่าจะเรียกสไตล์ CSS ของเราว่าอะไรและมันอยู่ที่ไหน ตอนนี้ได้เวลา "จัดคิว" สไตล์หรือบอก WordPress ว่าเราพร้อมที่จะใช้งานแล้ว
5. อยู่ภายในบล็อกฟังก์ชัน addMyCSS เพิ่มรหัส wp_enqueue_style('name_of_css_style'); ด้านล่างโค้ดที่เราป้อนในขั้นตอนสุดท้าย
6. มีขั้นตอนสุดท้ายอยู่ขั้นตอนหนึ่ง แต่ก่อนอื่น ตรวจสอบให้แน่ใจว่า คุณไม่ได้อยู่นอกฟังก์ชันทั้งหมด ที่เราสร้างขึ้นและอยู่ในส่วนทั่วไปของไฟล์ PHP
7. นอก addMyCSS เพียงเพิ่มบรรทัดต่อไปนี้: add_action('wp_enqueue_scripts','name_of_css_style'); . สิ่งนี้บอกให้ WordPress ทริกเกอร์การโหลดไฟล์นี้เมื่อโหลดหน้าเว็บ

คุณอาจสงสัยว่าทำไมเราถึงมี wp_enqueue_scripts ในฟังก์ชัน add_action สำหรับสไตล์ชีต นี่เป็นเพียงวิธีที่ WordPress ใช้งานคุณลักษณะนี้เสมอ

การเพิ่มไฟล์ JavaScript ลงใน WordPress

ตอนนี้เราได้ผ่านขั้นตอนการสร้างฟังก์ชัน การลงทะเบียนไฟล์ และเพิ่มการดำเนินการแล้ว ส่วนนี้น่าจะเป็นเรื่องง่าย!

1. สร้างฟังก์ชันใน functions.php ชื่อ addMyJS เหมือนที่เราทำกับ addMyCSS
2. เราจะใช้ฟังก์ชัน wp_register_script แต่มันซับซ้อนกว่าเล็กน้อย มีห้า "พารามิเตอร์" (รายการที่ใส่ในวงเล็บ) ดูด้านล่างเพื่อดูว่าแต่ละพารามิเตอร์คืออะไร
3. wp_register_script(1. Your Script Name, 2. plugins_url(location_of_script.js, __FILE__), 3. array of JS dependencies, โดยปกติคือ array(jquery), 4. (ทางเลือก) ของไฟล์ JS ของคุณในเครื่องหมายคำพูดเดี่ยว 5. ควรเป็น true หากคุณต้องการ JS ในส่วนท้ายของคุณ false หากคุณต้องการให้อยู่ในส่วนหัว);
4. ต่อไปนี้คือตัวอย่างการใช้งานจริงของ JavaScript บางตัวที่จะทำงานในส่วนท้ายของธีม: wp_register_script('timer_js', plugins_url('timer_file.js', __FILE__), array('jquery'),'1.0', true);
5. อีกครั้ง นอก ฟังก์ชัน addMyJS ของเรา "enqueue" สคริปต์ของคุณโดยวางสิ่งนี้ไว้ในพื้นที่ทั่วไปของ PHP: add_action( 'wp_enqueue_scripts', 'addMyJS' );

อาจดูซับซ้อน แต่เมื่อคุณเข้าใจแล้ว ก็จะใช้เวลาไม่ถึงนาที ไม่ต้องกลัว!

ฉันสามารถใช้ปลั๊กอินอะไรเพื่อเพิ่ม JavaScript ให้กับ WordPress ได้บ้าง

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

• ASync – ปลั๊กอินนี้จะโหลดทั้งไฟล์ JS และ CSS แยกจากส่วนที่เหลือของเพจ ซึ่งจะเป็นประโยชน์อย่างยิ่งหากมีข้อผิดพลาดในการเขียนโค้ดที่อาจทำให้หน้าเว็บของคุณไม่สามารถโหลดได้โดยไม่มีกำหนด

• JS ในวิดเจ็ต – ต้องการเพิ่มโค้ดสองสามบรรทัดสำหรับบางอย่างเช่น Google Analytics หรือไม่ ปลั๊กอินนี้ขจัดความยุ่งยากและจะอนุญาตให้เพิ่มตัวอย่างขนาดเล็กลงในไซต์ WordPress ของคุณ

• Zia CSS/JS Helper – อันนี้ดีที่สุดสำหรับผู้ที่มีประสบการณ์กับการพัฒนาเว็บ HTML/CSS/JS แบบคลาสสิก ทำให้ฟังก์ชันการแก้ไข WordPress ของคุณเหมือนกับการแก้ไขไซต์ผ่านตัวจัดการไฟล์ของ cPanel คุณสามารถใช้ CSS และ JavaScript แบบอินไลน์เพื่อเพิ่มบิตของโค้ด สร้างและจัดการไฟล์ภายนอก และอื่นๆ ได้อย่างรวดเร็ว

สำรองข้อมูลเว็บไซต์ของคุณก่อนเสมอ!

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

ฉันสามารถใช้ WordPress APIs โดยใช้ JavaScript ได้หรือไม่

อย่างที่คุณอาจทราบแล้วว่า WordPress มีชุด API หรือ Application Programming Interfaces มากมาย API เป็นฟังก์ชันฝั่งเซิร์ฟเวอร์เป็นหลัก ซึ่งคุณสามารถใช้ในภาษาต่างๆ เช่น JavaScript วิธีการที่ใหม่กว่าและทันสมัยกว่าสำหรับนักพัฒนาในการเรียนรู้ฟังก์ชันการทำงานของ WordPress API คือผ่านหน้าอ้างอิงโค้ด WordPress WordPress APIs

นี่คือที่ที่เราได้รับ "ฟังก์ชันในตัว" ที่เราใช้ก่อนหน้านี้ เราสามารถดำเนินต่อไปเป็นเวลาหลายวันเกี่ยวกับแต่ละฟังก์ชันใน API และวิธีการทำงานควบคู่ไปกับ JavaScript อย่างไรก็ตาม นั่นเป็นหัวข้อขั้นสูงที่ต้องใช้เวลาและความทุ่มเทในการเรียนรู้ของแต่ละคน

มีไลบรารี JavaScript ที่ปรับแต่งสำหรับ WordPress หรือไม่

ใช่! โดยตระหนักว่านักพัฒนาหลายคนไม่เข้าใจเนื้อหาทั้งหมดของ WordPress API โปรแกรมเมอร์จำนวนมากจึงสร้างไลบรารี JavaScript ที่สามารถฝังได้ง่าย โดยใช้ปลั๊กอินที่เราพูดถึงก่อนหน้านี้

ไลบรารี JavaScript ส่วนใหญ่มีอยู่ใน GitHub และฟรีทั้งหมด มีไลบรารี JavaScript ที่มีอยู่หลายแสนไลบรารีที่เข้ากันได้กับ WordPress ตั้งแต่อันที่เพิ่มเอฟเฟกต์สนุกๆ ให้กับ WordPress ไปจนถึงไลบรารีที่ให้คุณสร้างไซต์ที่มีเลย์เอาต์ที่คล้ายกันมากกับ Pinterest!

ห้องสมุดที่มีชื่อเสียงที่สุดที่ใช้กับ WordPress (และไซต์ส่วนใหญ่) เรียกว่า jQuery jQuery ขจัดความซับซ้อนของ JavaScript และเมื่อคุณเข้าใจแล้ว คุณจะสามารถเขียนฟังก์ชันได้อย่างรวดเร็วและง่ายดาย

ช่วย! JavaScript WordPress ของฉันไม่ทำงาน!

ส่วนที่ด้อยกว่าของ JavaScript ประการหนึ่งก็คือข้อผิดพลาดนั้นไม่ชัดเจน และการเพิ่ม WordPress เข้าไปอาจทำให้สับสนได้

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

มีสองคีย์หลักในการแก้ไขปัญหา: ฟังก์ชัน console.log JavaScript และคอนโซลการดีบักของเบราว์เซอร์ โดยเฉพาะคอนโซลของ Chrome นั้นยอดเยี่ยมสำหรับสิ่งนี้

console.log

สามารถใช้เพื่อดูค่าของตัวแปร ณ จุดที่กำหนดในฟังก์ชัน และตรวจสอบให้แน่ใจว่าส่วนต่างๆ ของฟังก์ชันเข้าถึงได้จริง ภายในไฟล์ JavaScript คุณเพียงแค่ใส่บางอย่างเช่น console.log("test"); .

คอนโซลดีบัก

การตั้งค่าคอนโซลจะแตกต่างกันขึ้นอยู่กับเบราว์เซอร์ที่ใช้ โดยทั่วไป คุณเพียงแค่ต้องกด F12 เพื่อเปิด จากนั้นคลิกที่แท็บ "คอนโซล"

คอนโซลจะแสดงบรรทัดใดของไฟล์ JavaScript ที่มีข้อผิดพลาด โดยปกติแล้วจะแสดง "stacktrace" แบบเต็มหรือชุดของไฟล์ที่ต้องดำเนินการจนกว่าคุณจะพบผู้กระทำผิด นี่คือที่ที่ข้อความ console.log ของคุณพิมพ์ออกมา

สรุป: JavaScript + WordPress

มีเครื่องมือระดับมืออาชีพที่จะให้ข้อมูลเชิงลึกแก่คุณมากขึ้น แต่เครื่องมือเหล่านี้มักใช้เงินเป็นจำนวนมาก ข่าวดีก็คือเมื่อคุณขยายขนาดขึ้นในฐานะนักพัฒนา WordPress JavaScript ที่ยิ่งใหญ่ที่สุดคนต่อไปของโลก เครื่องมือต่างๆ จะปรับขนาดไปพร้อมกับคุณ!

คริสเตน ไรท์

Kristen ได้เขียนบทช่วยสอนเพื่อช่วยเหลือผู้ใช้ WordPress มาตั้งแต่ปี 2011 โดยปกติแล้ว คุณจะพบว่าเธอทำงานเกี่ยวกับบทความใหม่ๆ สำหรับบล็อก iThemes หรือการพัฒนาทรัพยากรสำหรับ #WPprosper นอกเวลางาน คริสเตนชอบจดบันทึก (เธอเขียนหนังสือสองเล่ม!) เดินป่าและตั้งแคมป์ ทำอาหาร และผจญภัยทุกวันกับครอบครัวของเธอ โดยหวังว่าจะมีชีวิตที่เป็นปัจจุบันมากขึ้น