サブカテゴリとパンくずリスト (2)

今回の記事に至る大まかな流れ

1. サブカテゴリとパンくずリストで MT 関連の質問スレッドの疑問を解決
2. ……のはずが、親カテゴリのページを表示させたときだけ、「>」が２つ連続で出てきますとの問題が発生
3. 自分で試してみると、確かに http://hxxk.jp/mt/tips/ のようなトップレベルカテゴリでは http://hxxk.jp/mt//tips/ のようなリストになっている !

……という流れを経て、サブカテゴリとパンくずリストの続きの記事を書くことと相成りました。

1. MTParentCategories と MTSubCategoryPath
2. 必ずしも等価ではない 2 つのテンプレート・タグ
3. 回避方法その 1
4. 回避方法その 2
5. まとめ

MTParentCategories と MTSubCategoryPath

まずはおさらいです。 サブカテゴリとパンくずリストで提示したソースの根幹部分は次のようなものです。

<MTParentCategories glue="&#62;">
<a href="<$MTCategoryArchiveLink$>"><MTCategoryLabel></a>
</MTParentCategories>

いくつかの属性を省いたり、前後の部分をカットしていたりしますが、基本はこのような書き方になります。 そして、この記述は MTSubCategoryPath というショートカットタグで置き換えることができます。

MTSubCategoryPath

ショートカット・タグ(通常のタグ)。 以下のテンプレート・コードが使われているかのように戻ります。

<MTParentCategories glue="/"><MTCategoryLabel dirify="1"></MTParentCategories>

私の出した例とカテゴリの区切り方 ( glue 属性 ) が違っていたり、リンクアンカーが含まれないといった違いがあったりしますが、同じ書き方であることはお分かりでしょうか。

憶測ですが、 MTSubCategoryPath はテンプレート内に記述するよりも、管理画面の「アーカイブの設定」の「アーカイブ・ファイルのテンプレート」に用いるために用意されたタグだと思います。

必ずしも等価ではない 2 つのテンプレート・タグ

テンプレート内に記述する場合に、 MTSubCategoryPath と全く同じ結果を期待するのであれば、そちらを使うようにすれば良いのですが、もう少し違った結果を期待するのであれば MTParentCategories を使って記述する必要があります。 先に答えを言ってしまいますが、 glue 属性で指定した区切り文字が 2 つ出てしまう原因は exclude_current="1" の指定にあります。

<p>
http://<a href="/">hxxk.jp</a>/
<a href="<$MTBlogURL$>">mt</a>/
<MTParentCategories glue="/" exclude_current="1">
  <MTIfNonZero tag="MTCategoryCount">
    <a href="<$MTCategoryArchiveLink$>"><MTCategoryLabel></a>
    <MTElse>
      <MTCategoryLabel>
    </MTElse>
  </MTIfNonZero>
</MTParentCategories>
/<$MTArchiveTitle$>/
</p>

( 本来は改行せずに記述していますが ) MT hxxks のカテゴリアーカイブのテンプレートにこのように記述して exclude_current="1" を指定した場合に、トップレベルカテゴリ ( 例えば、 http://hxxk.jp/mt/tips/ ) を表示すると次のような HTML になります。

http://hxxk.jp/mt//tips/

では、これを exclude_current="1" の記述を使わないようにしてみましょう。

<p>
http://<a href="/">hxxk.jp</a>/
<a href="<$MTBlogURL$>">mt</a>/
<MTParentCategories glue="/">
  <MTIfNonZero tag="MTCategoryCount">
    <a href="<$MTCategoryArchiveLink$>"><MTCategoryLabel></a>
    <MTElse>
      <MTCategoryLabel>
    </MTElse>
  </MTIfNonZero>
</MTParentCategories>/
</p>

テンプレートの記述をこのように変更し、 http://hxxk.jp/mt/tips/ を表示してみると

http://hxxk.jp/mt/tips/

ような HTML になっています。 要するに、 exclude_current="1" を指定した場合、区切りが発生しない場合 ( = トップレベルカテゴリ ) でも 1 つは glue 属性の区切り文字が現れてしまう、ということのようです。

回避方法その 1

さて、ではそういった区切り文字の重複を発生させないようにするためにはどうすれば良いか。 これまでの部分の記述でも分かるかもしれませんが、 MTSubCategoryPath を使うか、あるいは exclude_current="1" の指定を外せば良いのです。

しかし、前者ですとパンくずリスト内にカテゴリアーカイブに対するリンクを張れませんし、後者だと逆にカレントカテゴリの分までリンクを張ってしまいます。 カレントカテゴリへのリンクが張られても構わないなら exclude_current="1" を外すだけで解決します。

回避方法その 2

次に、どうしてもカレントカテゴリに対するリンクを張りたくない場合 ( 私のように ) に取る方法はどうなるか。 先にテンプレートの記述を出します。

<ol id="navi-category-directory">
  <li><a href="<$MTBlogURL$>"><$MTBlogName$></a></li>
    <MTParentCategories glue="" exclude_current="1">
      <MTIfNonZero tag="MTCategoryCount">
        <li><a href="<$MTCategoryArchiveLink$>"><MTCategoryLabel></a></li>
        <MTElse>
          <li><MTCategoryLabel></li>
        </MTElse>
      </MTIfNonZero>
    </MTParentCategories>
  <li class="current-category"><$MTArchiveTitle$></li>
</ol>

p 要素ではなく ol 要素でマークアップするのがポイントです。 ( ul 要素でも構いません。 ) そして、 CSS に次の記述を加えます。

ol#navi-category-directory{
  list-style: none;
  }

ol#navi-category-directory li{
  display: inline;
  }

ol#navi-category-directory li:after{
  content: " > ";
  }

ol#navi-category-directory li.current-category:after{
  content: "";
  }

かなり強引な手段ですが、このようにするとカレントカテゴリにリンクを張ることを避けつつ、トップレベルカテゴリであっても区切り文字が二重に出ることなくパンくずリストを作成することができます。 ただ、見た目のために HTML 内に id や class を割り振ることになるので、あまり勧められるような手段ではありません。 :after 擬似要素に対応していないブラウザに対しては使えませんし。

まとめ

HTML にあれこれ id や class を後付けするよりは、カレントカテゴリに対してリンクを張ることを妥協して、 exclude_current="1" の指定を外す方が簡単に対処できます。 回避方法その 2 は CSS の対応なども考えなければなりませんし。

まあ、どちらの方法を取るかは各自の判断で ( まとめになっていない ) 。