独自の「カウントダウン」ウィジェットを追加する方法

はじめに

Cocoonテーマにはcountdownショートコードが実装されていますが、このショートコードは表示時点での残り日数を計算するだけで、リアルタイム更新には対応していません。

～まで○○日！といったような、日にちcountdownショートコードの使い方

「iPhone 100 の発売まで、あと日！！」といったような日付カウントダウンショートコードの利用方法です。何かの発売日や、開演・公開を待ちわびている感じに残りの日にちを表示できます。countdownショートコードショートコードの基本的...

wp-cocoon.com

そこで、Nishiki Proの「カウントダウン」ブロックのようにリアルタイムで残り時間を更新表示する独自ショートコードを追加します。

さらに、カウントダウンを表示するウィジェットも作成します。

「カウントダウン」ブロック

ウェブサイトのリニューアルだったり、期間限定ページだったり「何かの開始 または 終了までの期間を表現したいとき」などに使うと効果的なブロックです。

support.animagate.com

この記事では、この方法について説明します。

完成イメージ

使用方法

以下にショートコードを示します。

[my_countdown]

実装手順

以下の手順で実装します。

拡張：ウィジェットを追加

ショートコードを拡張して、ウィジェットを追加します。

完成イメージ

実装手順

上記のコードに加え、以下のコードをfunctions.phpに追加します。

// ウィジェットを追加
add_action('widgets_init', function () {
  register_widget('Countdown_Widget');
});


/**
 * ウィジェットクラスを定義
 */
class Countdown_Widget extends WP_Widget {
  public function __construct() {
    parent::__construct(
      'my_countdown_widget',
      'カウントダウン',
      ['description' => 'カウントダウンタイマーを表示します。']
    );
  }


  /**
   * ウィジェットを表示
   *
   * @param array $args ウィジェット引数
   * @param array $instance 保存された値
   * @return void
   */
  public function widget($args, $instance) {
    $to    = $instance['to']    ?? '';
    $text  = $instance['text']  ?? '';
    $title = $instance['title'] ?? '';

    echo $args['before_widget'];

    // タイトルが設定された場合
    if (!empty($title)) {
      echo $args['before_title'] . apply_filters('widget_title', $title) . $args['after_title'];
    }

    // 日時が設定された場合
    if (!empty($to)) {
      echo do_shortcode("[my_countdown to='{$to}' text='{$text}']");
    }

    echo $args['after_widget'];
  }


  /**
   * ウィジェットの設定フォーム
   *
   * @param array $instance 保存された値
   * @return void
   */
  public function form($instance) {
    $to    = $instance['to']    ?? '';
    $text  = $instance['text']  ?? '';
    $title = $instance['title'] ?? '';

    // 現在の「終了日時」を分割
    $datetime = '';
    if ($to) {
      $datetime = new DateTime($to);
      $datetime = $datetime->format('Y-m-d\TH:i');
    }

    ?>
    <p>
      <label for="<?= $this->get_field_id('title'); ?>">タイトル</label>
      <input class="widefat" id="<?= $this->get_field_id('title'); ?>" name="<?= $this->get_field_name('title'); ?>" type="text" value="<?= esc_attr($title); ?>" />
    </p>
    <p>
      <label for="<?= $this->get_field_id('to'); ?>">終了日時</label>
      <input class="widefat" id="<?= $this->get_field_id('to'); ?>" name="<?= $this->get_field_name('to'); ?>" type="datetime-local" value="<?= esc_attr($datetime); ?>" />
    </p>
    <p>
      <label for="<?= $this->get_field_id('text'); ?>">表示テキスト</label>
      <input class="widefat" id="<?= $this->get_field_id('text'); ?>" name="<?= $this->get_field_name('text'); ?>" type="text" value="<?= esc_attr($text); ?>" />
    </p>
    <?php
  }


  /**
   * ウィジェットの設定を保存
   *
   * @param array $new_instance 新しい値
   * @param array $old_instance 古い値
   * @return array 保存する値
   */
  public function update($new_instance, $old_instance) {
    $instance = [];
    $instance['title'] = sanitize_text_field($new_instance['title'] ?? '');
    $instance['to']    = sanitize_text_field($new_instance['to']    ?? '');
    $instance['text']  = sanitize_text_field($new_instance['text']  ?? '');

    return $instance;
  }
}

さいごに

今回紹介した方法を使えば、「カウントダウン」ショートコードを追加できます。
さらに、機能を拡張し、新たにウィジェットを追加することで、ウィジェットとショートコードの両方を利用できるため、設置場所や表示方法を柔軟にカスタマイズできます。

「カスタムHTML」ウィジェットに指定期間だけ表示する機能を追加する方法

「カスタムHTMLウィジェットを期間限定で表示する方法」を解説。開始日時と終了日時を設定し、指定した期間のみウィジェットの内容を表示する方法や、リアルタイムで開始・終了を判定する仕組み、キャンペーンやセールなどへの活用方法を分かりやすく紹介します。

chuya.s239.xrea.com