プラグインのカテゴリの表示方法を解読して、色んなカテゴリーデザインに応用する素地を作ってみるチュートリアルです。
一見ややこしいですが、理解してしまえば、様々な応用が利いてきます。
公式プラグインで、「カテゴリ一覧を表示します(カスタマイズ向け)」という、きちんと用意されているプラグインをダウンロードして、その仕組みを見ていきます。
その「カテゴリ」プラグインを追加し、HTMLを見てみると、変数（独自タグ）の使い方のお手本が示されています。
（変数一覧の方は、こちらに示されています）
サイドバーメニュー関連の変数
プラグインの管理画面から、「【HTMLの編集】を行います。（上級者向け）」と言うのをクリックすると、なんだか目眩がしそうなタグが出てきます。
しかし、きちんと見ていけば、どういう仕組みかが分かります。
解説書の一覧からそのタグの働きをメモしてみます。
【表１】
色分けしてもややこしいですが…
つまり、カテゴリを一つ一つ表示していく過程で、「今表示しようとしているカテゴリは、子カテゴリなのか、親カテゴリなのか、なんなのかを判断」しているというわけですね。
表示しようとしているカテゴリが条件に合致した部分だけ表示している仕組みです。
実際のHTMLソースは、こんな感じで出力されます。
【表２】
よく分からない方は、例えば、【表２】「最後の子カテゴリ」の後に続くタグに注目してください。
「最後の子カテゴリ」のあとは、どの場所も必ずこうなっています。
【表１】の「最後の子カテゴリ」の表下部の方を見ると…
こうなってます。
つまり、「最後の子カテゴリ」を出力するとき、必ず「最後尾の子カテゴリの時に表示するブロック」をきっちり表示してくれているというわけです。
それぞれのブロックも、「今は親カテゴリを出力するとき」なのか、「今は子カテゴリを出力するとき」なのかで、表示するブロック変数を判断しているわけです。
ここで、原点に戻って、カテゴリの設定を思い出してみると…
こんな感じで設定し、実際に表示するときは、上から順番にカテゴリを表示してくれます。
子カテゴリかどうかを判断するのは、画像のハイライト部分、「チェックボックスにチェックが入っているかどうか」で設定します。
先ほど解析した「カテゴリ表示変数」は、この設定の順番通りに出力し、出力するときにチェックがあるのか無いのかを判断してくれているわけですね。
一見ややこしいですが、理解してしまえば、様々な応用が利いてきます。
公式プラグイン
公式プラグインで、「カテゴリ一覧を表示します(カスタマイズ向け)」という、きちんと用意されているプラグインをダウンロードして、その仕組みを見ていきます。
その「カテゴリ」プラグインを追加し、HTMLを見てみると、変数（独自タグ）の使い方のお手本が示されています。
（変数一覧の方は、こちらに示されています）
サイドバーメニュー関連の変数
お手本と解説書を見合わせる
プラグインの管理画面から、「【HTMLの編集】を行います。（上級者向け）」と言うのをクリックすると、なんだか目眩がしそうなタグが出てきます。
しかし、きちんと見ていけば、どういう仕組みかが分かります。
解説書の一覧からそのタグの働きをメモしてみます。
【表１】
<ul class="main_menu">
<!--category-->（カテゴリの一覧ブロック変数）
<!--category_sub_begin-->
<ul class="sub_menu">（先頭の子カテゴリのみで表示する）
<!--/category_sub_begin-->
<!--category_nosub-->
<li class="main_list" &align>（子カテゴリを持たないカテゴリ）
<!--/category_nosub-->
<!--category_parent-->
<li class="main_list" &align>（子持ちの親カテゴリ）
<!--/category_parent-->
<!--category_sub_hasnext-->
<li class="sub_list" &align>（最後尾の子カテゴリ以外の子カテゴリ）
<!--/category_sub_hasnext-->
<!--category_sub_end-->
<li class="sub_list_end" &align>（最後尾の子カテゴリ）
<!--/category_sub_end-->
<a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a>
<!--category_nosub-->
</li>（子カテゴリを持たないカテゴリ）
<!--/category_nosub-->
<!--category_sub_hasnext-->
</li>（最後尾の子カテゴリ以外の子カテゴリ）
<!--/category_sub_hasnext-->
<!--category_sub_end-->
</li>
</ul>（最後尾の子カテゴリ）
</li>
<!--/category_sub_end-->
<!--/category-->（カテゴリの一覧ブロック変数ここまで）
</ul>
<!--category-->（カテゴリの一覧ブロック変数）
<!--category_sub_begin-->
<ul class="sub_menu">（先頭の子カテゴリのみで表示する）
<!--/category_sub_begin-->
<!--category_nosub-->
<li class="main_list" &align>（子カテゴリを持たないカテゴリ）
<!--/category_nosub-->
<!--category_parent-->
<li class="main_list" &align>（子持ちの親カテゴリ）
<!--/category_parent-->
<!--category_sub_hasnext-->
<li class="sub_list" &align>（最後尾の子カテゴリ以外の子カテゴリ）
<!--/category_sub_hasnext-->
<!--category_sub_end-->
<li class="sub_list_end" &align>（最後尾の子カテゴリ）
<!--/category_sub_end-->
<a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a>
<!--category_nosub-->
</li>（子カテゴリを持たないカテゴリ）
<!--/category_nosub-->
<!--category_sub_hasnext-->
</li>（最後尾の子カテゴリ以外の子カテゴリ）
<!--/category_sub_hasnext-->
<!--category_sub_end-->
</li>
</ul>（最後尾の子カテゴリ）
</li>
<!--/category_sub_end-->
<!--/category-->（カテゴリの一覧ブロック変数ここまで）
</ul>
色分けしてもややこしいですが…
つまり、カテゴリを一つ一つ表示していく過程で、「今表示しようとしているカテゴリは、子カテゴリなのか、親カテゴリなのか、なんなのかを判断」しているというわけですね。
表示しようとしているカテゴリが条件に合致した部分だけ表示している仕組みです。
実際のHTMLソースは、こんな感じで出力されます。
【表２】
<ul class="main_menu">
<li style="text-align: left;" class="main_list">
<a href="http://">親カテゴリ</a>
<ul class="sub_menu">
<li style="text-align: left;" class="sub_list">
<a href="http://">子カテゴリ</a>
</li>
<li style="text-align: left;" class="sub_list">
<a href="http://">子カテゴリ</a>
</li>
<li style="text-align: left;" class="sub_list">
<a href="http://">子カテゴリ</a>
</li>
<li style="text-align: left;" class="sub_list_end">
<a href="http://">最後の子カテゴリ</a>
</li>
</ul>
</li>
<li style="text-align: left;" class="main_list">
<a href="http://">親カテゴリ</a>
<ul class="sub_menu">
<li style="text-align: left;" class="sub_list">
<a href="http://">子カテゴリ</a>
</li>
<li style="text-align: left;" class="sub_list_end">
<a href="http://">最後の子カテゴリ</a>
</li>
</ul>
</li>
<li style="text-align: left;" class="main_list">
<a href="http://">子無し親カテゴリ</a>
</li>
<li style="text-align: left;" class="main_list">
<a href="http://">親カテゴリ</a>
<ul class="sub_menu">
<li style="text-align: left;" class="sub_list">
<a href="http://">子カテゴリ</a>
</li>
<li style="text-align: left;" class="sub_list_end">
<a href="http://">最後の子カテゴリ</a>
</li>
</ul>
</li>
</ul>
<li style="text-align: left;" class="main_list">
<a href="http://">親カテゴリ</a>
<ul class="sub_menu">
<li style="text-align: left;" class="sub_list">
<a href="http://">子カテゴリ</a>
</li>
<li style="text-align: left;" class="sub_list">
<a href="http://">子カテゴリ</a>
</li>
<li style="text-align: left;" class="sub_list">
<a href="http://">子カテゴリ</a>
</li>
<li style="text-align: left;" class="sub_list_end">
<a href="http://">最後の子カテゴリ</a>
</li>
</ul>
</li>
<li style="text-align: left;" class="main_list">
<a href="http://">親カテゴリ</a>
<ul class="sub_menu">
<li style="text-align: left;" class="sub_list">
<a href="http://">子カテゴリ</a>
</li>
<li style="text-align: left;" class="sub_list_end">
<a href="http://">最後の子カテゴリ</a>
</li>
</ul>
</li>
<li style="text-align: left;" class="main_list">
<a href="http://">子無し親カテゴリ</a>
</li>
<li style="text-align: left;" class="main_list">
<a href="http://">親カテゴリ</a>
<ul class="sub_menu">
<li style="text-align: left;" class="sub_list">
<a href="http://">子カテゴリ</a>
</li>
<li style="text-align: left;" class="sub_list_end">
<a href="http://">最後の子カテゴリ</a>
</li>
</ul>
</li>
</ul>
よく分からない方は、例えば、【表２】「最後の子カテゴリ」の後に続くタグに注目してください。
</li>
</ul>
</li>
</ul>
</li>
「最後の子カテゴリ」のあとは、どの場所も必ずこうなっています。
【表１】の「最後の子カテゴリ」の表下部の方を見ると…
<!--category_sub_end-->
</li>
</ul>（最後尾の子カテゴリ）
</li>
<!--/category_sub_end-->
</li>
</ul>（最後尾の子カテゴリ）
</li>
<!--/category_sub_end-->
こうなってます。
つまり、「最後の子カテゴリ」を出力するとき、必ず「最後尾の子カテゴリの時に表示するブロック」をきっちり表示してくれているというわけです。
それぞれのブロックも、「今は親カテゴリを出力するとき」なのか、「今は子カテゴリを出力するとき」なのかで、表示するブロック変数を判断しているわけです。
カテゴリの設定
ここで、原点に戻って、カテゴリの設定を思い出してみると…
こんな感じで設定し、実際に表示するときは、上から順番にカテゴリを表示してくれます。
子カテゴリかどうかを判断するのは、画像のハイライト部分、「チェックボックスにチェックが入っているかどうか」で設定します。
先ほど解析した「カテゴリ表示変数」は、この設定の順番通りに出力し、出力するときにチェックがあるのか無いのかを判断してくれているわけですね。
スポンサーリンク
Fri.01.14.2011
Comment
Trackback
Trackback URL
Comment Form
質問するときは？
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
- 不具合が出ているページのURLを書き込む。
- 使っているブラウザ（IE、Firefoxなど）を書き込む※IE6はサポート外です。
- 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
