お得なAmazonタイムセールはこちらをクリック!!
本ページはプロモーションが含まれています

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

この記事は約3分で読めます。

こんにちは!ふるのーと(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

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

 

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

美味しい食事と音楽に囲まれて毎日笑顔を大切に過ごしています。
ブログもYoutubeものんびりとやっています。(*^^*)

fullnoteをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
ITWordpress
スポンサーリンク
ふるのーとさんのブログ

コメント

タイトルとURLをコピーしました