เปิดใช้งานการสนับสนุน SVG ใน WordPress
เผยแพร่แล้ว: 2023-02-12WordPress ช่วยให้ผู้ใช้สามารถอัปโหลดไฟล์ภาพได้หลายประเภท คุณน่าจะรู้จักผู้ต้องสงสัยตามปกติ เช่น PNG และ JPG การแสดงไฟล์ประเภทอื่น เช่น กราฟิกแบบเวกเตอร์ อาจเป็นปัญหามากกว่า
โชคดีที่มีสองสามวิธีในการรวมไฟล์เวกเตอร์เข้ากับเว็บไซต์ของคุณ ไฟล์ Scalable Vector Graphics (SVG) ไม่ใช่ฟีเจอร์ดั้งเดิม แต่สามารถใช้แสดงภาพสองมิติบนไซต์ WordPress ได้ ด้วยการกำหนดค่าใหม่เพียงเล็กน้อย คุณจะสามารถปรับแต่งโลโก้และกราฟิกอื่นๆ บางส่วนโดยใช้ไฟล์ประเภทนี้
หมายเหตุ: หากคุณโฮสต์ด้วย WP Engine เรารองรับการบีบอัด GZIP ในไฟล์ SVG โดยกำเนิด
ในบทความนี้ เราจะเรียนรู้เพิ่มเติมว่าไฟล์ SVG คืออะไร และเหตุใดคุณจึงต้องการใช้ไฟล์เหล่านี้ จากนั้นเราจะแนะนำสองวิธีในการเปิดใช้งานบนเว็บไซต์ของคุณ นอกจากนี้ เราจะกล่าวถึงมาตรการรักษาความปลอดภัยที่สำคัญบางประการที่คุณอาจต้องการดำเนินการ มาเริ่มกันเลย!
SVG คืออะไร?
ไฟล์ SVG เป็นภาพเวกเตอร์ประเภทหนึ่ง ไฟล์เวกเตอร์มีองค์ประกอบที่แตกต่างจากประเภทไฟล์รูปภาพทั่วไป ตัวอย่างเช่น JPG ประกอบด้วยพิกเซลหลายพันพิกเซล ในทางกลับกันกับไฟล์ SVG นั่นไม่ใช่กรณี
ภาพเวกเตอร์เป็นเหมือนชุดคำสั่งที่เป็นลายลักษณ์อักษรมากกว่า ไม่มีพิกเซลที่สร้างภาพขนาดใหญ่ขึ้น แต่จะรวมชุดข้อมูลที่เหมือนสคีมาซึ่งสร้างภาพสองมิติแทน ซึ่งหมายความว่ามีประโยชน์พิเศษบางอย่างในการใช้ไฟล์ SVG
ทำไมต้องใช้ SVG?
SVG มีข้อดีหลายประการ เนื่องจากสามารถปรับขนาดได้สูง คุณจึงสามารถปรับเปลี่ยนขนาดได้ตามต้องการโดยไม่ส่งผลกระทบต่อคุณภาพของภาพ ดังที่คุณอาจทราบดีอยู่แล้ว หากคุณพยายามขยายขนาด JPG ให้ใหญ่ขึ้น คุณภาพจะลดลงจนใช้งานไม่ได้อย่างรวดเร็ว
นั่นคือจุดที่ SVG มีประโยชน์ แม้ว่าจะไม่ได้มีไว้สำหรับแสดงภาพถ่ายแบบดั้งเดิม แต่ก็เป็นตัวเลือกที่ยอดเยี่ยมสำหรับโลโก้ธุรกิจ ไอคอน และกราฟิกทั่วไปอื่นๆ บนเว็บไซต์ของคุณ
นอกจากนี้ ไฟล์ SVG มักจะมีขนาดเล็กกว่ารูปภาพประเภทอื่นๆ อย่างมาก ซึ่งหมายความว่าไซต์ของคุณจะไม่ถูกบั่นทอนด้วยกราฟิก ยิ่งไปกว่านั้น ไฟล์ SVG ยังได้รับการจัดทำดัชนีโดย Google และมีมาระยะหนึ่งแล้ว สิ่งนี้สามารถเป็นประโยชน์อย่างแท้จริงสำหรับการปรับแต่งเว็บไซต์ให้ติดอันดับบนเครื่องมือการค้นหา (SEO) ของเว็บไซต์ของคุณ
วิธีอัปโหลด SVG ไปยัง WordPress
เนื่องจาก WordPress ไม่รองรับ SVG นอกกรอบ คุณจึงต้องทำงานหนักขึ้นเล็กน้อยเพื่อรวมไว้ในเว็บไซต์ของคุณ ในสองสามส่วนถัดไป เราจะกล่าวถึงวิธีเพิ่มไฟล์ SVG ลงในเว็บไซต์ของคุณด้วยปลั๊กอินและผ่านกระบวนการด้วยตนเอง
วิธีที่ 1: ใช้ปลั๊กอิน
เช่นเดียวกับงานอื่นๆ ของ WordPress ปลั๊กอินทำให้การเปิดใช้งานการรองรับ SVG เป็นเรื่องง่าย สิ่งที่คุณต้องทำคือเลือกเครื่องมือที่เหมาะสมและกำหนดการตั้งค่าบางอย่าง
ขั้นตอนที่ 1: ดาวน์โหลดปลั๊กอิน
ก่อนอื่น คุณจะต้องดาวน์โหลดและติดตั้งปลั๊กอิน SVG เราขอแนะนำการสนับสนุน SVG:
เมื่อคุณติดตั้งและเปิดใช้งานปลั๊กอินแล้ว คุณจะมีตัวเลือกเมนูใหม่ในแดชบอร์ด WordPress ภายใต้ การตั้งค่า > การสนับสนุน SVG ที่นั่น คุณจะได้รับคำแนะนำเกี่ยวกับวิธีจัดรูปแบบไฟล์ SVG สำหรับเว็บไซต์ของคุณ:

นอกจากนี้ คุณจะสามารถกำหนดการตั้งค่าการดูแลระบบที่สำคัญบางอย่างได้ ซึ่งรวมถึงการจำกัดสิทธิ์ในการอัปโหลด SVG ให้กับผู้ดูแลระบบเท่านั้น:
หลังจากนั้น คุณจะสามารถอัปโหลดไฟล์ SVG ไปยังไลบรารีสื่อของคุณได้โดยตรง อย่างไรก็ตาม มีบางรายการที่สำคัญอื่น ๆ ที่ต้องดูแลก่อน
ขั้นตอนที่ 2: เปิดใช้งานการรองรับ GZip ของไฟล์ SVG บนเซิร์ฟเวอร์ของคุณ
วิธีการดำเนินการตามขั้นตอนนี้จะขึ้นอยู่กับโฮสต์เว็บและการตั้งค่าเซิร์ฟเวอร์ของคุณ ตัวอย่างเช่น ที่ WP Engine มีการเปิดใช้งาน GZip สำหรับรายการประเภทไฟล์เฉพาะแล้ว จากที่กล่าวมา "image/svg+xml" ไม่ใช่หนึ่งในนั้น
การเพิ่มประเภทนี้ลงในรายการสำหรับเว็บไซต์ของคุณจะช่วยให้แน่ใจว่าไฟล์ SVG ของคุณได้รับการปรับอย่างเหมาะสมและรวดเร็ว คุณจะต้องรวมไฟล์ประเภทนี้ไว้ในไฟล์ .htaccess เพื่อให้ทุกอย่างทำงานได้อย่างราบรื่น
ขั้นตอนที่ 3: ตรวจสอบให้แน่ใจว่าปลั๊กอินรักษาความปลอดภัยไฟล์อย่างถูกต้อง
ข้อเสียอย่างหนึ่งของการใช้ไฟล์ SVG และสาเหตุหลักที่ไฟล์ประเภทนี้ยังไม่ได้รวมอยู่ใน WordPress core ก็คือปัญหาด้านความปลอดภัย เนื่องจากไฟล์ SVG เป็นแบบ XML จึงมีความเสี่ยงต่อการโจมตีจากภายนอก รวมถึงความเสี่ยงอื่นๆ
เมื่อคุณกำหนดค่าปลั๊กอิน SVG ขอแนะนำให้คุณจำกัดการเข้าถึงการอัปโหลด SVG สำหรับผู้ดูแลระบบเท่านั้น อย่างไรก็ตาม วิธีการที่ปลอดภัยยิ่งกว่านั้นคือการ "ล้างข้อมูล" ไฟล์ SVG ของคุณก่อนที่จะอัปโหลด วิธีนี้จะกำจัดโค้ด XML ที่ไม่จำเป็นซึ่งอาจทำให้ไซต์ของคุณถูกโจมตีได้
ปลั๊กอิน SVG Support ไม่รวมการฆ่าเชื้ออัตโนมัติ แต่มีปลั๊กอินอื่นๆ ที่ทำได้ SVG ที่ปลอดภัยเป็นหนึ่งในนั้น:
หรือคุณสามารถติดตั้งเจลทำความสะอาดของคุณเองและใช้งานได้อย่างอิสระ ผู้สร้าง Safe SVG ได้จัดเตรียมรหัสฆ่าเชื้อของปลั๊กอินไว้บน GitHub เพื่อให้ทุกคนใช้งานได้
การมีเจลทำความสะอาดเป็นของตัวเองก็เป็นทางเลือกที่ดีเช่นกัน หากคุณวางแผนที่จะใช้วิธีถัดไปในการเปิดใช้งาน SVG บนเว็บไซต์ WordPress ของคุณ
วิธีที่ 2: เปิดใช้งานการอัปโหลดไฟล์ SVG ด้วยตนเอง
หากคุณต้องการทำให้มือสกปรกมากกว่าการใช้ปลั๊กอิน คุณสามารถเปิดใช้งานไซต์ WordPress ของคุณเพื่อรับไฟล์ SVG ได้ด้วยตนเอง ต่อไป เราจะมาดูกันว่ากระบวนการนั้นทำงานอย่างไร
ขั้นตอนที่ 1: แก้ไขไฟล์ Functions.php ของเว็บไซต์ของคุณ
ในการเริ่มต้น คุณจะต้องแก้ไขไฟล์ functions.php ของเว็บไซต์ของคุณ ในการทำเช่นนี้ คุณสามารถไปที่ ลักษณะที่ปรากฏ > แก้ไขธีม ในแดชบอร์ดของคุณ และเลือกไฟล์ functions.php :
หรือคุณสามารถเข้าถึงไฟล์ของไซต์ของคุณโดยใช้แอปพลิเคชัน File Transfer Protocol (FTP) เช่น FileZilla
ไม่ว่าจะด้วยวิธีใด วิธีที่ดีที่สุดคือสร้างธีมย่อยหรือเปลี่ยนไปใช้สภาพแวดล้อมการพัฒนาก่อนที่จะทำงานหลักใดๆ ในเว็บไซต์ของคุณ สิ่งนี้จะทำให้ไซต์สดของคุณปลอดภัยจากอันตรายในขณะที่คุณทำการเปลี่ยนแปลง
ขั้นตอนที่ 2: เพิ่มข้อมูลโค้ด
ถัดไป คุณจะต้องเพิ่มส่วนย่อยของโค้ดต่อไปนี้ในไฟล์ functions.php ของคุณ:
// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}
$filetype = wp_check_filetype( $filename, $mimes );
return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];
}, 10, 4 );
function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );
หลังจากนั้น คุณจะสามารถอัปโหลดภาพ SVG ไปยังไลบรารีสื่อของคุณได้ ที่นั่น คุณสามารถดูและโต้ตอบกับพวกเขาได้เช่นเดียวกับไฟล์รูปภาพประเภทอื่นๆ
ขั้นตอนที่ 3: การเข้าถึงที่ปลอดภัยและจำกัดสิทธิ์การอัปโหลด SVG
ดังที่เราได้กล่าวไว้ก่อนหน้านี้ การเปิดใช้งานไฟล์ SVG มีความเสี่ยง เพื่อให้ไซต์ของคุณปลอดภัย คุณสามารถตั้งค่าสิทธิ์การอัปโหลดสำหรับ SVG โดยสร้างบทบาทของผู้ใช้ที่กำหนดเอง คุณสามารถใช้ปลั๊กอิน เช่น User Role Editor หรือ WPFront User Role Editor เพื่อทำสิ่งนี้ให้สำเร็จ
ปลั๊กอินเหล่านี้ช่วยให้คุณสามารถปรับแต่งการเข้าถึงและระดับการอนุญาตสำหรับบทบาทผู้ใช้ที่คุณมีอยู่ กล่าวอีกนัยหนึ่ง พวกเขาจะให้คุณกำหนดว่าผู้ใช้ใดจะมีสิทธิ์ในการอัปโหลด SVG วิธีนี้จะช่วยให้คุณติดตามความปลอดภัยของไฟล์เหล่านั้นได้
รักษาความปลอดภัยด้วย WP Engine
โดยพื้นฐานแล้ว WordPress ไม่อนุญาตให้ใช้ไฟล์ SVG น่าเสียดาย เนื่องจากไฟล์เหล่านี้มักจะเป็นตัวเลือกที่ดีที่สุดสำหรับการแสดงโลโก้และกราฟิกอื่นๆ ข่าวดีก็คือด้วยความช่วยเหลือจากแหล่งข้อมูลสำหรับนักพัฒนาที่เราชื่นชอบ คุณจะสามารถเปิดใช้งานและรักษาความปลอดภัยให้กับการใช้ไฟล์ SVG บนไซต์ของคุณได้
นอกจากนี้ โปรดทราบว่าในแผนโฮสติ้ง WordPress ของเรา คุณจะสามารถเข้าถึงการสนับสนุนอย่างมืออาชีพและโซลูชันการรักษาความปลอดภัยเว็บไซต์ที่พัฒนามาเป็นอย่างดี รักษาความปลอดภัยไซต์ของคุณกับเราวันนี้!