プラグインによって挿入されるCSSファイルの読み込みを特定のページだけにする方法

一般的にWordPressのプラグインというのは有効化すると、それに関連するコードがwp_head()関数やwp_footer()関数の部分に自動的に挿入されます。

ほとんどのWordPressテンプレートではwp_head()関数はHTMLのhead要素の最下部に、wp_footer()関数はHTMLのbody要素の最下部にあります。
他の位置に設置しても正常に動作するのかもしれませんが、その位置に設置するのがWordPress開発側の意図であることはそれぞれの関数名を見てもわかります。

WordPress Codexでも以下のように書かれています。

‘wp_head’ アクションをスタートさせる。テーマテンプレートファイル内の </head> タグ直前で使う（例: header.php や index.php の中）。
wp head – WordPress Codex 日本語版

‘wp_footer’ アクションフックをスタートさせる。テーマテンプレートファイル内の </body> タグ直前で使う（例: footer.php や index.php の中）。
wp footer – WordPress Codex 日本語版

wp_head()関数やwp_footer()関数はすべてのページに共通で存在するのが一般的です。
WordPressのこのような仕様から、プラグインによって自動挿入されるコードはすべての公開ページに挿入されることになってしまいます。

例えばこのサイトで公開している「WordPress版レスポンシブ・メールフォーム」でもいくつかのコードが自動挿入されますが、それらのコードはメールフォームを設置しているページ以外では必要ないので読み込み時間の無駄が発生します。

そのような自動挿入されるコードを特定のページでのみ読み込ませる方法を解説します。
ページの読み込み時間を少しでも短くするためにはしたほうがベターでしょう。
もちろん私のこのサイトでも実施しています。

以下からの解説は私が開発したプラグイン「WordPress版レスポンシブ・メールフォーム」をサンプルにして解説していきますが、他のプラグインの場合でもやり方は同じです。

wp_head()部分に自動挿入されるCSSファイルの読み込みコードの例

上記のプラグインを有効化するとwp_head()関数部分に以下のコードが挿入されます。

<link rel='stylesheet' id='Responsive_Mailform-css'  href='https://www.1-firststep.com/wp-content/plugins/responsive-mailform/css/responsive-mailform.css?ver=1.0.0' media='all' />
<link rel='stylesheet' id='jquery.datetimepicker.css-css'  href='https://www.1-firststep.com/wp-content/plugins/responsive-mailform/css/jquery.datetimepicker.css?ver=1.0.0' media='all' />
<script src='https://www.1-firststep.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script src='https://www.1-firststep.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>

最初の2つがCSSファイルの読み込み、その後の2つがJavaScript(jQuery)ファイルの読み込みとなります。
各ファイルの役割については「WordPressプラグイン版のレスポンシブ・メールフォームで自動挿入されるコードの解説」のページをご覧ください。

個人的には「HTMLのhead要素部でJavaScriptファイルを読み込むなよ」と思ったりもしますが、それについては今回のテーマから逸れるので割愛します。

CSSファイルの読み込みを中止する関数

CSSファイルの読み込みを中止するためにはwp_dequeue_style関数を使います。
参考ページ：関数リファレンス/wp dequeue style – WordPress Codex 日本語版

wp_dequeue_style( CSSファイルのハンドル名 )

過去にはwp_print_styles関数を使う手法もあったらしいのですが、WordPressのバージョン3.3から非推奨になったようです。
参考ページ：Plugin API/Action Reference/wp print styles « WordPress Codex

「CSSファイルのハンドル名」とは、そのCSSファイルに対してプラグイン開発者が付けた名称のことを指します。
その名称には「-css」が付加されてid名としてHTML内に出力されています。
以下に具体例を挙げます。

CSSファイルを読み込むコードを削除する例

先ほどのサンプルの2つのCSSファイル読み込みコードを見ると、それぞれにid属性があるのがわかると思います。

id='Responsive_Mailform-css'

id='jquery.datetimepicker.css-css'

これらのid名から「-css」を取り除いたものがそれぞれのハンドル名となります。
ですから、上記の2つのCSSファイルを読み込みたくない場合はWordPressテーマのfunction.php内で、

wp_dequeue_style( 'Responsive_Mailform' );
wp_dequeue_style( 'jquery.datetimepicker.css' );

を追記することになります。
実際にfunction.phpに書く際には上記コードをユーザー定義関数として包んでからフックさせる必要があるので、以下のようになります。

function responsive_mailform_dequeue_style() {
  wp_dequeue_style( 'Responsive_Mailform' );
  wp_dequeue_style( 'jquery.datetimepicker.css' );
}
add_action( 'wp_enqueue_scripts', 'responsive_mailform_dequeue_style' );

特定のページでだけ読み込ませたい場合の例

例えば、個別投稿ページでのみ上記のCSSファイルを読み込ませたい場合は、

function responsive_mailform_dequeue_style() {
  if( !is_single() ){
    wp_dequeue_style( 'Responsive_Mailform' );
    wp_dequeue_style( 'jquery.datetimepicker.css' );
  }
}
add_action( 'wp_enqueue_scripts', 'responsive_mailform_dequeue_style' );

とすれば、個別投稿ページ以外での読み込みはなくなります。
個別投稿ページではなく固定ページでのみ読み込ませたい場合には、条件分岐の部分でis_page()関数を使ってください。
例えばIDが42の固定ページでのみ読み込ませたいのなら、

function responsive_mailform_dequeue_style() {
  if( !is_page( 42 ) ){
    wp_dequeue_style( 'Responsive_Mailform' );
    wp_dequeue_style( 'jquery.datetimepicker.css' );
  }
}
add_action( 'wp_enqueue_scripts', 'responsive_mailform_dequeue_style' );

としておけば良いでしょう。