วิธีเพิ่มวิดีโอ HTML5 ลงใน WordPress โดยใช้ฟิลด์ที่กำหนดเอง

โดยทั่วไป หากคุณถามนักพัฒนา WordPress 10 คนว่าต้องทำอย่างไร คุณจะได้รับคำตอบ 10 คำตอบ แต่นั่นหมายถึงทั้งความเก่งกาจของ CMS และมีวิธีแก้ปัญหามากกว่าหนึ่งวิธีสำหรับงานที่กำหนด

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

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

ข้อกำหนดโครงการ

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

• วิธีสร้างฟิลด์ที่กำหนดเอง Advanced Custom Fields (ACF) เวอร์ชันฟรีจะทำงานได้ดีทีเดียว ติดตั้งและเปิดใช้งานบนเว็บไซต์ WordPress ของคุณ
• วิดีโอ – เหมาะอย่างยิ่งในหลายรูปแบบ แม้ว่าขณะนี้ไฟล์ MP4 จะได้รับการสนับสนุนในทุกเบราว์เซอร์หลัก แต่อาจไม่ใช่ความคิดที่ดีที่จะจัดหาเวอร์ชัน WEBM เพื่อความครอบคลุมเพิ่มเติม และในขณะที่คุณกำลังดำเนินการอยู่ ทางเลือก FLV สำหรับผู้ที่ใช้เบราว์เซอร์รุ่นเก่าๆ ก็ไม่อาจเสียหายได้ คุณจะต้องแน่ใจว่าวิดีโอของคุณแต่ละเวอร์ชันตั้งไว้ที่ความละเอียดเดียวกัน
• ภาพ 'โปสเตอร์' ไม่ว่าจะเป็นการจับภาพหน้าจอหรือกราฟิกที่กำหนดเองซึ่งสร้างด้วยความละเอียดสูงสุดวิดีโอของคุณจะถูกเล่นที่

ขั้นตอนที่ 1: สร้างฟิลด์ที่กำหนดเอง

เมื่อคุณติดตั้งและเปิดใช้งาน ACF เวอร์ชันฟรีแล้ว ให้ไปที่เมนูฟิลด์ที่กำหนดเองใน WordPress แล้วคลิกเพิ่มใหม่

ภายในชุดฟิลด์ใหม่ของคุณ (ของเราเรียกว่า 'ฟิลด์วิดีโอ') คุณจะต้องสร้างฟิลด์ไฟล์ ACF สำหรับรูปแบบวิดีโอแต่ละรูปแบบที่คุณวางแผนจะอัปโหลด และอีกฟิลด์หนึ่งสำหรับภาพโปสเตอร์ ในการตั้งค่าของเรา เรามีฟิลด์สำหรับ MP4, WEBM, FLV และโปสเตอร์ สำหรับแต่ละฟิลด์ของไฟล์ ตรวจสอบให้แน่ใจว่าได้เลือกปุ่มตัวเลือกใน Return Value ที่ระบุว่า "File URL" นอกจากนี้ อย่าลืมจดชื่อฟิลด์ด้วย - เราจำเป็นต้องใช้ในภายหลัง

ถัดไป ภายในการตั้งค่า 'ตำแหน่ง' ของ ACF ให้กำหนดฟิลด์ใหม่ของคุณให้กับหน้าหรือโพสต์ใดๆ ที่คุณต้องการและบันทึกงานของคุณ เมื่อคุณไปแก้ไขหน้าที่มอบหมาย คุณจะเห็นฟิลด์ (คุณอาจต้องเลื่อนลงเล็กน้อยเพื่อค้นหา)

ขั้นตอนที่ 2: อัปโหลดไฟล์วิดีโอ

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

ขั้นตอนที่ 3: แก้ไขเทมเพลต

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

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

 <?php
// รับฟิลด์วิดีโอ
$video_mp4 = get_field('mp4_video'); // ชื่อช่อง MP4
$video_webm = get_field('webm_video'); // ชื่อฟิลด์ WEBM
$video_flv = get_field('flv_video'); // ชื่อช่อง FLV
$video_poster = get_field('poster_image'); // ชื่อฟิลด์รูปภาพโปสเตอร์
                

// สร้างรหัสย่อ
$attr = อาร์เรย์ (
'mp4' => $video_mp4,
'webm' => $video_webm,
'flv' => $video_flv,
'poster' => $video_poster,
'พรีโหลด' => 'อัตโนมัติ'
);

// แสดงรหัสย่อ
เสียงสะท้อน wp_video_shortcode( $attr );
?>

ส่วนแรกของรหัสอ้างอิงชื่อของฟิลด์ที่กำหนดเองที่เราสร้างในขั้นตอนที่ 1 เรากำลังสร้างตัวแปร PHP สำหรับแต่ละฟิลด์ (พวกเขาจะส่งออก URL ของไฟล์ที่เกี่ยวข้อง) ซึ่งเราจะต้องใช้ตรงกลาง ส่วนของรหัส

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

ส่วนล่างของโค้ดกำลังแสดงผลงานของเราลงในเทมเพลตของเรา

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

WordPress มีโปรแกรมเล่นวิดีโอ HTML5 ในตัว CMS และโปรแกรมเล่นเริ่มต้นมีลักษณะและทำงานได้ดีทีเดียว แต่คุณสามารถจัดรูปแบบตัวเลือกต่างๆ ได้หากต้องการให้สัมผัสที่เป็นส่วนตัวมากขึ้น ตรวจสอบโค้ดเอาต์พุตด้วยเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์และจดบันทึกคลาส CSS ต่างๆ ตัวอย่างเช่น องค์ประกอบคอนเทนเนอร์มีคลาส . .wp-video คุณอาจต้องการดูบทช่วยสอนเพื่อดูความเป็นไปได้ในเชิงลึกยิ่งขึ้น

ฟิลด์ที่กำหนดเองลดความซับซ้อนของกระบวนการ

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

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

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