カスタムフィールドを設定する

• シェアする
• 
• Tweet

カスタムフィールドで何ができるの？

「もっと管理画面を使いやすくカスタマイズしたい！」というときには、カスタムフィールドを使ってみましょう。

カスタムフィールドは、記事、ウェブページ、ブログ、アイテム、カテゴリ、フォルダに、「テキスト」「URL」「ドロップボタン」など様々なタイプのフィールドを追加できる機能です。

以下の例を見て、実際の動きをイメージしてみましょう。

記事のサムネイル画像を、管理画面のカスタムフィールドで、記事ごとに簡単に指定できるようにします。

例えば、作成したウェブページをグローバルナビゲーションに表示する／表示しないを編集画面で指定できるようにしたいとします。
その場合カスタムフィールドを使えば、チェックボックスに「チェックが入っていたら表示／非表示」といった方法で対応できるようになります。

テーマ：「stylish corporate」ではチェックボックスをつかって、ぺージをナビに表示するかどうかを選択できます。

画像を表示させるカスタムフィールドをつくる

では、実際に作ってみましょう！
まずはすぐに使えそうな、画像表示のカスタムフィールドを作ります。
記事の一覧にサムネイル画像を表示させてみましょう！

カスタムフィールドから記事の関連画像を表示させる手順は、

では、早速作っていきましょう！

１.新しくカスタムフィールドをつくる

カスタムフィールド＞新規から新しいカスタムフィールドを作ります

共有：ウェブサイトを制作している場合に表示される項目です。ウェブサイト内にあるブログすべてでこのカスタムフィールドを使う場合にチェックします。
ブログを制作している場合には表示されません。

システムオブジェクト：このフィールドをどこに使うか？を設定します。記事／ウェブページ／ブログ／アイテム／カテゴリ／フォルダから選びましょう。今回は「記事」ですね。

名前：このフィールドの名前です。フィールドのタイトルになり、編集画面の入力部分に表示されます。

説明：編集画面の入力部分に表示される説明です。使う人がわかりやすいように入れてあげましょう。

タイプ：テキスト、チェックボックス、画像、URLなど…フィールドのタイプを選択します。今回は画像を選択します。

必須：このフィールドへの入力を必須にする場合はチェックを入れます。

規定値：デフォルトの値を設定します。文字や正/誤の場合に入れておくと良いでしょう。画像の場合は空でOKです。

識別子：テンプレートからこのフィールドを呼び出す際に使う文字列です。半角英数で、わかりやすく付けましょう！

記事のサムネイル画像をアップロードする、という動きなのでこのように設定しました。

２.記事テンプレートにカスタムフィールド用のMTタグを追加する。

次は、このフィールドを表示できるようにテンプレート側を変更していきます。
アーカイブテンプレートを開いて、記事一覧にある画像部分を書き換えましょう。<img>タグに先ほど付けた識別子を使います。

<mt:CustomFieldAsset>

アイテム（ファイル、画像、ビデオ、オーディオ）のカスタムフィールドでの値を表示するブロックタグです。
identifierモディファイアでカスタムフィールドの識別子を指定して使用します。 ブロックの内部では<mt:AssetURL>などのアイテム用のタグが利用できます。

identifier="識別子"

指定した識別子を持つカスタムフィールドの値を利用できるようにします。

https://movabletype.net/tags/2014/11/mtcustomfieldasset.html

以上２つを組み合わせます。識別子はさきほどのnews_imagesにします。

【アーカイブ・テンプレート：月別ニュース記事リスト】のこの部分をカスタムフィールド対応に。

<dd class="newsArea__img">
  		<img src="<mt:CustomFieldAsset identifier="news_image">
      <$mt:AssetThumbnailURL$>
    </mt:CustomFieldAsset>">
  </dd>

３.記事編集画面からカスタムフィールドを確認し、画像を投稿する

続いて、記事の編集画面を見てみましょう。
先ほど作ったカスタムフィールドが表示されていますね！

画像を選択から、画像をアップロードしてみましょう。すると…？

画像が表示されました！

カスタムフィールドで画像を表示させる方法はこれで完了！
ですが、実際に利用する際にはもう少しカスタマイズが必要になります。

<img src="
    <mt:CustomFieldAsset identifier="news_image">
        <$mt:AssetThumbnailURL$>
    </mt:CustomFieldAsset>
">

この記述だと、カスタムフィールドに画像が入っていれば画像が表示されますが、
入っていない場合は空になってしまい、ちょっと不自然です。

そのためには<mt:if>を使った、振り分けが必要になります。
カスタマイズ方法は次のぺージで詳しく解説していくので、覚えておいてくださいね！

mt:ifをつかって振り分けをしよう！

また、今回のテーマではトップページに、ウェブページの一覧が画像付きで並んでいます。

ここです。だいぶ前に作りましたね。

このエリアも、カスタムフィールドを使ってウェブページから関連画像を投稿できるように作り変えてみましょう！

カスタムフィールド＞新規から、今度はこのように設定しました。

システムオブジェクトを「ウェブページ」に変更すれば、ウェブページの編集画面にフィールドがつくられます。
あとは、画像を表示させるMTタグをトップページのインデックス・テンプレートから該当箇所に入れてあげましょう。

<mt:Pages limit="3">
  <li>
    <a href="<$mt:PagePermalink$>">
      <div class="top-pages__item">
        <h2 class="item__title"><$mt:PageTitle$></h2>
        <img src="
          <mt:CustomFieldAsset identifier="page_images">
          <$mt:AssetThumbnailURL$>
          </mt:CustomFieldAsset>
        ">
      </div>
    </a>
  </li>
</mt:Pages>

記事の時と同様にウェブページの編集画面から画像を投稿して、確認してみましょう！

カスタムフィールドのチェックボックスを使う

カスタムフィールドでチェックボックスを使うにはタイプを「チェックボックス」に変更します。
チェックボックスでは正誤（true/false）を与えることができます。

最初に紹介したように「trueの場合はこの項目をナビに表示させる」やCSSと組み合わせて
「trueの場合はデザイン変更する」といった使い方など、いろいろな使い方があります。

今回は、ぺージのカスタムフィールドにチェックが入っている場合、ナビにぺージタイトルを表示をさせてみようと思います。

手順は先ほどと同じように、

１.新しくカスタムフィールドをつくる

今回はこのように設定しました。システムオブジェクトをぺージに、タイプをチェックボックスに、
規定値を「なし」するのがポイントです。識別子はnavi_onです。

２.ウェブページテンプレートにカスタムフィールド用のMTタグを追加する。

<mt:Pages field:識別子="foo">

カスタムフィールドの値 foo を利用して出力するウェブページをフィルタリングできます。
モディファイアの field:識別子 には、カスタムフィールド機能で設定した[識別子]、設定します。

https://movabletype.net/tags/2007/08/pages.html

なので、ナビを表示する記述が入っているheaderモジュールの<mt:Pages>を、<mt:Pages field:navi_on="1">に書き換えます。
それから、どのフォルダにも入らないページ<mt:Pages no_folder="1">の箇所もカスタムフィールドにチェックを入れた時に出るように書き換えましょう。

<mt:TopLevelFolders>
  <li>
    <a href="#">
  	  <$mt:FolderLabel$>
  	</a>
    <ul class="navi-list__sub">
   	 <mt:Pages field:navi_on="1">
       <li>
         <a href="<$mt:PagePermalink$>">
           <$mt:PageTitle$>
         </a>
  		</li>
  	</mt:Pages>
  	<mt:SubFolders>
  	〜〜
  	</mt:SubFolders>
    </ul>
    </li>
    </mt:TopLevelFolders>
    <mt:Pages field:navi_on="1" sort_order="ascend" no_folder="1">
    　<li>
        <a href="<$mt:PagePermalink$>
      ">
      <$mt:PageTitle$>
    </a>
  </li>
</mt:Pages>

これでグローバルナビは、チェックが入っているタイトルだけが表示されるようになりました。

３.ウェブぺージ編集画面からチェックボックスにチェックをする。

ウェブページ編集画面にはフィールドが表示されています。
チェックを入れて保存してみましょう。

タイトルが表示されました！

このように使い方によっていろいろなカスタマイズを実現できます。
実際のテーマファイルでも、mt:ifを使った振り分けと併用して複雑な表現を可能にしているものもあります。ぜひ参考にして、思い通りのテーマを作ってみてください！
カスタムフィールドの値の出力方法の応用、活用ブログの以下の記事にまとめてあるので、おすすめです！
【活用ブログ】ブクマ必須！カスタムフィールドの出力基本パターンをご紹介