Как отключить стили и скрипты WooCommerce в сообщениях WordPress?

Опубликовано: 2021-09-30

WooCommerce - самый популярный плагин WordPress для создания интернет-магазина. Поскольку он от того же разработчика WordPress, он без проблем работает для поддержки потребностей малого и крупного бизнеса. Однако проблема заключается в другом: WooCommerce значительно снизит скорость загрузки страницы вашего сайта. Лучший вариант - отключить стили и скрипты WooCommerce в записях WordPress, которые вам не нужны. Таким образом, вы можете использовать возможности WooCommerce, а также быстро загружать сообщения.

Сценарий улучшения

Плагин WooCommerce предназначен для ведения физического бизнеса, который поддерживает доставку, налогообложение и т. Д. Итак, если у вас есть полноценный магазин электронной коммерции, вы можете сделать не так много улучшений, поскольку каждая страница продукта на вашем сайте нуждается в плагине. Вероятно, вам придется использовать оптимизированные для WooCommerce хостинговые компании, чтобы ускорить загрузку страниц вашего продукта. Вы можете ознакомиться с нашей статьей о том, как исправить медленную скорость загрузки страницы с помощью плагина WooCommerce.

Однако в этой статье мы обсудим другой сценарий, с которым сталкиваются блогеры. Многие блогеры используют коммерческие темы, оптимизированные для плагина WooCommerce. Следовательно, они быстро склонны использовать плагин для продажи простых цифровых продуктов, таких как электронные книги, не зная о его назначении. Например, нет смысла использовать WooCommerce, когда у вас есть 10 страниц продуктов и 1000 обычных сообщений. В этом случае происходит то, что все 1000 сообщений загружают файлы CSS и JS плагина WooCommerce, что снижает общую скорость сайта.

Это связано с тем, что плагин WooCommerce не предлагает способ отключить ресурсы, загруженные на страницах, на которых вы действительно собираетесь продавать какие-либо продукты. Причина также очевидна, что на многих сайтах кнопка корзины находится на верхней панели навигации, что требует ресурсов плагина для динамического обновления деталей заказа. В нашей предыдущей статье мы объясняли вызовы корзины AJAX и их влияние на скорость. Если вы действительно хотели использовать WooCommerce, но хотели избавиться от CSS и JS плагина на обычных публикациях / страницах, следуйте одному из следующих вариантов.

Кроме того, Google PageSpeed ​​Insights предупредит вас об удалении неиспользуемых CSS и JS на странице, что резко снизит показатель скорости.

Стили и скрипты WooCommerce

Давайте сначала проверим ресурсы, загружаемые плагином. Вы можете просто отключить любой плагин кеширования на своем сайте и проверить исходный код действующей страницы. Вы можете выбрать сообщение или страницу, на которых нет корзины, блоков WooCommerce или продуктов. В Chrome это должно выглядеть примерно так.

Файлы WooCommerce
Файлы WooCommerce

Плагин загружает файлы CSS / JS из / wp-content / plugins / WooCommerce / assets / и стили блоков из / wp-content / plugins / WooCommerce / packages / WooCommerce-blocks / build. Поскольку на странице нет продукта или корзины, предназначенной для продажи продукта, все указанные ниже ресурсы просто бесполезны.

Ресурсы WooCommerce Тип
/wp-content/plugins/woocommerce/assets/css/woocommerce-layout.css?ver=5.7.1 CSS
/wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css?ver=5.7.1 CSS
/wp-content/plugins/woocommerce/assets/css/twenty-twenty-one.css?ver=5.7.1 CSS
/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js?ver=5.7.1 JS
/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js?ver=5.7.1 JS
/wp-content/plugins/woocommerce/assets/js/js-cookie/js.cookie.min.js?ver=2.1.4-wc.5.7.1 JS
/wp-content/plugins/woocommerce/packages/woocommerce-blocks/build/wc-blocks-style.css?ver=5.7.2 JS
/wp-content/plugins/woocommerce/packages/woocommerce-blocks/build/wc-blocks-vendors-style.css?ver=5.7.2 JS

Примечание . Вышеупомянутые файлы относятся к версии 5.7.2 по теме двадцать двадцать одна. Вы можете увидеть версию плагина, установленную на вашем сайте, и различные файлы CSS в зависимости от настроек WooCommerce вашей темы. Кроме того, вы также можете увидеть шрифты, такие как woocommerce.woff, загруженные плагином.

Отключить стили и скрипты WooCommerce

Мы объясним следующие варианты отключения стилей и скриптов WooCommerce в сообщениях WordPress, которые не связаны с продуктом.

  • Использование плагина премиум-класса
  • Использование бесплатного плагина
  • Вручную отключите неиспользуемые ресурсы WooCommerce

Хорошо то, что в WordPress есть плагины для отключения неиспользуемых CSS и JS на вашем сайте.

Вариант №1 - Использование плагина Perfmatters Premium

Perfmatters - это плагин только премиум-класса, который может помочь вам оптимизировать плагин WooCommerce. Причина, по которой мы упоминаем Perfmatters в качестве первого варианта, заключается в том, что вы можете отключить стили и скрипты WooCommerce для сообщений / страниц всего сайта с помощью нескольких щелчков мышью. Это настоятельно рекомендуется новичкам, которые не хотят редактировать код или тратить слишком много времени на бесплатные плагины. Кроме того, вы также можете использовать опцию Script Manager в Perfmatters, чтобы отключить неиспользуемые файлы CSS и JS для каждой публикации / страницы.

Плагин обойдется вам в 24,95 долларов США с годовыми бесплатными обновлениями и поддержкой. После установки плагина активируйте лицензию для получения обновлений.

  • Перейдите в меню «Настройки> Параметры» и перейдите в раздел «Параметры> Общие».
  • Прокрутите вниз и проверьте раздел «WooCommerce», в котором говорится: «Отключить определенные элементы WooCommerce».
  • Включите параметр «Отключить сценарии», чтобы отключить сценарии WooCommerce на всем сайте, кроме страниц продуктов, страниц корзины и страниц оформления заказа.
  • При необходимости вы также можете включить другие параметры для отключения фрагментации корзины, метабоксов и виджетов.
  • Нажмите кнопку «Сохранить изменения», чтобы отключить все сценарии WooCommerce из сообщений / страниц вашего сайта.
Отключить WooCommerce в Perfmatters
Отключить WooCommerce в Perfmatters

Теперь проверьте любой исходный код вашего сообщения. Как вы можете видеть на скриншоте ниже, все стили и скрипты отключены, и загружен только шрифт WooCommerce.

Все стили и скрипты отключены
Все стили и скрипты отключены

Плагин также предлагает диспетчер сценариев, который полезен, когда вы хотите удалить стили / сценарии для каждой публикации. Во-первых, вы должны включить «Диспетчер сценариев» в разделе «Параметры> Активы».

Включить диспетчер сценариев
Включить диспетчер сценариев

При редактировании сообщения щелкните «Диспетчер сценариев» на верхней панели администратора и отключите ненужные стили и сценарии.

Просмотреть ресурсы WooCommerce
Просмотреть ресурсы WooCommerce

Отключите все стили / скрипты WooCommerce и выберите «Местоположение» как «Везде». Вы можете предоставить исключения в виде продуктов, категорий продуктов и тегов продуктов, чтобы эти стили / скрипты загружались на страницы продуктов при необходимости. В противном случае вы можете полностью отключить ресурсы WooCommerce на всем сайте. Сохраните настройки и закройте диспетчер сценариев, щелкнув соответствующий параметр на панели администратора.

Отключить ресурсы везде
Отключить ресурсы везде

Теперь вы можете проверить источник, чтобы убедиться, что все стили и скрипты WooCommerce, включая стили блоков, удалены, за исключением шрифта. При необходимости вы можете предварительно загрузить файл шрифта в разделе «Параметры> Предварительная загрузка», чтобы избежать проблем с предварительной загрузкой ключевых запросов в Google PageSpeed ​​Insights. Помните, что хотя у вас нет диспетчера сценариев для отключения WooCommerce, он необходим, когда вы хотите отключить ресурсы из других плагинов, таких как Contact Form 7.

Вариант №2. Использование бесплатного плагина очистки активов

Если вы не хотите использовать плагин премиум-класса, вы можете попробовать плагин Asset CleanUp: Page Speed ​​Booster. Это частично бесплатный плагин, который предлагает аналогичную функцию, как Perfmatters Script Manager.

Установите плагин Asset CleanUp
Установите плагин Asset CleanUp
  • После установки и активации плагина отредактируйте любой свой пост.
  • Плагин покажет вам все стили и ресурсы WooCommerce, загруженные в сообщение, в мета-поле.
  • Прокрутите вниз и нажмите «Проверить все» для плагина WooCommerce.
Ресурсы WooCommerce, показанные в Meta Box
Ресурсы WooCommerce, показанные в Meta Box
  • Если возможно, выберите вариант «Выгрузить на все страницы типа публикации« публикация ».
Отключить элемент во всех сообщениях
Отключить элемент во всех сообщениях
  • Нажмите кнопку «Обновить», чтобы отключить все стили и скрипты WooCommerce для сообщений. При необходимости вы можете сделать то же самое для страниц, чтобы отключить ресурсы.
  • Теперь откройте одно из своих сообщений и проверьте консоль разработчика. Все стили и скрипты WooCommerce должны быть удалены.
Все файлы WooCommerce удалены
Все файлы WooCommerce удалены

В любое время вы можете удалить настройки, перейдя в раздел «Очистка активов»> «Массовые изменения» на вкладке «Сообщения, страницы и пользовательские типы сообщений».

Удалить массовое отключение
Удалить массовое отключение

Вариант №3. Ручной метод

Последний вариант - вручную отредактировать файл темы, чтобы отключить стили и скрипты 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

Проверьте исходный код своего сообщения, чтобы убедиться, что все стили и скрипты WooCommerce отключены. Вы увидите только файл шрифта, загруженный плагином.

Заключительные слова

Как видите, есть несколько способов отключить стили и скрипты WooCommerce. Хотя использовать премиальный плагин Perfmatters просто, он отдельно загружает файл шрифта woocommerce.woff. Бесплатный плагин и ручные настройки помогут вам полностью избавиться от раздутия WooCommerce на страницах, где они вам не нужны. Для всех вариантов вам может потребоваться тщательно проверять настройки / код и периодически проверять, поскольку WooCommerce постоянно меняет настройку.