WordPressで読み込むCSSを期間ごとに変える

カテゴリー

WordPress

works

WordPressで読み込むCSSを期間ごとに変える

14:41・2020/10/20　公開

22:54・2020/12/19　更新

ハロウィーンが終わるとあっという間に年末な気がしてきます。

WordPressで複数のCSSを読み込む

そもそもどうやって「style.css」以外のCSSを読み込むのか調べました。

複数のCSSを読み込むコード

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
/*----↑style.cssを読み込む------*/

<link href="<?php echo get_stylesheet_directory_uri(); ?>/sample.css" rel="stylesheet">
/*----↑sample.cssを読み込む---------*/

出力結果

<link rel="stylesheet" href="https://osora.work/blog/wp-content/themes/beautiful-sky/style.css">
/*----↑style.cssを読み込む------*/

<link href="https://osora.work/blog/wp-content/themes/beautiful-sky/sample.css" rel="stylesheet">
/*----↑sample.cssを読み込む---------*/

関数リファレンス/get stylesheet directory uri

「get_stylesheet_directory_uri」は、style.cssがあるディレクトリまでのURLの値をかえしてくれます(スラッシュは含みません)。
なのでその後に「/sample.css」を書き加えればCSSが追加で読み込まれます。

CSSは後から読み込まれた方が強い(優先される)ので、style.cssの後ろに書くことで上書きができます。

参考サイト↓
wordpressテーマに複数のcssファイルをリンクさせる方法 | 野菜セリ人のプログラミング備忘録

PHPで期間条件を指定する

【PHP】日付比較で期間を指定して条件分岐してみる | ERA BLOG
↑参考サイト(コピペはこちらから)

きっと他にも書き方はあると思いますが、自分の力では解説できないのでこの話はおしまいです。
コピペしてありがたく使わせていただきます。

【本題】期間を指定して読み込むCSSを変える

上２つを雑に合体させていたらできてしまったのでコードを載せます。

<link href="<?php echo get_stylesheet_directory_uri(); ?>

<?php $today = date("md"); //今日の日付
$start = "1001"; //開始日
$end = "1031"; //終了日

if(strtotime($today) < strtotime($start)){
echo "読み込まない期間";
}else if(strtotime($today) >= strtotime($start) && strtotime($end) >= strtotime($today)){
echo "/sample.css";
}else if(strtotime($today) > strtotime($end)){
echo "読み込まない期間";
}
?>

" rel="stylesheet">

条件分岐で書き出すのは「/sample.css」の部分だけです。
このコードで10月1日から10月31日までの間だけ「sample.css」を読み込むことができます。

「rel」の前の「”」をお忘れなく！