วิธีใช้ภาพเวกเตอร์อย่างปลอดภัยกับ WordPress

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

ในคู่มือนี้ เราจะสำรวจวิธีการนำ SVG ไปใช้จริงโดยไม่กระทบต่อเว็บไซต์ของคุณ

แม้ว่าคุณจะไม่มีประสบการณ์ด้านการออกแบบ คุณสามารถสร้างภาพเวกเตอร์คุณภาพสูงระดับมืออาชีพเพื่อยกระดับเว็บไซต์ Divi ของคุณไปสู่อีกระดับด้วยการมองเห็นได้

รู้เบื้องต้นเกี่ยวกับ SVG และการใช้งาน

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

การใช้ SVG ที่สำคัญในการออกแบบเว็บไซต์มีดังต่อไปนี้:

1. กราฟิกที่ตอบสนอง: รูปภาพ SVG ไม่ขึ้นกับความละเอียด ซึ่งหมายความว่าสามารถขยายหรือลดขนาดได้โดยไม่สูญเสียคุณภาพ สิ่งนี้ทำให้เหมาะสำหรับการออกแบบเว็บที่ตอบสนองโดยที่เนื้อหาจะปรับให้พอดีกับขนาดหน้าจอและความละเอียดที่แตกต่างกัน
2. ไอคอนและโลโก้: SVG มักใช้สำหรับไอคอน โลโก้ และองค์ประกอบกราฟิกอื่นๆ บนเว็บไซต์ เนื่องจากไฟล์ SVG มีขนาดเล็กและสามารถปรับแต่งและสร้างภาพเคลื่อนไหวได้อย่างง่ายดายด้วย CSS และ JavaScript จึงเป็นตัวเลือกยอดนิยมสำหรับการสร้างอินเทอร์เฟซผู้ใช้แบบโต้ตอบและดึงดูดสายตา
3. จอแสดงผล Retina และ DPI สูง: SVG เหมาะอย่างยิ่งสำหรับการแสดงกราฟิกที่คมชัดบนหน้าจอ DPI สูง (จุดต่อนิ้ว) เช่น จอแสดงผล Retina ซึ่งภาพแรสเตอร์แบบดั้งเดิมอาจปรากฏเป็นพิกเซลเมื่อขยายขนาด
4. ภาพเคลื่อนไหว: SVG ช่วยให้สามารถสร้างภาพเคลื่อนไหวที่ซับซ้อนได้โดยตรงภายในโค้ด XML โดยใช้เครื่องมือ เช่น ภาพเคลื่อนไหว CSS หรือไลบรารี JavaScript เช่น Snap.svg และ GreenSock Animation Platform (GSAP) ทำให้สามารถเพิ่มองค์ประกอบแบบไดนามิกและโต้ตอบลงในเว็บไซต์ได้
5. ความสามารถในการเข้าถึง: โปรแกรมอ่านหน้าจอและเทคโนโลยีช่วยเหลือสามารถเข้าถึงรูปภาพ SVG ได้อย่างง่ายดาย เนื่องจากโครงสร้าง XML พื้นฐานสามารถใส่คำอธิบายประกอบด้วยข้อความอธิบายได้ ทำให้เว็บไซต์มีความครอบคลุมและใช้งานได้มากขึ้นสำหรับผู้ทุพพลภาพ
6. ประโยชน์ของ SEO: เครื่องมือค้นหาสามารถแยกวิเคราะห์และจัดทำดัชนีเนื้อหาภายในไฟล์ SVG ซึ่งสามารถปรับปรุงการปรับแต่งเว็บไซต์ให้ติดอันดับบนเครื่องมือการค้นหา (SEO) โดยการให้บริบทเพิ่มเติมแก่โปรแกรมรวบรวมข้อมูลของเครื่องมือค้นหา
7. การแสดงข้อมูลเชิงโต้ตอบ: SVG สามารถใช้เพื่อสร้างการแสดงข้อมูลเชิงโต้ตอบ เช่น แผนภูมิและกราฟ ซึ่งสามารถช่วยถ่ายทอดข้อมูลได้อย่างมีประสิทธิภาพบนเว็บไซต์

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

วิธีใช้ภาพเวกเตอร์อย่างปลอดภัยด้วย WordPress

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

เพิ่มการสนับสนุน SVG ด้วยตนเองและทำให้โค้ดของคุณสะอาด

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

1. ทำการเปลี่ยนแปลงไฟล์ function.php ของคุณเพื่อเปิดใช้งานการรองรับ SVG
2. ไม่อนุญาตให้บทบาทผู้ใช้ที่ต้องการอัปโหลดไฟล์ svg ไปยัง WordPress
3. ก่อนที่จะอัปโหลดไฟล์ SVG ใดๆ โปรดฆ่าเชื้อไฟล์ทั้งหมด

โดยรวมแล้วการทำตามขั้นตอนที่หนึ่งและสองให้เสร็จสิ้นไม่ใช่เรื่องยาก ขั้นตอนแรกคือเชื่อมต่อกับเว็บไซต์ของคุณโดยใช้ File Transfer Protocol (FTP) และค้นหาโฟลเดอร์รูทสำหรับ WordPress ค้นหาไฟล์ 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 ไปยัง WordPress และดูไฟล์เหล่านั้นในไลบรารีสื่อของคุณได้ โดยมีจุดประสงค์สองประการ หลังจากเพิ่มโค้ดแล้ว ให้ปิดไฟล์ function.php ของคุณและบันทึกการแก้ไข

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

1. กำหนดบทบาทของผู้ใช้เฉพาะสำหรับผู้ใช้ที่มีการจำกัดหรือไม่มีการเข้าถึงไลบรารีสื่อ
2. หากต้องการจำกัดประเภทของไฟล์ที่แต่ละบทบาทของผู้ใช้สามารถอัปโหลดได้ ให้ติดตั้งปลั๊กอิน เช่น WP Upload Restriction

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

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

การใช้ปลั๊กอิน SVG ที่ปลอดภัย

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

ปลั๊กอินสำหรับ Safe SVG โดยสรุป ปัญหาที่เราระบุไว้ก่อนหน้านี้ทั้งหมดได้รับการแก้ไขโดยปลั๊กอินนี้ รวมไปถึง:

1. ทำให้คุณสามารถอัปโหลด SVG ได้
2. การตรวจสอบว่า SVG ของคุณปรากฏในไลบรารีสื่อ
3. ทำความสะอาดซอร์สโค้ดของ SVG แต่ละรายการที่คุณอัปโหลดเพื่อหลีกเลี่ยงข้อบกพร่องด้านความปลอดภัย ปลั๊กอินนี้เป็นปลั๊กอินแบบ Plug-and-Play และใช้เส้นทางที่ง่ายที่สุดในการรักษาความปลอดภัยในการใช้งาน SVG บน WordPress เราขอแนะนำให้คุณลองใช้หากคุณตั้งใจจะใช้ SVG

การสร้างภาพเคลื่อนไหว SVG โดยใช้ CSS และปลั๊กอิน

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

• SVG สามารถสร้างภาพเคลื่อนไหวด้วยตนเองด้วย CSS เช่นเดียวกับองค์ประกอบอื่นๆ
• ใช้โปรแกรมเช่น SVGator เพื่อสร้างและสร้างภาพเคลื่อนไหว SVG

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

บทสรุป

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