【wordpress】記事別にデフォルトテーマのCSSを読み込まないようにする

ワードプレス内に独立したページを作成しようと思うとテンプレート等で作成することもあるかと思います。

wp_head()やwp_footer()を読み込まない方法だと単純に独立したページになるのですが、プラグインの関係などでどうしてもwp_head()やwp_footer()などを読み込まないといけないケースもあります。

その時にデフォルトのテーマCSSが邪魔になることがあります。

リセットCSS等を使う方法もありますが、そもそも読み込まないほうが処理的にはシンプルです。

そこでアクションフックを使ってwp_head()読み込み時にCSSの読み込みを削除する方法を解説します。

記事別にデフォルトテーマのCSSを読み込まないようにするソース

下記は固定ページのID=５とスラング＝startに対して、テーマ「twenty-twenty-one」のディフォルトスタイルシートの読み込みを削除するものです。

function page_deregister_styles() {
  if(is_page( array("5","start"))){
    wp_deregister_style( 'twenty-twenty-one-style' );
    wp_dequeue_style( 'twenty-twenty-one-style' );
  }
}
add_action( 'wp_enqueue_scripts', 'page_deregister_styles', 11 );

2行目の「if(is_page( array(“5″,”start”))){」で固定ページのIDとスラングを指定しています。arrayに追加していけば複数指定可能です。1つの場合もそのまま１つで問題ありません。

投稿ページの場合はis_single()に変えたりすると指定ができます。

wp_deregister_style()は、wp_register_style()で設定されたもの、
wp_dequeue_style()は、wp_enqueue_style()で接待されたものを解除します。
ここでは一応両方記述していますが環境に合わせてどちらかでも大丈夫です。

wp_deregister_styleとwp_dequeue_styleの引数はハンドル名です。
<link rel=’stylesheet’…のid=の名の-cssを取ったものです。

フックのwp_enqueue_scriptsは「スクリプトファイルを読み込むとき」のアクションフックです。

add_actionの第三引数は優先順位です。デフォルトは１０なのでそのあとに実行したいので１１を指定しています。

このほか、javascriptファイルなどの解除もできます。