JavaScript でカスタマイズする
a-blog cms は、サイトの表示側と管理画面の両方を JavaScript でカスタマイズできます。目的によって使う仕組みが違うので、まずどれに当てはまるかを選んでください。
1. サイトの表示側に JavaScript を足したい
テーマに独自の JavaScript を読み込んだり、a-blog cms が用意している組み込み JS（バリデーション・遅延読み込み・地図など）の設定を変えたい場合です。
- 組み込みJSについて — 組み込み JS の有効化と設定方法
- 組み込みJSのイベントハンドラ — 組み込み JS の処理の前後に自分の処理を挟む
- 任意のJavaScriptを使用する — テーマに独自の JS ファイルを読み込む
- Google Translate APIを使って翻訳ボタンを作る — 実装例
- リファレンス: 組み込みJS
2. 管理画面の動作を変えたい・UI を足したい
「アップロードする前に画像をチェックしたい」「エントリー一覧に独自のボタンを足したい」「独自のブロックやユニットを追加したい」といったカスタマイズです。プラグインの形で JavaScript を書きます。
- 管理画面の JavaScript 拡張 — 概要と、できることの一覧
- はじめてのプラグイン — まず1つ動かす
JavaScript が書ければ始められます。ビルド環境（webpack や Vite）は必要ありません。
実験的機能 管理画面の JavaScript 拡張は、Ver. 3.2 の間は実験的機能として提供し、Ver. 3.3 で正式に提供する予定です。管理画面に追加した独自の JavaScript・CSS は、バージョンアップ後の動作を保証しません。これらを原因とする不具合は、サポートの対象外です。詳細は各ページの注記を確認してください。
3. 管理画面と同じ見た目の画面を作りたい
プラグインの設定画面や独自の管理ツールを、a-blog cms の管理画面と同じデザインで作りたい場合です。管理画面で使っている CSS フレームワークと React コンポーネントを npm パッケージとして公開しています。
- npm パッケージ（@ablogcms/*） — 公開しているパッケージの一覧
- 管理画面と同じ見た目で画面を作る — CSS だけで作る方法と、コンポーネントを使う方法
- リファレンス: スタイルガイド
PHP 側のカスタマイズを探している場合
JavaScript ではなく PHP で処理を挟みたい場合は、次のページを参照してください。
- フック処理 — 保存や表示の前後に PHP の処理を挟む
- プラグイン開発 — 拡張アプリの作り方
- アセット API（JS / CSS の登録） — JS / CSS ファイルを管理画面やサイトに読み込む