=== Countdown Days ===
Contributors: unive-men
Tags: countdown, timer, days, shortcode, block
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Stable tag: 1.3.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

指定した日時までの残り時間を表示するカウントダウン。数字だけを大きく表示し、しきい値で色を変え、メーターはライン・リング・フレームから選べます。

== Description ==

記事編集画面のブロックで直接設定するか、よく使う設定をプリセットとして登録して呼び出せます。

= 表示形式 =

3種類から選べます。数字の部分だけが大きく表示され、単位の文字は通常サイズのままです。

* **残り日数のみ** — 「残り 7 日」。暦日ベース（日付の差）で数えます。
* **日・時間・分** — 「残り 2 日 3 時間 45 分」。実際の残り時間を切り捨てて表示します。
* **時:分:秒** — 「残り 51:45:30」。時は通算のため、残り2日なら 48:00:00 のように3桁以上になります。

同じ終了日時でも、暦日ベースと実残り時間ベースでは数値が異なります。
終了日時が 12/31 0:00、現在が 12/30 22:00 の場合、「残り日数のみ」は残り1日、
「日・時間・分」は 0 日 2 時間 0 分 になります。

= メーター =

期間の進捗を示すメーターを3つの形状から選べます。

* **下部にライン** — 数字の下に横長のバーを表示します。
* **数字を囲む円形リング** — 数字を中心に置き、周囲を円弧が囲みます。
* **数字を囲む角丸フレーム** — 数字を囲む角丸の枠線が進捗に応じて埋まります。

向き（残り期間で減る／経過期間で増える）、色、背景色、太さを設定できます。
下部にラインを表示する形状では、ラインの長さ（%）も指定できます。
囲む形状を選んだ場合、見出しと数字は囲みの内側に表示されます。

= その他の機能 =

* 開始日時・終了日時の設定（開始前は非表示、終了後は任意のメッセージに切り替え）
* 残り時間による2段階の色変更。しきい値の単位は「日」「時間」から選べます
* 「○○まで」のような見出しテキスト。数字との間隔も指定できます
* 左寄せ／中央揃え／右寄せの配置指定（テーマやカラムブロックで中央に寄らない場合に使用）
* 「残り」「日」「時間」「分」の文字を任意の文言に変更（空欄にすれば非表示）
* 文字色・数字の色・数字のサイズ（px / rem / em / vw）の設定
* 全体のサイズを倍率（%）で指定。文字と数字の大小関係を保ったまま、メーターも含めて拡大・縮小
* 記事編集画面のブロックで個別設定、またはプリセットを共有
* ショートコードとブロックの両方に対応

= キャッシュとの相性 =

サーバー側で描画した内容に加えて、再計算に必要な情報を data 属性として出力します。
フロント側のスクリプトが閲覧時点の時刻で再計算するため、ページキャッシュに
古い値が残っていても正しい表示になります。JavaScript が無効な環境では、
サーバー側で描画された値がそのまま表示されます。

更新の間隔は表示形式に合わせて変わります。「残り日数のみ」は日付が変わる時点、
「日・時間・分」は分が変わる時点、「時:分:秒」は毎秒です。

暦日の計算基準はブラウザのタイムゾーンではなく、WordPress の設定タイムゾーンです。
閲覧者がどの地域からアクセスしても、サーバー側と同じ日数になります。

== Installation ==

1. `countdown-days` フォルダを `wp-content/plugins/` にアップロードします。
2. 管理画面の「プラグイン」で有効化します。ビルド作業は不要です。
3. 記事編集画面で「カウントダウン」ブロックを挿入します。

ZIP をアップロードしてインストールする場合、ZIP のルートが `countdown-days/` に
なっている必要があります。リポジトリ全体を包んだ ZIP では
「有効なプラグインが見つかりませんでした」というエラーになります。

== Usage ==

= ブロック（記事編集画面） =

ブロック挿入メニューから「カウントダウン」を選び、サイドバーの「設定の取得元」で
動作を選びます。

* **この記事で個別に設定する** — 日時・テキスト・色・メーターをこのブロックだけに設定します。
  「プリセットから読み込む」でプリセットの値を雛形としてコピーできます。コピー後の変更は
  この記事だけに反映されます。
* **プリセットに従う** — 登録済みプリセットの設定をそのまま使います。プリセットを変更すると、
  それを使っているすべての場所に反映されます。

サイドバーは2つのタブに分かれています。「設定」タブに期間・表示形式・表示テキスト・メーター、
「スタイル」タブに全体のサイズ・文字の見た目・残り時間による色の変更が入ります。
（インスペクターのタブは WordPress 6.2 以降の機能です。それ以前では全項目が1つのタブに並びます。）

配置・余白・文字サイズはブロックの標準設定で調整できます。

= プリセット =

管理メニューの「カウントダウン」から登録します。複数登録でき、ブロックやショートコードの
`id` で指定します。

= ショートコード =

`[countdown id="12"]`

* `id`（または `preset`） — プリセットの投稿 ID。省略すると最新のプリセットを使います。
* `class` — ラッパー要素に追加するクラス名。

属性を書くと、その項目だけプリセットの値を上書きします。

`[countdown id="12" end="2026-12-31 00:00" format="dhm"]`

`id` を省略して属性だけを書くと、プリセットを使わずその場の設定で表示します。

`[countdown end="2026-12-31 23:59" format="hms" heading="受付終了まで" meter="1" meter_style="ring"]`

指定できる属性:

* 期間: `start` `end`
* 表示形式: `format`（`days` / `dhm` / `hms`）
* テキスト: `heading` `prefix` `unit` `hour_unit` `minute_unit` `ended_message`
* 文字: `text_color` `number_color` `number_size` `number_size_unit` `scale`（全体倍率 %）`align`（`left` / `center` / `right`）`heading_gap`（見出しと数字の間隔 px）
* 色の変更: `warn_unit`（`days` / `hours`）`warn1` `warn1_color` `warn2` `warn2_color`
* メーター: `meter`（`1` / `0`）`meter_style`（`bar` / `ring` / `frame`）`meter_direction`
  `meter_color` `meter_bg` `meter_height` `meter_width`（ラインの長さ %）`ring_size` `frame_bg` `frame_radius`

別名として `[countdown_days]` も使えます（他プラグインが `countdown` を先に使用している
場合はそちらが優先されるため、別名を利用してください）。

= テンプレートから使う =

`<?php echo do_shortcode( '[countdown id="12"]' ); ?>`

== Styling ==

ラッパー要素の CSS カスタムプロパティを上書きすると、テーマ側からも見た目を調整できます。

`
.cdd-timer {
	--cdd-scale: 1.2;
	--cdd-number-size: 4rem;
	--cdd-number-color: #333;
	--cdd-warn1-color: #e67e22;
	--cdd-warn2-color: #e74c3c;
	--cdd-meter-color: #333;
	--cdd-meter-bg: #eee;
	--cdd-meter-height: 10px;
	--cdd-ring-size: 220px;
	--cdd-frame-radius: 16px;
	--cdd-heading-gap: 6px;
	--cdd-meter-width: 60%;
}
`

`--cdd-scale` は全体のサイズ倍率です。文字・数字・メーターのすべてに掛かるため、
これだけを変えれば大小関係を保ったまま全体を拡大・縮小できます。

主なクラス名:

* `.cdd-timer` — ラッパー。状態に応じて `.cdd-state-pending` / `.cdd-state-running` / `.cdd-state-ended`、表示形式に応じて `.cdd-format-days` / `.cdd-format-dhm` / `.cdd-format-hms` が付きます。
* `.cdd-warn-1` / `.cdd-warn-2` — しきい値を下回っているとき、ラッパーに付きます。
* `.cdd-align-left` / `.cdd-align-center` / `.cdd-align-right` — 配置を指定したとき、ラッパーに付きます。
* `.cdd-meter-style-bar` / `.cdd-meter-style-ring` / `.cdd-meter-style-frame` — メーターの形状。
* `.cdd-heading` — 見出しテキスト。
* `.cdd-prefix` / `.cdd-number` / `.cdd-unit` — 「残り」「12」「日」の各部分。`.cdd-number` が大きく表示される数字です。
* `.cdd-part` — 「日・時間・分」形式で、数字と単位を1組にまとめる要素。
* `.cdd-clock` / `.cdd-colon` — 「時:分:秒」形式の全体とコロン。
* `.cdd-meter` — メーター。ライン型は `.cdd-meter-bar-track` と `.cdd-meter-bar`、リング型は `.cdd-ring-track` と `.cdd-ring-bar`、フレーム型は `.cdd-frame-track` と `.cdd-frame-bar`、囲み型の内側は `.cdd-meter-inner`。
* `.cdd-ended` — 終了後のメッセージ。

== Frequently Asked Questions ==

= プリセットと「この記事で個別に設定する」はどう違いますか =

プリセットは設定を1か所で管理する仕組みです。プリセットを変更すると、それを使っている
すべての場所の表示が変わります。個別設定はそのブロックだけの設定なので、他には影響しません。
プリセットから値を読み込んだあとに個別設定を変更しても、プリセット側は変わりません。

= 残り時間が更新されないことはありますか =

閲覧時にスクリプトが再計算するため、表示形式に応じた間隔で自動的に更新されます。
タブを開いたままでも、タブに戻った時点で補正されます。

= 「時:分:秒」形式で時間が3桁以上になります =

通算の時間数を表示する仕様です。残り2日なら 48:00:00 になります。
日数を分けて表示したい場合は「日・時間・分」形式を選んでください。

= 角丸フレームの枠の塗りが文字の背後に見えます =

フレームの塗りは背景に描画されるため、内側の背景色が未設定だと透けて見えます。
「フレームの内側の背景色」を設定してください。

= 中央揃えになりません =

WordPress 標準の「配置」はブロックの外枠を寄せる機能のため、幅いっぱいに広がる要素では
中身の位置が変わりません（カラムブロック内などで起こります）。ブロックのツールバーにある
配置ボタン（左寄せ／中央揃え／右寄せ）、またはプリセットの「配置」を指定してください。

配置を指定すると見出しもそれに従います。未指定のときは見出しだけが中央に表示されます。

= 下部のラインが横いっぱいに広がってしまいます =

メーターの「ラインの長さ」を 100% より小さくしてください。「配置」を合わせて指定すると、
その位置（左／中央／右）にラインが寄ります。長さの指定はライン形状のときだけ有効で、
円形リングと角丸フレームには影響しません。

= 全体をもう少し小さく（大きく）したいです =

ブロックの「スタイル」タブ、またはプリセットの「文字の見た目」にある「全体のサイズ」を
変更してください。文字・数字・メーターのすべてに同じ倍率が掛かるため、
文字と数字の大小関係を保ったまま縮小・拡大されます。

= 円形リングから数字がはみ出します =

「リングの直径」を大きくするか、「数字のサイズ」を小さくしてください。

= 開始日時を空欄にするとどうなりますか =

すぐに表示を開始します。メーターを有効にしている場合は、プリセットならその作成日時、
個別設定ならその記事の公開日時を起点として進捗を計算します。

= 1ページに複数のカウントダウンを置けますか =

置けます。それぞれ独立して計算・更新されます。

= アンインストールするとデータはどうなりますか =

プラグインを削除すると、登録したプリセットとその設定はすべて削除されます。
記事内のブロックの設定は記事本文に保存されているため、記事側に残ります。
無効化するだけならデータは残ります。

== Changelog ==

= 1.3.0 =
* 見出しと数字の間隔を指定できるようにしました（全体のサイズ倍率にも追従します）。
* 左寄せ／中央揃え／右寄せの配置指定を追加しました。ブロックではツールバーから指定できます。WordPress 標準の「配置」では中身が寄らない場合（カラムブロック内など）に使用してください。
* 下部にラインを表示する形状で、ラインの長さ（%）を指定できるようにしました。配置と組み合わせると、その位置に寄ります。

= 1.2.0 =
* 修正: 「日・時間・分」「時:分:秒」形式で円形リングを表示すると、円弧が分断されて下部にラインが残っていた問題を修正しました（`vector-effect: non-scaling-stroke` と `pathLength` の併用により、破線の指定が画面座標で解釈されていたため）。
* 全体のサイズを倍率（%）で指定できるようになりました。文字・数字・メーターのすべてに掛かるため、大小関係を保ったまま縮小・拡大できます。
* ブロックの「文字の見た目」「残り時間による色の変更」を「スタイル」タブに移動しました。
* 見出しを中央揃えに固定し、メーターが円形リング／角丸フレームの場合は囲みの内側に表示するようにしました。
* メーターの既定色をオレンジ（#d35400）に変更しました。

= 1.1.0 =
* 記事編集画面のブロックで、日時・テキスト・色・メーターを個別に設定できるようになりました。
* 従来のカスタム投稿タイプはプリセットとして継続利用できます。ブロックの「プリセットから読み込む」で値を雛形としてコピーできます。
* メーターの形状に「数字を囲む円形リング」「数字を囲む角丸フレーム」を追加しました。
* 表示形式に「日・時間・分」と「時:分:秒」を追加しました。
* しきい値の単位を「日」「時間」から選べるようになりました。
* ショートコードで、プリセットの値を属性で上書きできるようになりました。
* 数字部分のマークアップを表示形式間で統一しました（`.cdd-number` を直接指定していた CSS は影響を受けません。`time.cdd-number` のように要素名まで指定していた場合は `.cdd-number` に変更してください）。

= 1.0.0 =
* 初回リリース。
