タイマー終了後にボタンリンクを表示、非表示できるカウントダウンタイマープラグイン「Countdown Timer Lite」
WordPressサイトにカウントダウンタイマーを付けたかったのですが、タイマー途中やタイマー終了後にボタンやリンクなどを表示・非表示にするといった動きを付けられるものが無かったので、自作プラグインを作りました。（有料プラグインです）
本プラグインの特長はざっと以下の２つです。
（１）カウントダウン途中、終了後にそれぞれボタンなどのコンテンツを表示したり、非表示にしたりできる。
（２）パソコンの日付を変更してもカウントダウンに影響しない。
詳細は後ほど解説してます。
目次
カウントダウンタイマーを付ける方法
WordPressのサイトにカウントダウンタイマーを付ける方法はざっくり
・プラグインを使う
・javascriptを直接書く
があります。
「カウントダウンタイマー」のWordPressプラグイン
ざっと検索すると以下の２つがありました。
・Uji Countdown（Uji Countdowでググる）
・Countdown Timer Ultimate（Countdown Timer Ultimateでググる）
「Uji Countdown」の方が検索順位が高かったですが、プラグインのアップデートが2年前くらいで止まっています。ただ、タイマー自体は動いたので、使えることは使えそうです。
「Countdown Timer Ultimate」は更新が続いています。
どちらのプラグインとも、ざっとしか見てないのですが、
・カウントダウンタイマーをつける
・タイマー終了後にリダイレクトする
のであれば、上記プラグインでOKです。
javascriptを直接書く
「javascript カウントダウンタイマー」とかでググるとたくさん出てきます。
また、カウントダウンタイマーNEOというサイトでは、javascriptコードを生成してくれるWebアプリがありました。便利です。
では、上記プラグインやjsコードなどがあるにもかかわらず、なぜ自作したのか、
ですが、ずばり、
・タイマー終了後にボタン（リンク）を表示したかった
・タイマー終了後にボタン（リンク）を消したかった
からです。
「Countdown Timer Lite」の特徴
本プラグインの特徴は以下の３つです。
・カウントダウン終了後にボタンを表示、非表示できる
・カウントダウン途中にも、コンテンツを表示、非表示できる
・パソコン側の日時を変更されてもタイマーを自動補正
カウントダウン終了後にボタンを表示、非表示できる
「カウントダウン終了後にボタンを表示、非表示できる」、これが一番付けたかった機能です。
使い方としては、
・セールタイム終了後（タイマー終了後）に購入ボタンを消す
・〇日後（タイマー終了後）に購入ボタンを表示する
といった感じです。
カウントダウン途中にも、コンテンツを表示、非表示できる
2つ目の特徴の「カウントダウン途中のコンテンツ表示・非表示」ですが、
・あと〇日でセール終了です！
のような表記を出すために付けました。
※後述しますが、この機能で「購入ボタン」を表示するのはお勧めしません。（cssのdisplay:noneで実現しているため）
パソコン側の日時を変更されてもタイマーを自動補正
3つ目の特徴が「パソコン側の日時（日付）を変更しても、タイマーを自動補正する」です。
「？？？」となるかも知れませんが、ざっくり説明しますと、
他のjavascriptのタイマーはもちろんのこと、無料WPプラグインのタイマーも、タイマー自体はjavascriptで実装されています。カウントダウン処理もjavascriptなのですが、カウントダウンのための日時の計算にパソコンの日付設定を利用しているため、パソコンの日付を変更するとタイマーを進めたり、遅らせたりできるのです。
今回プラグインを作った一番の目的が「購入ボタンの表示」「購入ボタンの非表示」だったので、これ（パソコンの日付変更）をやられてしまうと「フライング購入」ができてしまいます。何とか予防する必要がありました。
タイマーの装飾用cssクラス
タイマー用の数字、文字（日時分秒など）にはそれぞれに別のclassを書いてありますので、フォント、色、大きさなどお好みで装飾できます。
「Countdown Timer Lite」の処理的な話
詳しく書くと「なんだその程度かよｗ」ってなっちゃうので、ざっくり書きます。
タイマー途中のコンテンツ表示、非表示はjavascriptのdisplayプロパティっていうやつを使ってます。cssの「display:none;」をjavascriptで動的に指定する、感じです。
コンテンツの表示非表示を手軽にコントロールできるのですが、cssなんで、ソースはブラウザで見れますし、ブラウザでblockにすると普通にボタンが登場します。（なので、購入ボタンの表示、とかにはおすすめしません。「別にそんなに気にしない」のであれば使ってもいいと思います。）
タイマー終了後のコンテンツ表示、非表示はdisplayプロパティではない方法で実現しています。何かというと、ページのリロードです。ですので、セール終了後に購入ボタンが残ることはありませんし、cssでblockしても購入ボタンが登場することはありません。htmlソース見ても無くなっています。
パソコンの日付変更補正は、差分をチェックして補正をかける、という処理を行なっています。
「Countdown Timer Lite」の使い方
プラグインをインストール、有効化すると設定メニューに「Countdown Timer Lite」が表示されますので、その設定ページでタイマー設定を行ないます。
タイマー自体の表示はショートコードです。
タイマー終了後のボタン表示（非表示）は、「Countdown Timer Lite」設定画面にボタンhtmlを入力する欄があるので、そこにボタンのソースを入力して、実際にボタンを表示したいところ（記事、LP）にショートコードを書きます。
各設定項目の詳細や、設定例は、購入後のマニュアルに記載しております。
商品説明
商品名：「Countdown Timer Lite」プラグイン
金 額：10,780円（税込）
動作環境：Wordpressプラグインです。
支払方法：PayPal
購入方法
以下のリンクから支払いページにお進みください。
「Countdown Timer Lite」プラグインの購入はこちら（PayPal）
お願い
商品の性質上、一度購入いただいたら返金はできませんのでご承知おきください。
プラグインの二次配布はお控えください。
購入の流れ
（１）PayPal支払い完了後、「Countdown Timer Lite」ダウンロードページのリンクとパスワードが表示されます。
（２）パスワードはコピペして保存しておいてください。
（３）リンクをクリックしてダウンロードページに移動し、パスワードを入力します。
（４）ダウンロードページには、プラグインダウンロードリンクがあります。
（５）プラグインファイルをダウンロード保存してください。
よくあるご質問
【Ｑ】プラグインに関する質問があります。
【Ａ】お問い合わせページからご連絡ください。
お問い合せページはこちらをクリックしてください。
【Ｑ】パスワードを忘れてしまったのですが。
【Ａ】お問い合わせページからご連絡ください。
その際、以下の内容をご記入ください。
・PayPalのメールアドレス
・取引ID
・購入日時
・商品番号
「取引ID」「購入日時」「商品番号」は、お支払い完了時にPayPalから自動で返信されるメールに記載されています。
いただいた内容を確認の上、メールにてご連絡いたします。
【Ｑ】ダウンロードページURLが分からなくなったのですが？
【Ａ】こちらにございます。
【Ｑ】複数のサイトで使いたいのですが？
【Ａ】はい、お使いいただけます。
【Ｑ】このプラグインのカスタマイズをしたいのですが？
【Ａ】はい、ご自由に改変ください。カスタマイズ後のプラグインの二次配布はお控えください。
【Ｑ】このプラグインのカスタマイズしてほしいのですが？
【Ａ】お問い合わせページからご連絡ください。
お問い合せページはこちらをクリックしてください。
【Ｑ】PayPal以外の支払い方法はありませんか？
【Ａ】今のところ、PayPalのみです。
免責事項
本プラグインの利用において、欠陥、一時停止、一部削除、変更、終了及びそれらが原因で発生したユーザーまたは他者の損害に対し、一切責任を負いません。
更新履歴
ver1.0.0 2020年3月23日 プラグイン公開
コメント