วิธีปิดการใช้งานสไตล์และสคริปต์ของ WooCommerce ในโพสต์ WordPress?

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

สถานการณ์สมมติเพื่อการปรับปรุง

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

อย่างไรก็ตาม ในบทความนี้ เราจะพูดถึงสถานการณ์ต่างๆ ที่บล็อกเกอร์ต้องเผชิญ บล็อกเกอร์จำนวนมากใช้ธีมเชิงพาณิชย์ที่ปรับให้เหมาะกับปลั๊กอิน WooCommerce ดังนั้นพวกเขาจะใช้ปลั๊กอินนี้อย่างรวดเร็วเพื่อขายผลิตภัณฑ์ดิจิทัลง่ายๆ เช่น eBook โดยไม่ทราบจุดประสงค์ของปลั๊กอิน ตัวอย่างเช่น ไม่ควรใช้ WooCommerce เมื่อคุณมีหน้าผลิตภัณฑ์ 10 หน้าและโพสต์ปกติ 1,000 โพสต์ สิ่งที่เกิดขึ้นในกรณีนี้คือโพสต์ทั้งหมด 1,000 โพสต์จะโหลดไฟล์ CSS และ JS ของปลั๊กอิน WooCommerce ซึ่งจะช่วยลดความเร็วของเว็บไซต์โดยรวม

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

นอกจากนี้ Google PageSpeed ​​Insights จะเตือนให้คุณลบ CSS และ JS ที่ไม่ได้ใช้ออกจากหน้าเว็บ ซึ่งจะทำให้คะแนนความเร็วลดลง

สไตล์และสคริปของ WooCommerce

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

ปลั๊กอินโหลดไฟล์ CSS/JS จาก /wp-content/plugins/WooCommerce/assets/ และบล็อกสไตล์จาก /wp-content/plugins/WooCommerce/packages/WooCommerce-blocks/build เนื่องจากหน้าเพจไม่มีสินค้าหรือตะกร้าสินค้าที่ตั้งใจจะขายสินค้า แหล่งข้อมูลด้านล่างทั้งหมดจึงไร้ประโยชน์

หมายเหตุ: ไฟล์ด้านบนเป็นเวอร์ชัน 5.7.2 ในธีม 21 แบบ คุณอาจเห็นเวอร์ชันของปลั๊กอินติดตั้งอยู่บนไซต์ของคุณและไฟล์ CSS ต่างๆ ขึ้นอยู่กับการตั้งค่า WooCommerce ของธีมของคุณ นอกจากนี้ คุณอาจเห็นแบบอักษร เช่น woocommerce.woff ที่โหลดโดยปลั๊กอิน

ปิดใช้งานสไตล์และสคริปต์ของ WooCommerce

เราจะอธิบายตัวเลือกต่อไปนี้เพื่อปิดใช้งานสไตล์และสคริปต์ของ WooCommerce ในโพสต์ WordPress ที่ไม่มีเนื้อหาเกี่ยวกับผลิตภัณฑ์

• การใช้ปลั๊กอินพรีเมียม
• ใช้ปลั๊กอินฟรี
• ปิดการใช้งานทรัพยากร WooCommerce ที่ไม่ได้ใช้ด้วยตนเอง

ส่วนที่ดีคือ WordPress มีปลั๊กอินเพื่อปิดการใช้งาน CSS และ JS ที่ไม่ได้ใช้บนไซต์ของคุณ

ตัวเลือก #1 – การใช้ Perfmatters Premium Plugin

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

ปลั๊กอินจะเสียค่าใช้จ่าย 24.95 ดอลลาร์พร้อมการอัปเดตและการสนับสนุนฟรีหนึ่งปี หลังจากติดตั้งปลั๊กอิน ให้เปิดใช้งานใบอนุญาตเพื่อรับการอัปเดต

• ไปที่เมนู "การตั้งค่า > Perfmatters" และไปที่ส่วน "ตัวเลือก > ทั่วไป"
• เลื่อนลงไปด้านล่างและตรวจสอบในส่วน "WooCommerce" ที่ระบุว่า "ปิดการใช้งานองค์ประกอบเฉพาะของ WooCommerce"
• เปิดตัวเลือก "ปิดการใช้งานสคริปต์" เพื่อปิดใช้งานสคริปต์ WooCommerce บนทั้งไซต์ ยกเว้นหน้าผลิตภัณฑ์ ตะกร้าสินค้า และหน้าชำระเงิน
• หากจำเป็น คุณยังสามารถเปิดตัวเลือกอื่นๆ เพื่อปิดการใช้งานการแยกส่วนรถเข็น เมตาบ็อกซ์ และวิดเจ็ต
• คลิกปุ่ม "บันทึกการเปลี่ยนแปลง" เพื่อปิดใช้งานสคริปต์ WooCommerce ทั้งหมดจากโพสต์/หน้าของไซต์ของคุณ

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

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

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

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

ตอนนี้คุณสามารถตรวจสอบแหล่งที่มาเพื่อยืนยันว่าสไตล์และสคริปต์ของ WooCommerce ทั้งหมดรวมถึงสไตล์บล็อกจะถูกลบออกยกเว้นแบบอักษร หากจำเป็น คุณสามารถโหลดไฟล์แบบอักษรไว้ล่วงหน้าได้ในส่วน "ตัวเลือก > การโหลดล่วงหน้า" เพื่อหลีกเลี่ยงปัญหาการโหลดคำขอคีย์ล่วงหน้าใน Google PageSpeed ​​Insights โปรดจำไว้ว่า แม้ว่าคุณจะไม่ใช่ Script Manager สำหรับการปิดใช้งาน WooCommerce แต่จำเป็นเมื่อคุณต้องการปิดใช้งานทรัพยากรจากปลั๊กอินอื่น ๆ เช่น Contact Form 7

ตัวเลือก #2 การใช้ปลั๊กอินการล้างข้อมูลสินทรัพย์ฟรี

หากคุณไม่ต้องการใช้ปลั๊กอินพรีเมียม คุณสามารถลองใช้ปลั๊กอิน Asset CleanUp: Page Speed ​​Booster ได้ นี่เป็นปลั๊กอินฟรีบางส่วนที่มีคุณลักษณะคล้ายคลึงกัน เช่น Perfmatters Script Manager

• หลังจากติดตั้งและเปิดใช้งานปลั๊กอินแล้ว ให้แก้ไขโพสต์ของคุณ
• ปลั๊กอินจะแสดงสไตล์ WooCommerce และทรัพยากรทั้งหมดที่โหลดบนโพสต์ในกล่องเมตา
• เลื่อนลงและคลิกตัวเลือก "ตรวจสอบทั้งหมด" สำหรับปลั๊กอิน WooCommerce

• หากมี ให้เลือก "ยกเลิกการโหลดในทุกหน้าของประเภทโพสต์ "โพสต์"

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

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

ตัวเลือก #3 วิธีการด้วยตนเอง

ตัวเลือกสุดท้ายคือ o แก้ไขไฟล์ของธีมด้วยตนเองเพื่อปิดใช้งานสไตล์และสคริปต์ของ WooCommerce เนื่องจากไม่แนะนำให้แก้ไขไฟล์ของธีม คุณจึงเลือกใช้ธีมลูกได้

• เมื่อคุณเป็นแผงผู้ดูแลระบบ WordPress ให้ไปที่ "ลักษณะที่ปรากฏ> ตัวแก้ไขธีม"
• เลือกธีมที่ใช้งานอยู่ (หรือธีมย่อย) จากนั้นเลือกไฟล์ functions.php
• วางโค้ดด้านล่างที่มีสองส่วน ส่วนหนึ่งใช้สำหรับปิดใช้งานสไตล์/สคริปต์เริ่มต้นทั้งหมด และอีกส่วนหนึ่งคือการปิดใช้งานบล็อก WooCommerce ในส่วนหน้า

 /** Disable WooCommerce Styles and Scripts*/ add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_styles_scripts', 99 ); function dequeue_woocommerce_styles_scripts() { if ( function_exists( 'is_woocommerce' ) ) { if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) { # Styles wp_dequeue_style( 'woocommerce-general' ); wp_dequeue_style( 'woocommerce-layout' ); wp_dequeue_style( 'woocommerce-smallscreen' ); wp_dequeue_style( 'woocommerce_frontend_styles' ); wp_dequeue_style( 'woocommerce_fancybox_styles' ); wp_dequeue_style( 'woocommerce_chosen_styles' ); wp_dequeue_style( 'woocommerce_prettyPhoto_css' ); # Scripts wp_dequeue_script( 'wc_price_slider' ); wp_dequeue_script( 'wc-single-product' ); wp_dequeue_script( 'wc-add-to-cart' ); wp_dequeue_script( 'wc-cart-fragments' ); wp_dequeue_script( 'wc-checkout' ); wp_dequeue_script( 'wc-add-to-cart-variation' ); wp_dequeue_script( 'wc-single-product' ); wp_dequeue_script( 'wc-cart' ); wp_dequeue_script( 'wc-chosen' ); wp_dequeue_script( 'woocommerce' ); wp_dequeue_script( 'prettyPhoto' ); wp_dequeue_script( 'prettyPhoto-init' ); wp_dequeue_script( 'jquery-blockui' ); wp_dequeue_script( 'jquery-placeholder' ); wp_dequeue_script( 'fancybox' ); wp_dequeue_script( 'jqueryui' ); } } } /** Disable WooCommerce Block Styles */ function disable_woocommerce_block_styles() { wp_dequeue_style( 'wc-blocks-style' ); } add_action( 'wp_enqueue_scripts', 'disable_woocommerce_block_styles' );

• ควรมีลักษณะดังนี้ด้านล่างในตัวแก้ไขธีมและคลิกที่ปุ่ม "อัปเดตไฟล์" เพื่อบันทึกการเปลี่ยนแปลงของคุณ

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

คำพูดสุดท้าย

อย่างที่คุณเห็นมีหลายวิธีในการปิดใช้งานสไตล์และสคริปต์ของ WooCommerce แม้ว่าการใช้ปลั๊กอิน Perfmatters ระดับพรีเมียมจะเป็นเรื่องง่าย แต่มันจะโหลดไฟล์ฟอนต์ woocommerce.woff แยกต่างหาก ตัวเลือกปลั๊กอินและคู่มือฟรีจะช่วยให้คุณกำจัด WooCommerce bloats ในหน้าที่คุณไม่ต้องการได้อย่างสมบูรณ์ สำหรับตัวเลือกทั้งหมด คุณอาจต้องตรวจสอบการตั้งค่า/รหัสอย่างระมัดระวัง และตรวจสอบเป็นระยะ เนื่องจาก WooCommerce เปลี่ยนแปลงการตั้งค่าอย่างสม่ำเสมอ