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

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

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

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

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

Scalability – SVGs are vector files. That means you can zoom in, enlarge, or shrink them without losing quality for logos, icons, or responsive designs. If you need to convert existing graphics into a scalable format, an SVG image converter can help turn compatible raster images into SVG files while preserving their visual quality. This can be especially useful for logos, icons, and other graphics that need to remain sharp across different screen sizes.

น้ำหนักเบาและเป็นมิตรกับ 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. 

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