零弐壱蜂

[WordPress] jetpack.cssを読み込ませない方法

謎の jetpack.css が読み込まれていたので対処した。

概要

Jetpack for WordPress は、30数種類の機能をまとめたパッケージなプラグイン。中には有料の機能もあるが、大抵の機能が無料で且つ便利なものが多いのでWordPressユーザは利用している人が多いのではないだろうか。当サイトでも一部利用している。

以下は機能の一覧 (2014/12/01 現在)

  • Beautiful Math
  • Custom Content Types
  • Enhanced Distribution
  • Extra Sidebar Widgets
  • Gravatar ホバーカード
  • Infinite Scroll
  • JSON API
  • Jetpack コメント
  • Jetpack シングルサインオン
  • Markdown
  • Monitor
  • Photon
  • Site Verification
  • Subscriptions
  • VideoPress
  • WP.me 短縮 URL
  • Widget Visibility
  • WordPress.com 統計情報
  • いいね
  • カスタム CSS
  • カルーセル
  • コンタクトフォーム
  • サイトアイコン
  • ショートコード埋め込み
  • スペル＆文法チェック
  • タイルギャラリー
  • パブリサイズ共有
  • メール投稿
  • モバイル用テーマ
  • 一括検索
  • 共有
  • 通知
  • 関連記事
  • VaultPress

この手のプラグインは難しいことを考えずに導入できる所が便利である反面、裏で何をやっているのか分かり辛いところが怖いところでもある。脅威とまではいかないが、今回分かったの jetpack.css という CSS ファイルを読み込んでいること。
私のサイトでは読まなくて問題ないファイルだたので読み込ませないようにした。

jetpack.css とは

jetpack.css は以下のように、プラグインのディレクトリから読み込まれている。
http://～/wp-content/plugins/jetpack/css/jetpack.css?ver=3.2.1
このCSSファイル、minifyされているとはいえ、 52.0 KB (2014/12/01 現在) もある。それに CDN ならまだしも、ここで貴重な同時接続数を消費したくない。

jetpack.css を取り除く

jetpackが出力する ogタグ をフックできたことを思い出す。さすが Automattic。 考えるより [Jetpack css remove] で検索。すると Remove / Deregister Jetpack Contact Form Styles がヒット。

他にも色々とヒットしたが、Jetpack 3.2 には対応していない様子だったので上記のサイトを参考にした。

functions.php に追加するコード

前述のサイトで紹介されていた以下のコードで対応できた。
add_filter( 'jetpack_implode_frontend_css', '__return_false' );

参考: Remove / Deregister Jetpack Contact Form Styles

注意点

私の場合、 jetpack.css が必要なかったので問題ないが、jetpack.css には「カルーセル」や「関連記事」のスタイルが定義されていたので、これらデフォルトのスタイルを使用している場合は取り除かないようにするか、テーマのCSSに同じようなスタイルを追加してやる必要がある。 私の場合は、統計情報など管理面の機能を使用していたため影響はなかった。