独自モデルの編集画面で本文欄をフォーマット選択できるようにする

PowerCMS X でサイトを設計・構築するとき、製品標準のモデルである「記事 ( entry モデル )」や「ページ ( page モデル )」を模した独自のモデルを作成する事があると思います。

今回は『「記事」モデルの「タイトル」「本文」「フォーマット」カラムを参考に独自モデルを作成したけれど、編集画面の見た目が違うぞ…？』という方に向けた記事となります。

記事を模した独自のモデルを作成する

例として、下記のカラムをもつ独自のモデル「blog_post」を作成します。

作成するカラム

作成した独自モデルの編集画面

早速作成した「blog_post」の編集画面を開いてみると、「記事」編集画面とは見た目が異なっています。

参考にした記事の編集画面

独自に作成したモデルの編集画面と、「記事」モデルの編集画面とで具体的に異なるのは以下の2点。

1. 「タイトル」欄と「本文」欄の左にラベルが表示されている（記事の編集画面では「タイトル」「本文」欄は画面いっぱいの幅）
2. 「フォーマット」選択欄が表示されていない（フォーマットを切り替えられない）

編集画面をカスタマイズする ^[1]

ということで、独自モデルの編集画面をカスタマイズしていきます。
PowerCMS X では管理画面をカスタマイズするための仕組みがあらかじめ用意されています。

• 管理画面のカスタマイズ
• PowerCMS X の管理画面を JavaScript でカスタマイズする方法

上記のドキュメントには様々なカスタマイズの方法・アプローチが記載されていますが、今回は以下の手順で「カスタマイズ・テンプレートを設置する」方法でカスタマイズします。

1. カスタマイズ・テンプレートを用意する
2. カスタマイズしたテンプレートをアップロードする
3. 環境変数「tmpl_paths」を設定する

1. カスタマイズ・テンプレートを用意する

用意するファイルは2つです。以下よりダウンロードしてください。

• text-formatting-for-original-model-CustomizedTemplates.zip (351.0Byte)

ファイルの中身は下記の通り。

column_title.tmpl

<mt:include file="tmpl/include/edit/entry/column_title.tmpl">

column_text.tmpl

<mt:include file="tmpl/include/edit/entry/column_text.tmpl">

2. カスタマイズしたテンプレートをアップロードする

PowerCMS X を下記のパスに設置しているとします。

/var/www/htdocs/powercmsx

今回は以下のパスに作成したカスタマイズ・テンプレートをアップロードします。

/var/www/htdocs/powercmsx/user_customized_files/alt-tmpl/include/edit/blog_post/column_title.tmpl
/var/www/htdocs/powercmsx/user_customized_files/alt-tmpl/include/edit/blog_post/column_text.tmpl

※ 例として /blog_post/ というディレクトリ内にファイルをアップロードしていますが、実際には作成したモデル名である必要があります。
作成したモデルが「news」だった場合は /blog_post/ ではなく /news/ ディレクトリ配下にアップロードしましょう。

3. 環境変数「tmpl_paths」を設定する

config.json に下記を追記します。

"tmpl_paths": ["/var/www/htdocs/powercmsx/user_customized_files/alt-tmpl"],

完成した独自モデルの編集画面を確認する

ということで、管理画面のカスタマイズを適用した独自モデル「blog_post」の編集画面は以下の様になりました。

「タイトル」欄「本文」欄が画面いっぱいに表示され、「フォーマット」セレクトボックスを変更する事で「本文」欄が切り替わる様になりました。

サイトを制作される際の参考となりましたら幸いです。

脚注

1. 記事執筆時点で最新の PowerCMS X ver.3.62 で動作確認しています。^{[^1]}

カテゴリー：サイト制作全般 | 技術情報 | よくあるご質問

投稿者：たはかし