ショートコードでも説明をしましたが [ss countdown] と記載することで、その場にカウントダウンタイマーを表示させることができます。
表示例：36日 0時間 57分 09秒 39
特定の数値だけ表示するショートコード
- 基本 → [ss countdown]
- 日付だけ表示 → [ss countdown_day]
- 時間だけ表示 → [ss countdown_hour]
- 分だけ表示 → [ss countdown_min]
- 秒だけ表示 → [ss countdown_sec]
- ミリ秒だけ表示 → [ss countdown_milli]
直近の「もっとも期限が早いカウントダウン」が対象
例えば、親ページ → 子ページ → 孫ページ という風に三段階の構造になったステップセールス ページで、それぞれのページに「登録日より」の条件が設定されていた場合、もっとも表示ページに近くで設定された「登録日より」の時間制限のカウントダウンタイマーが表示されます。
例えば、親ページ（10日以内）、子ページ（20日以内）、孫ページ（30日以内）の場合は「30日以内」を基準として表示されます。
しかしながら、親ページが10日以内なので、11日目にページは表示されなくなります。
もし、表示するページ及び親関係ページのいずれにも「登録日より」が設定されていないときは、カウントダウンタイマーは何も表示されません。
表示中にカウントダウンタイマーがタイムアップ
ユーザーが該当ページを表示中にカウントダウンが終了（タイムアップ）した場合、次のように表示されます。自動的なリロードは起こりません。
表示例：0日 0時間 0分 0秒 0
カウントダウンタイマーHTMLソース
スタイルシートの設定を行うことでカウントダウンタイマーをデザインすることが可能です。下記に出力されるHTMLコードを記します。
<span class="ss-cdt ss-countdown"><span class="ss-cdt-num ss-cdt-day">36</span><span class="ss-cdt-str ss-cdt-day-str">日</span><span class="ss-cdt-num ss-cdt-hour">0</span><span class="ss-cdt-str ss-cdt-hour-str">時間</span><span class="ss-cdt-num ss-cdt-min">56</span><span class="ss-cdt-str ss-cdt-min-str">分</span><span class="ss-cdt-num ss-cdt-sec">19</span><span class="ss-cdt-str ss-cdt-sec-str">秒</span><span class="ss-cdt-num ss-cdt-milli">42</span></span>それぞれに設定されたClassを利用してデザインするようにしてください。
Wordpress 本文内に <style></style> を記入すると不要な改行タグが混入してデザインが崩れる場合があります。おすすめプラグインなどを利用してください。
個別に数値を指定するHTMLソース
- カウントダウンタイマーのセット
- 日付のみ表示 <span class=”ss-cdt-num ss-cdt-day”></span>
- 時間のみ表示 <span class=”ss-cdt-num ss-cdt-hour”></span>
- 分のみ表示 <span class=”ss-cdt-num ss-cdt-min”></span>
- 秒のみ表示 <span class=”ss-cdt-num ss-cdt-sec”></span>
- ミリ秒のみ表示 <span class=”ss-cdt-num ss-cdt-milli”></span>
設定例
<style>
/* 数字のデザインを指定する */
.ss-cdt-num { font-size: 20px; color: #3333ff; }
</style>