13:49・2021/07/12
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を変える
上2つを雑に合体させていたらできてしまったのでコードを載せます。
<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」の前の「”」をお忘れなく!
余談
ということで季節のイベントに合わせて「おそらきれい」の見た目を変えていく試みをしています。お楽しみに!