先日、新機能としてカテゴリとフォルダのカスタムフィールド対応を行いました。
今回はこの機能を使ってテーマStylishCorporateの特定のカテゴリの記事一覧ページと個別記事のヘッダーを変更してみます。
カスタムフィールドの作成
まず、カスタムフィールド＞新規からカテゴリのカスタムフィールドを作成します。
システムオブジェクトでカテゴリを選択し名前や説明を入力し、タイプは画像を選びます。識別子は今回はcatimageにします。
カテゴリのカスタムフィールドに画像を設定する
次に、記事＞カテゴリからヘッダー画像を指定したいカテゴリ名をクリックし、編集画面に移動します。
先程作成した画像のカスタムフィールドが表示されているので、画像を選択し保存します。
これで該当のカテゴリと背景画像が結びつきます。
テンプレートへの実装
続いてテンプレートの編集を行います。今回は以下のテンプレートが対象になります。
- カテゴリの記事一覧ページ→アーカイブテンプレートのカテゴリ別ニュース記事リスト
- 個別記事→アーカイブテンプレートの記事
まず、カテゴリ別ニュース記事リストですが、テンプレート内の以下の部分を
以下に変更します。
<div class="UnderlayerJumbotron UnderlayerJumbotron__newsimg"<mt:CustomFieldAsset identifier="catimage"> style="background-image: url(<mt:AssetURL />);"</mt:CustomFieldAsset>>
この処理はまずmt:CustomFieldAssetでcatimageという識別子のカスタムフィールドの値をみて、今回は画像があれば実行するというのを利用してstyle属性を挿入し、識別子がcatiimageの指定された画像のURLが表示されるようにしています。
カスタムフィールドの基本的な表示の仕方は、以下の記事も参考になります。
これで、カテゴリ別の記事一覧ページのヘッダーが指定した画像に変わるようになりました。
次に記事テンプレートを編集します。テンプレートの以下の部分を
以下のソースに変更します。
<div class="UnderlayerJumbotron UnderlayerJumbotron__newsimg"<mt:EntryCategories type="primary"><mt:CustomFieldAsset identifier="catimage"> style="background-image: url(<mt:AssetURL />);"</mt:CustomFieldAsset></mt:EntryCategories>>
ここではまず、記事のメインカテゴリーを表示するブロックタグで囲みます。これにより複数カテゴリが指定してあった場合にメインのものだけを指定できます。
その中身のソースはで先程と全く同じで、カテゴリに指定した画像があれば実行されstyle属性に画像が指定される、というものです。
これで、個別記事でも特定のカテゴリであればヘッダー画像が変更されました。
以上のように、カテゴリ（フォルダも同様に）のカスタムフィールドを使えば、より複雑な表現などできるようになりますので、是非テンプレート開発にご活用いただければと思います！
