困りごとを選ぶ
見出し、ボタン、画像、表、余白、Cover、メディアとテキスト、カラム、共通ブロックから選びます。
devs Tools / WordPress Rescue 1.0.0
WordPress Rescue Mode：困りごとから安全な修正コードを生成
WordPressの見出し、ボタン、画像、表、余白などの困りごとを12レシピから選び、適用範囲と安全性を検査して、追加CSS、Block Style、theme.json、子テーマ、プラグインなど8形式へ変換します。
WordPress Rescue Modeは、WordPressの「見出しを整えたい」「CSSが効かない」「表がスマホではみ出す」といった困りごとから、安全な適用範囲を選び、検査済みのコードと導入・確認・戻し方を8形式で生成する無料ツールです。
- 入力内容と生成処理はブラウザ内で完結
- 12レシピ・64診断ルールをバージョン管理
- WordPressへ自動書き込みしない
ブラウザ内の修正ワークスペースを準備しています…
Four-step rescue
困りごとから実装パッケージまでの4ステップ
適用範囲を決める
追加CSSクラス、固定ページ・投稿ID、Block Styleの順で、影響範囲を狭くします。
見た目と診断を確認
Front・Editorと4つの幅を比較し、scope、互換性、アクセシビリティ、変換損失を確認します。
導入・確認・復旧
1ファイルをコピーするか、導入・確認・戻し方を含む実装ZIPをダウンロードします。
Eight adapters
同じ修正Projectから選べる8つの出力
| 出力 | 向いている場面 | 主な導入先 |
|---|---|---|
| Additional CSS（追加CSS） | 初心者が最短で貼り付けたい時 | Site Editor / Customizer |
| Block custom class（追加CSSクラス） | 選んだ1ブロックだけ | ブロック高度な設定＋CSS |
| Page/Post scoped CSS | 特定の固定ページ・投稿だけ | Additional CSS / stylesheet |
| Block Style API | 編集画面から再利用するスタイル | 子テーマ・プラグイン |
| theme.json v3 fragment | ブロックテーマの設定・スタイル | theme.json merge |
| Child theme（子テーマ） | テーマにひもづく本番運用 | wp-content/themes |
| Micro-plugin（小さなプラグイン） | テーマ変更後も残す修正 | wp-content/plugins |
| Runbook（作業手順書） | 担当者への引き継ぎ・確認 | INSTALL / VERIFY / ROLLBACK |
おすすめ形式はWordPressバージョン、テーマ種別、適用範囲、利用できる機能から判定します。生成結果をWordPressへ自動貼り付けすることはありません。
Public knowledge base
コードを使う前に、レシピと判定根拠を確認できます
Glossary
画面に出てくる英語の意味
- Recipe（レシピ）
- 1つの困りごとに対する、対象ブロック・設定・検査をまとめたバージョン付き修正パターンです。
- Scope（スコープ／適用範囲）
- 生成したCSSが影響するページと要素の範囲です。狭いほど意図しない崩れを防ぎやすくなります。
- Selector（セレクター／対象指定）
- CSSを適用する要素を指定する文字列です。追加CSSクラス欄では先頭のピリオドを外して入力します。
- Specificity（詳細度）
- 複数のCSSが競合した時の優先度です。高くしすぎず、必要な範囲だけ段階的に上げます。
- Adapter（アダプター／出力変換）
- 同じRescueProjectを追加CSS、theme.json、子テーマなどの導入形式へ変換する処理です。
- Rollback（ロールバック／元に戻す）
- 適用した変更を安全に外し、変更前の状態へ戻す手順です。
Safety boundary
このバージョンで自動実行しないこと
- ファイル、データベース、テーマ、プラグイン、WordPress設定への自動書き込み。
- 任意PHPの実行、外部URLからの取得、ProjectデータのAIサービス送信。
- 未確認テーマ固有セレクターの推測と、!importantの自動追加。
- 検査合格だけで、対象サイト・実機・キャッシュ・編集画面での確認を省略すること。
FAQ
修正を反映する前によくある質問
この画面からWordPressへ自動反映されますか？
されません。ファイルと貼り付け用コード、手順書を生成するだけです。反映先とタイミングは利用者が選びます。
初心者はどの出力を選べばよいですか？
最初は「追加CSSクラス＋Additional CSS」が確認・削除しやすい選択です。再利用する本番コードになったら子テーマやmicro-pluginを検討します。
!importantを自動で付けないのはなぜですか？
本当の競合原因を隠し、その後の保守を難しくするためです。まずscopeを狭め、セレクターの詳細度を必要な分だけ段階的に調整します。