【freo】【freoTips】【プラグイン系TIPS】エントリーカテゴリー表示プラグインでカテゴリーの階層ごとにスタイルを変更してみる。
- 2015/01/30 18:50
- エントリーカテゴリー表示プラグイン
- カテゴリー
- 72
エントリーカテゴリー表示プラグインは、当サイトで配布しているカテゴリーごとにエントリーを表示するためのプラグインです。デフォルトの状態では、エントリーがカテゴリーごとに入れ子のリストで表示されますが、カテゴリーの階層ごとにスタイルを変更してみます。
たとえば、
- 親カテゴリーA
- 子カテゴリーAa
- 子カテゴリーAb
- 親カテゴリーB
のように、カテゴリーに親子関係がある場合に、下記のように、それぞれのカテゴリーを見出しを使って表示してみます。
<h3>子カテゴリーAa</h3>
<ul>
<li>記事1</li>
<li>記事2</li>
<li>記事3</li>
</ul>
<h3>子カテゴリーAb</h3>
<ul>
<li>記事4</li>
<li>記事5</li>
<li>記事6</li>
</ul>
<h2>親カテゴリーB</h2>
<ul>
<li>記事4</li>
<li>記事5</li>
<li>記事6</li>
</ul>
上記のように表示する場合、テンプレートの編集が必要です。
エントリーカテゴリー表示プラグインのテンプレートについて
エントリーカテゴリー表示プラグインのテンプレートについて解説します。
エントリーカテゴリー表示プラグインの導入方法の(5)で、[freo/templates/internals/default/default.html]に、エントリーカテゴリー表示プラグインを利用するためのテンプレート編集例が記載されています。
見ていただきたいのは↓の部分です。
{include file='entry_category.html'}
これは、[freo/templates/entry_category.html]を挿入するという意味で、デフォルト画面のテンプレート内で、プラグイン用のテンプレートを組み込んでいます。
そして、[freo/templates/entry_category.html]を見ていただくと、17~19行目に、
<!--{assign var="pid" value=$refer_category.id}--> {include file='entry_category.html'} <!--{assign var="pid" value=$refer_category.pid}-->
と記載されています。
ここでなにをしているかというと、「今表示しているカテゴリーの子階層のカテゴリーのエントリーをentry_category.htmlを使って表示している」ということになります。
この部分を変更して、entry_category.htmlではない別のテンプレートをincludeすれば、階層ごとに表示方法を変えられるということになります。
カテゴリーの階層ごとにスタイルを変更してみる。
親階層のカテゴリーを<h2></h2>で表示してみる。
まずは、親階層のカテゴリーを読み込むときに見出し(h2)を使ってみましょう。
エントリーカテゴリー表示プラグインの導入方法の(5)で設定したとおり、最初に読み込まれるのはentry_category.htmlなので、[freo/templates/entry_category.html]を編集します。
7行目の
を
<h2><a href="{$freo.core.http_file}/category/{$refer_category.id}">{$refer_category.name}</a>({$plugin_category_counts[$refer_category.id]|default:0})</h2>
に変更すればOKです。
そして、子階層のカテゴリーを表示するときに、別のテンプレートを使用するように編集しておきます。
18行目の
を
{include file='entry_category2.html'}
のように変更すればOKです。
今回は、[entry_category.html]ではなく、[entry_category2.html]という別のテンプレートを読み込むように変更しました。
子階層のカテゴリーを<h3></h3>で表示してみる。
続けて、子階層用のテンプレートを作成しましょう。
子階層のカテゴリーを読み込むときに見出し(h3)を使ってみましょう。
もともとあった[freo/templates/entry_category.html]を同じフォルダ内で複製して、[entry_category2.html]という名前にリネームします。
7行目の
を
<h3><a href="{$freo.core.http_file}/category/{$refer_category.id}">{$refer_category.name}</a>({$plugin_category_counts[$refer_category.id]|default:0})</h3>
に変更すればOKです。
そして、孫階層のカテゴリーを表示するときに、別のテンプレートを使用するように編集しておきます。
18行目の
を
{include file='entry_category3.html'}
のように変更すればOKです。
今回は、[entry_category2.html]ではなく、[entry_category3.html]という別のテンプレートを読み込むように変更しました。
親階層、子階層の下に、孫階層がある場合
上記を参考に、テンプレートを増やしていけば、階層ごとに別のテンプレートを読み込ませることが可能です。