Editor Templates で入力インターフェイスをカスタマイズするには、WordPressのテーマテンプレートのように編集画面用のテンプレートを作成し、特定のディレクトリ に保存するだけです。また、CSSやJavascriptなども命名規則に従って保存するだけで自動的に適用されるようになるため、見た目を変更したり、 ユーザーの操作に応じて表示内容を変更することも簡単に実装できます。
ダウンロードと有効化
- WordPressのプラグインディレクトリよりEditor Templatesをダウンロードしてください。
- ダウンロードしたファイルを解凍して、プラグインディレクトリにアップロードしてください。
- プラグイン管理画面の一覧に「Editor Templates」が追加されていますので、「有効化」のリンクをクリックしてプラグインが機能するようにしてください。
編集画面の表示項目の調整
[設定]メニューに[Editor Templates]が追加されますので、そのメニューをクリックして、メタボックスの設定およびレイアウトの設定を行います。
メタボックスの設定は、項目にチェックを入れると、その入力ボックスが表示されなくなります。編集テンプレートタグは、動作の不具合を防ぐために、デフォルトの入力項目が非表示になっていないと動作しませんので、tpl_titleやtpl_editorなどデフォルトの入力項目を置き換える編集テンプレートタグを使う場合は、まずメタボックスの設定で、該当する項目にチェックを入れ、表示されなくなるようにしておいてください。
レイアウトの設定は、チェックを入れると１列の固定レイアウトになります。運用マニュアルなどと表示の相違を防ぎたい場合に利用してください。
テンプレートファイルの作成方法
編集画面のテンプレートは投稿タイプごとに作成できるようになっています。編集テンプレートのファイル名は、投稿タイプのスラッグ.phpとなり、投稿ならpost.php、固定ページならばpage.phpとなります。カスタム投稿タイプにおいても同様のルールが適用されます。
編集画面テンプレートはテーマのテンプレートファイル同様、まずはhtmlをざっくり作成し、入力項目部分に編集テンプレートタグを記述してください。
テンプレートができたら、テンプレートディレクトリにアップロードしてください。
テンプレートディレクトリは、wp-content/editor-templates になります。
CSSの適用方法
ここまでの手順で、テンプレートとしては稼動しますが、見た目がシンプルで味気ない感じがします。CSSを適用してレイアウトや見た目を調整しましょう。
wp-content/editor-tempates/css に、投稿タイプのスラッグ名.cssでCSSファイルを作成すれば、その投稿タイプでのみ読み込まれます。また、投稿タイプに関わらずにCSSを読み込みたい場合は、editor.common.cssというファイル名で作成してください。
Javascriptの適用方法
Javascriptファイルは、ディレクトリが wp-content/editor-tempates/js となり、拡張子が.jsになる以外は、CSSと同様のルール命名規則となります。
投稿でのみ利用するJavaScriptは、post.jsとして、投稿タイプに関わらずに読み込ませたい場合は、editor.common.jsで作成してください。
※ CSS、Js共に、編集テンプレートが存在する場合にのみ読み込まれます。編集テンプレートがなければ、css、jsファイルの有無にかかわらずデフォルトの編集画面となります。
サンプルファイルについて
Editor Templatesには、テンプレートおよび動作のサンプルとして、サンプルファイルをtemplate-sample フォルダに同梱しています。
動作のテストや編集テンプレートのサンプルとしてご利用ください。