WordPress – プラグインなどの不要なスタイルシート(CSS)やJavaScriptを読み込ませない方法

WordPress
この記事は約4分で読めます。
スポンサーリンク

WordPressでプラグインを利用する際、テーマ(子テーマ)のスタイルシート(style.css)に記述した内容が反映されず、思い通りのデザインにならない時があります。
例えば私の場合はネットショップ構築プラグインWelcart(ウェルカート)のカートページやメンバーページでした。
これは、プラグインから不要なスタイルシートを読み込み、それが反映されているからです。この不要なスタイルシートを読み込まないようにすれば、テーマ(子テーマ)のスタイルシート(style.css)の内容が反映されます。

スポンサーリンク

wp_deregister_style関数を使用して不要なスタイルシートを読み込ませない

WordPressのテーマ(子テーマ)の functions.php ファイルに追記します。

wp_deregister_style() は任意のスタイルシートを読み込ませない関数です。
私の場合は Welcart の usces_cart.css を読み込ませたくなかったので、そのハンドル名 usces_cart_css を wp_deregister_style() の引数に入れます。
これを wp_enqueue_scripts にフックして実行します。

PHP
function my_deregister_styles() {
  wp_deregister_style( 'usces_cart_css' );
}
add_action( 'wp_enqueue_scripts', 'my_deregister_styles', 100 );

ハンドル名は、Webページのソースコードを確認すると分かります。
linkタグのidの -css の前までがハンドル名となります。例えば usces_cart.css の場合は、idがusces_cart_css-css ですので、usces_cart_css がハンドル名となります。

<link rel='stylesheet' id='usces_default_css-css' href='https://example.com/wordpress/wp-content/plugins/usc-e-shop/css/usces_default.css?ver=2.1.7.2103221&#038;fver=20210323091413' media='all' />
<link rel='stylesheet' id='usces_cart_css-css' href='https://example.com/wordpress/wp-content/plugins/usc-e-shop/css/usces_cart.css?ver=2.1.7.2103221&#038;fver=20210323091413' media='all' />
<link rel='stylesheet' id='theme_cart_css-css' href='https://example.com/wordpress/wp-content/themes/mytheme/usces_cart.css?ver=2.1.7.2103221&#038;fver=20191219045030' media='all' />

wp_deregister_script は不要なJavaScriptを読み込ませない

不要なJavaScriptを読み込ませない場合も同様ですが、wp_deregister_script()関数を使います。
scriptタグのidの -js の前までがハンドル名となります。
例えば、プラグインContact Form 7のreCAPTCHA v3 を読み込ませない場合は下記の記事の通りです。

WordPress - Contact Form 7のreCAPTCHA v3のロゴを必要なページの邪魔にならない場所にのみ表示させる
WordPressのプラグイン「Contact Form 7」で是非使っておきたい機能に「reCAPTCHA インテグレーションモジュール」があります。 この「reCAPTCHA」は、スパムやその他の自動化された不正なフォーム送信を遮断する...

ソースコードにはidが google-recaptcha-js とありますので、ハンドル名は google-recaptcha です。

<script src='https://www.google.com/recaptcha/api.js?render=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx;ver=3.0' id='google-recaptcha-js'></script>

以上、ご参考になれば幸いです。
皆さまにすべての良きことが雪崩のごとく起きますように。

コメント

タイトルとURLをコピーしました