カスタムフィールドメーカーの使い方

管理画面のコンフィグ管理のところにガイドライン/ツール「カスタムフィールドメーカー」というページがあります。

カスタムフィールドメーカーのメニュー

カスタムフィールドメーカーではカスタムフィールドを毎回どこからからコピペして書き換えたりしなくてもラベルや値、サイズなど入力していくだけカスタムフィールドのHTMLが作れてしまう便利な機能になります。カスタムフィールドではテキストや画像などさまざまなカスタムフィールドを組み合わせることができます。

テキスト
セレクト
ラジオ
チェックボックス
テキストエリア
画像
カスタムフィールドグループ
カスタムユニット

カスタムフィールドの作り方

typeとタイトル、フィールド名を入力します。
それぞれの項目に応じた項目に対して、値を入力して[生成]ボタンを押すとカスタムフィールドのHTMLが生成されます

カスタムフィールド全体像

続けてtype セレクトに変更しタイトル、name属性、option要素（label・value）を入力して[生成]ボタンを押すとテキストの下にセレクトのカスタムフィールドが生成されます。

カスタムフィールド入力例

カスタムフィールド生成例

画像のカスタムフィールドを生成

タイトル、name要素、通常サイズ、altの入力、tinyサイズ、largeサイズ、squareサイズなど細やかに設定することができます。

画像のカスタムフィールド生成例

また、「フロント側のリサイズ機能を使用する」という項目にチェックを入れることで、画像のブラウザ上でのリサイズを可能にするソースコードを生成します。これを使うことで、通常だとそのままアップロードができないサイズの画像もアップロードできるようになります。例えば、デジタルカメラで撮影したような容量の大きい画像をブラウザ上でリサイズしてサーバーにアップロードすることができるということです。

カスタムフィールドグループの作り方

まずは、下の図のように、「カスタムフィールド」、「カスタムフィールドグループ」、「カスタムユニット」からカスタムフィールドグループを選択します。

カスタムフィールドグループの選択

groupタイトルとgroup名を入力
テキスト、セレクト、ラジオ、チェックボックス、テキストエリア、画像を選択
要素に合わしたタイトル、name属性、値などを入力
[追加]ボタンを押すと要素が追加されます
2の手順に戻り、要素をまた選択してカスタムフィールドを追加してください
最後に[生成]ボタンを押してください

カスタムフィールドグループ入力例

カスタムユニットの作り方

まずは、下の図のように、「カスタムフィールド」、「カスタムフィールドグループ」、「カスタムユニット」からカスタムユニットを選択します。

カスタムユニット選択

あとは、カスタムフィールドの作り方と同じです。 typeとタイトル、フィールド名を入力します。それぞれの項目に応じた項目に対して、値を入力して[生成]ボタンを押すとカスタムフィールドのHTMLが生成されます

その他、カスタムフィールドメーカーの便利な機能

他にもカスタムフィールドメーカーには下記のような便利な機能が用意されています。

フィールドに対する「変換・入力チェック」用ソースコードの生成
生成されたコードのプレビュー機能
フィールドの「出力用ソース」生成機能
生成コードに対する管理画面用クラスの付与

フィールドに対する「変換・入力チェック」用ソースコードの生成

「オプション」という項目をクリックすると、下の図のように変換と、入力チェックのためのフィールドが出現します。

変換・入力チェック画面

はじめに、「変換」ですが、これを使うことで例えば「大文字」で登録されたアルファベットを「小文字」に変換したりするためのソースコードを生成可能です。「参照」と書かれたボタンを押していただくと下の図のようにモーダルウィンドウが現れますので、その中から変換したい項目を選択してください。変換のフィールドには複数の値を登録することも可能です。