วิธีเพิ่มไฟล์อิมเมจ SVG ใน WordPress

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

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

เราจะใช้ WP Media Folderซึ่งเป็นปลั๊กอินการจัดการสื่อที่ทรงพลังจาก Joomunited 

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

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

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

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

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

โซลูชั่นเพื่อเพิ่ม SVGs ใน WordPress

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

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

A) WPCODE + SVG ตัวอย่าง

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

b) ปลั๊กอินสนับสนุน SVG

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

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

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

2. เพิ่มโค้ดตัวอย่างลงใน functions.php

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

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

สถานที่: ฟังก์ชั่นของธีม php (มักจะเป็นธีมเด็ก!)

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

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

 svg = xml ซึ่งสามารถมี:

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

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

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

WP Media Folder และทำไมจึงมีความสำคัญสำหรับ SVGs บน WordPress

WP Media Folder เป็นผู้จัดการห้องสมุดสื่อที่ทรงพลัง

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

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

 - Rename, Watermark, Bulk แทนที่, ดูตัวอย่าง, ดาวน์โหลด

- เข้ากันได้กับเครื่องมือมากมายเช่นผู้สร้างหน้า WooCommerce และ WPML

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

Wrapping Up: ยกระดับไซต์ของคุณด้วย WP Media Folder

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

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