WordPressのテーマを作成し、テーマのデフォルトCSSで出力した内容が、プラグインによって上書きされてしまうことがあります。このようなときは、divでプラグインの出力した要素を含む上位要素を作り、上書きするという方法があります。
自由に編集できる記事ではなく、上位要素を追加できる場所ではないこともあります。また、子テーマのCSSで上書きしたい場合に、子テーマでPHPの出力まで変更したくないこともあります。
この記事は、このようなときの対応方法です。
目次
フッター直前でCSSを出力する
テーマのデフォルトCSSや通常のプラグインのCSSは、<head>内で読み込まれます。これよりも後ろで読み込まれれば、これらの出力を上書きできます。フッターの直前で出力すれば、一部のプラグインを除いて、確実に最後に読み込まれるCSSとなります。
以下のようにします。
STEP
上書き用のCSSを作る。
フッター側で読み込むCSSを作ります。たとえば、「footer.css」などとします。
STEP
フッターの直前でCSSを出力する。
footer.phpの</body>の直前で以下のようなコードを入れます。私の場合は、<?php wp_footer(); ?>と</body>の間に以下のコードを書きました。
<?php
$footer_css_path = get_stylesheet_directory() . '/footer.css';
$footer_css_uri = get_stylesheet_directory_uri() . '/footer.css';
$ver = file_exists($footer_css_path) ? filemtime($footer_css_path) : null;
?>
<link rel="stylesheet" id="child-footer-css"
href="<?php echo esc_url( $footer_css_uri . ( $ver ? '?ver=' . $ver : '' ) ); ?>"
media="all" />
?>
