วิธีอัปโหลด SVG ไปยัง WordPress: 2 วิธี

ต้องการเรียนรู้วิธีอัปโหลด SVG ไปยัง WordPress หรือไม่ เราจะนำเสนอวิธีการในการบรรลุเป้าหมายนี้ในบทช่วยสอนนี้.

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

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

ในการเริ่มต้น มาทำความคุ้นเคยกับ SVG และวิธีการทำงานกัน

แต่ก่อนที่เราจะเริ่มหากคุณไม่เคยติดตั้ง WordPress มาก่อนให้หาคำตอบ วิธีการติดตั้งขั้นตอน 7 บล็อก WordPress et วิธีการหาติดตั้งและเปิดใช้งานธีมเวิร์ดเพรสบนบล็อกของคุณ 

จากนั้นกลับไปที่สาเหตุที่เราอยู่ที่นี่

SVG คืออะไร?

Scalable Vector Graphics (SVG) เป็นรูปแบบภาพกราฟิกแบบเวกเตอร์แบบข้อความ XML แม้ว่ารูปแบบรูปภาพทั่วไป เช่น JPG และ PNG จะประกอบด้วยสี่เหลี่ยมเล็กๆ จำนวนมากที่เรียกว่าพิกเซล แต่รูปแบบนี้ใช้ภาษามาร์กอัป XML เพื่ออธิบายแอตทริบิวต์ของรูปภาพ

ในเดือนมกราคม 2022 42% ของเว็บไซต์ทั้งหมดทั่วโลก ใช้ SVG เปอร์เซ็นต์นี้เพิ่มขึ้นตั้งแต่มกราคม 2021 เมื่อเท่านั้น 29,4% ของเว็บไซต์ ได้ใช้มัน เช่นเดียวกับรูปแบบ PNG และ JPG SVG ได้รับความนิยมในหมู่เว็บไซต์ที่มีการเข้าชมสูง เช่น Google, Wikipedia และ YouTube

อีกสิ่งที่ยอดเยี่ยมเกี่ยวกับ SVG ก็คือมันได้รับการสนับสนุนอย่างกว้างขวางจากเบราว์เซอร์หลักๆ ทั้งหมด

นี่คือ รายชื่อเบราว์เซอร์ ที่รองรับรูปแบบไฟล์ SVG:

นักเดินเรือ	รองรับบางส่วน	สนับสนุนอย่างเต็มที่
บอร์ด	-	เวอร์ชัน 12-18, 79-96, 97
Firefox	2 เวอร์ชัน	รุ่น 3-94, 95, 96-97
Firefox สำหรับ Android	-	95 เวอร์ชัน
Chrome	-	รุ่น 4-96, 97, 98-100
Chrome สำหรับ Android	-	96 เวอร์ชัน
Safari	3.1 เวอร์ชัน	เวอร์ชัน 3.2-15.1, 15.2, TP
โอเปร่า	-	รุ่น 10-81, 82
มินิโอเปร่า	-	ทุกรุ่น
Opera Mobile	-	ปล่อย 12-12.1, 64
Safari บน iOS	-	ปล่อย 3.2-15.1, 15.2
เบราว์เซอร์ Android	เวอร์ชัน 3-4.3	ปล่อย 4.4-4.4.4, 96
UC Browser สำหรับ Android	-	12.12 เวอร์ชัน
Samsung Internet	-	ปล่อย 4-14.0, 15.0
เบราว์เซอร์ QQ	-	10.4 เวอร์ชัน
เบราว์เซอร์ Baidu	-	7.12 เวอร์ชัน
เบราว์เซอร์ KaiOS	-	2.5 เวอร์ชัน

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

SVG ใช้ XML เพื่อสร้างภาพเวกเตอร์สองมิติ กราฟิกแบบเวกเตอร์ไม่มีพิกเซลต่างจาก JPG และ PNG แต่จะอธิบายลักษณะการทำงานในไฟล์ข้อความ XML แทน

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

WordPress รองรับ SVG หรือไม่?

ไม่มีการสนับสนุน SVG ใน WordPress เป็นค่าเริ่มต้น เนื่องจากมีความเสี่ยงด้านความปลอดภัย – เราจะกล่าวถึงปัญหาด้านความปลอดภัยโดยรอบ SVG ในเชิงลึกในภายหลัง

นี่คือข้อความแสดงข้อผิดพลาดที่ปรากฏขึ้นเมื่ออัปโหลดกราฟิก SVG ไปยังเว็บไซต์ WordPress:

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

ทำไมต้องใช้ WordPress SVG?

แม้จะมีปัญหาด้านความปลอดภัย ผู้ใช้จำนวนมากยังคงใช้รูปแบบรูปภาพนี้ เนื่องจากมีข้อดีหลายประการ นี่คือประโยชน์บางประการของการใช้ไฟล์ SVG:

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

SVG บน WordPress และความปลอดภัย

เนื่องจาก SVG เป็นไฟล์ข้อความ XML เป็นหลัก จึงมีช่องโหว่ที่สามารถใช้ประโยชน์ได้ซึ่งไม่ส่งผลต่อรูปแบบภาพอื่นๆ ดังนั้น ผู้คนจึงสามารถจี้มันได้อย่างง่ายดายด้วยโค้ดที่เป็นอันตรายเพื่อเปิดการโจมตี Cross-Site Scripting (XSS) และ XML External Entity (XXE) บนระบบของคุณ

ด้วยเหตุนี้ คุณจึงควรระมัดระวังในการจัดการไฟล์ SVG และเพิ่มลงใน WordPress

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

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

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

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

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

ใช้ปลั๊กอิน WordPress

ในบทช่วยสอนนี้ เราจะใช้ การสนับสนุน SVG. นี้ WordPress ปลั๊กอิน ใช้ไลบรารีฆ่าเชื้อ SVG ที่จะเปิดใช้งานโดยอัตโนมัติเมื่ออัปโหลดไฟล์ SVG ไปยังไลบรารีสื่อ นอกจากนี้ยังติดตั้งง่ายและใช้งานได้ฟรี

นี่คือขั้นตอนในการกำหนดค่าการรองรับ SVG:

1. Iติดตั้งปลั๊กอิน และเปิดใช้งาน

2. การเข้าถึง การตั้งค่า -> สนับสนุน SVG จากแดชบอร์ด WordPress ของคุณ

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

4. หลังจากบันทึกการเปลี่ยนแปลงแล้ว คุณสามารถเริ่มอัปโหลดไฟล์ SVG ไปยังไลบรารีสื่อได้อย่างปลอดภัย

เพิ่มการสนับสนุน WordPress SVG ด้วยตนเอง

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

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

ขั้นตอนต่อไปนี้จะอธิบายวิธีเปิดใช้งาน SVG ใน WordPress ด้วยตนเองโดยใช้ไคลเอนต์ FTP เช่น FileZilla.

1. ไปที่ไดเร็กทอรีไฟล์ของเว็บไซต์ของคุณที่โฮสต์ของคุณ
2. การเข้าถึง public_html -> WP-รวมถึง. เลื่อนลงมาจนคุณ ค้นหา functions.php.

3. คลิกขวาที่ไฟล์นี้แล้วเลือกดู/แก้ไขเพื่อเปิดไฟล์และวางข้อมูลโค้ดต่อไปนี้ลงในไฟล์:

function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');

4. บันทึกการเปลี่ยนแปลงและลองอัปโหลดไฟล์ SVG ใหม่ หากกระบวนการนี้สำเร็จ ไลบรารีสื่อของคุณควรยอมรับการอัปโหลดไฟล์

ข้อดีหลายประการของไฟล์ SVG ส่งผลให้ไฟล์ประเภทนี้ได้รับความนิยมเพิ่มขึ้น ขออภัย ไฟล์ข้อความ XML มีแนวโน้มที่จะฉีดโค้ด ซึ่งเป็นสาเหตุหลักที่ WordPress ไม่รองรับ SVG ตามค่าเริ่มต้น

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

แหล่งข้อมูลอื่น ๆ ที่แนะนำ

เราขอเชิญคุณมาปรึกษากับ บริการสารสนเทศ ด้านล่างเพื่อเจาะลึกการเริ่มต้นใช้งานและควบคุมเว็บไซต์และบล็อกของคุณ

• วิธีสร้างปลั๊กอิน WordPress อย่างง่าย
• วิธีสร้างปลั๊กอิน WordPress บล็อก Gutenberg อย่างง่าย
• วิธีตั้งค่าโฮมเพจของคุณใน WordPress
• วิธีทำความเข้าใจแดชบอร์ด WordPress
• วิธีสร้างปลั๊กอิน WordPress อย่างง่าย

สรุป

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

อย่างไรก็ตามคุณยังจะสามารถปรึกษาเราได้ บริการสารสนเทศหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.

en ผู้ดูแล แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.   

...