วิธีปิดหรือลบ CSS ของ Jetpack

สำหรับคนที่ใช้ WordPress บางคน อาจจะใช้ Plugins ที่ชื่อว่า Jetpack เนื่องจากเป็น Plugins ที่เรียกได้ว่า เกือบจะครบเครื่องในหนึ่งเดียว ก็อย่างว่าอะนะ ก็ทาง Automattic บริษัทของท่าน Matt Mullenweg ผู้ก่อตั้ง WordPress.org เป็นผู้พัฒนาขึ้นมาเอง

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

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

วิธีปิดหรือลบ CSS ของ Jetpack แบบที่ 1 ปิดทั้งหมด

add_filter( 'jetpack_sharing_counts', '__return_false', 99 );
add_filter( 'jetpack_implode_frontend_css', '__return_false', 99 );

โดยให้คุณใส่ code ชุดด้านบนนี้เข้าไปไว้ในไฟล์ functions.php มันก็จะปิดหรือลบ CSS ของ Jetpack ทั้งหมด

วิธีปิดหรือลบ CSS ของ Jetpack แบบที่ 2 ปิดบางอย่างที่ไม่ต้องการ

// First, make sure Jetpack doesn't concatenate all its CSS
add_filter( 'jetpack_implode_frontend_css', '__return_false' );

// Then, remove each CSS file, one at a time
function jeherve_remove_all_jp_css() {
  wp_deregister_style( 'AtD_style' ); // After the Deadline
  wp_deregister_style( 'jetpack_likes' ); // Likes
  wp_deregister_style( 'jetpack_related-posts' ); //Related Posts
  wp_deregister_style( 'jetpack-carousel' ); // Carousel
  wp_deregister_style( 'grunion.css' ); // Grunion contact form
  wp_deregister_style( 'the-neverending-homepage' ); // Infinite Scroll
  wp_deregister_style( 'infinity-twentyten' ); // Infinite Scroll - Twentyten Theme
  wp_deregister_style( 'infinity-twentyeleven' ); // Infinite Scroll - Twentyeleven Theme
  wp_deregister_style( 'infinity-twentytwelve' ); // Infinite Scroll - Twentytwelve Theme
  wp_deregister_style( 'noticons' ); // Notes
  wp_deregister_style( 'post-by-email' ); // Post by Email
  wp_deregister_style( 'publicize' ); // Publicize
  wp_deregister_style( 'sharedaddy' ); // Sharedaddy
  wp_deregister_style( 'sharing' ); // Sharedaddy Sharing
  wp_deregister_style( 'stats_reports_css' ); // Stats
  wp_deregister_style( 'jetpack-widgets' ); // Widgets
  wp_deregister_style( 'jetpack-slideshow' ); // Slideshows
  wp_deregister_style( 'presentations' ); // Presentation shortcode
  wp_deregister_style( 'jetpack-subscriptions' ); // Subscriptions
  wp_deregister_style( 'tiled-gallery' ); // Tiled Galleries
  wp_deregister_style( 'widget-conditions' ); // Widget Visibility
  wp_deregister_style( 'jetpack_display_posts_widget' ); // Display Posts Widget
  wp_deregister_style( 'gravatar-profile-widget' ); // Gravatar Widget
  wp_deregister_style( 'widget-grid-and-list' ); // Top Posts widget
  wp_deregister_style( 'jetpack-widgets' ); // Widgets
}
add_action('wp_print_styles', 'jeherve_remove_all_jp_css' );

สำหรับการปิดหรือลบแบบที่ 2 นี้ ก็ให้คุณนำ Code PHP ด้านบนนี้ ไปใส่ไว้ในไฟล์ functions.php โดย Code PHP ชุดนี้ ก็จะปิดหมดเช่นเดียวกัน แต่หากคุณไม่ต้องปิด CSS ของฟีเจอร์ตัวไหน ก็ให้คุณใส่เครื่องหมาย ” // ” เข้าไปด้านหน้าบรรทัด ดังตัวอย่างด้านล่าง

// wp_deregister_style( 'sharing' ); // Sharedaddy Sharing

ที่แนะนำมานี้ สำหรับคนที่สร้าง Theme WordPress ไว้ใช้เอง หรือ สร้าง Child Theme ขึ้นมาใช้ ก็จะสามารถทำได้โดยง่าย แต่สำหรับคนที่ไม่ได้ใช้ Theme ที่สร้างเอง ก็คงไม่สะดวกเท่าไหร่ นั้นก็เพราะว่า โดยปกติแล้ว หากใช้ Theme ที่ซื้อมาหรือ Theme ฟรี เมื่อมีการอัพเดต Theme ไฟล์ functions.php ที่เราแก้ไขไว้ ก็จะถูกอัพเดตเปลี่ยนแปลงไปด้วย และ Code ที่เราใส่ลงไป ก็จะหายไปนั้นเอง

แต่ถ้าต้องการแล้วละก็ แนะนำให้ใช้ Plugins ที่ชื่อว่า My Custom Functions ซึ่งเป็น Plugins ที่ช่วยให้เราสามารถเพิ่ม Code เข้าไปที่ไฟล์ functions.php ได้โดยไม่มีการเปลี่ยนแปลงเมื่อมีการอัพเดต Theme ซึ่งก็สะดวกดี แต่ต้องระมัดระวังในการใช้เสียหน่อย เพราะการใช้ Plugins ดังกล่าวนี้ หากใส่ Code ลงไปไม่ถูกหลักของภาษา PHP แล้วละก็ มันก็จะเกิด Error ในการแสดงผล ซึ่งวิธีแก้ คือ ต้องไปลบ Plugins ทิ้ง ผ่าน File Manager ของ Host หรือผ่าน FTP

ก็หวังว่าที่เขียนไปนี้จะมีประโยชน์สำหรับคนที่ใช้ Jetpack และต้องการเพิ่มความเร็วให้เว็บไซต์แม้เล็กน้อย และถ้าสงสัยอะไรหรือมีอะไรแนะนำเพิ่มเติม ก็แสดงความคิดเห็นกันไว้ได้ ^_^

Credit : Removing Jetpack CSS | CSS-Tricks

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *