WordPressプラグイン「Jetpack」でモジュールごとに読み込まれるCSSを無効化(削除)する方法

WordPressプラグイン「Jetpack」を有効にすると、デフォルトで読み込まれるCSSとJavaScriptがあります。

もし、ご自身が管理されているWebサイトでJetpackを利用している際に、デフォルトで読み込まれるCSSとJavaSctiptが不要な読み込みだと判断された場合は、以下のページに無効化(削除)する方法を書きましたので、ご参考ください。

そして、今回はその続きで「もう少し踏み込んでみよう」ということで・・・デフォルトで読み込まれるCSSとJavaScriptを無効化(削除)しても、Jetpackのモジュールを有効にすると読み込まれるCSSがあります。

そのCSSを無効化(削除)しよう、という話が以下に書いてあります。興味がありましたらご参考ください。

デフォルトの読み込みを無効化(削除)しても読み込まれるCSS

前提として「Jetpackのモジュールを有効にすると、どういう状態になるのか」を確認します。

Jetpackが提供しているモジュールはたくさんあるので、今回は1例として、「関連投稿」のモジュールについて見てみましょう。

まずは「関連投稿」のモジュールを有効にします。

関連投稿のモジュールを有効にする

この状態で投稿ページを見ると、下のようなCSSが読み込まれます。

関連投稿のモジュールを有効にすると読み込まれるCSS

<link rel='stylesheet' id='jetpack_related-posts-css' href='https://www.imamura.biz/blog/wp-content/plugins/jetpack/modules/related-posts/related-posts.css?ver=20150408' type='text/css' media='all' />

「関連投稿はJetpackのCSSを無効にして、オリジナルのCSSを適用させたい」ということもあると思います。

その場合は、以下のコードを使用しているテーマフォルダ内にある「functions.php」ファイルの最後尾あたりに追記すればOKです。

add_action('wp_print_styles', 'remove_jetpack_style' );
function remove_jetpack_style() {
 wp_deregister_style( 'jetpack_related-posts' ); //関連投稿のCSSを無効化(削除)
}

これで、関連投稿のCSSは読み込まれなくなります。

JavaScriptも読み込まれるんだけど、無効化(削除)しなくていいの?

ソースコードを読むことができる方は、関連投稿のモジュールを有効にするとJavaScriptが読み込まれることに気が付くと思います。以下のようなコードですね。

<script type='text/javascript' src='https://www.imamura.biz/blog/wp-content/plugins/jetpack/modules/related-posts/related-posts.js?ver=20150408'></script>

ここで認識合わせをします

上のコードは関連投稿を表示するためのJavaScriptですので、無効化(削除)の対象外です。(JavaScriptで関連投稿用のhtmlを書き出すために必要な読み込みってことです。)

モジュールを停止すればJavaScriptは読み込まなくなります。ですが、関連投稿は表示されなくなります。

注意:モジュールによって読み込まれるCSSやJavaScriptも無効化(削除)するコードも変わります

先ほども書きましたが、Jetpackが提供しているモジュールはたくさんあって、モジュールによって読み込まれるCSSやJavaScriptも、無効化(削除)するコードも変わります。

今回は、関連投稿のモジュールを例にしました。

モジュールごとに無効化(削除)するコードは「Removing Jetpack CSS」に一覧化されています。少し前に書かれたもので全て動くかどうか検証していませんが、参考になります。

モジュールごとにいちいち対応するのが手間だな・・・と思う方は、あらかじめ一覧にある無効化(削除)のコードをすべて書いておいてもいいかもです。

ただし、今後もJetpackのバージョンアップによって提供されるモジュールが増えたり仕様が変わることも考えられますので、上記の対応さえしておけばOKとは限らないので、注意ですね。

まとめ

Jetpackで有効にしているモジュールについて、必要に応じて読み込まれるCSSの無効化(削除)を検討されてもいいのかな、と思います。

前回書いた、デフォルトで読み込まれるCSSやJavaScriptの読み込みを無効化(削除)する方法と合わせてご参考くださいますと嬉しいです。

著者:bouya Imamura