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

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

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

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

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

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

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

การจัดรูปแบบและแอนิเมชัน – คุณสามารถจัดการ SVGs ผ่าน CSS หรือ JavaScript ต้องการเอฟเฟกต์โฮเวอร์หรือแอนิเมชัน? ง่ายมาก

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

วิธีเพิ่ม 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
• SVG Support ตรวจสอบและทำความสะอาด
• 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
• การโจมตีแบบ XXE (การเรียกเอนทิตี้ภายนอก)

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

• ใช้ปลั๊กอิน เช่น SVG Support, SVG Safe, HappyFiles ที่มีการตรวจสอบและทำความสะอาดข้อมูลในตัว
• การตรวจสอบผ่านเครื่องมือออนไลน์ (เช่น Darryll Doyle's SVG Sanitizer Test) ก่อนอัปโหลด
• จำกัดการอัปโหลด 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. 

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