จัดการ DOM ใน WordPress โดยใช้ JQuery

เผยแพร่แล้ว: 2023-02-12

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

โชคดีที่ Document Object Model (DOM) ช่วยให้จัดการหรือเดินทางผ่านโค้ด HTML ของไซต์ได้ง่ายขึ้น DOM ทำงานโดยให้คุณสร้างแผนผังที่ประกอบด้วยโหนดหรือวัตถุต่างๆ ซึ่งเปิดโอกาสในการเปลี่ยนการแสดงผล โครงสร้าง หรือฟังก์ชันของไซต์ โดยใช้ไลบรารี JavaScript เช่น jQuery

ในบทความนี้ เราจะอธิบายว่า DOM คืออะไร และเหตุใดคุณจึงต้องการใช้ จากนั้นเราจะให้เทคนิคการจัดการ jQuery มาตรฐานสำหรับการใช้ DOM กับ WordPress มาดำน้ำกันเถอะ!

DOM คืออะไร?

พูดง่ายๆ ก็คือ DOM คือ Application Programming Interface (API) สำหรับ HTML มันสร้างแผนผังของวัตถุที่แสดงถึงเนื้อหาและโครงสร้างของเว็บเพจ นอกจากนี้ยังเป็นแพลตฟอร์มและสคริปต์ที่ไม่เชื่อเรื่องภาษาซึ่งทำให้มีความหลากหลาย เมื่อ DOM แสดงซอร์สโค้ด HTML ด้วยวิธีนี้ จะทำให้สามารถเข้าถึงได้เพื่อให้ภาษาโปรแกรมต่างๆ สามารถเชื่อมต่อกับมันได้

ทำไมต้องใช้ DOM

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

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

การจัดการ DOM ด้วย JQuery

เพื่อให้ชัดเจน DOM และ HTML นั้นไม่เหมือนกัน แม้ว่าควรจะมีองค์ประกอบเดียวกันก็ตาม DOM เป็นการแสดงแบบจำลองของซอร์สโค้ด HTML และสามารถแก้ไขได้ด้วย JavaScript ฝั่งไคลเอ็นต์

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

เทคนิคการจัดการ DOM

DOM สามารถใช้งานได้หลากหลายวิธี เพื่อแสดงความยืดหยุ่น ลองดูเทคนิค 6 ข้อที่จะช่วยให้คุณเริ่มต้นใช้งาน API ที่มีประโยชน์นี้ได้

1. วิธีการก่อน ()

ตามชื่อของมัน เมธอด before() จะใช้เมื่อคุณต้องการแทรกองค์ประกอบใดๆ ก่อนองค์ประกอบเป้าหมายอื่น ตามที่ระบุไว้ในโค้ด

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

 $(this).before( "<div class='square'>ช่องอื่น</div>" );

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

2. วิธี After()

ในทำนองเดียวกับเมธอด before() ให้คุณใส่อิลิเมนต์ก่อนอิลิเมนต์อื่นที่ระบุ เมธอด after() อนุญาตให้ใส่อิลิเมนต์ตรงกันข้าม ตัวอย่างเช่น อาจใช้เพื่อเพิ่มองค์ประกอบด้านล่างปุ่ม เมื่อเลือกปุ่มแล้ว:

 $(this).after( "<div class='square'>ช่องอื่น</div>" );

การเพิ่มเนื้อหาแบบอินเทอร์แอคทีฟโดยการจัดการ DOM ด้วย jQuery เช่นนี้เป็นวิธีที่มั่นคงในการรับการโต้ตอบ โดยไม่สูญเสียความเร็วในกระบวนการ

3. วิธีผนวก ()

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

หากต้องการผนวกองค์ประกอบใหม่ของคุณเข้ากับเนื้อหาที่มีอยู่ขององค์ประกอบเป้าหมาย คุณต้องแทรกคำสั่ง jQuery ต่อท้าย () ภายในซอร์สโค้ด HTML:

 $( ".box" ).append( "<p>สุขสันต์วันเกิด!</p>" );

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

 <!doctype html>
 <title>ตัวอย่าง</title>
 <สไตล์>
 .กล่อง {
 พื้นหลัง: ส้ม;
 สี: ขาว;
 สี: ขาว;
 ความกว้าง: 150px;
 ช่องว่างภายใน: 20px;
 ขอบ: 10px;
 }
 </style>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <สคริปต์>
 $( ฟังก์ชัน () {
 $( "ปุ่ม" ).click( ฟังก์ชัน() {
 $(this).after( "<div class='box'>สุขสันต์วันเกิด!</div>" );
 });
 });
 </script>
 <button>สร้างกล่อง</button>

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

4. วิธีการเสริมท้าย ()

ในฐานะที่เป็นความสมดุลของวิธี การผนวก () การเพิ่มส่วนท้าย () จะเพิ่มองค์ประกอบที่ส่วนท้ายขององค์ประกอบเป้าหมายที่คุณระบุในคำสั่ง jQuery:

 $( ".banner" ).prepend( "<p>สุขสันต์วันเกิด!</p>" );

ในตัวอย่างนี้ ข้อความ “สุขสันต์วันเกิด!” จะปรากฏที่จุดเริ่มต้นของแบนเนอร์ที่ระบุในสตริงโค้ด

เป็นที่น่าสังเกตว่าวิธีการเหล่านี้ (รวมถึง before() , after() และ append() ) ล้วนเป็นแนวทางที่ยอมรับได้สำหรับการใช้งานอย่างง่าย อย่างไรก็ตาม เราขอแนะนำเทคนิคอื่นๆ สำหรับการแทรกที่ซับซ้อนมากขึ้น

5. วิธีการโคลน ()

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

ตัวอย่างเช่น บรรทัดนี้หมายความว่าองค์ประกอบกล่องดั้งเดิมจะยังคงอยู่ที่เดิม ในขณะที่การจำลององค์ประกอบจะถูกผนวกเข้ากับองค์ประกอบสามเหลี่ยม:

 $( ".box" ).clone().appendTo( ".triangle" );

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

6. วิธีการห่อ ()

สุดท้าย เมธอด wrap() มีประโยชน์ถ้าคุณต้องการล้อมองค์ประกอบรอบๆ สตริงที่มีอยู่ ตัวอย่างเช่น คุณสามารถรวมย่อหน้าหลายๆ ย่อหน้าในโครงสร้าง HTML ใหม่ได้โดยการระบุคลาสและระบุโครงสร้างที่กำลังดำเนินการ:

 $( ".targetclass" ).wrap( "<div class='new'></div>" );

ด้วยเทคนิคนี้ คุณกำลังสร้าง <div> รอบองค์ประกอบใดๆ ที่ตรงกับคลาสเป้าหมายในสตริง wrap() แม้ว่าคุณสามารถสร้างการห่อที่มีความลึกหลายระดับได้ อย่างไรก็ตาม คุณควรตรวจสอบให้แน่ใจว่ามีองค์ประกอบที่อยู่ด้านในสุดเพียงชิ้นเดียว

การแก้ไขปัญหา DOM

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

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

สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อสคริปต์อื่นเปลี่ยน HTML ดั้งเดิมของไซต์ของคุณ มิฉะนั้น บางครั้ง HTML และ DOM ของคุณอาจปรากฏเหมือนกันทุกประการ

สำรวจทรัพยากรและเครื่องมือ WP Engine อื่นๆ

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

การจัดการ DOM ด้วย jQuery เน้นความสวยงามของแพลตฟอร์มโอเพ่นซอร์สของ WordPress ที่ WP Engine เราเข้าใจว่าทรัพยากรสำหรับนักพัฒนาคุณภาพสูงสามารถสร้างความแตกต่างได้อย่างไร นั่นเป็นเหตุผลที่เราให้ความช่วยเหลือมากมายสำหรับผู้ใช้ WordPres พร้อมด้วยแผนการโฮสต์ที่ยอดเยี่ยม!