JavaScript – 時間帯で表示するメッセージを変える方法

WordPressのページ全体でJavaScriptを使うなら「Simple Custom CSS and JS」がおすすめ。
しかし、今回はWordPressのあるページの１箇所だけに入れるので別の方法が必要になる。
１つのページに１箇所特別に入れるなら「カスタムHTML」ブロックを使う。

この方法は特定の投稿や固定ページにのみJavaScriptを適用したい場合に最も手軽にJavaScriptを動作させることができる。

JavaScriptを使って時間ごとに異なるメッセージを表示する

朝は「おはようございます！」、昼は「こんにちは！」夜は「こんばんは！」と表示させます。

以下のコードを<script></script>で囲んでください。

<p id="greeting">実際にはここに下の文章を時間毎に分けて表示することになる></p>

<script>
const hour = new Date().getHours();
if(hour >= 4　&& hour < 11){
document.getElementById('greeting').textContent ="おはようございます！";
}else if(hour >=11 && hour <17){
document.getElementById('greeting').textContent ="こんにちは！";
}else{
document.getElementById('greeting').textContent ="こんばんは！";
}
</script>

以下のところが実際に「カスタムHTML」ブロックを使って上のスクリプトをそのまま入れて実行している見本になる。
朝４時〜11時までは「おはようございます！」、11時〜17時までは「こんにちは！」、それ以外は「こんばんわ！」となる。

実際にはここに下の文章を時間毎に分けて表示することになる>