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

• シェアする
• 
• Tweet

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

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

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

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

作成した記事にサムネイル画像を設定できるカスタムフィールドを作成し、設定された画像を記事のタイトル、内容と一緒に表示しています。

このように画像を表示する使い方以外にも、「チェックボックスにチェックがある時は表示する」、「フィールドに入力されている値が同じであれば表示する」など、幅広くカスタマイズができます。

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

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

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

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

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

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

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

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

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

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

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

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

既定値：デフォルトの値を設定します。文字や正/誤の場合に入れておくと良いでしょう。画像など既定値が存在しないタイプの場合、この項目は表示されません。

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

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

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

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

<mt:CustomFieldAsset>

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

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

identifier="識別子"

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

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

識別子は先ほどのnews_imageにします。

<$mt:AssetThumbnailURL$>

アイテムの種類が画像 (image)のファイル、またはアイテムに登録されたPDFファイルのサムネイルのURLを表示します。
PDFファイルが複数ページの構成になっている場合に作成されるサムネイルは、PDFファイルの1ページ目が使用されます。

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

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

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

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

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

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

画像が表示されました！

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

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

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

そのためには<mt:If>というMTタグを使用し、条件によった振り分けをします。
<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_displayです。

２.headerのテンプレート・モジュールにカスタムフィールド用のMTタグを追加する

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

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

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

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

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

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

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

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

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

このように使い方によっていろいろなカスタマイズを実現できます。

実際のテーマファイルでも、カスタムフィールドと一緒に、条件で出力を分岐する<mt:If>を組み合わせて複雑な表現を可能にしているものもあります。ぜひ参考にして、思い通りのテーマを作ってみてください！
カスタムフィールドの値の出力方法の応用、活用ブログの以下の記事にまとめてあるので、おすすめです！
【活用ブログ】ブクマ必須！カスタムフィールドの出力基本パターンをご紹介