• 虹色ミツバチ
  • freoカスタマイズメモ、テンプレート・プラグイン配布/officeTIPS
検索プラグイン
虹色ミツバチ

> Entry >freo>freoTips>プラグイン系TIPS> エントリーカテゴリー表示プラグインでカテゴリーの階層ごとにスタイルを変更してみる。

【freo】【freoTips】【プラグイン系TIPS】エントリーカテゴリー表示プラグインでカテゴリーの階層ごとにスタイルを変更してみる。

エントリーカテゴリー表示プラグインは、当サイトで配布しているカテゴリーごとにエントリーを表示するためのプラグインです。デフォルトの状態では、エントリーがカテゴリーごとに入れ子のリストで表示されますが、カテゴリーの階層ごとにスタイルを変更してみます。

たとえば、

  • 親カテゴリーA
    • 子カテゴリーAa
    • 子カテゴリーAb
  • 親カテゴリーB

のように、カテゴリーに親子関係がある場合に、下記のように、それぞれのカテゴリーを見出しを使って表示してみます。

<h2>親カテゴリーA</h2>
   <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行目

<a href="{$freo.core.http_file}/category/{$refer_category.id}">{$refer_category.name}</a>({$plugin_category_counts[$refer_category.id]|default:0})

<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_category.html'}

{include file='entry_category2.html'}

のように変更すればOKです。
今回は、[entry_category.html]ではなく、[entry_category2.html]という別のテンプレートを読み込むように変更しました。

子階層のカテゴリーを<h3></h3>で表示してみる。

続けて、子階層用のテンプレートを作成しましょう。
子階層のカテゴリーを読み込むときに見出し(h3)を使ってみましょう。

もともとあった[freo/templates/entry_category.html]を同じフォルダ内で複製して、[entry_category2.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>

<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_category2.html'}

{include file='entry_category3.html'}

のように変更すればOKです。
今回は、[entry_category2.html]ではなく、[entry_category3.html]という別のテンプレートを読み込むように変更しました。

親階層、子階層の下に、孫階層がある場合

上記を参考に、テンプレートを増やしていけば、階層ごとに別のテンプレートを読み込ませることが可能です。

ページ移動

関連記事

ユーティリティ

Twitter

ページ上部へ