WEBEER – Web制作の覚えがき –

【WordPress】子テーマから親テーマのCSSを無効にする方法(SANGOカスタマイズ)

WordPress
WordPress 更新日:2020.09.10 公開日:2020.09.10

子テーマから親テーマで読み込んでいるCSSを無効にする方法です。SANGOという有料テーマを使っているのでSANGOを参考に書きますが、どのテーマでも対応できます。

やりたいこと

  • wp_enqueue_styleで読み込まれている外部ファイルを読み込まない
  • カスタム背景を削除する
  • カスタマイザーでセットしたスタイルを削除する

CSSを削除するコード

全体像はこんな感じ。

function child_head_meta() {
  if( is_page_template('single-sample.php') ) {
    // 削除
    wp_dequeue_style( 'sng-option' );
    wp_dequeue_style( 'sng-stylesheet' );
    wp_dequeue_style( 'sng-googlefonts' );
    wp_dequeue_style( 'sng-fontawesome' );
    remove_theme_support( 'custom-background' );
    remove_action('wp_head', 'sng_customizer_css', 101);
  }
}
add_action( 'wp_enqueue_scripts', 'child_head_meta', 11);

// 親テーマのスタイルの書き出しの関数をオーバーライド
function sng_customizer_css() {
  return;
}

テンプレートで分岐して、不要なCSSの削除をしています。

アクションフック

function child_head_meta() {
  ...
}
add_action( 'wp_enqueue_scripts', 'child_head_meta', 11);

wp_enqueue_scriptsが行われた後に処理を行いたいので第3引数を11にします。

テンプレートで処理を分岐

テンプレートを判断する関数はis_page_templateです。引数にファイル名を書きます。

if( is_page_template('single-sample.php') ) {
  ...
}

wp_enqueue_styleで読み込まれたCSSを削除する

wp_enqueue_styleで読み込まれたスタイルシートを削除するにはwp_dequeue_styleを使います。

例えばSANGOのスタイルシートは

<link rel="stylesheet" id="sng-stylesheet-css" href="/wp-content/themes/sango-theme/style.css?ver2_0_7" type="text/css" media="all">
<link rel="stylesheet" id="sng-option-css" href="/wp-content/themes/sango-theme/entry-option.css?ver2_0_7" type="text/css" media="all">
<link rel="stylesheet" id="sng-googlefonts-css" href="https://fonts.googleapis.com/css?family=Quicksand%3A500%2C700&amp;display=swap" type="text/css" media="all">
<link rel="stylesheet" id="sng-fontawesome-css" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" type="text/css" media="all">

このようなものが読み込まれています。

id="sng-fontawesome-css"スタイルシートのidから -css を削除したものがスタイルシートの名前です。

wp_dequeue_style( 'sng-fontawesome' );

こう書いてやると、スタイルシートの読み込みを削除することができます。

必ずアクションフックで、wp_enqueue_scriptsの作成後に処理を行うようにしてください。

カスタム背景を削除する

カスタム背景を削除する時はこう書きます。サポートを解除してやります。

remove_theme_support( 'custom-background' );

カスタマイザーでセットしたスタイルを削除する

SANGOではadd_action('wp_head', 'sng_customizer_css', 101);というアクションフックでスタイルを作成しています。

ここを無効にしたいのでremove_actionを使います。

remove_action('wp_head', 'sng_customizer_css', 101);

remove_actionではadd_actionで指定したのと全く同じ引数を指定する必要があります。