プラグインを導入した結果、wp_head()で自動的にスタイルシートが読み込まれることがあります。

ところが、wp_head()の位置がheadタグの一番最後に置かれることが多いことから、自作のスタイルシートと競合を起こすことがあります。

解決法は直前の記事の「style.min.css」を読み込ませない方法で書いたのと基本的に同じです。

つまり「wp_dequeue_style()」関数を、wp_enqueue_scripts()と同じタイミングで読み込むようadd_action関数を加えてfunctions.phpに設定します。

あるいは、プラグインのスタイルシート自体は読み込みたいけど自作テーマのスタイルシートより前に読み込みたい場合もあります。

この場合、自作スクリプト読み込みを設定するユーザー関数のところでwp_dequeue_style()→wp_enqueue_style()をしたくなりますが、これでは後のwp_head()のところでもとのスタイルシートが読み込まれるだけなので変更が全く反映されなくなります。

今回、「Cookie Notice」プラグインで出現するCookieに関するバナーのデザインを変更したいけど、Cookie Notice側が読み込むスタイルシート（front.min.css）が自作テーマのスタイルシートより後に読み込まれるので変更が打ち消される問題に出くわしました。

こういうとき、自作テーマのスタイルシート（style.css）を後から読み込めるようにしさえすればいいのですが…。

wp_enqueue_style()やwp_dequeue_style()の記載方法に注意し、wp_enqueue_style()で指定する引数$handleの部分を正しく書く必要があります。

まずは実際のページでソースコードを確認します。

Cookie Noticeのスタイルシートを指定するlinkタグは下記の通りです。

<link rel="stylesheet" id="cookie-notice-front-css" href="https://chappytabby.com/wp-content/plugins/cookie-notice/css/front.min.css?ver=cdb0c695c86580d53eb6531450eb788f" type="text/css" media="all">

wp_enqueue_style()で当該ファイルを指定するとき、先のlinkタグのidを$handleの部分に入れればOKなはずですが、「cookie-notice-front-css」のうち「-css」の部分を消さなければなりません。

理由はWordPressがプラグインのスタイルシートを指定するlinkタグのid属性に対し、自動的に「-css」を加えてしまうからです…。

// wp_enqueue_scriptsで適用させるため、add_actionの$tagに設定
add_action('wp_enqueue_scripts', 'remove_block_library_style');
function remove_block_library_style(){
// front.min.css（Cookie Noticeのスタイルシート）読み込みを止める
  wp_dequeue_style('cookie-notice-front');
}

function load_styles(){
  wp_enqueue_style('typekit', 'https://use.typekit.net/opl6gbx.css', false, null, 'all');
// まずfront.min.cssが先の読み込まれるようwp_enqueue_styleを記述
// $handleは元のcookie-notice-frontと違う値にした（後でdequeueされないようにするため）
// $verは先のlinkタグのhrefにあった「?ver=」に続く値
  wp_enqueue_style('ct-cookie-notice-front', 'https://chappytabby.com/wp-content/plugins/cookie-notice/css/front.min.css', false, 'cdb0c695c86580d53eb6531450eb788f', 'all');
// 次に自作テーマのstyle.cssを読み込むよう記述
  wp_enqueue_style('ct-main-styles', get_template_directory_uri() . '/style.css', false, null, 'all');
}

これで自作テーマに記述した変更内容が反映されるようになりました。

参考URL