当機能はEX版限定機能となっております

ACTION EX限定 ショートコード

カウントダウンタイマー

Gutenbergではショートコードのクイックタグはクラッシックブロックをご利用ください

\ パリオリンピック2024まで /

--時間---開催

カウントダウンタイマーはショートコードで設定することで

  • 指定した日時までのカウントダウン
  • 日又は月ごとにリセットする無限ループのカウントダウン
  • 指定した日時でコンテンツを表示(又は非表示)

を行うことで出来る機能です。

基本ショートコード

Gutenbergではクラッシックブロックをご利用ください

[st-countdown year="" month="" day="" time="00:00" show_timer="1" invert="0"]コンテンツ[/st-countdown]
属性説明
year年 半角数字(例: 01)で指定 ※省略時は現在の年
month月 半角数字(例: 05)で指定 ※省略時は現在の月
day日 半角数字(例: 01)で指定 ※省略時は00:00:00
time時:分:秒 半角数字(例: 17:05:00)で指定 ※省略時は現在の年
show_timerカウントダウンタイマーを表示するかどうか。 1 (デフォルト): 表示 0: 非表示
invertタイムオーバー時のコンテンツの表示動作。 0 (デフォルト): タイムオーバー前は隠す -> タイムオーバーで表示 1: タイムオーバー前は表示 -> タイムオーバーで隠す

ループショートコード

\ 1日でリセット!無限ループ / --時間---
[st-countdown time="00:00" interval="daily" /]
属性説明
intervalカウントダウンの繰り返し間隔 daily: 1 日単位でカウントをリセットする。指定した年月日時間の経過後は、 翌日の同じ時間まで のカウントダウンとなり、 以降同様に繰り返されるmonthly: 1 ヶ月単位でカウントをリセットする。。指定した年月日時間の経過後は、 翌月の同じ日時まで (例外あり / 以下参照) のカウントダウンとなり、 以降同様に繰り返されるday に 29 〜 31 を指定している場合で、その日付がない月の場合は月末までのカウントダウンとなる。 none: 指定した年月日時で終了時の HTML を表示する。省略時の デフォルト値

使用例:

--時間---終了時の HTML

[st-countdown year="2024" month="4" day="30" time="20:00"]終了時の HTML[/st-countdown]

  • 2021年4月30日 20:00:00 まで のカウントダウンとなる。
  • 2021年4月30日 20:00:00 に 終了時の HTML が表示される。

--時間---

[st-countdown time="20:00" interval="daily" /]

  • 毎日 20:00:00 まで のカウントダウンとなる。
  • 毎日 20:00:00 からは、 翌日の 20:00:00 まで のカウントダウンが新しく始まる。

--時間---

[st-countdown day="5" time="20:00" interval="monthly" /]

  • 毎月 5 日の 20:00:00 まで のカウントダウンとなる。
  • 毎日 5 日の 20:00:00 からは、 翌月の 5 日 20:00:00 まで のカウントダウンが新しく始まる。

ミリ秒の非表示

ms-deleteクラスで囲むことでミリ秒を非表示に出来ます。

--時間---
<div class="ms-delete">
 [st-countdown time="00:00" interval="daily" /]
</dv>

カウントダウンタイマーの使用の停止

カウントダウンを使用する予定の無い方は「テーマ管理」>「その他」>「カウントダウンショートコードを無効化」で機能及びjsの読み込みなども停止します

※使用中のカウントダウンショートコード及びコンテンツも非表示となります
※クイックタグも非表示となります

利用の注意点

  • コンテンツなどの非表示状態の仕様は「コメントアウト」です(ソース上では閲覧できます)
  • スマートフォンではミリ秒の動きにより閲覧しにくくなる場合があります(「ミリ秒の非表示」をご活用ください)
  • コンテンツにはショートコードも使用できますが、展開後の出力ソース内容に依っては表示が崩れるなど不具合が出る場合もございます。(事前にチェックして下さい)
  • javascriptが使用できる環境 (パソコン/モバイル機器側での処理) である必要があります※絶対に見られてはまずいものは記載しないでください
  • AMPには対応しておりません
  • 日時はWP の「一般設定」の「タイムゾーン」での日時で指定されUTC(協定世界時)に変換したもので計算 しています。
  • タイマーは<span class="st-countdown">カウントダウンタイマー</span>で出力されます。Pタグで囲みたい場合などはクラスを付与しないと反映されません。

解決しないことは検索もしてみてね

あなたにおすすめ

検索キーワードを把握してマッチした広告を挿入する

「検索ワード提案プラグイン」を使用することでサイト内検索フォームに関して以下のことが可能になります。

ここが便利

  • サイト内で検索されたキーワードがわかる
  • 検索結果にキーワードに応じた任意のコンテンツ(広告)を挿入することができる

例えば、検索フォームで「ドッグフード」で検索をしたときに通常は関連する記事を一覧で表示するだけですが、このプラグインでは好きな「広告」や「読んで欲しい記事」を表示することが可能です。

オススメ記事

no image 1

ver20240115よりレイアウト及びウィジェットエリア名称を一部変更いたしました。 下部にPDF ...

2

https://action-sample.com/ 上のサイトのようなカテゴリーで分けた記事一覧の ...

3

AFFINGERブロックプラグインプラグインを有効化しよう 当テーマは「AFFINGERブロックプラ ...

-ACTION, EX限定, ショートコード

無料配布キャンペーン中!

詳しくみる

AFFINGER公式マニュアル

パスワードを入力してください

- 不明な方はコチラ -

PAGE TOP