วิธีการเพิ่มไฟล์ภาพ SVG ใน WordPress

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

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

เราจะใช้ WP Media Folderปลั๊กอินจัดการสื่อที่มีประสิทธิภาพจาก JoomUnited. 

ทำไม SVGs ถึงยอดเยี่ยมสำหรับกราฟิกที่ปรับขนาดได้

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

น้ำหนักเบาและเป็นมิตรกับ SEO – ไฟล์ SVG มักมีขนาดเล็กกว่าภาพแรสเตอร์และเป็น XML ที่ใช้ข้อความ ทำให้เครื่องมือค้นหาสามารถอ่านองค์ประกอบสำคัญได้โดยตรง (ข้อความแสดงแทนรูปภาพ ชื่อเรื่อง ฯลฯ)

การจัดรูปแบบและแอนิเมชั่น – คุณสามารถปรับแต่ง SVG ผ่าน CSS หรือ JavaScript ได้ ต้องการเอฟเฟ็กต์เมื่อวางเมาส์เหนือภาพหรือแอนิเมชั่นใช่ไหม ง่ายมาก

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

วิธีเพิ่ม SVGs ใน WordPress

WordPress ปิดกั้น SVG โดยค่าเริ่มต้นเนื่องจากความเสี่ยงด้านความปลอดภัย (SVG คือ XML ซึ่งอาจรวมถึงรหัสที่เป็นอันตราย) อย่างไรก็ตาม มี 3 วิธีที่เชื่อถือได้ในการเปิดใช้งานการรองรับ SVG:

1. ใช้ปลั๊กอิน

 ก) WPCode + ส่วนย่อย SVG

• ติดตั้งปลั๊กอิน WPCode ฟรี.
• เพิ่มส่วนย่อย 'อนุญาตการอัปโหลดไฟล์ SVG' จากไลบรารีและเปิดใช้งาน.
• โดยค่าเริ่มต้น เฉพาะผู้ดูแลระบบเท่านั้นที่สามารถอัปโหลด SVGs ได้.

 ข) ปลั๊กอิน SVG Support

• ติดตั้ง "SVG Support" ผ่าน Plugins > Add New และเปิดใช้งาน.
• ในการตั้งค่า ให้ตรวจสอบ "จำกัดเฉพาะผู้ดูแลระบบ" และ/หรือ "เปิดใช้งานโหมดขั้นสูง" (การแสดงผลแบบอินไลน์ การจัดรูปแบบ CSS).
• อัปโหลด SVG ของคุณผ่านสื่อ > เพิ่มใหม่ หรือลากและวาง.

ค) ตัวเลือกอื่นๆ:

• SVG Safe โดย Darrell Doyle รุ่นเก่ากว่าแต่ยังคงใช้งานอยู่
• SVG Support ตรวจสอบและทำความสะอาด การอัปโหลดเพื่อป้องกันความเสี่ยง XSS/XXE
• HappyFiles/CatFolders เพิ่มการอัปโหลด SVG พร้อมการฆ่าเชื้อและแสดงตัวอย่าง

2. เพิ่มส่วนของโค้ดใน functions.php

คุณสามารถใช้รหัสต่อไปนี้: 

ฟังก์ชัน enable_svg_upload($mimes) { $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter('upload_mimes', 'enable_svg_upload'); 

อยู่ที่ไหน: ไฟล์ functions.php ของธีม (ควรใช้ธีมลูกเสมอ!)

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

3. ข้อควรพิจารณาด้านความปลอดภัย

 SVG = XML ซึ่งสามารถมีได้:

• การโจมตี XSS (JavaScript)
• การโจมตีแบบ XXE (การเรียกเอนทิตี้ภายนอก)

แนวทางปฏิบัติที่ดีที่สุด:

• ใช้ปลั๊กอิน อย่าง SVG Support, SVG Safe, HappyFiles ที่มีระบบตรวจสอบความปลอดภัยของไฟล์ในตัว
• สอบความปลอดภัยของไฟล์ SVG ผ่านเครื่องมือออนไลน์ (เช่น เครื่องมือทดสอบความปลอดภัยไฟล์ SVG ของ Darryll Doyle) ก่อนอัปโหลด
• จำกัดการอัปโหลด SVG สำหรับผู้ดูแลระบบหรือผู้ใช้ที่เชื่อถือได้เท่านั้น

WP Media Folder และเหตุใดจึงสำคัญสำหรับ SVGs บน WordPress

WP Media Folder เป็นตัวจัดการไลบรารีสื่อที่มีประสิทธิภาพ

- โครงสร้างโฟลเดอร์/โฟลเดอร์ย่อย

- ตัวกรองขั้นสูง การเรียงลำดับ ลากและวาง

 - เปลี่ยนชื่อ, ลายน้ำ, แทนที่แบบกลุ่ม, ดูตัวอย่าง, ดาวน์โหลด

- เข้ากันได้กับเครื่องมือมากมาย เช่น Page Builders, WooCommerce และ WPML.

แม้ว่า WP Media Folder เองไม่อนุญาตให้ใช้ไฟล์ SVG แต่ก็จะช่วยให้เราสามารถจัดระเบียบ ดูแล และจัดการไฟล์ทุกประเภท รวมถึงไฟล์ SVG ได้.

สรุป: ยกระดับไซต์ของคุณด้วย SVGs และ WP Media Folder

หยุดการต่อสู้กับโฟลเดอร์สื่อที่รกและไฟล์ภาพที่ไม่ได้ปรับแต่งให้เหมาะสม แต่ปลดล็อกศักยภาพสูงสุดของไฟล์ SVG ที่มีน้ำหนักเบา ค้นหาได้ง่าย และปรับเปลี่ยนได้ง่าย ด้วยเครื่องมือจัดระเบียบที่ใช้งานง่ายของ WP Media Folder. 

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