วิธีเพิ่ม SVG ใน WordPress (ด้วย 2 โซลูชั่นแบบง่าย)

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


เพิ่มไฟล์ SVG ใน WordPress ได้อย่างง่ายดาย

SVG คืออะไร?

SVG หรือ Scalable Vector Graphics เป็นรูปแบบไฟล์ที่กำหนด vector-graphics โดยใช้ภาษามาร์กอัป XML ประโยชน์หลักของ SVG คือช่วยให้คุณสามารถขยายภาพโดยไม่สูญเสียคุณภาพหรือมีพิกเซล.

SVG ทำงานอย่างไร?

Scalable Vector Graphics (SVG) เป็นเทคโนโลยีที่แสดงภาพวาดสองมิติโดยใช้ XML พวกเขาแตกต่างจากรูปแบบภาพที่ใช้กันทั่วไปเช่น PNG, GIF หรือ JPEG.

หากคุณใช้ไฟล์ภาพ png / jpeg และซูมเข้าคุณจะสังเกตเห็นว่าภาพจะเริ่มเบลอและกลายเป็นพิกเซล.

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

สิ่งนี้ช่วยให้คุณสามารถขยายกราฟิกแบบเวกเตอร์ได้โดยไม่สูญเสียคุณภาพ ภาพ SVG ส่วนใหญ่จะมีขนาดไฟล์เล็กกว่า JPEG หรือ PNG.

กราฟิกแบบเวกเตอร์มักใช้สำหรับไอคอนแบบอักษรไอคอนโลโก้เว็บไซต์และรูปภาพตราสินค้า คุณอาจต้องการเพิ่มไฟล์ SVG ใน WordPress สำหรับโลโก้ บริษัท ไอคอนหรือกราฟิกอื่น ๆ.

เจ๋งพอ ๆ กับเสียงไฟล์ SVG ยังคงไม่ปลอดภัย นั่นเป็นสาเหตุที่ WordPress ไม่สนับสนุนการอัปโหลดไฟล์ SVG โดยค่าเริ่มต้น.

หากคุณอัปโหลดรูปภาพ SVG ใน WordPress คุณจะเห็นข้อความแสดงข้อผิดพลาดต่อไปนี้:

ขออภัยไม่อนุญาตให้ใช้ไฟล์ประเภทนี้เนื่องจากเหตุผลด้านความปลอดภัย.

ข้อผิดพลาดด้านความปลอดภัย SVG ใน WordPress

ปัญหาด้านความปลอดภัยเกี่ยวกับ SVG ใน WordPress

ไฟล์ SVG มีรหัสในภาษามาร์กอัป XML ซึ่งคล้ายกับ HTML เบราว์เซอร์หรือซอฟต์แวร์แก้ไข SVG ของคุณแยกวิเคราะห์ภาษามาร์กอัป XML เพื่อแสดงผลลัพธ์บนหน้าจอ.

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

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

ทางออกที่ดีที่สุดคือการใช้ไฟล์ SVG ที่สร้างขึ้นโดยแหล่งที่เชื่อถือได้เท่านั้นและเพื่อ จำกัด การอัปโหลด SVG สำหรับผู้ใช้ที่เชื่อถือได้เท่านั้น.

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับความปลอดภัยลองดูคู่มือการรักษาความปลอดภัย WordPress สำหรับผู้เริ่มต้นใช้งาน.

ดังที่ได้กล่าวมาลองดูวิธีการใช้ไฟล์ SVG ใน WordPress อย่างง่ายดายและปลอดภัย.

วิธีที่ 1. อัปโหลดไฟล์ SVG ใน WordPress โดยใช้การสนับสนุน SVG

วิธีนี้ให้การสนับสนุนอย่างสมบูรณ์สำหรับการเพิ่มไฟล์ SVG ใน WordPress นอกจากนี้ยังช่วยให้คุณแสดง SVG แบบอินไลน์ในโพสต์และหน้า WordPress.

ก่อนอื่นคุณต้องติดตั้งและเปิดใช้งานปลั๊กอินสนับสนุน SVG สำหรับรายละเอียดเพิ่มเติมดูที่คู่มือทีละขั้นตอนเกี่ยวกับวิธีการติดตั้งปลั๊กอิน WordPress.

เมื่อเปิดใช้งานคุณต้องไปที่ การตั้งค่า»การสนับสนุน SVG หน้าเพื่อกำหนดการตั้งค่าปลั๊กอิน.

การตั้งค่าการสนับสนุน SVG

ในหน้าการตั้งค่าคุณต้องทำเครื่องหมายในช่องถัดจากตัวเลือก “จำกัด เฉพาะผู้ดูแลระบบ” วิธีนี้จะช่วยให้ผู้ดูแลไซต์เท่านั้นที่สามารถอัปโหลดไฟล์ SVG ใน WordPress.

ตัวเลือกถัดไปคือเปิดโหมดขั้นสูง คุณจะต้องตรวจสอบตัวเลือกนี้หากคุณต้องการใช้คุณสมบัติขั้นสูงเช่นภาพเคลื่อนไหว CSS และการเรนเดอร์ SVG แบบอินไลน์.

อย่าลืมคลิกที่ปุ่มบันทึกการเปลี่ยนแปลงเพื่อจัดเก็บการตั้งค่าของคุณ.

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

ตอนนี้คุณจะสามารถอัปโหลดและฝังไฟล์ SVG ใน WordPress ได้แล้ว.

ไฟล์ SVG ฝังในโพสต์ WordPress

วิธีที่ 2. อัปโหลดไฟล์ SVG ใน WordPress โดยใช้ SVG ที่ปลอดภัย

วิธีนี้ยังใช้ปลั๊กอินและช่วยให้คุณสามารถทำการสุขาภิบาลไฟล์ SVG ที่อัปโหลดไปยัง WordPress.

สิ่งแรกที่คุณต้องทำคือติดตั้งและเปิดใช้งานปลั๊กอิน Safe SVG สำหรับรายละเอียดเพิ่มเติมดูที่คู่มือทีละขั้นตอนเกี่ยวกับวิธีการติดตั้งปลั๊กอิน WordPress.

ปลั๊กอินทำงานนอกกรอบและไม่มีการตั้งค่าให้คุณกำหนดค่า คุณสามารถไปข้างหน้าและเริ่มอัปโหลดไฟล์ SVG.

ข้อเสียคือปลั๊กอินนี้อนุญาตให้อัพโหลด SVG โดยผู้ใช้ทุกคนที่สามารถเขียนโพสต์บนเว็บไซต์ WordPress ของคุณ.

ในการควบคุมว่าใครสามารถอัปโหลดไฟล์คุณจะต้องซื้อปลั๊กอินเวอร์ชันพรีเมี่ยม.

เราหวังว่าบทความนี้จะช่วยให้คุณเรียนรู้วิธีเพิ่ม SVG ใน WordPress ได้อย่างปลอดภัย คุณอาจต้องการดูบทความของเราเกี่ยวกับปัญหารูปภาพที่พบบ่อยที่สุดใน WordPress และวิธีแก้ไข.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map