必要ないCSSは削除しよう。WordPressで関連記事を表示するプラグイン「YARPP」でデフォルトのCSSを読み込まないように設定する方法

カスタマイズ情報など

WordPressで個別ページやアーカイブページなどに関連記事を表示できるプラグイン「Yet Another Related Posts Plugin（YARPP）」を利用しているサイトもあるとおもいます。

YARPPは、HTML,CSSの知識があれば表示のデザインもカスタマイズできるので、その柔軟さが人気の理由の1つのような気がします。

ところでCSSと言えば・・・YARPPを使うと、デフォルトでプラグインに付属されているCSSがヘッダー・フッター部分で読み込まれます。

YARPPプラグインを使うと読み込まれる「related.css」

<link rel='stylesheet' id='yarppRelatedCss-css' href='http://xxx.xxx/wp-content/plugins/yet-another-related-posts-plugin/style/related.css' type='text/css' media='all' />

YARPPの表示設定で「サムネイル」にした場合に読み込まれる「styles_thumbnails.css.php」

<link rel='stylesheet' id='yarpp-thumbnails-yarpp-thumbnail-css' href='http://xxx.xxx/wp-content/plugins/yet-another-related-posts-plugin/includes/styles_thumbnails.css.php?width=120&#038;height=120' type='text/css' media='all' />

というわけで、読み込まれるのは主に2つ。

  1. related.css
  2. styles_thumbnails.css.php（phpファイル内にCSSスタイルが書かれている）

というファイルが読み込まれます。

以上が前提で、以下が本題です。

デフォルトで読み込まれるCSSは削除できる

CSSで自由に関連記事の表示をデザインしたいのに、デフォルトで読み込まれるCSSのスタイルとぶつかってしまう・・・

結果的にうまくデザインできずにカスタマイズの難易度が上がってしまう、ということもあると思います。

そこで、デフォルトのCSSを読み込まないように設定する方法があります。

YARPPで用意されているデフォルトのCSSファイルを読み込まない

以下の記述をご使用中のテーマフォルダ内にある「functions.php」ファイル内の最後尾などに追記します。

//ヘッダー・フッターで読み込まれるCSSを削除
add_action('wp_print_styles','dequeue_yarpp_styles'); //ヘッダー
add_action('wp_footer','dequeue_yarpp_styles'); //フッター
function dequeue_yarpp_styles(){
 wp_dequeue_style('yarppRelatedCss');
 wp_dequeue_style('yarpp-thumbnails-yarpp-thumbnail'); //表示設定を「サムネイル」にしている場合はこっちも書く
}

コードがやっていること

アクションフック「wp_print_styles」でヘッダーで読み込まれるCSS、「wp_footer」でフッターで読み込まれるCSSを「wp_dequeue_style」を使って読み込まないようにしています。

ヘッダー・フッターでそれぞれフックを使っている理由は、どちらか片方だけ読み込まない設定をしても、もう片方で読み込まれてしまうからです。

例えば・・・

  • ヘッダーだけ読み込まない→フッターで読み込まれる
  • フッターで読み込まない→ヘッダーで読み込まれる

という感じです。

もしCSSを読み込む必要がない場合はご参考ください。

著者:bouya Imamura