【Cocoon】WordPressにカウントダウンタイマを設置するショートコードのカスタマイズ。プラグイン不要

こんにちは！ふるのーと（fullnote）です！(*^^*)

先日、ショートコードで年齢を表示するカスタマイズを紹介しました。

⇒相対的時間経過で年齢を表現するageショートコードのカスタマイズ

「これを応用してカウントダウンタイマーを作成できるなあ。」と思ったので挑戦してみました。

カウントダウンタイマーとは？
サクッといじってみた

カウントダウンタイマーとは？

カウントダウンタイマーとは、

終了まで〇〇日！

というやつです。

よく申込期限が表記されているサイトありますよね。

そのときに使えると便利ですよね。

サクッといじってみた

前の記事を参考にコードを変更してみました。

文法だとか単語の意味とかはあまり考えていません。(fromのままとか結構適当です(^_^;))

まずはサクッと動くところまで試して見ようかなと。

以下コードを子テーマのfunction.phpに貼り付けます。

//カウントダウンタイマーの取得
if ( !function_exists( 'get_countdown' ) ):
function get_countdown( $from, $to = '' ) {
  if ( empty($to) )
      $to = time();
  $diff = (int) abs($from - $to);
     $days = floor($diff / 86400);
     $till = sprintf(_n('%s day', '%s days', $days), $days);
  return $till;
}
endif;

//相対的な時間経過を取得するショートコード
add_shortcode('countdown', 'countdown_shortcode');
if ( !function_exists( 'countdown_shortcode' ) ):
function countdown_shortcode( $atts ){
  extract( shortcode_atts( array(
    'from' => null,
  ), $atts ) );
  //入力エラー出力
  if (!$from) {
    return '日付未入力';
  }
  $from = strtotime($from);
  return get_countdown($from);
}
endif;
//カウントダウンタイマーの取得ここまで//

投稿画面では以下のように入力します。

終了まで[countdown from="2020/12/31"]

上記のように記載すると

終了まで日付未入力

というように表示される様になりました！(∩´∀｀)∩ﾜｰｲ

カウントダウンタイマーはWordpressプラグインもあるようですが、カスタマイズで対応出来るのであればそれでもいいですよね。

ちなみにSWELLというテーマでも利用できました。⇒SWELL

ほかのテーマでも使えるのではないかと思いますので興味がありましたら是非試してみてください。

Cocoonに実装されましたので、Cocoonでのカスタマイズは不要になりました◎

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

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

それでは今日はこの辺で！ふるのーと（@fullnote）でした！(*^^*)

カウントダウンタイマーとは？

サクッといじってみた

コメント