วิธีฝัง iFrames ใน WordPress

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

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

ในบทความนี้ เราจะสำรวจการใช้งานต่างๆ ของ iFrames บนเว็บไซต์ นอกจากนี้ เราจะดำเนินการตามขั้นตอนในการสร้าง iFrames ทั้งด้วยตนเองและด้วยปลั๊กอิน มาเริ่มกันเลย!

การใช้งาน iFrame

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

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

เป็นที่น่าสังเกตว่า iFrames เป็นเฟรมประเภทเดียวที่อนุญาตใน HTML5 มีเนื้อหาหลายประเภทที่คุณอาจใช้เพื่อแสดง ได้แก่:

• รูปภาพ: คุณสามารถใช้ iFrames เพื่อแสดงรูปภาพคุณภาพสูงจากแกลเลอรีภายนอก และหลีกเลี่ยงการประนีประนอมเนื่องจากขนาดไฟล์
• วิดีโอ: การโฮสต์วิดีโอของคุณบนแพลตฟอร์มเช่น YouTube หรือ Vimeo และใช้ iFrame เพื่อวางวิดีโอบนเว็บไซต์ของคุณ สามารถปรับปรุงประสบการณ์ของผู้ใช้ในขณะที่เพิ่มพื้นที่จัดเก็บเว็บไซต์ของคุณ
• เนื้อหาเว็บอื่นๆ: การเน้นเนื้อหาจากเว็บไซต์อื่นๆ เช่น หน้าพอร์ตโฟลิโอหรือสูตรอาหาร สามารถนำเนื้อหาที่สมบูรณ์มาสู่ผู้ชมของคุณได้อย่างง่ายดาย

เมื่อคุณใช้ iFrames คุณยังสามารถหลีกเลี่ยงกฎลิขสิทธิ์ที่ซับซ้อนได้อีกด้วย ศาลหลายแห่งตัดสินว่าการใช้ iFrame เพื่อแสดงเนื้อหาที่มีลิขสิทธิ์ไม่ถือเป็นการละเมิดลิขสิทธิ์ในทุกกรณี

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

การใช้ iFrames ด้วยปลั๊กอิน

วิธีที่ง่ายที่สุดวิธีหนึ่งในการใช้ iFrames บนเว็บไซต์ WordPress คือการใช้ปลั๊กอิน iFrame โชคดีที่มีตัวเลือกที่ได้รับการจัดอันดับสูงมากมายให้เลือก

ขั้นตอนที่ 1: ดาวน์โหลดและกำหนดค่าปลั๊กอิน iFrame

ตัวอย่างเช่น เราจะใช้ปลั๊กอิน iFrame ขั้นสูง มีความยืดหยุ่น ใช้งานง่าย และได้รับคะแนนดีมาก:

หลังจากติดตั้งและเปิดใช้งานปลั๊กอินแล้ว คุณจะพบรายการเมนู Advanced iFrames ใหม่ในแดชบอร์ด WordPress ของคุณ iFrame ขั้นสูงมีตัวเลือกมากมาย คุณจะต้องเริ่มต้นด้วยแท็บ ตัวเลือก และดูวิดีโอ “การเริ่มต้นอย่างรวดเร็ว”:

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

iFrames ขั้นสูงยังมีตัวตรวจสอบ iFrame ฟรี ซึ่งจะตรวจสอบ URL ที่คุณระบุเพื่อดูว่ามีสคริปต์ที่ป้องกันไม่ให้รวมเนื้อหาใน iFrame หรือไม่ เป็นความคิดที่ดีที่จะเรียกใช้ URL ใดๆ ผ่านเครื่องมือนี้ก่อนที่จะใช้ใน iFrame บนเว็บไซต์ของคุณ

คุณจะต้องตรวจสอบแท็บ การตั้งค่าพื้นฐาน ด้วย ที่นั่น คุณสามารถปรับแต่งองค์ประกอบของ iFrame เช่น ความสูง ความกว้าง และเส้นขอบเฟรม:

เมื่อคุณกำหนดการตั้งค่าปลั๊กอินให้ตรงกับความต้องการของคุณแล้ว คุณสามารถเริ่มใช้ iFrames บนเว็บไซต์ของคุณได้

ขั้นตอนที่ 2: ใช้บล็อก iFrame ขั้นสูง

ใน WordPress Block Editor ตอนนี้คุณจะมีบล็อก iFrames ขั้นสูง พร้อมใช้งาน:

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

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

ที่นั่น คุณสามารถเพิ่ม URL ของเนื้อหาที่คุณต้องการให้ปรากฏใน iFrame นอกจากนี้ คุณยังสามารถแทนที่การตั้งค่าบางอย่างของปลั๊กอินได้หากจำเป็น

ขั้นตอนที่ 3: ดูตัวอย่างไซต์ของคุณ

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

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

การใช้ iFrames โดยไม่ต้องใช้ปลั๊กอิน

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

ขั้นตอนที่ 1: ใส่รหัสฝังตัว

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

เพื่อเปิดเมนูตัวเลือกการแชร์ คุณจะต้องเลือก ฝัง เพื่อรับรหัสที่คุณต้องการสำหรับ iFrame ของคุณ

หน้าต่างแยกต่างหากจะเปิดขึ้นพร้อมการแสดงตัวอย่างเนื้อหาที่ฝังไว้ว่าจะมีลักษณะอย่างไร จากนั้น คุณจะสามารถคัดลอกข้อมูลโค้ด iFrame ได้

คุณยังสามารถทำเครื่องหมาย ที่ช่องเริ่ม เมื่อคุณต้องการให้ผู้ดูเริ่มดูเนื้อหาโดยอัตโนมัติที่รหัสเวลาที่กำหนด

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

หลังจากที่คุณเพิ่มบล็อคนี้ในโพสต์ของคุณแล้ว คุณสามารถวางโค้ดสำหรับฝังที่คุณคัดลอกมาจากหน้า YouTube

ต่อไป คุณจะต้องแน่ใจว่าการฝังนั้นทำงานได้อย่างถูกต้องและมีลักษณะตามที่คุณต้องการ คุณสามารถคลิก ดูตัวอย่าง ในบล็อก HTML ที่กำหนดเอง เพื่อดูว่า iFrame ของคุณทำงานอยู่หรือไม่

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

ขั้นตอนที่ 2: ปรับแต่ง iFrames ของคุณ

หากคุณยังไม่พอใจกับวิธีที่ iFrame แสดงในโพสต์หรือเพจของคุณ คุณสามารถปรับค่าบางอย่างในโค้ดได้ด้วยตนเอง ขอแนะนำให้คุณใช้ Cascading Style Sheets (CSS) เพื่อปรับแต่งการแสดง iFrames บนเว็บไซต์ของคุณอย่างเต็มที่

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

ขั้นตอนที่ 3: ตรวจสอบเนื้อหา iFrame ของคุณเป็นประจำ

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

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

เพิ่มประสิทธิภาพเว็บไซต์ของคุณด้วย WP Engine

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

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