timerPlus プラグインユーザーマニュアル

2025年3月26日

プラグインの購入

プラグインはnoteで販売中

概要

timerPlusは、WordPressサイトに簡単にカウントダウンタイマーを設置できるプラグインです。固定ページや投稿、ウィジェットエリアなど、ショートコードが使用できる場所であればどこにでもタイマーを設置できます。

主な機能

複数のタイマーを作成・管理
タイマーごとに異なる日時を設定可能
背景色と文字色のカスタマイズ
時間表示の区切り方法を選択可能（コロン表示または日本語表示）
シンプルなショートコードでの設置
時間・分・秒・少数第二位までのカウントダウン表示

インストール方法

WordPress管理画面の「プラグイン」→「新規追加」をクリックします
「プラグインのアップロード」ボタンをクリックします
「ファイルを選択」から、timerPlusのZIPファイルを選択します
「今すぐインストール」をクリックします
インストール完了後、「プラグインを有効化」をクリックします

インストールが完了すると、WordPress管理画面の左側メニューに「timerPlus」が表示されます。

タイマーの管理

タイマー一覧画面

左側メニューの「timerPlus」をクリックすると、タイマー一覧画面が表示されます。この画面では、作成済みのタイマーがリスト表示されます。

各タイマーの情報：

ID：システム内での識別番号
タイマー名：設定した名前
対象日時：カウントダウンする日時
ショートコード：このタイマーを表示するためのコード
操作：編集・削除のリンク

新規タイマーの作成

タイマー一覧画面で「新規作成」ボタンをクリックします
タイマー設定画面で必要事項を入力します（詳細はタイマーの設定項目を参照）
「保存」ボタンをクリックします

タイマーの編集

タイマー一覧画面でタイマー名をクリック、または「編集」リンクをクリックします
タイマー設定画面で情報を変更します
「保存」ボタンをクリックします

タイマーの削除

タイマー一覧画面の「削除」リンクをクリックします。確認ダイアログが表示されるので、「OK」をクリックすると削除されます。

注意: 削除したタイマーは元に戻せません。

タイマーの設定項目

タイマー作成・編集画面では、以下の項目を設定できます：

タイマー名

タイマーを識別するための名前です。管理画面でのみ使用され、フロントエンドには表示されません。分かりやすい名前を付けることをお勧めします（例：「セミナー申込締切」「新商品発売」など）。

日付

カウントダウンする対象の日付を設定します。

年：現在から10年後まで選択可能
月：1月から12月まで選択可能
日：1日から31日まで選択可能

注意: 過去の日付は設定できません。エラーメッセージが表示されます。

時間

カウントダウンする対象の時刻を設定します。

時：0時から23時まで選択可能
分：0分から59分まで選択可能

背景色

タイマーの背景色をカラーピッカーで選択できます。デフォルトは白（#FFFFFF）です。

文字色

タイマーの文字色をカラーピッカーで選択できます。デフォルトは黒（#000000）です。

区切り表示

タイマーの時間表示の区切り方を選択できます：

コロン表示：00:00:00:00 の形式で表示します
日本語表示：00時間00分00秒00 の形式で表示します

ショートコードの使用方法

タイマーを表示するには、WordPress投稿エディタにショートコードを挿入します。

基本的な使い方

[timerplus id="1"]

id には、タイマー一覧画面で確認できるタイマーのIDを指定します。

設置場所

ショートコードは以下の場所に設置できます：

投稿
固定ページ
カスタム投稿タイプ
テキストウィジェット
その他ショートコードをサポートしているエリア

カスタマイズ方法

CSSによるカスタマイズ

テーマのstyle.cssファイルやカスタムCSSプラグインを使って、タイマーの見た目をさらにカスタマイズできます。

主なCSSセレクタ：

/* タイマー全体のコンテナ */
.timerplus-container {
    /* カスタマイズ */
}

/* タイマーの数字部分 */
.timerplus-timer {
    /* カスタマイズ */
}

/* 各数字要素 */
.timerplus-hours,
.timerplus-minutes,
.timerplus-seconds,
.timerplus-hundredths {
    /* カスタマイズ */
}

/* 日本語表示の単位部分 */
.timerplus-separator-hour,
.timerplus-separator-minute,
.timerplus-separator-second {
    /* カスタマイズ */
}

タイマーのサイズ変更例

タイマーを大きくする例：

.timerplus-timer {
    font-size: 3rem; /* デフォルトは2rem */
}

.timerplus-separator-hour,
.timerplus-separator-minute,
.timerplus-separator-second {
    font-size: 1.5rem; /* デフォルトは0.85em */
}

よくある質問

Q: タイマーがカウントダウンされていないように見えます

A: ページをリロードしてみてください。また、キャッシュプラグインを使用している場合は、キャッシュをクリアしてください。

Q: 複数のタイマーを1つのページに設置できますか？

A: はい、可能です。それぞれ異なるショートコードを使って複数のタイマーを設置できます。

[timerplus id="1"]
[timerplus id="2"]

Q: 目標日時が過ぎたらどうなりますか？

A: タイマーは「00:00:00:00」または「00時間00分00秒00」で停止します。タイマー終了後の特別なアクションは現在サポートされていません。

Q: タイマーの日付や時間を変更するには？

A: タイマー一覧画面から該当するタイマーの「編集」をクリックし、設定を変更して保存してください。

Q: カウントアップタイマーは使えますか？

A: 現在のバージョンではカウントダウンのみをサポートしています。

サポート情報

テクニカルサポートや質問がある場合は、以下までお問い合わせください：

WOW, Inc.
ウェブサイト: https://wow-jp.com

Wordplessプラグイン timerPlusリリースのお知らせ

この記事を書いた人

WOW KIKUCHI

株式会社WOW 代表取締役
"すべての人に、インターネットで明るい未来を"
相場がよくわからないサイト制作やLP制作の業界を変える！
WEB制作関連はもちろんのこと、テック関連も含めて色々と発信していきます。

timerPlus プラグイン ユーザーマニュアル

目次