子テーマのstyle.cssを追加CSSの直前に読み込む

WordPressのカスタマイザーに追加された『追加CSS(Additional CSS)』と子テーマのstyle.cssの使い分けをどのようにするか、というのは個人的に悩んでいました。

ヘッダーの最後にインラインで埋め込まれるので『追加CSSは最強』というのが世の中の流れです。一方で、『追加CSS』を使わない場合は、『子テーマのstyle.cssは最強』でなければならないというのが私の持論です。

しかし、国内では圧倒的な人気のTCDテーマではwp_headを使って、追加CSSよりも手間のヘッダーセクションにstyleをぶち込んできます。さらにそれは子テーマのstyle.cssを読み込んだ後なのです。そうなると、子テーマのstyle.cssが上書きされてしまい、子テーマ最強説が崩れます。

かといって、wp_headで子テーマのstyle.cssをヘッダーの一番最後に読み込むと、今度は『追加CSS』よりも後ろに行ってしまい、追加CSS最強説が崩れてしまう。

そもそも追加CSS自体もwp_headで読み込んでいるんじゃないの？だったらその優先順位がわかれば追加CSS直前に子テーマのstyle.cssを読み込むことができてTCDテーマのインラインスタイルを駆逐できますよね？というのがこの記事の内容です。

この記事で分かること

追加CSSがヘッダーで読まれる仕組み
TCDテーマのヘッダーで読み込まれるCSSの仕組みは？
追加CSSは最強のまま、TCDのインラインスタイルを子テーマのstyle.cssで上書きするには？
まとめ

追加CSSがヘッダーで読まれる仕組み

追加CSSは、wp_headを使って読み込まれる仕組みです。

add_action( ‘wp_head’, ‘wp_custom_css_cb’, 101 );

なので、101よりも優先順位が低いwp_headでフックをかければ、追加CSSよりも手前で読み込まれます。

Additional CSS in the customiser is core WordPress functionality and shouldn’t behave differently between themes. You can see in /wp-includes/js/customize-preview.js that the preview is simply JavaScript that simply sets the content of the <style id="wp-custom-css"></style> element to the content of the Custom CSS text field. The <style> element itself is added by the wp_custom_css_cb() function hooked into wp_head at priority 101. So as long as you have the wp_head() function in your theme, it should behave exactly the same way.
https://wordpress.stackexchange.com/questions/284004/how-does-additional-css-rendering-work

TCDテーマのヘッダーで読み込まれるCSSの仕組みは？

TCDテーマで動的にヘッダーで読み込まれるインラインスタイルは、functions/head.phpで読み込まれる仕組みになっています。

そのファイルの最後を見ると、

add_action(“wp_head”, “tcd_head”);

という記述があります。優先順位は省略されているので10です。

追加CSSは最強のまま、TCDのインラインスタイルを子テーマのstyle.cssで上書きするには？

今までの調査で判明したのは、

『追加CSS』の優先順位が101
TCDのインラインスタイルの優先順位が10

です。

TCDのインラインスタイルよりも優先順位を下げ、かつ、『追加CSS』よりも優先順位が高ければ、追加CSSは最強のまま、子テーマのstyle.cssからTCDのインラインスタイルを上書きできることになります。

子テーマのstyle.cssをwp_headで優先順位10<x<101で読み込めばよいことになります。以下の例は優先順位を99にした場合です。

add_action( 'wp_head', 'add_original_style_css', 99 );
function add_original_style_css() {
$s_dire_uri = get_stylesheet_directory_uri();
$date_query = date("ymdGis", filemtime( get_stylesheet_directory() . '/style.css'));

echo '<link rel="stylesheet" id="child-style" href="'. get_stylesheet_uri() .'?'.$date_query. '" type="text/css" media="all" />';
}