先週はカテゴリのカスタムフィールドを使ってヘッダー画像を変更する方法を公開しましたが、本日はフォルダのカスタムフィールドを使った方法をご紹介します。

今回もテーマStylishCorporateを例とし、フォルダは3階層まで掘れることも考慮して、ヘッダー画像の表示の優先順序を

1. ウェブページのカスタムフィールドで指定された画像
2. ウェブページが所属するトップレベルのフォルダのカスタムフィールドで指定された画像
3. テーマで指定されたウェブページ共通の画像

というようにコントロールできるようにします。

カスタムフィールドの作成

まず、カスタムフィールド＞新規からフォルダのカスタムフィールドを作成します。

システムオブジェクトでフォルダを選択し名前や説明を入力し、タイプは画像を選びます。識別子は今回はfolderimageにします。

フォルダのカスタムフィールドに画像を設定する

次に、ウェブページ＞フォルダからヘッダー画像を指定したいフォルダ名をクリックし、編集画面に移動します。

先程作成した画像のカスタムフィールドが表示されているので、画像を選択し保存します。

これにより該当のフォルダとヘッダー背景画像が結びつきます。 今回の例ではトップレベルのフォルダでの指定のみ有効になります。

テンプレートへの実装

続いてテンプレートの編集を行います。今回はウェブページのテンプレートが対象になるため、デザイン＞テンプレートのアーカイブテンプレートのウェブページを開きます。

以下の34行目の以下の1行を

以下に変更します。

<mt:CustomFieldAsset identifier="main_image_page"><$mt:AssetURL setvar="background_image"$></mt:CustomFieldAsset>
<mt:Unless name="background_image"><mt:TopLevelFolder><mt:CustomFieldAsset identifier="folderimage"><$mt:AssetURL setvar="background_image"$></mt:CustomFieldAsset></mt:TopLevelFolder></mt:Unless>
<mt:Unless name="background_image"><mt:SetVarBlock name="background_image"><$mt:BlogURL encode_html="1"$>images/pages_image.jpg</mt:SetVarBlock></mt:Unless>
<div class="UnderlayerJumbotron UnderlayerJumbotron__img" style="background-image: url(<$mt:Var name="background_image"$>)">

テーマ標準の状態で「ウェブページに指定の画像があったらそれを優先して表示、なければウェブページ共通の画像」と言うように2段階になっていますが、今回は3段階にしています。

処理の説明としては、まずウェブページのページ内イメージ（main_image_page）があればbackground_imageという名前で変数を作りファイルのURLを格納します。

次にmt:Unlessでもしページ内イメージの指定がなかった場合の処理として、そのウェブページが所属するトップレベルのフォルダのカスタムフィールドfolderimageに画像があったらファイルのURLを出力して、変数background_imageに格納する、といった処理をします。

さらにその値もない場合は次のmt:Unlessでウェブページ共通の画像を指定するための変数を指定します。

最後に実際のbackground-imageのurlとしてmt:Varで上記で設定された変数を呼び出します。

これにより3段階で優先順位をつけて表示することができます。

今回のようにトップレベルのフォルダの共通画像を指定すると、フォルダ毎のイメージを統一させることができます。運用の工夫としてカスタムフィールドを是非ご活用ください！