てんぽ: 親子カテゴリの覚書

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

親子カテゴリの覚書

2008年07月14日(月)

FC2ブログに「親子カテゴリ」機能が追加されました。

親子カテゴリはやや複雑な条件分岐を必要とするので、 テンプレート変数がどのように変換されるのか考えてみました。


2008年7月13日の時点で公式プラグインからダウンロードできる「親子カテゴリ」の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>

各変数の意味はテンプレート用 変数一覧に記載されています。

さて、ブログのカテゴリが以下のように設定されているとします。

親1
親2
  子2-1
  子2-2
  子2-3
親3
  子3-1

変換のさいには各カテゴリごとに<!--category--><!--/category-->内の条件分岐を判定します。

  1. 親1子カテゴリを持たないカテゴリなので <!--category_nosub--><!--/category_nosub-->内が出力され、ほかは無視されます。 すなわち、
    <li class="main_list" &align>
    <a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a>
    </li>
  2. 親2親カテゴリ(子カテゴリがある)カテゴリなので、 <!--category_parent--><!--/category_parent-->内が出力され、ほかは無視されます。 すなわち、
    <li class="main_list" &align>
    <a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a>
    この時点ではli要素タグの終了タグが不足しています。
  3. 子2-1各親カテゴリ下にある、先頭の子カテゴリかつ最後尾の子カテゴリ以外のカテゴリなので <!--category_sub_begin--><!--/category_sub_begin-->内と <!--category_sub_hasnext--><!--/category_sub_hasnext-->内が出力され、ほかは無視されます。 すなわち、
    <ul class="sub_menu">
    <li class="sub_list" &align>
    <a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a>
    </li>
    この時点ではul要素タグの終了タグが不足しています。
  4. 子2-2各親カテゴリ下にある、最後尾の子カテゴリ以外のカテゴリなので、 <!--category_sub_hasnext--><!--/category_sub_hasnext-->内が出力され、ほかは無視されます。 すなわち、
    <li class="sub_list" &align>
    <a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a>
    </li>
  5. 子2-3各親カテゴリ下にある、最後尾の子カテゴリなので、 <!--category_sub_end--><!--/category_sub_end-->内が出力され、ほかは無視されます。 すなわち、
    <li class="sub_list_end" &align>
    <a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a>
    </li>
    </ul>
    </li>
    子2-1の<ul class="sub_menu">に対応する</ul>と 親2の<li class="main_list" &align>に対応する</li>がここで現れます。
  6. 親3は親2とまったく同様で
    <li class="main_list" &align>
    <a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a>
  7. 子3-1各親カテゴリ下にある、先頭の子カテゴリかつ各親カテゴリ下にある、最後尾の子カテゴリなので、 <!--category_sub_begin--><!--/category_sub_begin-->内と <!--category_sub_end--><!--/category_sub_end-->内が出力され、ほかは無視されます。 すなわち、
    <ul class="sub_menu">
    <li class="sub_list_end" &align>
    <a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a>
    </li>
    </ul>
    </li>

結局、以下のように整形式のHTMLが出力されます。

<ul class="main_menu">

<li class="main_list" &align>
<a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a>
</li>

<li class="main_list" &align>
<a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a>

  <ul class="sub_menu">
  <li class="sub_list" &align>
  <a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a>
  </li>

  <li class="sub_list" &align>
  <a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a>
  </li>

  <li class="sub_list_end" &align>
  <a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a>
  </li>
  </ul>
</li>

<li class="main_list" &align>
<a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a>

  <ul class="sub_menu">
  <li class="sub_list_end" &align>
  <a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a>
  </li>
  </ul>
</li>

</ul>

子カテゴリが存在しない場合でも従来どおりに出力され、各カテゴリページのURLに変更もないので、 プラグイン非対応の共有テンプレートにも親子カテゴリを実装できそうです。 なかなかうまくできた仕様ではないでしょうか。

ところで、Chakoさんのところで紹介されているHTMLは公式プラグインのものとは異なりますが、出力される結果は同じになります。 こちらのほうがわかりやすい。

#158
カテゴリ:FC2ブログ
タグ[ テンプレート変数 ]

(-0件)

コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/158-ec506e8d

<<「個別商品リンク」の代わりに「Amazonライブリンク」を使う | FC2ブログ仕様変更の覚書>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。