Zenn
⌚

イベント期間が終了したらclassを追加して装飾

2024/04/23に公開
CSS
HTML
JavaScript
WordPress
tech

ホームページに、お店のイベント情報を載せていらっしゃる方は多いですよね。
利用者としてもSNSのように流れていってしまわず、見やすいのが嬉しいです。

そんな便利なイベント情報、イベントが終了したら翌日こんなことを手作業でやっていませんか？

  • サムネイルをグレーアウトさせるために、Photoshopでグレーのベタ塗り乗算レイヤーを配置してjpegで書き出して、既存のサムネイル画像と名前がかぶらないように名前をつけて保存して…サムネイル設定を変更している
  • イベント情報のテキスト部分に「イベントは終了しました」と追記している

これらの作業、遅れるわけにもいかないし…でも地味に時間がかかるし。
イベントを頻繁にやっているお店では、修正の回数も多くなってしまいますよね。

今回は、日付でclassと文言を追加して上記の面倒な作業をしなくて済むようにWordPressのテンプレートファイルを編集します！

フィールドの用意

これからやりたいのは、今日の日付とイベント終了日の日付を比較することです。
イベントのテキストや画像を投稿するためにあらかじめカスタム投稿タイプeventを作成しておきましょう。

そして、イベント終了日はいつなのかをWordPressに認識してもらう必要があります。カスタムフィールドを使ってイベント終了日を設定しましょう。

カスタムフィールドは、日付の入力用フィールドが存在します。
フィールドタイプを日付選択フィールドにして、名前をつけます。

今回はevent_dateと名前をつけました。

日付を比較する

用意したフィールドが投稿画面からも確認できました。

イベント投稿をするのは、あまりITになじみのない人かもしれません。なので、イベント終了日はどのように入力したら良いか注釈を付け加えています。

これで、今日の日付とイベント終了日の用意ができました。
続いて、終了日に応じて画像をグレーアウトさせたい・テキストを追加表示させたい場所へ移動します。

私はトップページに1つだけイベントを掲載し、それが終了しているかどうか確かめてclass追加・テキスト追加したかったのでindex.phpに移動します。

index.phpで日付比較・class追加のコードを書く

先にコードを挙げます。

PHP

 // カスタムフィールドから日付を取得
$event_date = get_field('event_date'); // 日付をUNIXタイムスタンプに変換 $event_timestamp = strtotime($event_date); // 現在のUNIXタイムスタンプを取得 $current_timestamp = current_time('timestamp'); // イベント日付が現在の日付を過ぎているかどうかを確認し、条件に応じてclassを設定

if ($event_timestamp && $current_timestamp >= $event_timestamp) {
$class = 'event-completion'; // 画像グレーアウト
$add_text = 'ご好評のうちに終了しました';
} else {
$class = ''; // クラスなし
$add_text = '';
}

HTML

 <a href="<?php the_permalink(); ?>" class="top__event--link">
  <div class="top__event--item">
    <div class="<?php echo $class; ?>"> <img class="top__event--thumbnail" src="<?php the_post_thumbnail_url(); ?>" alt="サムネイル" width="308" height="214" /> </div>
    <div class="top__event--detail">
      <h3 class="top__event--title">
        <?php the_title(); ?> </h3><span class="c-base-text"><?php echo $add_text; ?></span> <a href="<?php the_permalink(); ?>" class="top__event--button c-button2">詳細を見る</a> </div>
  </div>
</a>

CSS

// --------------------------
// イベント期間の過ぎたアイテム - 画像グレーアウト
// --------------------------
.event-completion {
  position: relative;
  display: inline-block;
}

.event-completion::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* 透明度が0.3の黒 */
  pointer-events: none; /* オーバーレイをクリック可能にする場合は削除 */
}

.event-completion img {
  display: block;
  width: 100%;
  height: auto;
}

コードのざっくり解説

ざっくり解説します。
PHPで日付比較をして現在の日付がイベント終了日を過ぎていたらclassを追加する、ということをやっています。

イベント終了日を過ぎていなければ、classは追加されません。
イベント終了日にはclassが追加されて、CSSも有効になるということです。

今後の課題

時間になったら○○する系は、使い勝手が良いし使うシーンも多いのでもっと慣れたいです。
私はJavaScriptの操作が苦手なので、また今度時間操作系のコードを書いて練習します！

Discussion