Top > Movable Type > カスタマイズ > カテゴリー [全て開く]
2010年5月27日

親カテゴリーアーカイブにサブカテゴリーのブログ記事を表示する場合に特定のサブカテゴリーのブログ記事をフィルタリングする

Movable Type(MT)のカテゴリ別ブログ記事リスト(カテゴリーアーカイブ)で、MTEntriesWithSubCategoriesタグを使って、親カテゴリーアーカイブページにサブカテゴリーのブログ記事を表示する場合、特定のサブカテゴリーのブログ記事をフィルタリングする方法を紹介します。

この方法はバージョン4以降で有効です。

1.基本

カテゴリの判定にはMTIfタグとtagモディファイアを使い、tagモディファイアの値に「EntryCategory」を与えます。これで処理中のブログ記事のメインカテゴリを判定できます。

<mt:if tag="EntryCategory" ・・・>

ただし、サブカテゴリがそのブログ記事のメインカテゴリでない場合、この判定にひっかかりません。例えば、親カテゴリが「A」、サブカテゴリが「X」「Y」「Z」という構成で、あるブログ記事のメインカテゴリが、「A」「X」「Y」「Z」とは無関係な「B」で、副カテゴリに「X」が設定されている場合です。

ブログ記事が属するすべてのカテゴリを判定したい場合は、例えば次のようにします。

<mt:EntryCategories>
  <mt:if tag="CategoryLabel" ・・・>
</mt:EntryCategories>

以下、メインカテゴリを判定する例でいくつかのパターンを紹介します。副カテゴリを判定したい場合は、判定箇所を上記のリストに入れ替えてください。

2.「foo」「bar」カテゴリのブログ記事のみを出力する

MTIfタグにlikeモディファイアを組み合わせます。モディファイアの値にヒットさせたいカテゴリを「|」で区切って記述します。ただし、この方法では「foo2」や「bari」など、指定した文字列を含むカテゴリも対象になります。

<mt:EntriesWithSubCategories>
  <mt:if tag="EntryCategory" like="foo|bar">
    <$mt:Include module="ブログ記事の概要"$>
  </mt:if>
</mt:EntriesWithSubCategories>

完全一致したカテゴリだけをフィルタリングしたい場合は、MTIfタグとMTElseifタグを組み合わせるとよいでしょう。ヒットさせたいカテゴリ分、MTElseifタグを増やします。MTElseifタグのtagモディファイアを省略すると正常に動作しないので気をつけましょう。

<mt:EntriesWithSubCategories>
  <mt:if tag="EntryCategory" eq="foo">
    <$mt:Include module="ブログ記事の概要"$>
  <mt:elseif tag="EntryCategory" eq="bar">
    <$mt:Include module="ブログ記事の概要"$>
  </mt:if>
</mt:EntriesWithSubCategories>

副カテゴリも判定したい場合は次のようにします。

<mt:EntriesWithSubCategories>
  <mt:EntryCategories>
    <mt:if tag="CategoryLabel" eq="foo">
      <$mt:Include module="ブログ記事の概要"$>
    <mt:elseif tag="CategoryLabel" eq="bar">
      <$mt:Include module="ブログ記事の概要"$>
    </mt:if>
  </mt:EntryCategories>
</mt:EntriesWithSubCategories>

上記のマークアップでは、ひとつのブログ記事にヒットするサブカテゴリが複数設定されていると、ブログ記事が重複して出力されるので、さらに次のような制御が必要です。

<mt:EntriesWithSubCategories>
  <mt:SetVar name="flag" value="0" />
  <mt:EntryCategories>
    <mt:unless name="flag">
      <mt:if tag="CategoryLabel" eq="foo">
        <$mt:Include module="ブログ記事の概要"$>
        <mt:SetVar name="flag" value="1" />
      <mt:elseif tag="CategoryLabel" eq="bar">
        <$mt:Include module="ブログ記事の概要"$>
        <mt:SetVar name="flag" value="1" />
      </mt:if>
    </mt:unless>
  </mt:EntryCategories>
</mt:EntriesWithSubCategories>

3.「foo」カテゴリ以外のブログ記事を出力する

MTIfタグにneモディファイアを組み合わせます。

<mt:EntriesWithSubCategories>
  <mt:if tag="EntryCategory" ne="foo">
    <$mt:Include module="ブログ記事の概要"$>
  </mt:if>
</mt:EntriesWithSubCategories>

4.「foo」「bar」カテゴリ以外のブログ記事を出力する

MTUnlessタグにlikeモディファイアを組み合わせます。ただし「foo2」や「bari」など、指定した文字列を含むカテゴリも除外されます。

<mt:EntriesWithSubCategories>
  <mt:unless tag="EntryCategory" like="foo|bar">
    <$mt:Include module="ブログ記事の概要"$>
  </mt:unless>
</mt:EntriesWithSubCategories>

完全一致したカテゴリだけを除外したい場合はちょっと技が必要になります。ここではMTIfタグとtestモディファイアを組み合わせた例を示します。

MTEntryCategoryタグの内容を一旦変数catに保持して、testモディファイアの中でPerlの条件文を使って判定します。testモディファイアの結果が真であれば、MTIfタグブロックを実行します。

<mt:EntriesWithSubCategories>
  <mt:EntryCategory setvar="cat">
  <mt:if test="$cat ne 'foo' && $cat ne 'bar'">
    <$mt:Include module="ブログ記事の概要"$>
  </mt:if>
</mt:EntriesWithSubCategories>

以上です。このようにカテゴリをフィルタリングする方法はバリエーションがあるので、色々な試してみてください。

Comments [1] | Trackbacks [0]
2010年4月26日

EntryCategoryID プラグイン v0.10

April 26,2010 11:55 PM
Tag:[, , ]
Permalink

現在のブログ記事のメインカテゴリーのID番号を出力する EntryCategoryID プラグインのMovable Type 5対応版を作成しました。このプラグインは、MTEntries ブロック内か、ブログ記事アーカイブで使用できます。

1.基本

このプラグインは次のように利用します。これでメインカテゴリーのID番号を出力します。

<mt:Entries>
  <mt:EntryCategoryID />
</mt:Entries>

2.ブログ記事に同一カテゴリーのブログ記事リストを表示する

このプラグインは「ブログ記事に同一カテゴリーのブログ記事リストを表示(MT4版・改)」で紹介しているようなことを行いたい場合に便利です。

ブログ記事アーカイブに次のサブテンプレートを設定すれば、同一カテゴリーのブログ記事リストを表示します。

<mt:EntryCategoryID setvar="entry_category_id" />
<mt:Entries>
  <mt:EntriesHeader>
<div class="comments">
  <h2 class="comments-header">同一カテゴリのブログ記事</h2>
  <div class="comments-content">
    <ul>
  </mt:EntriesHeader>
  <mt:EntryCategoryID setvar="current_category_id">
    <mt:if name="current_category_id" eq="$entry_category_id">
      <li><a href="<mt:EntryPermalink />"><mt:EntryTitle /></a></li>
    </mt:if>
  <mt:EntriesFooter>
    </ul>
  </div>
</div>
  </mt:EntriesFooter>
</mt:Entries>

3.ダウンロード

EntryCategoryID プラグインは以下のリンクからダウンロードしてください。

EntryCategoryID プラグイン
Comments [0] | Trackbacks [0]
2010年4月20日

特定のカテゴリのブログ記事を表示する

April 20,2010 11:55 PM
Tag:[, ]
Permalink

Movable Typeで、「特定のカテゴリのブログ記事を昇順で表示することはできないでしょうか」というご質問を頂きましたので、本エントリーで紹介します。

1.特定のカテゴリのブログ記事を表示する

特定のカテゴリのブログ記事を表示するには、MTEntriesタグにcategoryモディファイアを設定し、モディファイアの値にカテゴリ名を設定します。例えば、「お知らせ」というカテゴリに属するブログ記事を表示させるには、次のように設定します。

<mt:Entries category="お知らせ">
…中略…
</mt:Entries>

2.ブログ記事を昇順で表示する

ブログ記事を昇順で表示するには、MTEntriesタグにsort_orderモディファイアを設定し、モディファイアの値に「ascend」を設定します。

<mt:Entries sort_order="ascend">
…中略…
</mt:Entries>

このモディファイアを設定しなければ降順で表示されます。

3.特定のカテゴリのブログ記事を昇順で表示する

ということで、特定のカテゴリのブログ記事を昇順で表示するには、1項のモディファイアと2項のモディファイアを組み合わせます。

<mt:Entries category="お知らせ" sort_order="ascend">
…中略…
</mt:Entries>

なお、表示する件数を絞りたい場合、次のようにlimitモディファイアで表示件数を指定するとよいでしょう。

<mt:Entries limit="10" category="お知らせ" sort_order="ascend">
…中略…
</mt:Entries>

より高度な設定を行いたい場合は、「特定のカテゴリーに属するブログ記事一覧を表示する(改)」を参照してください。

Comments [0] | Trackbacks [0]
2010年4月 5日

親カテゴリページにサブカテゴリページのリンクを表示する

April 5,2010 12:33 AM
Tag:[, , ]
Permalink

親カテゴリページにサブカテゴリページのリンクを表示するカスタマイズを紹介します。ご質問をいただいたので、パターンをいくつか揃えてみました。

ここでは、次のようなカテゴリとブログ記事の構成をサンプルにします。

1.基本

親カテゴリ直下のサブカテゴリ名を表示します。サブカテゴリ名にはカテゴリアーカイブページへのリンクを設定します。

親カテゴリアーカイブページの表示

子カテゴリ1アーカイブページの表示

<mt:SubCategories>
  <mt:SubCatIsFirst>
<ul>
  </mt:SubCatIsFirst>
  <li><a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel /></a></li>
  <mt:SubCatIsLast>
</ul>
  </mt:SubCatIsLast>
</mt:SubCategories>

サイドバーのカテゴリリストはMTTopLevelCategoriesタグを用いますが、カテゴリアーカイブページでカテゴリの階層関係を制御する場合は、MTSubCategoriesタグを利用します。

2.基本(階層表示)

親カテゴリに含まれるサブカテゴリを階層表示する場合は、1項のサブテンプレートに、MTSubCatsRecurseタグを追加します。

親カテゴリアーカイブページの表示

<mt:SubCategories>
  <mt:SubCatIsFirst>
<ul>
  </mt:SubCatIsFirst>
  <li><a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel /></a>
  <mt:SubCatsRecurse />
  </li>
  <mt:SubCatIsLast>
</ul>
  </mt:SubCatIsLast>
</mt:SubCategories>

3.サブカテゴリページにブログ記事タイトルを表示する

親カテゴリページには直下のサブカテゴリのカテゴリ名のみを表示し、最下層のサブカテゴリページはブログ記事タイトルのみを表示します。

孫カテゴリアーカイブページの表示

<mt:hasSubCategories>
  <mt:SubCategories>
    <mt:SubCatIsFirst>
<ul>
    </mt:SubCatIsFirst>
  <li><a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel /></a></li>
    <mt:SubCatIsLast>
</ul>
    </mt:SubCatIsLast>
  </mt:SubCategories>
<mt:else>
  <mt:Entries>
    <mt:EntriesHeader>
  <ul>
    </mt:EntriesHeader>
    <li><a href="<mt:EntryLink />"><mt:EntryTitle /></a></li>
    <mt:EntriesFooter>
  </ul>
    </mt:EntriesFooter>
  </mt:Entries>
</mt:hasSubCategories>

MTHasSubCategoriesタグでサブカテゴリの有無を判定し、サブカテゴリがあれば、サブカテゴリ名のみを表示します。サブカテゴリがなければ最下層のカテゴリとみなし、ブログ記事タイトルを表示します。

4.サブカテゴリページにブログ記事タイトルを表示する(階層表示)

サブカテゴリを階層表示する場合は、3項のサブテンプレートに、MTSubCatsRecurseタグを追加します。

親カテゴリアーカイブページの表示

<mt:hasSubCategories>
  <mt:SubCategories>
    <mt:SubCatIsFirst>
<ul>
    </mt:SubCatIsFirst>
  <li><a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel /></a>
    <mt:SubCatsRecurse />
  </li>
    <mt:SubCatIsLast>
</ul>
    </mt:SubCatIsLast>
  </mt:SubCategories>
<mt:else>
  <mt:Entries>
    <mt:EntriesHeader>
  <ul>
    </mt:EntriesHeader>
    <li><a href="<mt:EntryLink />"><mt:EntryTitle /></a></li>
    <mt:EntriesFooter>
  </ul>
    </mt:EntriesFooter>
  </mt:Entries>
</mt:hasSubCategories>

5.サブカテゴリ名とブログ記事タイトルをあわせて表示する

親カテゴリページには直下のサブカテゴリのカテゴリ名と、サブカテゴリに属するブログ記事タイトルを表示し、最下層のサブカテゴリページはブログ記事タイトルのみを表示します。

親カテゴリアーカイブページの表示

子カテゴリ1アーカイブページの表示

孫カテゴリアーカイブページの表示

<mt:hasSubCategories>
  <mt:SubCategories>
    <mt:SubCatIsFirst>
<ul>
    </mt:SubCatIsFirst>
  <li><a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel /></a>
    <mt:Entries>
      <mt:EntriesHeader>
  <ul>
      </mt:EntriesHeader>
    <li><a href="<mt:EntryLink />"><mt:EntryTitle /></a></li>
      <mt:EntriesFooter>
  </ul>
      </mt:EntriesFooter>
    </mt:Entries>
  </li>
    <mt:SubCatIsLast>
</ul>
    </mt:SubCatIsLast>
  </mt:SubCategories>
<mt:else>
  <mt:Entries>
    <mt:EntriesHeader>
  <ul>
    </mt:EntriesHeader>
    <li><a href="<mt:EntryLink />"><mt:EntryTitle /></a></li>
    <mt:EntriesFooter>
  </ul>
    </mt:EntriesFooter>
  </mt:Entries>
</mt:hasSubCategories>

最下層のカテゴリでブログ記事タイトルを表示しない場合は次のようにします。

<mt:hasSubCategories>
  <mt:SubCategories>
    <mt:SubCatIsFirst>
<ul>
    </mt:SubCatIsFirst>
  <li><a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel /></a>
    <mt:Entries>
      <mt:EntriesHeader>
  <ul>
      </mt:EntriesHeader>
    <li><a href="<mt:EntryLink />"><mt:EntryTitle /></a></li>
      <mt:EntriesFooter>
  </ul>
      </mt:EntriesFooter>
    </mt:Entries>
  </li>
    <mt:SubCatIsLast>
</ul>
    </mt:SubCatIsLast>
  </mt:SubCategories>
</mt:hasSubCategories>

6.サブカテゴリ名とブログ記事タイトルをあわせて表示する(階層表示)

サブカテゴリを階層表示する場合は、5項のサブテンプレートに、MTSubCatsRecurseタグを追加します。

親カテゴリアーカイブページの表示

子カテゴリ1アーカイブページの表示

孫カテゴリアーカイブページの表示

<mt:hasSubCategories>
  <mt:SubCategories>
    <mt:SubCatIsFirst>
<ul>
    </mt:SubCatIsFirst>
  <li><a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel /></a>
    <mt:Entries>
      <mt:EntriesHeader>
  <ul>
      </mt:EntriesHeader>
    <li><a href="<mt:EntryLink />"><mt:EntryTitle /></a></li>
      <mt:EntriesFooter>
  </ul>
      </mt:EntriesFooter>
    </mt:Entries>
    <mt:SubCatsRecurse />
  </li>
    <mt:SubCatIsLast>
</ul>
    </mt:SubCatIsLast>
  </mt:SubCategories>
<mt:else>
  <mt:Entries>
    <mt:EntriesHeader>
  <ul>
    </mt:EntriesHeader>
    <li><a href="<mt:EntryLink />"><mt:EntryTitle /></a></li>
    <mt:EntriesFooter>
  </ul>
    </mt:EntriesFooter>
  </mt:Entries>
</mt:hasSubCategories>
Comments [0] | Trackbacks [0]
2010年3月24日

Movable Type 5(MT5)のカテゴリ削除動作

March 24,2010 1:55 AM
Tag:[]
Permalink

ちょっと古い話ですが、Movable Type 3.x~4.1 の時代まで、サブカテゴリがあるカテゴリの削除はできませんでした。バージョン4.1で削除を実行すると、次のようなエラーが発生します。

カテゴリ削除エラー

よって、親カテゴリを削除する場合、削除前にサブカテゴリを削除するか、サブカテゴリを他のカテゴリへの移動する必要がありました。

しばらくその動作だと思い込んでいたのですが、Movable Type 5(MT5)では、サブカテゴリがある親カテゴリの削除が可能になっていました。ということで、いつのバージョンから削除可能になったのか、確認したところ、バージョン4.22ですでに削除可能になっていました。ということで全く気がついていませんでした…。

削除した場合、サブカテゴリは親カテゴリに昇格します。なお、サブフォルダは元々削除できていたようです。

Comments [0] | Trackbacks [0]
2010年1月28日

sort_method モディファイア(その2)

January 28,2010 1:55 AM
Tag:[, ]
Permalink

Movable Type で、カテゴリやフォルダを並べ替えるための sort_method モディファイアの紹介です。「sort_method モディファイア(その1)」の続きです。

1.ソート条件に対応するプラグインの作成

指定した条件に対応するプラグインを作成します。ここでは「sort_method モディファイア(その1)」で紹介したソースコードを利用します。パッケージ名は少し変えてますが、次の2ファイルを作成します。

config.yaml

id: CategorySorting
name: CategorySorting

CategorySorting.pm

package CategorySorting;
  
my %category_priorities = (
    'foo' => 1,
    'bar' => 2,
);
 
sub cat_sort ($$) {
    my ($a, $b) = @_;
    my $a_pri = $category_priorities{$a->label} || 1000;
    my $b_pri = $category_priorities{$b->label} || 1000;
    unless ($a_pri == 1000 && $b_pri == 1000) {
        return $a_pri <=> $b_pri;
    }
    return $a->label cmp $b->label;
}

ハッシュ変数 %category_priorities にカテゴリの優先度を設定します。このプラグインではカテゴリ名をソート条件にしており、「foo」というカテゴリを1番目に、「bar」というカテゴリを2番目に並ぶように、優先度を設定しています。

変数 $a と $b には、ソート対象のカテゴリオブジェクトが設定されます。ソートするカテゴリの優先度がハッシュ変数%category_prioritiesに設定されていれば、2つのカテゴリのソート結果を返却し、そうでない場合は直接カテゴリ名でのソート結果を返却します。

プラグイン作成後、次のようなディレクトリ構成になるように plugins ディレクトリに2つのファイルをアップロードします。

plugins/
  CategorySorting/
    config.yaml
    lib/
      CategorySorting.pm

システム管理画面の「ツール」→「プラグイン」で「CategorySorting」が表示されればOKです。

2.sort_method モディファイアの追加

MTTopLevelCategories タグなどに、sort_method モディファイアを追加し、ソートする条件を指定します。ここではソート条件として、作成したプラグインのメソッド名を指定します。

<mt:IfArchiveTypeEnabled archive_type="Category">
<div class="widget-archive widget-archive-category widget">
    <h3 class="widget-header">カテゴリ</h3>
    <div class="widget-content">
    <mt:TopLevelCategories sort_method="CategorySorting::cat_sort">
        <mt:SubCatIsFirst>
        <ul>
        </mt:SubCatIsFirst>
        <mt:If tag="CategoryCount">
            <li><a href="<$mt:CategoryArchiveLink$>"<mt:If tag="CategoryDescription"> title="<$mt:CategoryDescription remove_html="1" encode_html="1"$>"</mt:If>><$mt:CategoryLabel$> (<$mt:CategoryCount$>)</a>
        <mt:Else>
            <li><$mt:CategoryLabel$>
        </mt:If>
        <$mt:SubCatsRecurse$>
            </li>
        <mt:SubCatIsLast>
        </ul>
        </mt:SubCatIsLast>
    </mt:TopLevelCategories>
    </div>
</div>
</mt:IfArchiveTypeEnabled>

ソート条件は各階層単位に適用されます。

Comments [0] | Trackbacks [0]
2010年1月27日

sort_method モディファイア(その1)

Movable Type の MTSubCategories タグや MTTopLevelCategories タグでは sort_method というカテゴリを並び替えるモディファイアが利用可能です。

ネットで情報を検索すると、sort_method のサンプルで大体同じソースコードが登場するのですが、発信元は David Raynes 氏の SubCategories プラグインのようです。

SubCategories プラグイン

また、よくみかけるソースコードは以下にありました。

SubCategories Plugin Documentation

package rayners::CategorySorting;
 
my %category_priorities = (
# I want 'MT Plugins' to appear before 'MT Brainstorming'
# followed by the rest
    'MT Plugins' => 1
    'MT Brainstorming' => 2,
 
# And I want 'SubCategories' to be the first plugin listed,
# followed by 'Entry' and then the rest of the plugins
 
    'SubCategories' => 1,
    'Entry' => 2,
);
 
sub cat_sort ($$) {
  my ($a, $b) = @_;
   
  my $a_pri = $category_priorities{$a->label} || 1000;
  my $b_pri = $category_priorities{$b->label} || 1000;
  unless ($a_pri == 1000 && $b_pri == 1000) {
    # At least one of them has a defined priority
    # so sort on that
    return $a_pri <=> $b_pri;
  }
 
  # Both are the default value (1000)
  # so sort alphabetically
 
  return $a->label cmp $b->label;
}
Comments [0] | Trackbacks [0]
2009年11月 2日

Movable Type でカテゴリ別にブログ記事の背景画像を切り替える(カスタムフィールド編)

November 2,2009 1:33 AM
Tag:[, , ]
Permalink

Movable Type 4 以降のバージョンで、カテゴリ別にブログ記事の背景画像を切り替えるカスタマイズを紹介します。

先日エントリーした「Movable Type でカテゴリ別にブログ記事の背景画像を切り替える」では、手動でアップロードした画像を利用する方法を紹介しましたが、このエントリーではカスタムフィールドを利用した場合の差分を示します。

1.カテゴリのカスタムフィールドの作成

ブログ管理画面の「カスタムフィールド」→「新規」で、次のようなカスタムフィールドを作成します。ここでは次のような設定にします。

  • システムオブジェクト:カテゴリ
  • カスタムフィールド名:背景画像
  • 種類:画像
  • テンプレートタグ名:CategoryBackgroundImage

カテゴリのカスタムフィールドの作成

2.背景画像のアップロード

カテゴリの編集画面の「背景画像」から、そのカテゴリの背景画像にしたい画像をそれぞれアップロードします。アップロード後は「変更を保存」をクリックするのを忘れないようにしてください。

カテゴリのカスタムフィールドの作成

3.スタイルシートの修正

Movable Type でカテゴリ別にブログ記事の背景画像を切り替える」の2項と同じです。

4.スタイルシートの修正

Movable Type でカテゴリ別にブログ記事の背景画像を切り替える」の3項の代わりに、スタイルシートに以下の内容を追加します。

<mt:Categories>
  <mt:CategoryCustomFields>
    <mt:If tag="CategoryBackgroundImage">
      <mt:CategoryBackgroundImageAsset>
.img_<mt:CategoryDescription /> {
    background: url(<mt:AssetURL />) no-repeat left top;
}
      </mt:CategoryBackgroundImageAsset>
    </mt:If>
  </mt:CategoryCustomFields>
</mt:Categories>

追加後、スタイルシートの再構築を行ないます。これでカテゴリ別の背景画像用のセレクタが出来上がります。

5項以降の設定は「Movable Type でカテゴリ別にブログ記事の背景画像を切り替える」の4項以降と同様です。

Comments [0] | Trackbacks [0]
2009年10月19日

Movable Type でカテゴリ別にブログ記事の背景画像を切り替える

October 19,2009 12:55 AM
Tag:[, , ]
Permalink

Movable Type 4 以降のバージョンで、カテゴリ別にブログ記事の背景画像を切り替えるカスタマイズを紹介します。

この記事は、Twitter 上で immovabletype さんのつぶやきに対してお伝えした内容をまとめたものです。

まず、カテゴリ別に背景画像を適用するイメージを図に示します。

設定イメージ

図の説明ですが、まずカテゴリ別の背景画像を用意します。ここでは「日記」「旅行」「趣味」の3つのカテゴリの背景画像を想定します。次に各背景画像を、カテゴリ別のセレクタとしてスタイルシートに設定します。そして、各ページのブログ記事の背景画像として適用します。例えば、「日記」カテゴリに属するブログ記事Aには、緑色の背景画像を適用します。

また、カテゴリの増減に対応できるよう、スタイルシートや各テンプレートにはテンプレートタグを利用して、再構築するだけで自動的に背景画像を適用できるようにします。手動で用意するのは背景画像のみです。

背景画像の設定にはカテゴリのカスタムフィールドを利用する手もありますが、ここでは MTOS でも利用可能な設定方法を紹介します。カスタムフィールドを用いた方法は別途エントリーしたいと思います。

1.背景画像のアップロード

背景画像にしたいカテゴリ別の画像を、メインページと同じディレクトリにアップロードします。

2.「カテゴリの説明」の設定

各カテゴリの「カテゴリの説明」欄に、背景画像のファイル名を設定します(拡張子は除く)。冒頭の例では、次のような設定になります。

カテゴリカテゴリの説明
日記diary
旅行travel
趣味hobby

カテゴリ名を背景画像のファイル名に使ってもよいのですが、カテゴリ名に全角を使っているとCSSのセレクタに使用できないので、「カテゴリの説明」欄を使用しています。

3.スタイルシートの修正

スタイルシートに以下の内容を追加します。

<mt:Categories>
.img_<$MTCategoryDescription$> {
    background: url(<$MTBlogURL$><$MTCategoryDescription$>.jpg) no-repeat left top;
}
</mt:Categories>

追加後、スタイルシートの再構築を行ないます。これでカテゴリ別の背景画像用のセレクタが出来上がります。冒頭の例では次のようになります。

.img_diary {
    background: url(http://user-domain/diary.jpg) no-repeat left top;
}
.img_travel {
    background: url(http://user-domain/travel.jpg) no-repeat left top;
}
.img_hobby {
    background: url(http://user-domain/hobby.jpg) no-repeat left top;
}

4.テンプレートの修正

3項で設定した背景画像用のセレクタを、各テンプレートのブログ記事部分に出力する設定を行ないます。設定内容はテンプレートによって微妙に異なるため、やや分かりにくいかもしれませんが次の表を参考にしてください。

メインページカテゴリ
アーカイブ
月別
アーカイブ
ブログ記事
アーカイブ
デフォルトテンプレート
小粋空間テンプレート
その他
(テンプレート別に設定)
  • ①「ブログ記事の概要」テンプレートモジュールを修正
  • ②「ブログ記事」アーカイブテンンプレートを修正
  • ③「ブログ記事の詳細」テンプレートモジュールを修正
  • ④「メインページ」インデックステンプレートを修正
  • ⑤カテゴリアーカイブテンプレートを修正
  • ⑥月別アーカイブテンプレートを修正
  • ⑦ブログ記事アーカイブテンプレートを修正

表の見方は、例えば、「既定のブログ」を使っていて、メインページ・カテゴリアーカイブ・月別アーカイブのブログ記事の背景画像を変更したい場合は、「ブログ記事の概要」テンプレートモジュールを修正する(=①の修正を行う)、という具合になります。

以下、①~⑦の番号別に修正内容を示します。

①:「ブログ記事の概要」テンプレートモジュールの修正

メインページ・カテゴリアーカイブ・月別アーカイブで、ブログ記事の表示に「ブログ記事の概要」テンプレートモジュールを利用している場合、ページによって処理を振り分ける必要があるため、次のサブテンプレートを使用します。このサブテンプレートは「ブログ記事の概要」テンプレートモジュールの背景画像を表示したい div 要素の開始タグに適用してください(改行はすべて除去してください)。

<div
<mt:if name="category_archive">
<mt:if tag="CategoryDescription">
 class="img_<mt:CategoryDescription />"
</mt:if>
<mt:else>
<mt:setVar name="flag" value="0" />
<mt:EntryCategories><mt:unless name="flag">
<mt:if tag="CategoryDescription"> class="img_<$MTCategoryDescription$>"</mt:if>
<mt:setVar name="flag" value="1" />
</mt:unless>
</mt:EntryCategories>
</mt:if>>

最初の MTIf タグブロック内でカテゴリアーカイブの場合の処理を記述し、MTElse タグブロック内でカテゴリアーカイブ以外の処理を記述しています。

MTIf タグブロック内、つまりカテゴリアーカイブでは、表示するカテゴリが決まっているので、MTCategoryDescription タグをそのまま class 属性値に適用しています。なお、2つめのMTIf タグは tag モディファイアで MTCategoryDescription を判定し、カテゴリの説明が設定されている場合のみ、MTCategoryDescription タグを出力するようにしています。

MTElse タグブロック内、つまりメインページや月別アーカイブ・ブログ記事アーカイブでは、まず MTEntryCategories タグでブログ記事のカテゴリ一覧を処理し、一番最初に処理されるカテゴリ(メインカテゴリ)について MTCategoryDescription タグを class 属性値に適用しています。

なお、ブログ記事に複数のカテゴリを設定していると、class 属性値に複数のMTCategoryDescription タグの内容を設定してしまうため、変数 flag を使用し、変数flag の値が0のときだけ、MTCategoryDescription タグを出力するようにしています。

①で div 要素に既存の class 属性値を設定している場合

①で、適用したい div 要素に他の class 属性(ここでは hoge)をすでに設定している場合は、次の内容に書き換えます。hoge の部分は設定している値に書き換えてください。

<div class="hoge
<mt:if name="category_archive">
<mt:if tag="CategoryDescription">
 img_<mt:CategoryDescription />
</mt:if>
<mt:else>
<mt:setVar name="flag" value="0" />
<mt:EntryCategories><mt:unless name="flag">
<mt:if tag="CategoryDescription"> img_<$MTCategoryDescription$></mt:if>
<mt:setVar name="flag" value="1" />
</mt:unless>
</mt:EntryCategories>
</mt:if>">

②③④⑥⑦の場合の修正

②③④⑥⑦は、①のように処理を振り分ける必要がないケースです。表に示したテンプレートにある div 要素の開始タグを、次の内容に入れ替えてください。改行はすべて除去してください。

<mt:setVar name="flag" value="0" />
<div
<mt:EntryCategories>
<mt:unless name="flag">
<mt:if tag="CategoryDescription"> class="img_<mt:CategoryDescription />"</mt:if>
<mt:setVar name="flag" value="1" />
</mt:unless>
</mt:EntryCategories>>

処理の内容は、①の MTElse タグブロックと同じです。

②③④⑥⑦で div 要素に既存の class 属性値を設定している場合

②③④⑥⑦で、適用したい div 要素に他の class 属性(ここでは hoge)をすでに設定している場合は、次の内容に書き換えます。hoge の部分は設定している値に書き換えてください。

<mt:setVar name="flag" value="0" />
<div class="hoge
<mt:EntryCategories>
<mt:unless name="flag">
<mt:if tag="CategoryDescription"> img_<mt:CategoryDescription /></mt:if>
<mt:setVar name="flag" value="1" />
</mt:unless>
</mt:EntryCategories>">

⑤:カテゴリアーカイブテンプレートの修正

カテゴリアーカイブテンプレートを直接修正する場合、選ばれるカテゴリが一意に決まっているので、修正内容は一番シンプルです。

<div<mt:if tag="CategoryDescription"> class="img_<mt:CategoryDescription />"</mt:if>>
</div>

処理の内容は、①の MTIf タグブロックと同じです。

⑤で div 要素に既存の class 属性値を設定している場合

適用したい div 要素に他の class 属性(ここでは hoge)をすでに設定している場合は、次の内容に書き換えます。hoge の部分は設定している値に書き換えてください。

<div class="hoge<mt:if tag="CategoryDescription"> img_<mt:CategoryDescription /></mt:if>">
</div>

5.設定例

4項までで、カスタマイズは完了ですが、「一体どの div 要素に設定すればいいの?」という疑問があると思うので、「既定のブログ」のメインページを例に、具体的な設定位置と、設定前後のキャプチャを掲載します。

ブログ記事の概要(変更前)

<$mt:EntryTrackbackData$>
<div id="entry-<$mt:EntryID$>" class="entry-asset asset hentry">
    <div class="asset-header">
...後略...

ブログ記事の概要(変更後:青色が追加部分)

<$mt:EntryTrackbackData$>
<div id="entry-<$mt:EntryID$>" class="entry-asset asset hentry<mt:if name="category_archive"><mt:if tag="CategoryDescription"> img_<mt:CategoryDescription /></mt:if><mt:else><mt:setVar name="flag" value="0" /><mt:EntryCategories><mt:unless name="flag"><mt:if tag="CategoryDescription"> img_<$MTCategoryDescription$></mt:if><mt:setVar name="flag" value="1" /></mt:unless></mt:EntryCategories></mt:if>">
    <div class="asset-header">
...後略...

メインページ(変更前)
メインページ(変更前)

メインページ(変更後)
メインページ(変更後)

以上です。元々の設定内容は immovabletype さんのブログでまとめられています。

immovabletype - [MT] カテゴリごとに記事のアイコン画像等を切り替える方法

2009.11.18
ファイル名およびクラス名の対応が誤っていたので修正しました。

Comments [2] | Trackbacks [1]
2009年9月 9日

親カテゴリーアーカイブに表示したサブカテゴリーのブログ記事にサブカテゴリー名を表示する

September 9,2009 12:35 AM
Tag:[, , ]
Permalink

Movable Type の親カテゴリーアーカイブに表示したサブカテゴリーのブログ記事に、サブカテゴリー名を表示するカスタマイズです。「親カテゴリー名しか表示できません」というご質問を頂きましたので、本エントリーで紹介致します。

1.完成例

下のサンプルは、「days」という親カテゴリーアーカイブに、「days」カテゴリーのブログ記事と、そのサブカテゴリの「food」カテゴリーのブログ記事を表示したものです。

「food」カテゴリーのブログ記事「今日の晩ごはん」のカテゴリー名は「food」、「days」カテゴリーのブログ記事「ブログ始めました」のカテゴリー名は「days」になっています。

カテゴリー名にリンクがない場合
サンプル

カテゴリー名にリンクがある場合
サンプル

ちなみに、親カテゴリーアーカイブにサブカテゴリーのブログ記事を表示させるには、MTEntries タグの代わりに、MTEntriesWithSubCategories タグを利用しますが、詳細は下記の記事を参照願います。

関連記事:親カテゴリーアーカイブにサブカテゴリーのエントリーを表示する

2.カスタマイズ

冒頭の画面の位置にカテゴリを表示するには、ブログ管理画面の「デザイン」→「テンプレート」をクリックし、「ブログ記事の概要」をクリックして、以下の青色部分を追加します。

2.1 リンクなしのカテゴリー名を表示する場合

サブカテゴリに属するブログ記事のプライマリカテゴリを表示するには、MTEntryCategory を利用します。MTCategoryLabel では親カテゴリーのカテゴリー名が表示されてしまうので気をつけましょう。

...前略...
        <div class="asset-meta">
            <span class="byline">
    <mt:If tag="EntryAuthorDisplayName">
                <span class="vcard author"><$mt:EntryAuthorLink show_hcard="1"$></span> (<abbr class="published" title="<$mt:EntryDate format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr>)
    <mt:Else>
                <abbr class="published" title="<$mt:EntryDate format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr>
    </mt:If>
            </span>
<span class="separator">|</span> <mt:EntryCategory />
<mt:Unless name="hide_counts" eq="1">
            <mt:IfCommentsActive><span class="separator">|</span> <a href="<$mt:EntryPermalink$>#comments"><$mt:EntryCommentCount singular="コメント(1)" plural="コメント(#)" none="コメント(0)"$></a></mt:IfCommentsActive>
            <mt:IfPingsActive><span class="separator">|</span> <a href="<$mt:EntryPermalink$>#trackbacks"><$mt:EntryTrackbackCount singular="トラックバック(1)" plural="トラックバック(#)" none="トラックバック(0)"$></a></mt:IfPingsActive>
</mt:Unless>
        </div>
...後略...

2.2 カテゴリーアーカイブへのリンクつきのカテゴリー名を表示する場合

カテゴリーアーカイブへのリンクつきのカテゴリー名を表示するには、さらに制御タグと MTCategoryArchiveLink タグ、MTCategoryLabel タグを組み合わせます。

...前略...
        <div class="asset-meta">
            <span class="byline">
    <mt:If tag="EntryAuthorDisplayName">
                <span class="vcard author"><$mt:EntryAuthorLink show_hcard="1"$></span> (<abbr class="published" title="<$mt:EntryDate format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr>)
    <mt:Else>
                <abbr class="published" title="<$mt:EntryDate format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr>
    </mt:If>
            </span>
<span class="separator">|</span> 
<mt:EntryCategory setvar="category" />
<MTEntryCategories><mt:If tag="CategoryLabel" eq="$category"><a href="<$MTCategoryArchiveLink$>"></mt:If><$MTCategoryLabel$></a></MTEntryCategories>
<mt:Unless name="hide_counts" eq="1">
<mt:Unless name="hide_counts" eq="1">
            <mt:IfCommentsActive><span class="separator">|</span> <a href="<$mt:EntryPermalink$>#comments"><$mt:EntryCommentCount singular="コメント(1)" plural="コメント(#)" none="コメント(0)"$></a></mt:IfCommentsActive>
            <mt:IfPingsActive><span class="separator">|</span> <a href="<$mt:EntryPermalink$>#trackbacks"><$mt:EntryTrackbackCount singular="トラックバック(1)" plural="トラックバック(#)" none="トラックバック(0)"$></a></mt:IfPingsActive>
</mt:Unless>
        </div>
...後略...
Comments [0] | Trackbacks [0]
2009年7月28日

ブログ記事のない親カテゴリーに子カテゴリーのブログ記事を表示する(Movable Type 4.25~)

ブログ記事のない親カテゴリーに子カテゴリーを表示する方法です。

下の画像は、ブログ記事が1件も投稿されていない「日記」カテゴリーのアーカイブページの状態です。ブログ記事は何も表示されておらず、メインページとアーカイブのリンクのみが表示されています。

変更前

カテゴリーアーカイブ一覧は次のようになっています。

変更前

この「日記」カテゴリーには子カテゴリーとして「お知らせ」「イベント」があり、テンプレートをカスタマイズすることで、次のように子カテゴリーのブログ記事を表示できるようになります。

変更後

カテゴリーアーカイブ一覧も次のようにリンクを表示し、親カテゴリー名の横に、子カテゴリーのブログ記事数を表示します。

変更後

これを初めてご覧になった方は特段たいした機能ではないように思われますが、Movable Type ではこれまで、この「ブログ記事のない親カテゴリーに子カテゴリーのブログ記事を表示する」という機能がありませんでした(厳密には一時期ありました)。

以下、これまでの経緯とカスタマイズについて紹介します。

1.概要とこれまでのバージョンでの動作

親カテゴリーのアーカイブページに子カテゴリーのブログ記事を表示するには、MTEntries タグの代わりに MTEntriesWithSubCategories タグを利用します。

しかし、Movable Type 3 の時代には、ブログ記事のない親カテゴリーのアーカイブページに MTEntriesWithSubCategories タグを利用しても子カテゴリーを表示することができず、「エントリーのない親カテゴリーに子カテゴリーを表示する」という記事を書きました。記事は、親カテゴリーにダミーのブログ記事を作り、その記事は MTIfCategory タグで表示しないようにカスタマイズするといった内容です。

その後、バージョン 4.1 で、ブログ記事のない親カテゴリーのアーカイブページに子カテゴリーを表示することができるようになりました(関連記事:MTEntriesWithSubCategories タグの不具合などについて)。

しかし、バージョン 4.2 になってから再び表示することができなくなったのですが、4.25 から動作するようになりました。確認したところ、4.2 以降では、MTEntriesWithSubCategories タグの有無にかかわらず、ブログ記事のない親カテゴリーについては、冒頭の画像のように空のアーカイブページが生成されます。

ということで、Movable Type 4.25 以降では、MTEntriesWithSubCategories タグを利用することで、ブログ記事のない親カテゴリーのアーカイブページでも、自然体で子カテゴリーのブログ記事を表示できるようになりました。

2.ブログ記事リストの変更

デフォルトテンプレートの場合、ブログ管理画面の「デザイン」→「テンプレート」→「カテゴリ別ブログ記事リスト」をクリックし、テンプレートにある MTEntries タグを MTEntriesWithSubCategories タグに書き換えます。

変更前

...前略...
<mt:Entries limit="$limit">
    <mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
    <$mt:Include module="ブログ記事の概要"$>
</mt:Entries>
...後略...

変更後

...前略...
<mt:EntriesWithSubCategories limit="$limit">
    <mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
    <$mt:Include module="ブログ記事の概要"$>
</mt:EntriesWithSubCategories>
...後略...

当ブログの配布テンプレートをご利用の場合は、ブログ管理画面の「デザイン」→「テンプレート」→「ブログ記事リスト」をクリックし、テンプレートにある MTEntries タグを MTEntriesWithSubCategories タグに書き換えます。

変更前

...前略...
<mt:if name="datebased_archive">
   <mt:entries>
      <mt:entryTrackbackData />
      <mt:include module="ブログ記事の概要" />
   </mt:entries>
<mt:else>
   <mt:entries limit="auto">
      <mt:entryTrackbackData />
      <mt:include module="ブログ記事の概要" />
   </mt:entries>
</mt:if>
...後略...

変更後

...前略...
<mt:if name="datebased_archive">
   <mt:entries>
      <mt:entryTrackbackData />
      <mt:include module="ブログ記事の概要" />
   </mt:entries>
<mt:else>
   <mt:entriesWithSubCategories limit="auto">
      <mt:entryTrackbackData />
      <mt:include module="ブログ記事の概要" />
   </mt:entriesWithSubCategories>
</mt:if>
...後略...

3.カテゴリアーカイブウィジェットの変更

2項の変更だけではカテゴリーリストに親カテゴリアーカイブページへのリンクが表示されません。理由は、デフォルトのサブテンプレートは MTCategoryCount タグを判定し、処理中のカテゴリーにブログ記事がない場合はリンクを表示しない制御を行なっているためです。

ここでは、制御タグを利用して、子カテゴリーのブログ記事がある場合はリンクを表示するようにします。また、カテゴリ名の横に子カテゴリのブログ記事も含めたブログ記事数を表示する変更も行います。

デフォルトテンプレートの場合、ブログ記事の「デザイン」→「ウィジェット」→「カテゴリアーカイブ」をクリックし、テンプレートの内容を次のように変更します(青色部分は追加、赤色部分は変更)。

<mt:IfArchiveTypeEnabled archive_type="Category">
<div class="widget-archive widget-archive-category widget">
    <h3 class="widget-header">カテゴリ</h3>
    <div class="widget-content">
    <mt:TopLevelCategories>
        <mt:SubCatIsFirst>
        <ul>
        </mt:SubCatIsFirst>
        <mt:EntriesWithSubCategories>
            <mt:EntriesFooter>
                <mt:GetVar name="__counter__" setvar="entry_count" />
            </mt:EntriesFooter>
        </mt:EntriesWithSubCategories>
        <mt:If name="entry_count">
            <li><a href="<$mt:CategoryArchiveLink$>"<mt:If tag="CategoryDescription"> title="<$mt:CategoryDescription remove_html="1" encode_html="1"$>"</mt:If>><$mt:CategoryLabel$> (<mt:If tag="CategoryCount"><$mt:CategoryCount$><mt:Else><mt:GetVar name="entry_count" /></mt:If>)</a>
        <mt:Else>
            <li><$mt:CategoryLabel$>
        </mt:If>
        <$mt:SubCatsRecurse$>
            </li>
        <mt:SubCatIsLast>
        </ul>
        </mt:SubCatIsLast>
    </mt:TopLevelCategories>
    </div>
</div>
</mt:IfArchiveTypeEnabled>

当ブログの配布テンプレートをご利用の場合は、ブログ記事の「デザイン」→「ウィジェット」→「カテゴリアーカイブ」をクリックし、テンプレートの内容を次のように変更します(青色部分は追加、赤色部分は変更)。

<mt:ifArchiveTypeEnabled archive_type="Category">
<dt class="sidetitle">
Categories
</dt>
 
<dd class="side" id="categories">
<mt:topLevelCategories>
  <mt:subCatIsFirst>
  <ul>
  </mt:subCatIsFirst>
    <mt:entriesWithSubCategories>
      <mt:entriesFooter>
        <mt:getVar name="__counter__" setvar="entry_count" />
      </mt:entriesFooter>
    </mt:entriesWithSubCategories>
    <mt:if name="entry_count">
    <li><a href="<mt:categoryArchiveLink />" title="<mt:categoryDescription />"><mt:categoryLabel /></a> [<mt:if tag="CategoryCount"><mt:categoryCount /><mt:else><mt:getVar name="entry_count" /></mt:If>]
    <mt:else>
    <li><mt:categoryLabel />
  </mt:if>
    <mt:subCatsRecurse />
    </li>
    <mt:subCatIsLast>
  </ul>
    </mt:subCatIsLast>
  </mt:topLevelCategories>
</dd>
</mt:ifArchiveTypeEnabled>

4.子カテゴリーのブログ記事投稿時に親カテゴリーアーカイブを再構築する

バージョン 4.261 で確認したところ、子カテゴリーのブログ記事投稿時に親カテゴリーアーカイブは再構築されません。したがって、下記のプラグインを併用されることをおすすめします。

Junnama Online (Mirror) - サブカテゴリーのエントリー投稿時に親カテゴリーアーカイブを再構築するプラグイン
Comments [4] | Trackbacks [0]
2009年2月10日

カテゴリーアーカイブページの最後に「続きを読む」のリンクを表示する

February 10,2009 1:35 AM
Tag:[, , ]
Permalink

カテゴリーアーカイブページで表示するブログ記事数を制限している場合、ページの最後に「続きを読む」のリンクを表示し、そのリンクをクリックすれば、月別カテゴリーアーカイブページにジャンプするカスタマイズです。

例えば、カテゴリーアーカイブページで新着5件のブログ記事を表示している場合、「続きを読む」のリンクをクリックすれば、新着6件目のブログ記事のある月別カテゴリーアーカイブページの該当記事の位置までジャンプします。

図にすると次のような感じです。

カテゴリーアーカイブページの最後に「続きを読む」のリンクを表示する

1.カスタマイズ

当サイトの配布テンプレートの場合、「ブログ記事リスト」を次のように変更します。他のテンプレートでも構造はそれほど大きく変わらないので利用できると思います。

変更前

...前略...
<mt:if name="datebased_archive">
  <mt:entries>
    <mt:entryTrackbackData />
    <mt:include module="ブログ記事の概要" />
  </mt:entries>
<mt:else>
  <mt:entries limit="auto">
    <mt:entryTrackbackData />
    <mt:include module="ブログ記事の概要" />
  </mt:entries>
</mt:if>
 
</div>
</div>
...後略...

変更後

...前略...
<mt:if name="datebased_archive">
  <mt:entries>
    <mt:entryTrackbackData />
    <mt:include module="ブログ記事の概要" />
  </mt:entries>
<mt:else>
  <mt:entries lastn="6">
    <mt:unless name="__last__">
      <mt:entryTrackbackData />
      <mt:include module="ブログ記事の概要" />
    <mt:else>
      <mt:entryDate format="/%Y/%m/" setvar="year_month" />
      <mt:entryID setvar="entry_id" pad="1" />
    </mt:unless>
  </mt:entries>
</mt:if>
 
<mt:if name="archive_class" eq="category-archive">
  <mt:ifArchiveTypeEnabled archive_type="Category-Monthly">
<div class="content-nav">
  <a href="<mt:blogURL /><mt:subCategoryPath separator="-" /><mt:getVar name="year_month" />#a<mt:getVar name="entry_id" />">続きを読む</a>
</div>
  </mt:ifArchiveTypeEnabled>
</mt:if>
 
</div>
</div>

limit モディファイアを lastn モディファイアに変更し、lastn モディファイアの値に、「カテゴリーアーカイブページに表示したい件数+1」を設定します(ここでは「6」)。

最後の1件はカテゴリーアーカイブページに表示せず、ブログ記事情報(投稿月日とブログ記事ID)だけを取得し、変数に保持します。

そのあと、カテゴリーアーカイブで、月別カテゴリーアーカイブのアーカイブマッピングがある場合
のみ、ブログURL・サブカテゴリーパスと変数の情報を使って、月別カテゴリーページの該当記事へのアンカーを生成します。

2.注意事項

余談です。

元テンプレートが limit モディファイア「auto」を使っているので、当初は次のように、limit モディファイアと unique モディファイアを組み合わせ、新着1件のブログ記事情報を取得しようと思いましたが、正常に動作しません(情報が取得できず)でした。

...前略...
<mt:if name="datebased_archive">
  <mt:entries>
    <mt:entryTrackbackData />
    <mt:include module="ブログ記事の概要" />
  </mt:entries>
<mt:else>
  <mt:entries limit="auto">
    <mt:entryTrackbackData />
    <mt:include module="ブログ記事の概要" />
  </mt:entries>
</mt:if>
 
<mt:if name="archive_class" eq="category-archive">
  <mt:ifArchiveTypeEnabled archive_type="Category-Monthly">
    <mt:entries unique="1" limit="1">
      <mt:entryDate format="/%Y/%m/" setvar="year_month" />
      <mt:entryID setvar="entry_id" pad="1" />
    </mt:entries>
<div class="content-nav">
  <a href="<mt:blogURL /><mt:subCategoryPath separator="-" /><mt:getVar name="year_month" />#a<mt:getVar name="entry_id" />">続きを読む</a>
</div>
  </mt:ifArchiveTypeEnabled>
</mt:if>
 
</div>
</div>
...後略...

3.関連記事

WolaWola - リアルタイプ:「アーカイブ」のリンク
Comments [13] | Trackbacks [1]
2009年2月 3日

Movable Type のカテゴリーリストで特定のカテゴリーを非表示にする

February 3,2009 1:31 AM
Tag:[, , ]
Permalink

Movable Type でカテゴリー一覧を表示するときに、特定のカテゴリーを非表示にするカスタマイズです。

1.基本

特定のカテゴリーを非表示にするには、次のように MTUnless タグと like モディファイアを組合わせて使用します。この例では、「cat1」「cat2」「cat3」のカテゴリーを、カテゴリー一覧に表示しません。

<mt:categories>
  <mt:unless tag="CategoryLabel" like="cat1|cat2|cat3">
カテゴリーの処理
  </mt:unless>
</mt:categories>

カテゴリーのフィルタリングでは、FilterCategories プラグインが有名で、上記のような書式でフィルタリングすることができますが、カテゴリー名が重複している場合は適正にフィルタリングできないという問題があります。

2.同名のカテゴリーが存在する場合

同名のカテゴリーが存在する場合は、tagモディファイア・like モディファイアとカテゴリーIDを組合わせてフィルタリングします。

<mt:categories>
  <mt:unless tag="CategoryID" like="^3$||^5$|^7$">
カテゴリーの処理
  </mt:unless>
</mt:categories>

likeモディファイアを使用する場合の注意点ですが、前述のサブテンプレートを、

<mt:categories>
  <mt:unless tag="CategoryID" like="3|5|7">
カテゴリーの処理
  </mt:unless>
</mt:categories>

と書くと、カテゴリーIDの番号が「3」「5」「7」を含むものすべてのID(「13」とか)が対象になってしまうため、正規表現の「^」と「$」を付与しています。

3.似たようなカテゴリー名が存在する場合

1項のようにカテゴリー名で判定するときも、冒頭の例では「cat1-1」なども含まれてしまうので、正規表現の「$」を付与して、

<mt:categories>
  <mt:unless tag="CategoryLabel" like="cat1$|cat2$|cat3$">
カテゴリーの処理
  </mt:unless>
</mt:categories>

とすると良いでしょう。

Comments [0] | Trackbacks [1]
2009年1月26日

dTree カテゴリーリストにブログ記事数を表示する

January 26,2009 1:55 AM
Tag:[, , ]
Permalink

Movable Type に表示する dTree カテゴリーリストに、ブログ記事数を表示するカスタマイズです。このカスタマイズを行なえば、dTree のカテゴリーリストにブログ記事が公開されているカテゴリーにブログ記事数を表示します。

dTree カテゴリーリストにエントリー数を表示

ご要望を頂きましたので、本エントリーにて紹介致します。なお、このカスタマイズは「dTree サブカテゴリーリスト + 新着表示 for Movable Type」のカスタマイズを元にしています。

以下、サブテンプレートのみ示します。

dTree サブカテゴリーリスト + 新着表示 for Movable Type」のひとつめのリストは、次の内容に変更してください。

<script type="text/javascript">
d = new dTree('d');
d.config.useCookies=false;
d.add(0, -1,'Categories','javascript: void(0);');
<mt:setVar name="cat_number" value="1" />
<mt:setVar name="level" value="1" />
<mt:topLevelCategories>
<mt:setVar name="cat_number" op="++" />
<mt:setVar name="tree[$level]" value="$cat_number" />
<mt:if name="level" eq="1">
  d.add(<mt:getVar name="cat_number" op="--" />, 0,'<mt:categoryLabel escape="html" /><mt:if tag="CategoryCount"> [<$mt:CategoryCount$>]</mt:if> <span class="new"><mt:entries lastn="1"><mt:entryDate format="%Y:%m:%d:%H:%M:%S" /></mt:entries></span>','<mt:if tag="CategoryCount"><mt:categoryArchiveLink /><mt:else>javascript: void(0);</mt:if>');
<mt:else>
  d.add(<mt:getVar name="cat_number" op="--" />, <mt:setVar name="tmp" value="$level" /><mt:setVar name="tmp" op="--" /><mt:getVar name="tree[$tmp]" op="--" />,'<mt:categoryLabel escape="html" /><mt:if tag="CategoryCount"> [<$mt:CategoryCount$>]</mt:if> <span class="new"><mt:entries lastn="1"><mt:entryDate format="%Y:%m:%d:%H:%M:%S" /></mt:entries></span>','<mt:if tag="CategoryCount"><mt:categoryArchiveLink /><mt:else>javascript: void(0);</mt:if>');
</mt:if>
<mt:setVar name="level" op="++" />
<mt:subCatsRecurse />
<mt:setVar name="level" op="--" />
</mt:topLevelCategories>
document.write(d);
</script>
</div>
<p style="text-align:center"><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
 
<script type="text/javascript">
<!--
// passage time
var pass = 24;
 
// display content
var content = 'New!!';
 
var currentDate = new Date(); 
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
    if (spans[i].getAttribute('class') == 'new' ||
        spans[i].getAttribute('className') == 'new') {
        if (spans[i].childNodes[0]) {
            time = spans[i].childNodes[0].nodeValue.split(":");
            var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
            var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000); 
            now = Math.ceil(now);
            if(-now <= pass){
                spans[i].innerHTML = content;
                spans[i].style.display = 'inline';
            }
        }
    }
}
//-->
</script>

dTree サブカテゴリーリスト + 新着表示 for Movable Type」のふたつめのリストは、次の内容に変更してください。

<script type="text/javascript">
d = new dTree('d');
d.config.useCookies=false;
d.add(0, -1,'Categories','javascript: void(0);');
<mt:setVar name="cat_number" value="1" />
<mt:setVar name="level" value="1" />
<mt:topLevelCategories>
<mt:setVar name="cat_number" op="++" />
<mt:setVar name="tree[$level]" value="$cat_number" />
<mt:if name="level" eq="1">
  d.add(<mt:getVar name="cat_number" op="--" />, 0,'<mt:categoryLabel escape="html" /><mt:if tag="CategoryCount"> [<$mt:CategoryCount$>]</mt:if>','<mt:if tag="CategoryCount"><mt:categoryArchiveLink /><mt:else>javascript: void(0);</mt:if>','<mt:entries lastn="1"><mt:entryDate format="%Y:%m:%d:%H:%M:%S" /></mt:entries>');
<mt:else>
  d.add(<mt:getVar name="cat_number" op="--" />, <mt:setVar name="tmp" value="$level" /><mt:setVar name="tmp" op="--" /><mt:getVar name="tree[$tmp]" op="--" />,'<mt:categoryLabel escape="html" /><mt:if tag="CategoryCount"> [<$mt:CategoryCount$>]</mt:if> ','<mt:if tag="CategoryCount"><mt:categoryArchiveLink /><mt:else>javascript: void(0);</mt:if>','<mt:entries lastn="1"><mt:entryDate format="%Y:%m:%d:%H:%M:%S" /></mt:entries>');
</mt:if>
<mt:setVar name="level" op="++" />
<mt:subCatsRecurse />
<mt:setVar name="level" op="--" />
</mt:topLevelCategories>
document.write(d);
</script>
</div>
<p style="text-align:center"><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
 
<script type="text/javascript">
<!--
// passage time
var pass = 24;
 
// display content
var content = 'New!!';
 
var currentDate = new Date(); 
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
    if (spans[i].getAttribute('class') == 'new' ||
        spans[i].getAttribute('className') == 'new') {
        if (spans[i].childNodes[0]) {
            time = spans[i].childNodes[0].nodeValue.split(":");
            var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
            var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000); 
            now = Math.ceil(now);
            if(-now <= pass){
                spans[i].innerHTML = content;
                spans[i].style.display = 'inline';
            }
        }
    }
}
//-->
</script>
Comments [0] | Trackbacks [0]
2009年1月15日

dTree サブカテゴリーリスト + 新着表示 for Movable Type

January 15,2009 12:55 AM
Tag:[, , ]
Permalink

dTree」というエクスプローラー風のツリー表示スクリプトを利用した、Movable Type のサブカテゴリーリストのツリー化カスタマイズを、下記のエントリーで以前紹介しました。

今回は、ご要望を頂き、dTree サブカテゴリーリストに新着表示を組み合わせてみました。このカスタマイズを行なえば、次のように新着ブログ記事のあるカテゴリーに対し「New!」マークを表示します。

なお、このカスタマイズでは、dTree の処理上、新着マークにアンカーがついてしまいます。

そこで、JavaScript を改変して、新着マークにアンカーを表示しない方法も併せて紹介します。

なお、以下のカスタマイズを行なう前に「dTree によるサブカテゴリーリスト for Movable Type」の4項までの作業を事前に行なってください。

また、新着表示についての詳細は「新着エントリーのあるカテゴリーに New マークをつける」を参照してください(リンク先のカスタマイズを行なう必要はありません)。

1.新着マークにアンカーをついたままにする

サブカテゴリーリストに次の内容を適用してください。これで再構築すれば新着マークが表示されます。デフォルトの設定では24時間以内の投稿に新着マークを表示します。

<script type="text/javascript">
d = new dTree('d');
d.config.useCookies=false;
d.add(0, -1,'Categories','javascript: void(0);');
<mt:setVar name="cat_number" value="1" />
<mt:setVar name="level" value="1" />
<mt:topLevelCategories>
<mt:setVar name="cat_number" op="++" />
<mt:setVar name="tree[$level]" value="$cat_number" />
<mt:if name="level" eq="1">
  d.add(<mt:getVar name="cat_number" op="--" />, 0,'<mt:categoryLabel escape="html" /> <span class="new"><mt:entries lastn="1"><mt:entryDate format="%Y:%m:%d:%H:%M:%S" /></mt:entries></span>','<mt:if tag="CategoryCount"><mt:categoryArchiveLink /><mt:else>javascript: void(0);</mt:if>');
<mt:else>
  d.add(<mt:getVar name="cat_number" op="--" />, <mt:setVar name="tmp" value="$level" /><mt:setVar name="tmp" op="--" /><mt:getVar name="tree[$tmp]" op="--" />,'<mt:categoryLabel escape="html" /> <span class="new"><mt:entries lastn="1"><mt:entryDate format="%Y:%m:%d:%H:%M:%S" /></mt:entries></span>','<mt:if tag="CategoryCount"><mt:categoryArchiveLink /><mt:else>javascript: void(0);</mt:if>');
</mt:if>
<mt:setVar name="level" op="++" />
<mt:subCatsRecurse />
<mt:setVar name="level" op="--" />
</mt:topLevelCategories>
document.write(d);
</script>
</div>
<p style="text-align:center"><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
 
<script type="text/javascript">
<!--
// passage time
var pass = 24;
 
// display content
var content = 'New!!';
 
var currentDate = new Date(); 
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
    if (spans[i].getAttribute('class') == 'new' ||
        spans[i].getAttribute('className') == 'new') {
        if (spans[i].childNodes[0]) {
            time = spans[i].childNodes[0].nodeValue.split(":");
            var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
            var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000); 
            now = Math.ceil(now);
            if(-now <= pass){
                spans[i].innerHTML = content;
                spans[i].style.display = 'inline';
            }
        }
    }
}
//-->
</script>

2.新着マークにアンカーをつけずに表示する

まず、dtree.js に下記のパッチをあてます。「パッチが分からない」とか、うまくいかない場合はこの先を読んでください。

--- dtree.js.bak   Tue Jan 06 00:00:25 2009
+++ dtree.js       Tue Jan 06 00:00:40 2009
@@ -22,7 +22,7 @@
 
 // Node object
 
-function Node(id, pid, name, url, title, target, icon, iconOpen, open) {
+function Node(id, pid, name, url, mark, title, target, icon, iconOpen, open) {
 
        this.id = id;
 
@@ -32,6 +32,8 @@
 
        this.url = url;
 
+       this.mark = mark;
+
        this.title = title;
 
        this.target = target;
@@ -134,9 +136,9 @@
 
 // Adds a new node to the node array
 
-dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) {
+dTree.prototype.add = function(id, pid, name, url, mark, title, target, icon, iconOpen, open) {
 
-       this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, title, target, icon, iconOpen, open);
+       this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, mark, title, target, icon, iconOpen, open);
 
 };
 
@@ -285,6 +287,8 @@
        str += node.name;
 
        if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>';
+
+       if (node.mark) str += '<span class="new">' + node.mark + '</span>';
 
        str += '</div>';

直接 dtree.js をエディタ上で編集する場合は、下記の青色部分を追加してください。

...前略...
// Node object
function Node(id, pid, name, url, mark, title, target, icon, iconOpen, open) {
        this.id = id;
        this.pid = pid;
        this.name = name;
        this.url = url;
        this.mark = mark;
        this.title = title;
...中略...
// Adds a new node to the node array
dTree.prototype.add = function(id, pid, name, url, mark, title, target, icon, iconOpen, open) {
        this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, mark, title, target, icon, iconOpen, open);
};
...中略...
// Creates the node icon, url and text
dTree.prototype.node = function(node, nodeId) {
...中略...
        str += node.name;
        if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>';
        if (node.mark) str += '<span class="new">' + node.mark + '</span>';
        str += '</div>';
        if (node._hc) {
...中略...

そして、サブカテゴリーリストに次の内容を適用してください。これで再構築すれば新着マークが表示されます。デフォルトの設定では24時間以内の投稿に新着マークを表示します。

<script type="text/javascript">
d = new dTree('d');
d.config.useCookies=false;
d.add(0, -1,'Categories','javascript: void(0);');
<mt:setVar name="cat_number" value="1" />
<mt:setVar name="level" value="1" />
<mt:topLevelCategories>
<mt:setVar name="cat_number" op="++" />
<mt:setVar name="tree[$level]" value="$cat_number" />
<mt:if name="level" eq="1">
  d.add(<mt:getVar name="cat_number" op="--" />, 0,'<mt:categoryLabel escape="html" />','<mt:if tag="CategoryCount"><mt:categoryArchiveLink /><mt:else>javascript: void(0);</mt:if>','<mt:entries lastn="1"><mt:entryDate format="%Y:%m:%d:%H:%M:%S" /></mt:entries>');
<mt:else>
  d.add(<mt:getVar name="cat_number" op="--" />, <mt:setVar name="tmp" value="$level" /><mt:setVar name="tmp" op="--" /><mt:getVar name="tree[$tmp]" op="--" />,'<mt:categoryLabel escape="html" />','<mt:if tag="CategoryCount"><mt:categoryArchiveLink /><mt:else>javascript: void(0);</mt:if>','<mt:entries lastn="1"><mt:entryDate format="%Y:%m:%d:%H:%M:%S" /></mt:entries>');
</mt:if>
<mt:setVar name="level" op="++" />
<mt:subCatsRecurse />
<mt:setVar name="level" op="--" />
</mt:topLevelCategories>
document.write(d);
</script>
</div>
<p style="text-align:center"><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
 
<script type="text/javascript">
<!--
// passage time
var pass = 24;
 
// display content
var content = 'New!!';
 
var currentDate = new Date(); 
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
    if (spans[i].getAttribute('class') == 'new' ||
        spans[i].getAttribute('className') == 'new') {
        if (spans[i].childNodes[0]) {
            time = spans[i].childNodes[0].nodeValue.split(":");
            var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
            var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000); 
            now = Math.ceil(now);
            if(-now <= pass){
                spans[i].innerHTML = content;
                spans[i].style.display = 'inline';
            }
        }
    }
}
//-->
</script>
Comments [3] | Trackbacks [0]
2008年12月 5日

特定のカテゴリーに属するブログ記事一覧を表示する(改)

Movable Type で、特定のカテゴリーに属するブログ記事一覧を表示するカスタマイズです。

MTEntries タグに category モディファイアを適用するだけでは適正に取得できないケースを、テンプレートタグのカスタマイズによって実現します。

1.MTEntries タグの category/categories モディファイアについて

MTEntries タグには category/categories モディファイアがあり、モディファイアに指定したカテゴリーのブログ記事を取得できます。

ただし、次のようなカテゴリーで、トップカテゴリーの「お知らせ」カテゴリーだけに属するブログ記事を抽出したいと仮定します。

・お知らせ
・イベントA
  └ お知らせ
・イベントB
  └ お知らせ

この場合、次のテンプレートタグでは、イベントAやイベントBの「お知らせ」カテゴリーに属するブログ記事も対象になってしまいます。

<mt:entries category="お知らせ">
...中略...
</mt:entries>

具体例として、前述の各「お知らせ」カテゴリーに次のブログ記事が属しているとします(●印)。

・お知らせ
 ●モバイルサイトオープン
 ●業務提携に関するお知らせ
・イベントA
  └ お知らせ
    ●ソリューションセミナー
    ●Movable Type 入門セミナー
・イベントB
  └ お知らせ
    ●オフィシャルサイトオープン
    ●シンポジウム2008
    ●ホームページリニューアル

サイドバーに表示する「最近のブログ記事」の MTEntries タグに category モディファイアを適用して「お知らせ」を設定すると、次のように表示されます。

最近のブログ記事

余談ですが、イベントAの「お知らせ」カテゴリーに属するブログ記事を抽出したい場合、次のように指定しても、適正に取得できないようです。

<mt:entries category="イベントA/お知らせ">
...中略...
</mt:entries>

2.動作確認バージョン

このカスタマイズは次のバージョンで確認しています。

  • Movable Type 4.2x(~4.23)

3.カスタマイズ

サイドバーに設置する場合、次のサブテンプレートを利用してください。

デフォルトテンプレート用

<mt:setVar name="category" value="取得したいブログ記事のカテゴリ名" />
<mt:if tag="blogEntryCount">
<div class="widget-recent-entries widget-archives widget">
  <h3 class="widget-header">最近のブログ記事</h3>
  <div class="widget-content">
    <ul>
</mt:if>
<mt:entries category="$category">
  <mt:setVar name="undef(list)" />
  <mt:setVar name="count" value="0" />
  <mt:entryCategories>
    <mt:setVarBlock name="list" index="$count"><mt:parentCategories glue="/"><mt:categoryLabel /></mt:parentCategories></mt:setVarBlock>
    <mt:setVar name="count" op="++" />
  </mt:entryCategories>
  <mt:setVar name="category_flag" value="0" />
  <mt:loop name="list">
    <mt:if name="__value__" eq="$category">
      <mt:setVar name="category_flag" value="1" />
    </mt:if>
  </mt:loop>
  <mt:if name="category_flag">
      <li><a href="<mt:entryPermalink escape="html" valid_html="1">"><mt:entryTitle /></a></li>
  </mt:if>
</mt:entries>
<mt:if tag="blogEntryCount">
    </ul>
  </div>
</div>
</mt:if>

小粋空間テンプレート用

<mt:setVar name="category" value="取得したいブログ記事のカテゴリ名" />
<mt:if tag="blogEntryCount">
<dt class="sidetitle">最近のブログ記事</dt>
<dd class="side">
  <ul>
</mt:if>
<mt:entries category="$category">
  <mt:setVar name="undef(list)" />
  <mt:setVar name="count" value="0" />
  <mt:entryCategories>
    <mt:setVarBlock name="list" index="$count"><mt:parentCategories glue="/"><mt:categoryLabel /></mt:parentCategories></mt:setVarBlock>
    <mt:setVar name="count" op="++" />
  </mt:entryCategories>
  <mt:setVar name="category_flag" value="0" />
  <mt:loop name="list">
    <mt:if name="__value__" eq="$category">
      <mt:setVar name="category_flag" value="1" />
    </mt:if>
  </mt:loop>
  <mt:if name="category_flag">
    <li><a href="<mt:entryPermalink escape="html" valid_html="1">"><mt:entryTitle /></a></li>
  </mt:if>
</mt:entries>
<mt:if tag="blogEntryCount">
  </ul>
</dd>
</mt:if>

このサブテンプレートを利用することで、先のサンプルを次のように表示させることができます。

最近のブログ記事(修正後)

4.サブテンプレートの解説

上記のサブテンプレートについて、必要な部分のみ抜粋して解説します。

01:<mt:setVar name="category" value="取得したいブログ記事のカテゴリ名" />
02:<mt:if tag="blogEntryCount">
03:<ul>
04:</mt:if>
05:<mt:entries category="$category">
06:  <mt:setVar name="undef(list)" />
07:  <mt:setVar name="count" value="0" />
08:  <mt:entryCategories>
09:    <mt:setVarBlock name="list" index="$count"><mt:parentCategories glue="/"><mt:categoryLabel /></mt:parentCategories></mt:setVarBlock>
10:    <mt:setVar name="count" op="++" />
11:  </mt:entryCategories>
12:  <mt:setVar name="category_flag" value="0" />
13:  <mt:loop name="list">
14:    <mt:if name="__value__" eq="$category">
15:      <mt:setVar name="category_flag" value="1" />
16:    </mt:if>
17:  </mt:loop>
18:  <mt:if name="category_flag">
19:  <li><a href="<mt:entryPermalink escape="html" valid_html="1">"><mt:entryTitle /></a></li>
20:  </mt:if>
21:</mt:entries>
22:<mt:if tag="blogEntryCount">
23:</ul>
24:</mt:if>

1行目の value モディファイアの値(赤色部分)に抽出したいカテゴリー名を設定します。冒頭のカテゴリー一覧から「お知らせ」を抽出したい場合は次のように記述します。

<mt:setVar name="category" value="お知らせ" />

サブカテゴリーを指定したい場合は、カテゴリーの区切り文字を "/" にします。例えば冒頭のカテゴリー一覧からイベントAの「お知らせ」を抽出したい場合は、次のように設定します。

<mt:setVar name="category" value="イベントA/お知らせ" />

2~4行目の MTIf タグで ul 要素の開始タグを出力します。また、22~24行目の MTIf タグで ul 要素の終了タグを出力します。

<mt:if tag="blogEntryCount">
<ul>
</mt:if>
...中略...
<mt:if tag="blogEntryCount">
</ul>
</mt:if>

本来は MTEntries タグ内に MTEntriesHeader タグ・MTEntriesFooter タグを使用して、初回の繰り返しで ul 要素の開始タグ、繰り返しの最後で ul 要素の終了タグを出力するのですが、このサブテンプレートでは MTEntriesFooter タグが正常に動作せず、初回のブログ記事の処理で実行されてしまいます。原因は MTEntries タグの中で色々なテンプレートタグを使っていて、 MTEntriesFooter タグを判定するデータが上書きされてしまっていると推測します。したがってMTEntriesFooter タグは使用せず、MTEntries タグの外側でMTIf タグで ul 要素の終了タグを出力します。それに併せて、MTEntriesHeader タグも使用していない、ということです。

5行目~21行目で MTEntries タグのループがあります。category モディファイアには、1行目で設定した変数 category を設定します。

<mt:entries category="$category">
...中略...
</mt:entries>

6~7行目で利用する変数の初期化を行います。

<mt:setVar name="undef(list)" />
<mt:setVar name="count" value="0" />

配列変数 list は、ブログ記事に属するすべてのカテゴリ名を保持するもので、count は配列変数 list のインデックス用カウンタです。いずれも処理対象のブログ記事が切り替わった時点で初期化します。配列変数 list は初期化しないと、例えば前回の処理でインデックス値 3 まで設定され、今回の処理でインデックス値 2 までしか使われなかったら、前回のインデックス値 3 が処理対象となってしまいます。
なお、undef 関数の場合、MTSetVar タグでも value モディファイアの設定は不要です。

8~11行目で、あるブログ記事が属するすべてのカテゴリーを変数 list に保持します。

<mt:entryCategories>
  <mt:setVarBlock name="list" index="$count"><mt:parentCategories glue="/"><mt:categoryLabel /></mt:parentCategories></mt:setVarBlock>
  <mt:setVar name="count" op="++" />
</mt:entryCategories>

8行目の MTEntryCategories タグで、ブログ記事が属するすべてのカテゴリー分、繰り返し処理を行います。ブロック内でカテゴリー名を取得しますが、その時、さらに MTParentCategories タグを用いて、処理対象のカテゴリーについて、親カテゴリーからのすべてのカテゴリ名を取得します。親カテゴリーから現在のカテゴリーまでの区切り文字は glue モディファイアを使って "/" を与えます。10行目の MTSetVar タグでは、変数 count の値をインクリメントし、次のカテゴリーの処理のためにインデックス値を更新します。

12~17行目は、設定した配列変数 list に、1行目で設定したカテゴリー名と同じカテゴリー名があることをチェックします。

<mt:setVar name="category_flag" value="0" />
<mt:loop name="list">
  <mt:if name="__value__" eq="$category">
    <mt:setVar name="category_flag" value="1" />
  </mt:if>
</mt:loop>

12行目はチェック処理で利用する変数 flag を初期化します。13~17行目の MTLoop タグで配列変数 list を指定し、14行目で配列変数の値 __value__ と変数 category を比較します。等しければ、変数 flag に 1 を設定します。

18~20行目で変数 flag を判定し、1であれば(=1行目の変数 category に設定したカテゴリーがブログ記事に設定されていれば)ブログ記事タイトルを出力します。

<mt:if name="category_flag">
<li><a href="<mt:entryPermalink escape="html" valid_html="1">"><mt:entryTitle /></a></li>
</mt:if>
Comments [5] | Trackbacks [3]
2008年11月18日

ブログ記事に同一カテゴリーのブログ記事の前後リンクを表示する(Movable Type 4.2/Movable Type 5対応)

November 18,2008 12:55 AM
Tag:[, , , ]
Permalink

ブログ記事に同一カテゴリーのブログ記事の前後リンクを表示する」の Movable Type 4.2 版のプラグインを公開します。

元記事の内容は Movable Type 4.1 の内容であり、Movable Type 4.2 では前後リンクが正常に表示されない場合があります。

2009.01.05 追記:Movable Type 5.0 で動作することを確認しました。

1.プラグインの概要

下の画面(元記事の再掲)のブログ記事タイトル上にある前後リンクは、分かりにくいですが、同一カテゴリーのブログ記事です。

ブログ記事に同一カテゴリーのブログ記事の前後リンクを表示する」では、元のプラグイン「Previous and next in category」を修正する形で書いてましたが、修正箇所が多いため、プラグインファイルで公開します(ファイル内に元プラグインの著者を掲載しています)。

このプラグインは Movable Type 4.1 / 4.2 / 5.0 で動作することを確認しています。

2.PreviousNextInCategory プラグインのダウンロード

下記の PreviousNextInCategory.zip をクリックして、プラグインアーカイブをダウンロード。

PreviousNextInCategory.zip

3.PreviousNextInCategory プラグインのアップロード・インストール

プラグインアーカイブを展開し、中にある PreviousNextInCategory フォルダごと、Movable Type のアプリケーションディレクトリの plugins ディレクトリにアップロード。

システム管理画面のプラグイン一覧で、「PreviousNextInCategory ~」が表示されればインストール完了です。

プラグイン一覧

4.プライマリカテゴリーに属するブログ記事のみを表示する場合

ブログ記事アーカイブの任意の位置に下記のサブテンプレートを設定してください。

<MTEntryPreviousInCategory>
<a href="<$MTEntryPermalink$>">« <$MTEntryTitle$></a> | 
</MTEntryPreviousInCategory>
<a href="<$MTEntryPermalink archive_type="Category"$>"><$MTEntryCategory$></a>
<MTEntryNextInCategory>
 | <a href="<$MTEntryPermalink$>"><$MTEntryTitle$> »</a>
</MTEntryNextInCategory>

ブログ記事アーカイブを再構築すれば、冒頭のように、同一カテゴリーの前後記事リンクが表示されます。

5.ブログ記事に登録されているすべてのカテゴリーに属するブログ記事を表示する場合

ブログ記事アーカイブの任意の位置に、下記のサブテンプレートを設定してください。

<MTEntryCategories>
<p>
<MTEntryPreviousInCategory>
<a href="<$MTEntryPermalink$>">« <$MTEntryTitle$></a> | 
</MTEntryPreviousInCategory>
<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a>
<MTEntryNextInCategory>
 | <a href="<$MTEntryPermalink$>"><$MTEntryTitle$> »</a>
</MTEntryNextInCategory>
</p>
</MTEntryCategories>

ブログ記事アーカイブを再構築すれば、ブログ記事が属する全カテゴリーの前後記事リンクが表示されます。

6.元プラグインの変更点

一応、元プラグイン PreviousNextInCategory.pl の変更点を掲載しておきます。実際にはこの修正に加えて、ブログ記事が再構築されたときに同一カテゴリーの前後記事を再構築する処理も追加しています。

ブログ記事に同一カテゴリーのブログ記事の前後リンクを表示する」での変更(青色部分を追加)

sub _hdlr_entry_previous_in_category {
    my($ctx, $args, $cond) = @_;
    my $e = $ctx->stash('entry')
        or return $ctx->_no_entry_error('MTEntryPrevious');
    my $cat = $e->category
            or return '';
    if($ctx->stash('category') ne '') {
        $cat = $ctx->stash('category');
    }
    my $prev = $e->previous(1);
    my $res = '';
        while ($prev && !$prev->is_in_category($cat)){
            $prev = $prev->previous(1);
    }
    if ($prev) {
        my $builder = $ctx->stash('builder');
        local $ctx->{__stash}->{entry} = $prev;
        local $ctx->{current_timestamp} = $prev->created_on;
        my %cond = %$cond;
        $cond{EntryIfAllowComments} = $prev->allow_comments;
        $cond{EntryIfCommentsOpen} = $prev->allow_comments eq '1';
        $cond{EntryIfAllowPings} = $prev->allow_pings;
        $cond{EntryIfExtended} = $prev->text_more ? 1 : 0;
        my $out = $builder->build($ctx, $ctx->stash('tokens'), \%cond);
        return $ctx->error( $builder->errstr ) unless defined $out;
        $res .= $out;
    }
    $res;
}
sub _hdlr_entry_next_in_category {
    my($ctx, $args, $cond) = @_;
    my $e = $ctx->stash('entry')
        or return $ctx->_no_entry_error('MTEntryNext');
    my $cat = $e->category
            or return '';
    if($ctx->stash('category') ne '') {
        $cat = $ctx->stash('category');
    }
    my $next = $e->next(1);
    my $res = '';
        while ($next && !$next->is_in_category($cat)){
            $next = $next->next(1);
    }
    if ($next) {
        my $builder = $ctx->stash('builder');
        local $ctx->{__stash}->{entry} = $next;
        local $ctx->{current_timestamp} = $next->created_on;
        my %cond = %$cond;
        $cond{EntryIfAllowComments} = $next->allow_comments;
        $cond{EntryIfCommentsOpen} = $next->allow_comments eq '1';
        $cond{EntryIfAllowPings} = $next->allow_pings;
        $cond{EntryIfExtended} = $next->text_more ? 1 : 0;
        my $out = $builder->build($ctx, $ctx->stash('tokens'), \%cond);
        return $ctx->error( $builder->errstr ) unless defined $out;
        $res .= $out;
    }
    $res;
}

4.2 対応の変更(赤色が 4.1 までの追加部分で、青色部分をさらに追加)

sub _hdlr_entry_previous_in_category {
    my($ctx, $args, $cond) = @_;
    my $e = $ctx->stash('entry')
        or return $ctx->_no_entry_error('MTEntryPrevious');
    my $cat = $e->category
            or return '';
    if($ctx->stash('category') ne '') {
        $cat = $ctx->stash('category');
    }
    my $terms;
    $terms->{category_id} = $cat->id;
    my $prev = $e->previous(1, $terms);
    my $res = '';
        while ($prev && !$prev->is_in_category($cat)){
            $terms->{category_id} = $cat->id;
            $prev = $prev->previous(1, $terms);
    }
    if ($prev) {
        my $builder = $ctx->stash('builder');
        local $ctx->{__stash}->{entry} = $prev;
        local $ctx->{current_timestamp} = $prev->created_on;
        my %cond = %$cond;
        $cond{EntryIfAllowComments} = $prev->allow_comments;
        $cond{EntryIfCommentsOpen} = $prev->allow_comments eq '1';
        $cond{EntryIfAllowPings} = $prev->allow_pings;
        $cond{EntryIfExtended} = $prev->text_more ? 1 : 0;
        my $out = $builder->build($ctx, $ctx->stash('tokens'), \%cond);
        return $ctx->error( $builder->errstr ) unless defined $out;
        $res .= $out;
    }
    $res;
}
sub _hdlr_entry_next_in_category {
    my($ctx, $args, $cond) = @_;
    my $e = $ctx->stash('entry')
        or return $ctx->_no_entry_error('MTEntryNext');
    my $cat = $e->category
            or return '';
    if($ctx->stash('category') ne '') {
        $cat = $ctx->stash('category');
    }
    my $terms;
    $terms->{category_id} = $cat->id;
    my $next = $e->next(1, $terms);
    my $res = '';
        while ($next && !$next->is_in_category($cat)){
            $terms->{category_id} = $cat->id;
            $next = $next->next(1, $terms);
    }
 
    if ($next) {
        my $builder = $ctx->stash('builder');
        local $ctx->{__stash}->{entry} = $next;
        local $ctx->{current_timestamp} = $next->created_on;
        my %cond = %$cond;
        $cond{EntryIfAllowComments} = $next->allow_comments;
        $cond{EntryIfCommentsOpen} = $next->allow_comments eq '1';
        $cond{EntryIfAllowPings} = $next->allow_pings;
        $cond{EntryIfExtended} = $next->text_more ? 1 : 0;
        my $out = $builder->build($ctx, $ctx->stash('tokens'), \%cond);
        return $ctx->error( $builder->errstr ) unless defined $out;
        $res .= $out;
    }
    $res;
}
Comments [5] | Trackbacks [4]
2008年7月18日

カテゴリークラウド for Movable Type

July 18,2008 1:35 AM
Tag:[, , ]
Permalink

Movable Type のカテゴリーをタグクラウドっぽく表示するカスタマイズです。カテゴリーに属するブログ記事数に応じて、カテゴリ名のフォントサイズなどを変化させます。

このカスタマイズは Ogawa::Memoranda さんの下記の記事に掲載されているスクリプトを利用しています。

Ogawa::Memoranda - TagwireでTagCloud

カスタマイズ方法は、上記のエントリーに掲載されているタグ表示用のサブテンプレート(下)

...前略...
<MTTags>
<li title="<$MTTag$>:<$MTTagCount$>:<$MTTagDate format="%Y-%m-%d"$>"><a
 title="Tag: <$MTTag$>" 
 href="<$MTBlogURL$>tag/<$MTTag encode_url="1"$>"><$MTTag$></a></li>
</MTTags>
...後略...

を、次の内容に入れ替えて、テンプレートの任意の位置に貼り付けてください。

...前略...
<mt:Categories>
<li title="<mt:CategoryLabel />:<mt:CategoryCount />:<mt:Entries lastn="1"><mt:EntryModifiedDate format="%Y-%m-%d" />"></mt:Entries><a
 title="Category: <mt:ParentCategories glue="/"><mt:CategoryLabel /></mt:ParentCategories>" 
 href="<mt:CategoryArchiveLink />"><mt:CategoryLabel /></a></li>
</mt:Categories>
...後略...
バージョン3 をお使いであれば、次のサブテンプレートをお使いください。
...前略...
<MTCategories>
<li title="<$MTCategoryLabel$>:<$MTCategoryCount$>:<MTEntries lastn="1"><$MTEntryModifiedDate format="%Y-%m-%d"$>"></MTEntries><a
 title="Category: <MTParentCategories glue="/"><$MTCategoryLabel$></MTParentCategories>" 
 href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a></li>
</MTCategories>
...後略...

サブカテゴリーに同じ名称のカテゴリーがあると、同名のカテゴリーが連続して表示されるのが欠点です。その場合、リンクのツールチップに親カテゴリーを含めて表示するようにしています。

サンプルとして、このブログのカテゴリークラウドは次のようになりました。

サンプル
Comments [0] | Trackbacks [0]
2008年5月 9日

カテゴリーの階層別にデザインを切り替える for Movable Type 4

May 9,2008 12:03 AM
Tag:[, ]
Permalink

カテゴリーの階層別にデザインを切り替えるカスタマイズです。ポイントは「MTElseタグを使わない(使えない)」ということです。

参考記事は下記です。ありがとうございました。

アフィリエイトを続ける力 - MT条件分岐:親カテゴリーと子カテゴリーで表示を変える方法

以下に示すサブテンプレートは、ブログ記事リストへの設定を前提にしています。各サブテンプレートの一番外側のifタグは、ブログ記事リストでカテゴリーアーカイブと他のアーカイブを併用している場合を考慮したものです。

2階層の場合(パターン1)

<mt:if name="category_archive">
<MTHasParentCategory>
子カテゴリーのサブテンプレート
</MTHasParentCategory>
<MTHasNoParentCategory>
親カテゴリーのサブテンプレート
</MTHasNoParentCategory>
</mt:if>

2階層の場合(パターン2)

<mt:if name="category_archive">
<MTHasSubCategories>
  親カテゴリーのサブテンプレート
</MTHasSubCategories>
<MTHasNoSubCategories>
  子カテゴリーのサブテンプレート
</MTHasNoSubCategories>
</mt:if>

3階層の場合(パターン1)

<mt:if name="category_archive">
<MTHasSubCategories>
  <MTHasNoParentCategory>
  親カテゴリーのサブテンプレート
  </MTHasNoParentCategory>
  <MTHasParentCategory>
  子カテゴリーのサブテンプレート
  </MTHasParentCategory>
</MTHasSubCategories>
<MTHasNoSubCategories>
  孫カテゴリーのサブテンプレート
</MTHasNoSubCategories>
</mt:if>

3階層の場合(パターン2)

<mt:if name="category_archive">
<MTHasParentCategory>
  <MTHasSubCategories>
  子カテゴリーのサブテンプレート
  </MTHasSubCategories>
  <MTHasNoSubCategories>
  孫カテゴリーのサブテンプレート
  </MTHasNoSubCategories>
</MTHasParentCategory>
<MTHasNoParentCategory>
  親カテゴリーのサブテンプレート
</MTHasNoParentCategory>
</mt:if>

4階層の場合

<mt:if name="category_archive">
<MTHasSubCategories>
  <MTHasNoParentCategory>
  階層1カテゴリーのサブテンプレート
  </MTHasNoParentCategory>
  <MTHasParentCategory>
    <MTParentCategory>
      <MTHasParentCategory>
      階層3カテゴリーのサブテンプレート
      </MTHasParentCategory>
      <MTHasNoParentCategory>
      階層2カテゴリーのサブテンプレート
      </MTHasNoParentCategory>
    </MTParentCategory>
  </MTHasParentCategory>
</MTHasSubCategories>
<MTHasNoSubCategories>
  階層4カテゴリーのサブテンプレート
</MTHasNoSubCategories>
</mt:if>

次回はプラグインもしくは制御タグによる階層判定を行います。

Comments [4] | Trackbacks [0]
2008年5月 7日

カテゴリーリストの中に月別カテゴリーリストを表示する

May 7,2008 1:55 AM
Tag:[, , ]
Permalink

カテゴリーリストと、そのカテゴリーがもつ月別カテゴリーリストを同時に表示するカスタマイズです。

カテゴリーリストの中に月別カテゴリーリスト

カテゴリーリストはサブカテゴリーリストでも可能です。

カテゴリーリストの中に月別カテゴリーリスト

カテゴリーリストの表示件数を絞り、かつ表示月が少ない場合に有効です。また、月別カテゴリーが有効になっていない場合は月別カテゴリーリストを表示しません。

デフォルトテンプレート(ウィジェット)+カテゴリーリスト

<MTIfArchiveTypeEnabled archive_type="Category">
<div class="widget-archive widget-archive-category widget">
  <h3 class="widget-header">カテゴリ</h3>
  <div class="widget-content"><ul class="widget-list">
  <MTCategories>
    <MTIfNonZero tag="MTCategoryCount">
    <li class="widget-list-item"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><$MTCategoryLabel$></a>
      <MTIfArchiveTypeEnabled archive_type="Category-Monthly">
        <MTArchiveList archive_type="Category-Monthly">
          <MTArchiveListHeader>
      <ul class="widget-list">
          </MTArchiveListHeader>
        <li class="widget-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle regex_replace="/.*: /",""$></a> [<$MTArchiveCount$>]</li>
          <MTArchiveListFooter>
      </ul>
          </MTArchiveListFooter>
        </MTArchiveList>
      </MTIfArchiveTypeEnabled>
    <MTElse>
    <li class="widget-list-item"><$MTCategoryLabel$>
    </MTIfNonZero>
    </li>
  </MTCategories>
  </div>
</div>
</MTIfArchiveTypeEnabled>

デフォルトテンプレート(ウィジェット)+サブカテゴリーリスト

<MTIfArchiveTypeEnabled archive_type="Category">
<div class="widget-archive widget-archive-category widget">
  <h2 class="widget-header">カテゴリ</h2>
  <div class="widget-content">
  <MTTopLevelCategories>
    <MTSubCatIsFirst>
    <ul class="widget-list">
    </MTSubCatIsFirst>
    <MTIfNonZero tag="MTCategoryCount">
      <li class="widget-list-item"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><$MTCategoryLabel$></a>
      <MTIfArchiveTypeEnabled archive_type="Category-Monthly">
        <MTArchiveList archive_type="Category-Monthly">
          <MTArchiveListHeader>
        <ul class="widget-list">
          </MTArchiveListHeader>
          <li class="widget-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
          <MTArchiveListFooter>
        </ul>
          </MTArchiveListFooter>
        </MTArchiveList>
      </MTIfArchiveTypeEnabled>
    <MTElse>
      <li class="widget-list-item"><$MTCategoryLabel$>
    </MTIfNonZero>
    <MTSubCatsRecurse>
      </li>
    <MTSubCatIsLast>
    </ul>
    </MTSubCatIsLast>
  </MTTopLevelCategories>
  </div>
</div>
</MTIfArchiveTypeEnabled>

そのうち折りたためるようにします。

Comments [0] | Trackbacks [0]
2008年4月23日

サブカテゴリーリストを定義型リストでマークアップする

April 23,2008 1:33 AM
Tag:[, , , ]
Permalink

Movable Type の、2階層のサブカテゴリーリストで、定義型リスト(dl/dt/dd:または定義リスト)によるマークアップを実現する方法です。ここでは Movable Type によるカスタマイズを記していますが、定義型リストの使い方の参考にもなると思います。

以前、ご質問を頂いたもので、本エントリーで情報展開しておきます。

1.完成例

親カテゴリーに dt 要素、子カテゴリーは全体を dd 要素で括った後、順不同リスト(ul/li)でリスト表示します。

<dl>
  <dt>親カテゴリーA</dt>
  <dd>
    <ul>
      <li>子カテゴリーA-1</li>
      <li>子カテゴリーA-2</li>
      <li>子カテゴリーA-3</li>
    </ul>
  </dd>
  <dt>親カテゴリーB</dt>
  <dd>
    <ul>
      <li>子カテゴリーB-1</li>
      <li>子カテゴリーB-2</li>
      <li>子カテゴリーB-3</li>
    </ul>
  </dd>
</dl>

ちなみに、上のリストを順不同リストで表現すると、次のようになります。

<ul>
  <li>親カテゴリーA
    <ul>
      <li>子カテゴリーA-1</li>
      <li>子カテゴリーA-2</li>
      <li>子カテゴリーA-3</li>
    </ul>
  </li>
</ul>
<ul>
  <li>親カテゴリーB
    <ul>
      <li>子カテゴリーB-1</li>
      <li>子カテゴリーB-2</li>
      <li>子カテゴリーB-3</li>
    </ul>
  </li>
</ul>

2.サブテンプレート

上記を実現するサブテンプレートは次のようになります。

<dl>
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasNoParentCategory><MTElse><dd><ul></MTHasNoParentCategory></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<MTHasNoParentCategory>
<dt><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]</dt>
<MTElse>
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
</MTHasNoParentCategory>
<MTElse>
<MTHasNoParentCategory>
<dt><MTCategoryLabel></dt>
<MTElse>
<li><MTCategoryLabel>
</MTHasNoParentCategory>
</MTIfNonZero>
<MTSubCatsRecurse>
<MTHasNoParentCategory>
<MTElse>
</li>
</MTHasNoParentCategory>
<MTSubCatIsLast><MTHasNoParentCategory><MTElse></ul></dd></MTHasNoParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</dl>

余談ですが、定義型リストによるマークアップは、以前行われた「コーディングコンテストVol.1」で最優秀賞を獲得された、「TOTOCO.ORG」さんのマークアップで利用されていて、審査員の方から「dl要素の使い方が良い」と、高い評価を受けています。

コーディングコンテストVol.1最優秀賞☆コーディングコンテストVol.1

下の画面がコンテストで最優秀賞を得たサイトです。ブラウザから[表示]-[ページのソース]でマークアップをみることができます。

最優秀賞☆コーディングコンテストVol.1

例えば、グローバルナビゲーションは次のようなマークアップです(一部省略しています)。

<dl id="globalNav">
  <dt>主なカテゴリー</dt>
  <dd>
    <ul>
      <li><a href="index.html"><img src="nav_home_cr.gif" alt="ホーム" width="98" height="54" /></a></li>
      <li><a href="service/index.html"><img src="nav_biz.gif" alt="事業内容" width="98" height="54" /></a></li>
      <li><a href="products/index.html"><img src="nav_products.gif" alt="製品情報" width="98" height="54" /></a></li>
      <li><a href="recruit/index.html"><img src="nav_recruit.gif" alt="採用情報" width="98" height="54" /></a></li>
      <li><a href="about/index.html"><img src="nav_about.gif" alt="会社概要" width="98" height="54" /></a></li>
      <li><a href="contact/index.html"><img src="nav_contact.gif" alt="お問い合わせ" width="99" height="54" /></a></li>
    </ul>
  </dd>
</dl>

dt 要素は、次のCSSで非表示になっています(セレクタ名は一部省略)。

dl#globalNav dt{
    position:absolute;
    overflow:hidden;
    width:0;
    height:0;
}

丁度この時執筆していた、「Movable Type WEBデザインの新しいルール」のグローバルナビゲーションのカスタマイズにも、この定義型リストによるマークアップを利用させていただきました。

Comments [0] | Trackbacks [0]
2008年3月26日

カテゴリーリストにカスタムフィールドの画像を表示する

March 26,2008 2:05 AM
Tag:[, , ]
Permalink

Movable Type のカテゴリーリストに、カスタムフィールドの画像を表示するカスタマイズです。
次のように、カテゴリー別の画像を簡単に与えることができます。

カテゴリーリストにカスタムフィールドの画像を表示

1.カスタムフィールドの作成

カテゴリーにカスタムフィールドを作成します。ここでは CategoryImage という名前のテンプレートタグにします。

カテゴリーリストにカスタムフィールドの画像を表示

2.カテゴリーに画像の追加

各カテゴリーに表示されている「Imageを選択」をクリックして、画像を追加します。

カテゴリーリストにカスタムフィールドの画像を表示

画像を選択した後、必ず保存をクリックしてください。何回か試して正常に表示されないことがあったのですが、どうも保存をクリックするのを忘れていたようです。

カテゴリーリストにカスタムフィールドの画像を表示

3.サブテンプレートの追加

冒頭のサンプルは、デフォルトテンプレートのサイドバーに下記のサブテンプレートを追加しました。階層表示でない、MTCategories タグを久しぶりに使ってみました。

青色部分がカスタムフィールド用タグです。

<mt:IfArchiveTypeEnabled archive_type="Category">
<div class="widget-archive widget-archive-category widget">
  <h3 class="widget-header">カテゴリ</h3>
  <div class="widget-content">
    <ul class="widget-list">
    <mt:Categories>
      <mt:ifNonZero tag="mt:CategoryCount">
      <li class="widget-list-item"><MTCategoryImageAsset><img src="<$MTAssetURL$>" style="vertical-align:middle" /> </MTCategoryImageAsset><a href="<$mt:CategoryArchiveLink$>"<mt:IfNonEmpty tag="mt:CategoryDescription"> title="<$mt:CategoryDescription$>"</mt:IfNonEmpty>><$mt:CategoryLabel$> (<$mt:CategoryCount$>)</a>
      <mt:else>
      <li class="widget-list-item"><MTCategoryImageAsset><img src="<$MTAssetURL$>" style="vertical-align:middle" /> </MTCategoryImageAsset><$mt:CategoryLabel$>
      </mt:ifNonZero>
      </li>
    </mt:Categories>
    </ul>
  </div>
</div>
</mt:IfArchiveTypeEnabled>

赤色部分は、画像の垂直方向の位置揃えのための style 属性です。サンプルでは img 要素に直接与えてしまっているので、適宜スタイルシートで設定するようにしてください。

Comments [2] | Trackbacks [0]
2008年3月21日

ブログ記事に同一カテゴリーのブログ記事の前後リンクを表示する

Movable Type で、ブログ記事の前後のブログ記事へのリンクを、直近のブログ記事ではなく、同一カテゴリーのブログ記事を表示するカスタマイズです。

2008.11.18 Movable Type 4.2 対応の記事を公開しました。

下の画面の、ブログ記事タイトル上にある前後リンクは、分かりにくいですが、同一カテゴリーのブログ記事です。

ブログ記事の前後のブログ記事へのリンクを同一カテゴリーに絞る

また、ブログ記事に複数カテゴリーを設定している場合は、すべてのカテゴリーの前後リンクも表示します(こんなに表示するのもどうかと思いますが...)。

ブログ記事の前後のブログ記事へのリンクを同一カテゴリーに絞る

以下、カスタマイズ方法です。

1.プラグインのダウンロード

Previous and next in category のサイトに進み、「PreviousNextInCategory」のリンクをクリック。

ブログ記事の前後のブログ記事へのリンクを同一カテゴリーに絞る

2.プラグインのインストール

ダウンロードした PreviousNextInCategory.zip を解凍して、PreviousNextInCategory.pl をpluginsディレクトリにアップロードします。
ブログ管理画面より、「システムメニュー」→「プラグイン」で「PreviousNextInCategory.pl」が表示されればインストール完了です。

ブログ記事の前後のブログ記事へのリンクを同一カテゴリーに絞る

3.プライマリカテゴリーに属するブログ記事のみを表示する場合

ブログ記事アーカイブの任意の位置に下記のサブテンプレートを設定してください。

<MTEntryPreviousInCategory>
<a href="<$MTEntryPermalink$>">« <$MTEntryTitle$></a> | 
</MTEntryPreviousInCategory>
<a href="<$MTEntryPermalink archive_type="Category"$>"><$MTEntryCategory$></a>
<MTEntryNextInCategory>
 | <a href="<$MTEntryPermalink$>"><$MTEntryTitle$> »</a>
</MTEntryNextInCategory>

ブログ記事アーカイブを再構築すれば、冒頭のように、同一カテゴリーの前後記事リンクが表示されます。

4.ブログ記事に登録されているすべてのカテゴリーに属するブログ記事を表示する場合

PreviousNextInCategory.plを任意のエディタで開き、

     :
sub _hdlr_entry_previous_in_category {
    my($ctx, $args, $cond) = @_;
    my $e = $ctx->stash('entry')
        or return $ctx->_no_entry_error('MTEntryPrevious');
    my $cat = $e->category
        or return '';
    my $prev = $e->previous(1);
     :
sub _hdlr_entry_next_in_category {
    my($ctx, $args, $cond) = @_;
    my $e = $ctx->stash('entry')
        or return $ctx->_no_entry_error('MTEntryNext');
    my $cat = $e->category
        or return '';
    my $next = $e->next(1);
     :

の部分に下記の青色の行を追加します。

     :
sub _hdlr_entry_previous_in_category {
    my($ctx, $args, $cond) = @_;
    my $e = $ctx->stash('entry')
        or return $ctx->_no_entry_error('MTEntryPrevious');
    my $cat = $e->category
        or return '';
    if($ctx->stash('category') ne '') {
        $cat = $ctx->stash('category');
    }
    my $prev = $e->previous(1);
     :
sub _hdlr_entry_next_in_category {
    my($ctx, $args, $cond) = @_;
    my $e = $ctx->stash('entry')
        or return $ctx->_no_entry_error('MTEntryNext');
    my $cat = $e->category
        or return '';
    if($ctx->stash('category') ne '') {
        $cat = $ctx->stash('category');
    }
    my $next = $e->next(1);
     :

ブログ記事アーカイブの任意の位置に下記のサブテンプレートを設定してください。

<MTEntryCategories>
<p>
<MTEntryPreviousInCategory>
<a href="<$MTEntryPermalink$>">« <$MTEntryTitle$></a> | 
</MTEntryPreviousInCategory>
<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a>
<MTEntryNextInCategory>
 | <a href="<$MTEntryPermalink$>"><$MTEntryTitle$> »</a>
</MTEntryNextInCategory>
</p>
</MTEntryCategories>

ブログ記事アーカイブを再構築すれば、ブログ記事が属する全カテゴリーの前後記事リンクが表示されます。

5.前後記事の再構築をする

上記の設定だけでは、ブログ記事投稿時に同一カテゴリーの前後記事が再構築されないという問題があります。

ということで、一応、MT4対応のプラグインを作ってみました。

PreviousNextInCategory.zip

元プラグインをかなり改変してしまったので、上記のファイルをダウンロードしたら、元プラグインにある、

_hdlr_entry_previous_in_category
_hdlr_entry_next_in_category

を埋め込んでください(複数カテゴリーに対応させる場合は4項のカスタマイズも行ってください)。
具体的な作業は、ダウンロードしたファイルの最後の方に簡単な説明を入れてますので、それを読んでください。

複数のカテゴリーを設定したブログ記事でも、前後リンクのブログ記事はすべて再構築されます。

なお、再構築は同じカテゴリーのブログ記事を検索するという、元記事のロジックをそのまま使わせてもらってますが、パフォーマンスの問題を解消する改善策がありましたらご教示ください。

6.参考記事

このエントリーは下記の記事を参考にさせていただきました。ありがとうございました。

Comments [7] | Trackbacks [2]
2008年3月20日

カテゴリーアーカイブのサブカテゴリーリストに、親カテゴリーとその子カテゴリーを表示する

Movable Type のカテゴリーアーカイブに表示しているサブカテゴリーリストにおいて、自カテゴリーと、その親カテゴリーに属するカテゴリーを表示するカスタマイズです。

具体例を説明します。例えば、ブログのカテゴリーが、

 cat1
  ├ cat1-1
  ├ cat1-2
  └ cat1-3
 cat2
  ├ cat2-1
  ├ cat2-2
  └ cat2-3
 cat3
  ├ cat3-1
  ├ cat3-2
  └ cat3-3

となっていると仮定します。

cat1-1 のカテゴリーアーカイブを表示した時、サブカテゴリーリストには、

 cat1
  ├ cat1-1
  ├ cat1-2
  └ cat1-3

のみを表示します。また、cat2-2 のカテゴリーアーカイブを表示した時、サブカテゴリーリストには、

 cat2
  ├ cat2-1
  ├ cat2-2
  └ cat2-3

のみを表示します。

1.サブカテゴリーのアーカイブで親カテゴリーとそのサブカテゴリーを表示する

次のサブテンプレートを任意の位置に設定して、再構築してください。

<MTParentCategory>
<MTSubCategories include_current="1">
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</MTParentCategory>

このサブテンプレートは、親カテゴリーでは何も表示されません。親カテゴリーは、一番外側の MTParentCategory タグの実行条件にマッチしない(親カテゴリーに親カテゴリーが存在しない)ためです。

2.親カテゴリーでも同じように表示する

親カテゴリーである cat1 のカテゴリーアーカイブを表示した時、サブカテゴリーリストに

 cat1
  ├ cat1-1
  ├ cat1-2
  └ cat1-3

とする場合は、先のサブテンプレートに下記の青色部分を追加します。

<MTParentCategory>
<MTSubCategories include_current="1">
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</MTParentCategory>
<MTHasNoParentCategory>
<MTSubCategories include_current="1">
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</MTHasNoParentCategory>

ちなみに上記のリストでは、MTSubCategories が2ヶ所出現し、その内容は全く同じです(赤色部分)。

<MTParentCategory>
<MTSubCategories include_current="1">
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</MTParentCategory>
<MTHasNoParentCategory>
<MTSubCategories include_current="1">
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</MTHasNoParentCategory>

次のように MTSetVarTemplate タグを使って丸めておけば、サブテンプレートの重複したマークアップを解消できます。

<mt:setvartemplate name="subcategorylist">
<MTSubCategories include_current="1">
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</mt:setvartemplate>
 
<MTParentCategory>
<mt:getvar name="subcategorylist">
</MTParentCategory>
<MTHasNoParentCategory>
<mt:getvar name="subcategorylist">
</MTHasNoParentCategory>

3.カテゴリーアーカイブ以外でこのサブテンプレートを表示させない対処

いずれの方法も、リストの一番外側は、

<MTIf name="category_archive">
  :
</MTIf>

で括っておけば、他のアーカイブで表示されずに済みます。

Comments [7] | Trackbacks [0]
2008年2月25日

ブログ記事に同一カテゴリーのブログ記事リストを表示(MT4版・改)

ブログ記事に同一カテゴリーのブログ記事リストを表示(MT4版)」や、これまでの似たようなカスタマイズでは、次の問題あることが判明しました。

1.問題点

異なる親カテゴリーに同名のサブカテゴリーがある場合、対応できない。

具体的には、次のようなカテゴリー構成を想定します。

 cat-A
  ├ cat-1
  └ cat-2
 cat-B
  ├ cat-1
  └ cat-2

この構成で「ブログ記事に同一カテゴリーのブログ記事リストを表示(MT4版)」を行うと、cat-A/cat-1 に属するブログ記事と、cat-B/cat-1 に属するブログ記事は「同一カテゴリーのブログ記事リスト」とみなされてしまいます。

2.原因

「同一カテゴリーのブログ記事リスト」のキー情報として、MTEntryCategory という、ブログ記事に属するメインカテゴリー名のみ使っており、カテゴリーの親カテゴリーまで含めた情報やID番号でサーチしていないためです。

こうなった経緯は、そもそも、Movable Type 3 の途中まで「サブカテゴリー」という概念が存在しませんでした。つまり、親カテゴリーしか作れなかったため、同名のカテゴリーの存在が許されず、これまでのサブテンプレートを使えば「同一カテゴリーのブログ記事リスト」を実現できた、という訳です。

3.対処

3.1 EntryCategoryID プラグインを使う

EntryCategoryID プラグイン」を使い、ブログ記事のメインカテゴリーのID番号と、ブログ記事リストのカテゴリーIDを比較し、同一カテゴリーID のブログ記事のみリスティングします。

<mt:setvarblock name="entrycategoryid"><$MTEntryCategoryID$></mt:setvarblock>
<dt class="sidetitle">
Entries of this Category
</dt>
<dd class="side">
  <ul>
  <MTCategories>
  <mt:setvarblock name="currentcategoryid"><$MTEntryCategoryID$></mt:setvarblock>
  <mt:if name="currentcategoryid" eq="$entrycategoryid">
    <MTEntries>
      <li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
    </MTEntries>
  </mt:if>
  </MTCategories>
  </ul>
</dd>

3.2 MTParentCategories タグを使う(その1)

これは後から気がついたのですが、MTParentCategories タグを使い、ブログ記事のメインカテゴリーの親カテゴリーを取得すれば、3.1項と同じことができます。

<MTParentCategories glue="/" setvar="entrycategories"><$MTCategoryLabel$></MTParentCategories>
<dt class="sidetitle">
Entries of this Category
</dt>
<dd class="side">
  <ul>
  <MTCategories>
  <MTParentCategories glue="/" setvar="currententrycategories"><$MTCategoryLabel$></MTParentCategories>
  <mt:if name="currententrycategories" eq="$entrycategories">
    <MTEntries>
      <li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
    </MTEntries>
  </mt:if>
  </MTCategories>
  </ul>
</dd>

MTParentCategories のカテゴリーのセパレータには "/"、また MTSetvarBlock タグの代わりに setvar モディファイアを利用しています。

3.3 MTParentCategories タグを使う(その2)

こちらは、MTEntries タグに category モディファイアを与えて、とりあえず自カテゴリーで絞り込んでから親カテゴリーと比較します。

<mt:setvarblock name="entrycategory"><$MTEntryCategory$></mt:setvarblock>
<MTParentCategories glue="/" setvar="entrycategories"><$MTCategoryLabel$></MTParentCategories>
<dt class="sidetitle">
Entries of this Category
</dt>
<dd class="side">
  <ul>
<MTEntries category="$entrycategory">
  <MTParentCategories glue="/" setvar="currententrycategories"><$MTCategoryLabel$></MTParentCategories>
  <mt:if name="currententrycategories" eq="$entrycategories">
    <li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
  </mt:if>
</MTEntries>
  </ul>
</dd>

2008.02.25
3.3項を追加しました。

Comments [12] | Trackbacks [0]
2008年2月22日

Movable Type 4 でカテゴリー別にデザインを切り替える方法(その3)

February 22,2008 2:02 AM
Tag:[, , ]
Permalink

Movable Type 4 でカテゴリー別にデザインを切り替える方法を、何回かに分けて紹介します。

1.MTIfCategory タグブロック内のサブテンプレートをモジュール化する

カテゴリーアーカイブのデザインを変更する2つめの方法で、MTIfCategory タグブロック内にサブテンプレートをベタ書きするのではなく、MTInclude タグを使います。

カテゴリー1~3

<MTIfCategory name="カテゴリー1">
<$MTInclude module="カテゴリー1"$>
</MTIfCategory>
<MTIfCategory name="カテゴリー2">
<$MTInclude module="カテゴリー2"$>
</MTIfCategory>
<MTIfCategory name="カテゴリー3">
<$MTInclude module="カテゴリー3"$>
</MTIfCategory>

こうすることにより、カテゴリーアーカイブ本体では「どのカテゴリーにどのテンプレートを割り当てるか」という制御に徹することができ、テンプレート全体の見通しがよくなります。

汎用的なデザインを与えたいカテゴリー4~6を新たに追加する場合は、次のようにします。

<MTIfCategory name="カテゴリー1">
<$MTInclude module="カテゴリー1"$>
<MTElse>
  <MTIfCategory name="カテゴリー2">
  <$MTInclude module="カテゴリー2"$>
  <MTElse>
    <MTIfCategory name="カテゴリー3">
    <$MTInclude module="カテゴリー3"$>
    <MTElse>
    <$MTInclude module="カテゴリーその他"$>
    </MTIfCategory>
  </MTIfCategory>
</MTIfCategory>

最初の MTIfCategory タグでカテゴリー1であるかの判定をし、そうでなければ MTElse を実行して、次の MTIfCategory タグでカテゴリー2であるかの判定をします。その繰り返しで、最後のカテゴリー判定にマッチしなかったカテゴリーには一番最後の MTElse タグの内容、つまりデフォルトとなるデザインのテンプレートモジュールを呼び出します。

2.MTIfCategory タグを除去して、モジュール化をさらに簡素化する

さて、すでにお気づきの方もいらっしゃると思いますが、最初のリストは、カテゴリーを識別するキーさえ取得できれば、実は以下の1行で済みます。

<$MTInclude module="カテゴリーを識別するキー"$>

「カテゴリーを識別するためのキー」として、次のようにカテゴリー名を使ってみます。カテゴリー名は、MTInclude タグを実行する前に、MTSetVarBlock タグを使って変数に設定し、変数名をmoduleモディファイアに与えれば、ダイナミックにカテゴリー名を設定することができます。

<mt:setvarblock name="category_name"><$MTCategoryLabel$></mt:setvarblock>
<$MTInclude module="$category_name"$>

これで、このアーカイブが「カテゴリー1」の再構築を行うときには変数 category_name には「カテゴリー1」が、「カテゴリー2」の再構築を行うときには変数 category_name には「カテゴリー2」...という具合に設定され、それぞれ「カテゴリー1」「カテゴリー2」...という名前のテンプレートモジュールを呼び出します。

注意するのは、変数category_nameをmoduleモディファイア(というか、nameモディファイア以外)で使う場合は、変数名の前に大抵「$」をつけておく、ということです。

3.MTIf タグを使ってデフォルトデザインの条件分岐をつける

2つめのリストのように、デフォルトのデザインと振り分けたい場合は、さらに MTIf タグと MTCategoryDescription タグで制御します。この方法は SYSTEM STUDIO さんよりアイデア頂きました。ありがとうございました。

<mt:setvarblock name="category_description"><$MTCategoryDescription$></mt:setvarblock>
<mt:if name="category_description">
  <$MTInclude module="$category_description"$>
<mt:else>
  <$MTInclude module="デフォルト"$>
<mt:if>

このリストを使う前準備として、各カテゴリーの「カテゴリーの説明」欄に、呼び出したいモジュール名を設定しておきます。デフォルトデザインのモジュールを呼び出したいときには、「カテゴリーの説明」欄には何も設定しません。

そうすれば、MTIf タグの判定で「カテゴリーの説明」欄に記入されている場合に、「カテゴリーの説明」欄に設定された名前のテンプレートモジュールを呼び出します。「カテゴリーの説明」欄に記入していない場合は、「デフォルト」という名前のテンプレートモジュールを呼び出します。

なお、前回もお伝えしたとおり、「カテゴリーの説明」欄を使うよりも、カスタムフィールドを利用した方が妥当に思われます。


Comments [0] | Trackbacks [0]
2008年2月20日

Movable Type 4 でカテゴリー別にデザインを切り替える方法(その2)

February 20,2008 1:25 AM
Tag:[, , ]
Permalink

Movable Type 4 でカテゴリー別にデザインを切り替える方法を、何回かに分けて紹介します。

1.ひとつのアーカイブテンプレートでカテゴリーを分割する

カテゴリーアーカイブのデザインを変更する2つめの方法は、アーカイブテンプレートの中で MTIfCategory タグを使います。MTIfCategory タグの name モディファイアには、カテゴリー名が重複しないように設定します。

カテゴリー1~3

<MTIfCategory name="カテゴリー1">
    :
(カテゴリー1用のテンプレート)   
    :
</MTIfCategory>
<MTIfCategory name="カテゴリー2">
    :
(カテゴリー2用のテンプレート)   
    :
</MTIfCategory>
<MTIfCategory name="カテゴリー3">
    :
(カテゴリー3用のテンプレート)   
    :
</MTIfCategory>

この方法には、次のような特徴があります。

  1. カテゴリーの振り分け処理が可能
  2. 基本的にパスは一意に決まる
  3. 優先の制約がない

ひとつのアーカイブテンプレートにまとめる一番のメリットは、あるいくつかのカテゴリーには特殊なデザインを与え、そうでないものについては汎用的なデザインを適用できることです。
「その1」の方法では、アーカイブテンプレートをカテゴリーごとに与えているため、そのような制御ができなくなります。

例えば、冒頭のサブテンプレートに、汎用的なデザインを使いたいカテゴリー4~6を新たに追加する場合、最初に示したサブテンプレートでは、カテゴリー4~6を個別に指定する必要がありますが、次のように変更すれば、一括した指定が可能です。

<MTIfCategory name="カテゴリー1">
    :
(カテゴリー1用のテンプレート)   
    :
<MTElse>
  <MTIfCategory name="カテゴリー2">
     :
 (カテゴリー2用のテンプレート)   
     :
  <MTElse>
    <MTIfCategory name="カテゴリー3">
      :
  (カテゴリー3用のテンプレート)   
      :
    <MTElse>
      :
  (カテゴリー4~6用のテンプレート)   
      :
    </MTIfCategory>
  </MTIfCategory>
</MTIfCategory>

最初の MTIfCategory タグでカテゴリー1であるかの判定をし、そうでなければ MTElse を実行して、次の MTIfCategory タグでカテゴリー2であるかの判定をします。その繰り返しで、最後のカテゴリー判定にマッチしなかったカテゴリーには一番最後の MTElse タグの内容、つまりデフォルトとなるデザインを適用します。

次の設定は誤りです。

<MTIfCategory name="カテゴリー1">
    :
(カテゴリー1用のテンプレート)   
    :
</MTIfCategory>
<MTIfCategory name="カテゴリー2">
    :
(カテゴリー2用のテンプレート)   
    :
</MTIfCategory>
<MTIfCategory name="カテゴリー3">
    :
(カテゴリー3用のテンプレート)   
    :
<MTElse>
    :
(カテゴリー4~6用のテンプレート)   
    :
</MTIfCategory>

理由は、「カテゴリー4~6用のテンプレート」と書かれた部分にはカテゴリー1とカテゴリー2が含まれるからです。

また、この方法では基本的に全てのカテゴリーに共通のパスを与えますが、テンプレートタグを用いることでカテゴリー別に異なるパスを与えることもできます(これについては別の機会に)。またカテゴリー用アーカイブがひとつであるため、「優先」の問題も回避できます。

2.スタイルシートについて

ここでは次の方法が考えられます。

まず、head 要素が、各カテゴリーのサブテンプレートに含まれているのであれば、head 要素内にカテゴリー用のスタイルシートを呼び出す link 要素をそのまま記述します。

すべてのカテゴリーが共通で head 要素をテンプレートモジュールとして呼び出している場合は、MTIfCategory タグブロック内に次のような MTSetVar タグを記述します。

<MTIfCategory name="cat1">
<mt:setvar name="style" value="[カテゴリー1用スタイルシートのファイル名]">
</MTIfCategory>
<MTIfCategory name="cat2">
<mt:setvar name="style" value="[カテゴリー2用スタイルシートのファイル名]">
</MTIfCategory>
<MTIfCategory name="cat3">
<mt:setvar name="style" value="[カテゴリー3用スタイルシートのファイル名]">
</MTIfCategory>
<$MTInclude module="ヘッダー"$>
 
<MTIfCategory name="カテゴリー1">
    :
(カテゴリー1用のテンプレート)   
    :

汎用的なカテゴリー用のスタイルシートを作りたい場合は、次のようにします。

<MTIfCategory name="cat1">
  <mt:setvar name="style" value="[カテゴリー1用スタイルシートのファイル名]">
<MTElse>
  <MTIfCategory name="cat2">
    <mt:setvar name="style" value="[カテゴリー2用スタイルシートのファイル名]">
  <MTElse>
    <MTIfCategory name="cat3">
      <mt:setvar name="style" value="[カテゴリー3用スタイルシートのファイル名]">
    <MTElse>
      <mt:setvar name="style" value="[カテゴリー4~6用スタイルシートのファイル名]">
    </MTIfCategory>
  </MTIfCategory>
</MTIfCategory>
<$MTInclude module="ヘッダー"$>
 
<MTIfCategory name="カテゴリー1">
    :
(カテゴリー1用のテンプレート)   
    :

そして、「ヘッダー」モジュールには次のように記述しておきます。

<mt:if name="category_archive">
<link rel="stylesheet" href="<$MTBlogURL$><$mt:getvar name="style"$>" type="text/css" title="<$MTCategoryLabel encode_html="1"$>" media="screen,tv" />
</mt:if>

または、MTCategoryDescription タグにスタイルシートのファイル名(下のサンプルでは拡張子なし)を設定しておき、「ヘッダー」モジュールだけで呼び出せる方法もあります。

<mt:if name="category_archive">
<link rel="stylesheet" href="<$MTBlogURL$><$MTCategoryDescription$>.css" type="text/css" title="<$MTCategoryLabel encode_html="1"$>" media="screen,tv" />
</mt:if>

異なるカテゴリーで同じデザインを適用したい場合は、MTCategoryDescription タグに該当する「カテゴリーの説明」欄に同じ名称を記述しておきます。

なお、「カテゴリーの説明」よりもカスタムフィールドを使う方が、用途が明確になってよりいいでしょう。


Comments [4] | Trackbacks [0]
2008年2月19日

Movable Type 4 でカテゴリー別にデザインを切り替える方法(その1)

February 19,2008 2:00 AM
Tag:[, , ]
Permalink

Movable Type 4 でカテゴリー別にデザインを切り替える方法を、何回かに分けて紹介します。

1.カテゴリー別にアーカイブテンプレートを独立させる

2009.08.21 注:カテゴリー別にアーカイブテンプレートを独立させる方法ではカテゴリーを適正に制御することができません。カテゴリー別にデザインを切り替えるには、「Movable Type 4 でカテゴリー別にデザインを切り替える方法(その2)」「Movable Type 4 でカテゴリー別にデザインを切り替える方法(その3)」を参照願います。

カテゴリーアーカイブのデザインを変更するために、カテゴリー別に複数のアーカイブテンプレートを作る方法があります。その際、カテゴリーアーカイブテンプレート全体を MTIfCategory タグで括ります。MTIfCategory タグの name モディファイアには、カテゴリー名が重複しないように設定します。

カテゴリー1

<MTIfCategory name="カテゴリー1">
    :
(カテゴリー1用のテンプレート)   
    :
</MTIfCategory>

カテゴリー2

<MTIfCategory name="カテゴリー2">
    :
(カテゴリー2用のテンプレート)   
    :
</MTIfCategory>

カテゴリー3

<MTIfCategory name="カテゴリー3">
    :
(カテゴリー3用のテンプレート)   
    :
</MTIfCategory>

この方法には、次のような特徴があります。

  1. カテゴリーアーカイブテンプレートの独立性
  2. カテゴリー別にパスを変更できる
  3. カテゴリー別に異なるパスを設定すると「優先」の制約が発生する

まず、カテゴリーアーカイブテンプレートを独立させ、テンプレートとカテゴリーを1:1の対応にするので、下のように編集対象のカテゴリーが視覚的に分かりやすくなるというメリットがあります。また、テンプレートの内容にもよりますが、この方法であれば、Movable Type 4 の制御系タグをほとんど使わずにすむかもしれません。

アーカイブテンプレート一覧

また、カテゴリー別に異なるパスを与えたい場合、この方法以外に選択の余地はありません。テンプレートタグをパス欄に設定すれば個別に設定することも可能です。

最後の「カテゴリー別に異なるパスを設定すると「優先」の制約が発生する」の意味は、まず、同一アーカイブ種別のテンプレートを複数作成すると、「優先」の問題が発生します。「優先」とは、他のページからあるアーカイブ種別のアーカイブにリンクする場合のリンク先を決めるためのもので、優先にするテンプレートにはチェックをつけます。

アーカイブテンプレート一覧

例えば、カテゴリー1・カテゴリー2・カテゴリー3用のアーカイブテンプレートを、それぞれ別のアーカイブテンプレートで作成した場合、どれかひとつのアーカイブテンプレートが「優先」に、残りが「非優先」になります。

もし、カテゴリー別にパスを変更した場合、メインページなどでカテゴリーリストを、MTTopLevelCategories タグで表示すると、「優先」が設定されたカテゴリーのパスで表示されるので、非優先のカテゴリーアーカイブページはデッドリンクになります。

ただし、全てのカテゴリーアーカイブが同じパスであれば、非優先カテゴリーアーカイブへのリンクも、優先カテゴリーアーカイブで生成されたリンクが利用できます(たまたまそうなるだけであり、手法としては適切ではないかもしれません)。

2.スタイルシートについて

ここでは2つの方法が考えられます。

まず、head 要素が、独立させたカテゴリーアーカイブにそれぞれ含まれているのであれば、head 要素内にカテゴリー用のスタイルシートを呼び出す link 要素をそのまま記述します。これが一番シンプルな方法です。

もうひとつは、head 要素をテンプレートモジュールとして呼び出している場合は、MTIfCategory タグブロック内に次のような MTSetVar タグを記述します。

<MTIfCategory name="cat1">
<mt:setvar name="style" value="[カテゴリー用スタイルシートのファイル名]">
<$MTInclude module="ヘッダー"$>
    :
</MTIfCategory>

そして、「ヘッダー」モジュールには次のように記述します。

<mt:if name="category_archive">
<link rel="stylesheet" href="<$MTBlogURL$><$mt:getvar name="style"$>" type="text/css" title="<$MTCategoryLabel encode_html="1"$>" media="screen,tv" />
</mt:if>

または、MTCategoryDescription タグにスタイルシートのファイル名(下のサンプルでは拡張子なし)を設定しておき、「ヘッダー」モジュールだけで呼び出せる方法もあります。

<mt:if name="category_archive">
<link rel="stylesheet" href="<$MTBlogURL$><$MTCategoryDescription$>.css" type="text/css" title="<$MTCategoryLabel encode_html="1"$>" media="screen,tv" />
</mt:if>

異なるカテゴリーで同じデザインを適用したい場合は、MTCategoryDescription タグに同じ名称を記述しておきます。

後者の方法は、他のカテゴリー分割方法でも共通に使えます。

2008.02.20
カテゴリーパスの記述を一部修正しました。


Comments [7] | Trackbacks [0]
2008年1月22日

Movable Type 4 のカテゴリーアーカイブで全てのブログ記事を表示する

January 22,2008 2:34 AM
Tag:[, , ]
Permalink

Movable Type 4 デフォルトテンプレートでのカテゴリーアーカイブでは、そのカテゴリーのブログ記事が全て表示されない仕組みになっています。

これは、カテゴリーアーカイブの表示記事数を絞る代わりに、「月別カテゴリーアーカイブ」を併用して、カテゴリーアーカイブの分割ページとして賄うようにしているためです。
こうすることで、カテゴリーアーカイブの記事数が増大しても、カテゴリーアーカイブをページ分割等で表示記事数を絞る必要がなくなります。

本エントリーでは、カテゴリーアーカイブで表示記事数がメインページと同じになる仕組みと、それを解除する方法等について解説します。

1.カテゴリーアーカイブで表示記事数が絞られる仕組み

仕組みは簡単で、デフォルトテンプレートであれば、「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」の MTEntries タグに limit モディファイアを適用されていると思います。このモディファイアの値に "auto" が設定されていれば、アーカイブでの表示記事数が「設定」→「ブログの設定」→「ブログ記事」→「ブログ記事の表示数」の設定が適用されます。つまりメインページと同じ表示になります。

    :
<MTIf name="datebased_archive">
    <MTEntries>
<$MTEntryTrackbackData$>
<$MTInclude module="ブログ記事の概要"$>
    </MTEntries>
<MTElse>
    <MTEntries limit="auto">
<$MTEntryTrackbackData$>
<$MTInclude module="ブログ記事の概要"$>
    </MTEntries>
</MTIf>
    :

上のリストは、次のように表示するアーカイブを振り分けています。

<MTIf name="datebased_archive">
     :
 (日付アーカイブ)
     :
<MTElse>
     :
 (カテゴリーアーカイブ)
     :
</MTIf>

limit モディファイアは lastn モディファイアと似たような動作を行ないます。

参考:lastn モディファイアと limit モディファイアの違い

2.カテゴリーアーカイブで記事をすべて表示する

「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」で、limit モディファイアを削除すれば、カテゴリーアーカイブで記事をすべて表示できます(下)。

    :
<MTIf name="datebased_archive">
    <MTEntries>
<$MTEntryTrackbackData$>
<$MTInclude module="ブログ記事の概要"$>
    </MTEntries>
<MTElse>
    <MTEntries>
<$MTEntryTrackbackData$>
<$MTInclude module="ブログ記事の概要"$>
    </MTEntries>
</MTIf>
    :

ただし、この方法では、記事数が増えるにしたがってファイルサイズも増大するので、日付カテゴリアーカイブとの併用が望ましいです。

3.月別カテゴリーアーカイブリストを表示する

当ブログの配布テンプレートではサイドバーに月別カテゴリーアーカイブのリストが表示されないので(過去のバージョンで一部表示されるものもあります)、下記のリストを「サイドバー」テンプレートに貼り付けておけば、月別カテゴリーアーカイブにリンクさせることができます(この点についてはいずれ修正します)。

<MTIf name="module_category-monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Category-Monthly">
<dt class="sidetitle">
Monthly <$MTCategoryLabel$>
</dt>
 
<dd class="side">
<ul>
<MTArchiveList archive_type="Category-Monthly">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>

4.関連記事

Comments [10] | Trackbacks [1]
2007年12月28日

dtree のサブカテゴリーリストにブログ記事タイトルを表示する for Movable Type

以前ご紹介した、「dTree によるサブカテゴリーリスト for Movable Type」で、ブログ記事タイトルを表示するカスタマイズをご紹介します。

dTree とは、エクスプローラー風のツリー表示用スクリプトです。下記のサンプルで動作をご確認ください。

サンプル

本エントリーのカスタマイズを行うことで、下のスクリーンショットのように、各カテゴリー配下に属するブログ記事タイトルを表示させることができます。

dTreeにブログ記事タイトルを表示

以下、サブカテゴリーリストにブログ記事タイトルを表示するカスタマイズです。なお、この記事の5項の設定を行う前に、「dTree によるサブカテゴリーリスト for Movable Type」の4項までを設定しておいてください。

5.dTree サブカテゴリーリスト表示用タグ設定

テンプレートで、サブカテゴリーリストを表示したい位置に下記のタグを設定してください。

表示用タグは PHP 版と JavaScript 版、MTタグ版を用意しました。表示される結果はどれも同じです。

5.1 PHP版

このタグを設定する場合、PHP化を行っていることが前提です。

<script type="text/javascript">
d = new dTree('d');
d.config.useCookies=false;
d.add(0, -1,'SubCategories','javascript: void(0);');
<?php $cat_number = 0; $level = 0; $tree = array(); ?>
<MTTopLevelCategories>
<?php $tree[$level] = ++$cat_number; if(!$level) { ?>
    d.add(<?php echo $cat_number ?>, 0,'<$MTCategoryLabel encode_php="1"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
<?php } else { if(!$tree[$level - 1]) { ?>
    d.add(<?php echo $cat_number ?>, 1,'<$MTCategoryLabel encode_php="1"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
<?php } else { ?>
    d.add(<?php echo $cat_number ?>, <?php echo $tree[$level - 1] ?>,'<$MTCategoryLabel encode_php="1"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
<?php }} ?>
<MTEntries>
<MTEntriesHeader>
<?php $level++; ?>
</MTEntriesHeader>
<?php $cat_number++; ?>
  d.add(<?php echo $cat_number ?>, <?php echo $tree[$level - 1] ?>,'<$MTEntryTitle encode_php="1"$>','<$MTEntryPermalink$>');
<MTEntriesFooter>
<?php $level--; ?>
</MTEntriesFooter>
</MTEntries>
<?php $level++; ?>
<MTSubCatsRecurse>
<?php $level--; ?>
</MTTopLevelCategories>
document.write(d);
</script>
<p style="text-align:center"><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

5.2 JavaScript 版

<script type="text/javascript">
d = new dTree('d');
d.config.useCookies=false;
d.add(0, -1, 'SubCategories','javascript: void(0);');
var cat_number = 0;
var level = 0;
var link = new Array();
<MTTopLevelCategories>
link[level] = ++cat_number;
if(!level) {
    d.add(cat_number, 0,'<$MTCategoryLabel encode_js="1"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
} else {
    if(!link[level - 1]) {
        d.add(cat_number, 1,'<$MTCategoryLabel encode_js="1"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
    } else {
        d.add(cat_number, link[level - 1],'<$MTCategoryLabel encode_js="1"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
    }
}
<MTEntries>
<MTEntriesHeader>
level++;
</MTEntriesHeader>
cat_number++;
  d.add(cat_number, link[level - 1],'<$MTEntryTitle encode_js="1"$>','<$MTEntryPermalink$>');
<MTEntriesFooter>
level--;
</MTEntriesFooter>
</MTEntries>
level++;
<MTSubCatsRecurse>
level--;
</MTTopLevelCategories>
document.write(d);
</script>
<p style="text-align:center"><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

5.3 テンプレートタグ版(MT4.1 以上のみ対応)

<script type="text/javascript">
d = new dTree('d');
d.config.useCookies=false;
d.add(0, -1,'Categories','javascript: void(0);');
<$mt:setvar name="cat_number" value="1"$>
<$mt:setvar name="level" value="1"$>
<MTTopLevelCategories>
<$mt:setvar name="cat_number" op="++"$>
<$mt:setvar name="tree[$level]" value="$cat_number"$>
<mt:if name="level" eq="1">
  d.add(<$mt:getvar name="cat_number" op="--"$>, 0,'<$MTCategoryLabel escape="html"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
<mt:else>
  d.add(<$mt:getvar name="cat_number" op="--"$>, <$mt:setvar name="tmp" value="$level"$><$mt:setvar name="tmp" op="--"$><$mt:getvar name="tree[$tmp]" op="--"$>,'<$MTCategoryLabel escape="html"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
</mt:if>
<MTEntries>
<MTEntriesHeader>
<$mt:setvar name="level" op="++"$>
</MTEntriesHeader>
<$mt:setvar name="cat_number" op="++"$>
  d.add(<$mt:getvar name="cat_number" op="--"$>, <$mt:setvar name="tmp" value="$level"$><$mt:setvar name="tmp" op="--"$><$mt:getvar name="tree[$tmp]" op="--"$>,'<$MTEntryTitle escape="html"$>','<$MTEntryPermalink$>');
<MTEntriesFooter>
<$mt:setvar name="level" op="--"$>
</MTEntriesFooter>
</MTEntries>
<$mt:setvar name="level" op="++"$>
<$MTSubCatsRecurse$>
<$mt:setvar name="level" op="--"$>
</MTTopLevelCategories>
document.write(d);
</script>
<p style="text-align:center"><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

以上です。

2007.12.28
MT3.x でパーマリンクが正常に生成されない不具合を修正しました(MTEntryPermaLink を MTEntryPermalink に修正)。

Comments [5] | Trackbacks [0]
2007年12月20日

dTree を Movable Type 4.1/MTOS のネイティブタグで実装する

December 20,2007 1:55 AM
Tag:[, , ]
Permalink

Movable Type 4.1/MTOS で変数の算術演算子と配列およびハッシュが実装されたことで、PHPあるいはJavaScriptとの組み合わせが必要だった処理が、ネイティブなタグのみで実装可能になりました。

全てのコードについて移植が可能であるかどうかは不明ですが、どの程度の威力があるか検証してみたかったので、サンプルとして、以前紹介した dTree のカスタマイズについてテンプレートタグで実装してみました。

1.dTree について

機能や設定方法は下記の記事を参照願います(実際にご利用になる場合、この記事の4項までの設定が必要です)。

dTree によるサブカテゴリーリスト for Movable Type

で、元記事で紹介したPHP版のスクリプトは下記の通りです(若干直しました)。

<script type="text/javascript">
d = new dTree('d');
d.config.useCookies=false;
d.add(0, -1,'Categories','javascript: void(0);');
<?php $cat_number = 0; $level = 0; $tree = array(); ?>
<MTTopLevelCategories>
<?php $tree[$level] = ++$cat_number; if(!$level) { ?>
    d.add(<?php echo $cat_number ?>, 0,'<$MTCategoryLabel encode_php="1"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
<?php } else { ?>
    d.add(<?php echo $cat_number ?>, <?php echo $tree[$level - 1] ?>,'<$MTCategoryLabel encode_php="1"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
<?php } $level++; ?>
<MTSubCatsRecurse max_depth="3">
<?php $level--; ?>
</MTTopLevelCategories>
document.write(d);
</script>
<p style="text-align:center"><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

再掲になりますが、dTree によるサブカテゴリーリストの完成イメージは次の通りです。

dTree によるサブカテゴリーリスト

この表示を行うための JavaScript は次の内容になっています(上記のPHPスクリプトから生成されたものです)。

<script type="text/javascript">
d = new dTree('d');
d.config.useCookies=false;
d.add(0, -1,'Categories','javascript: void(0);');
d.add(1, 0,'test1','http://.../test/');
d.add(2, 1,'test1-1','http://.../test/test11/');
d.add(3, 2,'test1-1-1','http://.../test/test11/test111/');
d.add(4, 2,'test1-1-2','http://.../test/test11/test112/');
d.add(5, 1,'test1-2','http://.../test/test12/');
d.add(6, 5,'test1-2-1','http://.../test/test12/test121/');
d.add(7, 5,'test1-2-2','http://.../test/test12/test122/');
d.add(8, 0,'test2','http://.../test2/');
d.add(9, 8,'test2-1','http://.../test2/test21/');
document.write(d);
</script>
<p style="text-align:center"><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

スクリーンショットと JavaScript(のカテゴリー)の対応はなんとなくお分かりになると思いますが、

d.add(...) 

の行で、カテゴリー部分を表示させています。

本エントリーでは、Movable Type のネイティブタグのみで、このカテゴリーを表示する部分の JavaScript を生成します。

2.dTree のカテゴリー表示部分のフォーマット

先程も簡単に紹介しましたが、JavaScript でカテゴリーを表示する部分は add 関数がキモとなっており、関数のパラメータは、

d.add([*1],[*2],[カテゴリー名],[カテゴリーのURL *3]);
*1:カテゴリーに一意に割り当てられたdTree用のカテゴリー番号
*2:そのカテゴリーが属する親カテゴリーの番号
"0"はdTreeのルートに属する場合(=最上位のカテゴリー)
*3:dTreeの生成するa要素のhref属性になります。

となっています。

上記の add 関数部分を、サブカテゴリーリストを出力するサブテンプレートを応用して作成します。以下、add 関数の各パラメータをどのようなロジックで作成するかという解説を交えながら、ネイティブなテンプレートを組み立てていきます。

3.各パラメータ用のデータ生成方法

3.1 第1パラメータ用のデータ生成

第1パラメータはカテゴリーに番号を順に付与していけば良いだけので、リスト1のように、

リスト1

<$mt:setvar name="cat_number" value="1"$>
<MTTopLevelCategories>
  <$mt:setvar name="cat_number" op="++"$>
  d.add(<$mt:getvar name="cat_number"$>,~略~);
  <$MTSubCatsRecurse$>
</MTTopLevelCategories>

とすれば良いことが分かります。

1行目でカテゴリー番号保持用の変数(cat_number)を1で初期化し、MTTopLevelCategories タグのループ内でインクリメントしていきます。
そしてインクリメント後に add 関数の第1パラメータに表示させればOKです。

3.2 第2パラメータ用のデータ生成

第2パラメータの、自カテゴリーの属する親カテゴリー番号を算出する方法は色々なアプローチがあると思いますが、ここでの方法は、まず算出に必要なデータとして、現在処理されているカテゴリーの階層をインデックスとした自カテゴリー番号を、配列の変数として保持します。

「カテゴリーの階層」は、親カテゴリーの階層は0、子カテゴリーの階層は1、孫カテゴリーの階層は2...、という具合に、数値で表すこととします。

「カテゴリーの階層をインデックスとした自カテゴリー番号を、配列の変数として保持」とは、例えば一番最初の「カテゴリー1」を処理している時、このカテゴリーはルート階層(数値で表すと0)に属するので、

tree[0]=1

という変数を作成することを指しています。左辺の変数 tree のインデックス0が階層の番号を示し、右辺の1がカテゴリー番号を示します。

「カテゴリー2」を処理している時、このカテゴリーは親カテゴリー(数値で表すと1)に属するカテゴリーなので、

tree[1]=2

という変数を作成します。

この規則によって、各カテゴリーを処理する時には、刻々と内容が書き換わる、次のような配列が作成されます。

カテゴリー1の処理中:tree[0]=1
カテゴリー2の処理中:tree[1]=2
カテゴリー3の処理中:tree[2]=3
カテゴリー4の処理中:tree[2]=4
カテゴリー5の処理中:tree[1]=5
カテゴリー6の処理中:tree[2]=6
カテゴリー7の処理中:tree[2]=7
カテゴリー8の処理中:tree[0]=8
カテゴリー9の処理中:tree[1]=9

少し話が難しくなりますが、このデータは次回の繰り返し処理で利用するためのものです。つまり、カテゴリー1の処理中に作成された、一番最初の、

tree[0]=1

は(MTTopLevelCategories の)繰り返し処理の中でそのまま保持されており、次のカテゴリー2の処理の時に利用される、ということだけをとりあえず覚えていてください。

前置きが長くなりましたが、上記のデータを作成するサブテンプレートは、リスト2のようになります(青色はリスト1からの追加部分)。

リスト2

<$mt:setvar name="cat_number" value="1"$>
<$mt:setvar name="level" value="1"$>
<MTTopLevelCategories>
  <$mt:setvar name="cat_number" op="++"$>
  <$mt:setvar name="tree[$level]" value="$cat_number"$>
  d.add(<$mt:getvar name="cat_number"$>,~略~);
  <$MTSubCatsRecurse$>
  <$mt:setvar name="level" op="++"$>
  <$MTSubCatsRecurse$>
  <$mt:setvar name="level" op="--"$>
</MTTopLevelCategories>

2行目で配列インデックス用の変数levelを初期化し、5行目で、処理中のカテゴリー番号を、現在の階層をインデックスとした配列データに保持します。

階層の数値の増減は、MTSubCatsRecurse の直前と直後で操作しています。

プログラミングに不慣れな方には分かりにくいのですが、MTSubCatsRecurseはいわゆる再帰処理を行うためのタグで、現在処理しているカテゴリーに子カテゴリーが存在する場合、MTSubCatsRecurse の内容を取り出し、 MTTopLevelCategories の中で処理します。

つまり MTSubCatsRecurse は次の階層を処理するための再帰データとなるので、その直前で変数 level をインクリメントすることで、階層用のデータがインクリメントされます。

また、MTSubCatsRecurse の直後でデクリメントすれば、階層の数値を親カテゴリーの階層に戻せます。
さらに MTSubCatsRecurse の中に孫カテゴリーデータが存在すれば、変数 level はさらにインクリメントされることになります。

これでdTreeに必要なデータが揃いましたので、あとは子カテゴリーが属する親カテゴリーのカテゴリー番号を求めるだけです。
これは、現在処理されているデータの階層からデクリメントした配列の値、つまり自カテゴリーの上位の階層のカテゴリー番号を取得すればいい訳です。

言い換えると、例えば2行目の、

tree[1]=2

の親カテゴリー番号を求める場合、上位の階層は

tree[0]

であり、その中に親のカテゴリー番号が設定されているので、配列のインデックスをデクリメント(-1)、つまり、

tree[1-1]

とすれば、tree[0] が求まります。あとはそこに設定されているカテゴリー番号1を取得すれば良い訳です。

また、4行目の

tree[2]=4

の親カテゴリーを求める場合、上位の階層は

tree[1]

となり、その中にカテゴリー番号が設定されているので、インデックスをデクリメント(-1)、つまり

tree[2-1]

とすれば、tree[1] が求まるので、あとはそこに設定されているカテゴリー番号2を取得すれば良い訳です。

話をまとめると、リスト3のようになります(青色はリスト2からの追加部分)。

リスト3

<$mt:setvar name="cat_number" value="1"$>
<$mt:setvar name="level" value="1"$>
<MTTopLevelCategories>
  <$mt:setvar name="cat_number" op="++"$>
  <$mt:setvar name="tree[$level]" value="$cat_number"$>
  <mt:if name="level" eq="1">
    d.add(<$mt:getvar name="cat_number"$>, 0,'<$MTCategoryLabel escape="js"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
  <mt:else>
    d.add(<$mt:getvar name="cat_number"$>, <$mt:setvar name="tmp" value="$level"$><$mt:setvar name="tmp" op="--"$><$mt:getvar name="tree[$tmp]"$>,'<$MTCategoryLabel escape="js"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
  </mt:if>
  <$mt:setvar name="level" op="++"$>
  <$MTSubCatsRecurse$>
  <$mt:setvar name="level" op="--"$>
</MTTopLevelCategories>

追加した6~10行目のうち、9行目が該当します。
第2パラメータの値に配列変数treeのデータを表示しています。

6行目の MTIf で処理を振り分けている理由ですが、親カテゴリーを処理している場合、さらに上位の階層(つまり dTree のルート階層)データを取得しようとしますが、これまでの処理では設定されていないデータなので、エラーを避けるため、その場合のみ、7行目で第2パラメータに固定で0を設定するようにしています。

3.3 第3パラメータ用のデータ生成

第3パラメータのカテゴリー名には、<$MTCategoryLabel escape="js"$> を記述するだけです。なお、JavaScript として正常に動作するよう、escape モディファイアに "js" を指定します。

3.4 第4パラメータ用のデータ生成

第4パラメータには、リスト4のようにカテゴリーのリンク、

リスト4

<MTIfNonZero tag="MTCategoryCount">
<$MTCategoryArchiveLink$>
<MTElse>
javascript: void(0);
</MTElse>
</MTIfNonZero>

を設定します。

カテゴリーにブログ記事が1件以上投稿されている場合は、カテゴリーアーカイブへのリンクを設定し、投稿されていなければリンクの代わりに "javascript: void(0);" を設定し、リンクをクリックしてもページ遷移が発生しないようにしています。

最後に、第1パラメータと第2パラメータに表示される値をデクリメントします(青色はリスト3からの追加部分)。

リスト5

<$mt:setvar name="cat_number" value="1"$>
<$mt:setvar name="level" value="1"$>
<MTTopLevelCategories>
  <$mt:setvar name="cat_number" op="++"$>
  <$mt:setvar name="tree[$level]" value="$cat_number"$>
  <mt:if name="level" eq="1">
    d.add(<$mt:getvar name="cat_number" op="--"$>, 0,'<$MTCategoryLabel escape="html"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
  <mt:else>
    d.add(<$mt:getvar name="cat_number" op="--"$>, <$mt:setvar name="tmp" value="$level"$><$mt:setvar name="tmp" op="--"$><$mt:getvar name="tree[$tmp]" op="--"$>,'<$MTCategoryLabel escape="html"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
  </mt:if>
  <$mt:setvar name="level" op="++"$>
  <$MTSubCatsRecurse$>
  <$mt:setvar name="level" op="--"$>
</MTTopLevelCategories>

これは変数cat_numberと変数levelの初期値を1にしているため、デクリメントしないと下のように、カテゴリー番号が2から開始されるためです。

d.add(2, 0,'test1','http://.../test/');
d.add(3, 2,'test1-1','http://.../test/test11/');
d.add(4, 3,'test1-1-1','http://.../test/test11/test111/');
d.add(5, 3,'test1-1-2','http://.../test/test11/test112/');
d.add(6, 2,'test1-2','http://.../test/test12/');
d.add(7, 6,'test1-2-1','http://.../test/test12/test121/');
d.add(8, 6,'test1-2-2','http://.../test/test12/test122/');
d.add(9, 0,'test2','http://.../test2/');
d.add(10, 9,'test2-1','http://.../test2/test21/');

変数cat_numberと変数levelの初期値を1にしているのは、初期値0の場合にリスト系のテンプレートタグで正常にインクリメントされない不具合を避けるためです。

これにdTree用の前後のスクリプトを加えれば完成です(青色はリスト5からの追加部分)。

リスト6

<script type="text/javascript">
d = new dTree('d');
d.config.useCookies=false;
d.add(0, -1,'Categories','javascript: void(0);');
<$mt:setvar name="cat_number" value="1"$>
<$mt:setvar name="level" value="1"$>
<MTTopLevelCategories>
<$mt:setvar name="cat_number" op="++"$>
<$mt:setvar name="tree[$level]" value="$cat_number"$>
<mt:if name="level" eq="1">
  d.add(<$mt:getvar name="cat_number" op="--"$>, 0,'<$MTCategoryLabel escape="html"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
<mt:else>
  d.add(<$mt:getvar name="cat_number" op="--"$>, <$mt:setvar name="tmp" value="$level"$><$mt:setvar name="tmp" op="--"$><$mt:getvar name="tree[$tmp]" op="--"$>,'<$MTCategoryLabel escape="html"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
</mt:if>
<$mt:setvar name="level" op="++"$>
<$MTSubCatsRecurse$>
<$mt:setvar name="level" op="--"$>
</MTTopLevelCategories>
document.write(d);
</script>
<p style="text-align:center"><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

よりエレガントな実装があると思いますが、その点はご容赦ください。

関連記事:dtree のサブカテゴリーリストにブログ記事タイトルを表示する for Movable Type

Comments [4] | Trackbacks [0]
2007年12月 3日

Movable Type 3 からのアップグレードによる「月別カテゴリーアーカイブ」の追加方法

2日ほど前に、このブログに「月別カテゴリーアーカイブ」を追加しました。カテゴリー・アーカイブの右下に表示されている「Category Monthly Archives」から辿れます。

「月別カテゴリーアーカイブ」

追加した目的は2つあり、ひとつはカテゴリーアーカイブのナビゲーションを増やしたかったこと、もうひとつは Google 検索の「小粋空間」の検索で、どの程度のページ増加があるのかを確認したかったためです。

ページ増加の結果については最後に記すことにして、ここでは、Movable Type 3 からのアップグレードによる「月別カテゴリーアーカイブ」の追加方法を紹介します。

1.日付+カテゴリー(ユーザ)アーカイブについて

カテゴリーアーカイブやユーザアーカイブは、日付アーカイブ(年別・月別等)と異なり、記事数が増加することで1ページのファイルサイズが無限に増えていきます。

Movable Type 3 まではページ分割のカスタマイズでこの問題を回避していましたが、Movable Type 4 では、カテゴリーアーカイブとユーザアーカイブをさらに日付と組み合わせたアーカイブを作成することができるようになったので、例えば、あるカテゴリーアーカイブのトップには一定の記事数を表示し、過去の記事については「日付+アーカイブ」のページへリンクすれば、ページ分割として利用することができ、カテゴリーアーカイブ/ユーザアーカイブのトップページのファイルサイズを抑えることができます。

2.月別カテゴリーアーカイブの作成

Movable Type 4 の新規インストールでは「月別カテゴリーアーカイブ」がデフォルトで用意されているので、ここでは Movable Type 3 のアップグレードで Movable Type 4 運用のケースで「月別カテゴリーアーカイブ」を追加する場合について簡単に説明します。

2.1 アーカイブテンプレートの追加

既存のカテゴリー・アーカイブを利用する場合と、アーカイブを新規作成する場合で若干手順が異なります。

2.1.1 既存のカテゴリー・アーカイブを利用する場合

「デザイン」→「テンプレート」→「アーカイブテンプレート」→「カテゴリー・アーカイブ」を選択。

「カテゴリー・アーカイブ」を選択

2.1.2 新規で作成する場合

「デザイン」→「テンプレート」→「アーカイブテンプレート」で、「アーカイブテンプレートを作成」の右にある「ブログ記事リスト」をクリック。

ブログ記事を新規作成

タイトルに「月別カテゴリー」を入力し(名前は何でもいいです)、編集画面の内容にカテゴリー・アーカイブと同じ内容を設定。

2.2 アーカイブマッピングを追加

ページ下にある「アーカイブマッピング」の「新しいアーカイブマッピングを作成」をクリック。

新しいアーカイブマッピングを作成

セレクトボックスで「カテゴリー - 月別」を選択し、「追加」をクリック。

「カテゴリー - 月別」を選択

これで、再構築をすれば「月別カテゴリーアーカイブ」が生成されます。

3.月別カテゴリーアーカイブリストへのリンクを追加

カテゴリーアーカイブのサイドバーに、月別カテゴリーアーカイブリストへのリンクを追加します。下は MT3 のデフォルトテンプレートに合わせたスタイルにしています。

<MTIf name="module_category-monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Category-Monthly">
<div class="module-archives module">
   <h2 class="module-header"><$MTArchiveTitle$>:月別アーカイブ</h2>
   <div class="module-content">
   <MTArchiveList archive_type="Category-Monthly">
      <MTArchiveListHeader><ul class="module-list"></MTArchiveListHeader>
         <li class="module-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
      <MTArchiveListFooter></ul></MTArchiveListFooter>
   </MTArchiveList>
   </div>
</div>
</MTIfArchiveTypeEnabled>
</MTIf>

4.完成例

トップページにある「趣味」というカテゴリーページへのリンクをクリックすると、

カテゴリーリストのリンク

「趣味」カテゴリーのサイドバーに「趣味:月別アーカイブ」というリンクが表示されます。

月別カテゴリーリストのリンク

5.検索結果ページ数増加について

「月別カテゴリーアーカイブ」追加による増加ページ数は、約800ページです。

で、「小粋空間」というキーワードで Google 検索すると、ここ最近は160 万件位で頭打ち状態だったのですが、今日調べてみると、260 万件まで増加していました(もう少し日が経つと減少するかもしれません)。

Google 検索結果

ちなみに、著名なブログでも検索結果ページ数は当ブログより少ないケースが少なくないのですが、ここまで検索結果ページ数が稼げているのは、テンプレート利用者のサイトに設定しているクレジットバナーのおかげだと感謝しています。

Comments [0] | Trackbacks [0]
2007年11月27日

ブログ記事に同一カテゴリーのブログ記事リストを表示(MT4版)

Movable Type 4 で、ブログ記事アーカイブ(エントリーアーカイブ)に同一カテゴリーのブログ記事リスト(エントリーリスト)を表示するためのカスタマイズです。
質問を頂きましたので本エントリーにて解説致します。

Movable Type 3 までは、MTTagInvoke を使ったカスタマイズ「個別エントリーアーカイブに同一カテゴリーのエントリーを表示」が可能でしたが、Movable Type 4 ではこのプラグインが利用できなくなっています。

MT3 と同等のカスタマイズを行うには MTEntryCategoryEntries というプラグインがお勧めですが、ここでは、MTIf タグを使った方法を、順を追ってカスタマイズする形で紹介したいと思います。

読むのが面倒な方は、2項~4項のいずれかのサンプルを、そのままサイドバーに貼り付けてお使いください。

1.基本設定

ブログ記事に同一カテゴリーのブログ記事リストを表示する場合の基本形です。

<MTSetVarBlock name="entrycategory"><$MTEntryCategory$></MTSetVarBlock>
 
<dt class="sidetitle">
Entries of this Category
</dt>
 
<dd class="side">
  <ul>
  <MTEntries category="$entrycategory">
    <li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
  </MTEntries>
  </ul>
</dd>

1行目にある、

<MTSetVarBlock name="entrycategory"><$MTEntryCategory$></MTSetVarBlock>

で、<$MTEntryCategory$> の評価内容を取得し、entrycategory という MT の変数に設定します。
そして、

<MTEntries category="$entrycategory">

で、先に設定した変数 entrycategory の値を用いてブログ記事リストを特定のカテゴリーでフィルタリングしています。MTGetVar の name 属性で変数を使用する場合は $ を付与しませんが(下)、

<MTGetVar name="entrycategory">

MTEntries タグの category 属性に用いる場合は、$ を付与して、MT の変数であることを明示します。

2.特定のアーカイブのみで表示させる

1項の状態では、サイドバーをインクルードする全てのページで表示されてしまうため、ブログ記事アーカイブのみにも適用されてしまいます。

このリストをブログ記事アーカイブだけに表示させるには、リスト全体 MTIf タグで括ります。

<MTIf name="entry_template">
<MTSetVarBlock name="entrycategory"><$MTEntryCategory$></MTSetVarBlock>
 
<dt class="sidetitle">
Entries of this Category
</dt>
 
<dd class="side">
  <ul>
  <MTEntries category="$entrycategory">
    <li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
  </MTEntries>
  </ul>
</dd>
</MTIf>

1行目の MTIf タグの name 属性には、ブログ記事のみで有効になる "entry_template" という値を設定します。

<MTIf name="entry_template">

これでブログ記事アーカイブ以外では、このリストは表示されなくなります。

アーカイブで使える変数値については、「予約変数一覧 for Movable Type 4(その1)」にまとめてありますので、参考になれば幸いです。

3.現在のブログ記事タイトルをリストから除外する

2項までの設定では、現在表示されているブログ記事のタイトルも表示されてしまうので、次にこれを非表示にする制御を行います。

非表示にするには、現在表示されているブログ記事ページのID番号と、リスティングされているブログ記事のID番号を比較・判定する処理(青色部分)を追加します。

<MTIf name="entry_template">
<MTSetVarBlock name="entryid"><$MTEntryID$></MTSetVarBlock>
<MTSetVarBlock name="entrycategory"><$MTEntryCategory$></MTSetVarBlock>
 
<dt class="sidetitle">
Entries of this Category
</dt>
 
<dd class="side">
  <ul>
  <MTEntries category="$entrycategory">
  <MTSetVarBlock name="currententryid"><$MTEntryID$></MTSetVarBlock>
  <MTIf name="currententryid" ne="$entryid">
    <li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
  </MTIf>
  </MTEntries>
  </ul>
</dd>
</MTIf>

現在表示されているブログ記事ページのID番号は、2行目の

<MTSetVarBlock name="entryid"><$MTEntryID$></MTSetVarBlock>

で取得し、リスティングされているブログ記事ページのID番号は、MTEntries タグブロック内の

<MTSetVarBlock name="currententryid"><$MTEntryID$></MTSetVarBlock>

で取得しています。これで、

entryid:現在表示されているブログ記事ページのID番号
currententryid:リスティングされているブログ記事ページのID番号

となり、あとはこれを MTIf タグで判定します。

<MTIf name="currententryid" ne="$entryid">

ne 属性で判定しているので、判定結果が「真」、つまりお互いのブログ記事IDが等しくなければ、MTIf ブロック内の行を実行します。

4.リストが1件の場合はリストを非表示にする

前項の設定を行った場合、あるカテゴリーに属するブログ記事が1件の場合、リストに何も表示されなくなってしまいます。
これを回避するため、カテゴリーに属するブログ記事が1件の場合は、リスト全体を非表示にする制御を行います。

<MTIf name="entry_template">
<MTSetVarBlock name="entryid"><$MTEntryID$></MTSetVarBlock>
<MTSetVarBlock name="entrycategory"><$MTEntryCategory$></MTSetVarBlock>
 
<MTEntries category="$entrycategory">
  <MTSetVarBlock name="entrycount"><$MTGetVar name="__counter__"$></MTSetVarBlock>
</MTEntries>
 
<MTUnless name="entrycount" eq="1">
<dt class="sidetitle">
Entries of this Category
</dt>
 
<dd class="side">
  <ul>
  <MTEntries category="$entrycategory">
  <MTSetVarBlock name="currententryid"><$MTEntryID$></MTSetVarBlock>
  <MTIf name="currententryid" ne="$entryid">
    <li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
  </MTIf>
  </MTEntries>
  </ul>
</dd>
</MTUnless>
</MTIf>

該当カテゴリーのブログ記事数のカウントには、MTEntries タグ内で __counter__ を利用することで取得しています。
ところが、__counter__ という変数は、

<$MTGetVar name="entrycount" value="__counter__"$>

では正常に値を取得できない(変数値がそのまま変数名に設定されてしまう)ので、MTSetVarBlock と MTGetVar を組み合わせて、

<MTSetVarBlock name="entrycount"><$MTGetVar name="__counter__"$></MTSetVarBlock>

としています。

そして、MTUnless タグを用いて、カウント値が "1" でない場合にブロック内を実行するように制御します。

<MTUnless name="entrycount" eq="1">
Comments [8] | Trackbacks [2]
2007年7月27日

カテゴリー・アーカイブのカテゴリーリストで該当カテゴリーのエントリーのみを表示する

July 27,2007 2:08 AM
Tag:[, , , ]
Permalink

カテゴリー・アーカイブに表示されたカテゴリーリストで、該当カテゴリーのエントリーのみを表示するカスタマイズです。
ご質問を頂きましたので本エントリーにて紹介致します。

以下のサンプルの(X)HTMLは、当サイトの「XHTML 1.0 Strict 版テンプレート」をもとにしたマークアップですので、それ以外の配布テンプレートをご利用の場合は、dt / dd をそれぞれ div に直してください。

また、本カスタマイズは MT4 でも利用可能ですが、MT4 版は別エントリーで投稿したいと思います。

1.PHP 版

カテゴリー・アーカイブテンプレートの任意の位置に、下記のカテゴリーリストを設定してください。
ブログがPHP化されていることが前提です。

<MTIfArchiveTypeEnabled archive_type="Category">
<dt class="sidetitle">
Categories
</dt>
 
<dd class="side">
<?php $category = '<$MTCategoryLabel encode_php="1"$>'; ?>
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><$MTCategoryLabel$></a> [<$MTCategoryCount$>]
<?php if ($category == '<$MTCategoryLabel encode_php="1"$>') { ?>
<ul><MTEntries><li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li></MTEntries></ul>
<?php } ?>
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</dd>
</MTIfArchiveTypeEnabled>

2.JavaScript 版

1項と同様、カテゴリー・アーカイブテンプレートの任意の位置に、下記のカテゴリーリストを設定してください。

<MTIfArchiveTypeEnabled archive_type="Category">
<dt class="sidetitle">
Categories
</dt>
 
<dd class="side">
<script type="text/javascript">
//<![CDATA[
var category = '<$MTCategoryLabel encode_js="1"$>';
//]]>
</script>
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><$MTCategoryLabel$></a> [<$MTCategoryCount$>]
<script type="text/javascript">
//<![CDATA[
if (category == '<$MTCategoryLabel encode_js="1"$>') {
document.write('<ul><MTEntries><li><a href="<$MTEntryPermalink$>"><$MTEntryTitle encode_js="1"$></a></li></MTEntries></ul>');
}
//]]>
</script>
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</dd>
</MTIfArchiveTypeEnabled>
Comments [4] | Trackbacks [0]
2007年7月25日

カテゴリーリストにエントリータイトルを表示する

July 25,2007 1:37 AM
Tag:[, , , ]
Permalink

Movable Type のカテゴリーリストにエントリータイトルを表示するカスタマイズです。

オーソドックスなカスタマイズですが、MT をブログとして用いるのではなく、投稿するエントリー数がある程度決まっていて、それらを更新するというスタイルで使う場合、カテゴリーリストをメニューリストとして代用することができ、非常に有効な方法です。

1.デフォルトテンプレートの場合

カテゴリーリストに青色の部分を追加してください。

<MTIfArchiveTypeEnabled archive_type="Category"><div class="module-categories module">
   <h2 class="module-header">カテゴリー</h2>
   <div class="module-content">
   <MTTopLevelCategories>
   <MTSubCatIsFirst><ul class="module-list"></MTSubCatIsFirst>
      <MTIfNonZero tag="MTCategoryCount">
      <li class="module-list-item"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a>
        <ul class="module-list"><MTEntries><li class="module-list-item"><a href="<$MTEntryPermalink$>"><$MTEntryTitle encode_html="1"$></a></li></MTEntries></ul>
      <MTElse>
      <li class="module-list-item"><MTCategoryLabel>
      </MTElse>
      </MTIfNonZero>
         <MTSubCatsRecurse>
      </li>
   <MTSubCatIsLast></ul></MTSubCatIsLast>
   </MTTopLevelCategories>
   </div>
</div>
</MTIfArchiveTypeEnabled>

2.公開テンプレートの場合

カテゴリーリストに青色の部分を追加してください。サンプルは XHTML 1.0 Strict 版を使っていますが、それ以外のものでも追加位置と追加内容は同じです。

<MTIfArchiveTypeEnabled archive_type="Category">
<dt class="sidetitle">
Categories
</dt>
 
<dd class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<ul><MTEntries><li><a href="<$MTEntryPermalink$>"><$MTEntryTitle encode_html="1"$></a></li></MTEntries></ul>
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</dd>
</MTIfArchiveTypeEnabled>
Comments [7] | Trackbacks [1]
2007年6月25日

dTree によるサブカテゴリーリスト for Movable Type

dTreeのサンプルへdTree というエクスプローラー風のツリー表示スクリプトを利用した、Movable Type のサブカテゴリーリストのツリー化カスタマイズをご紹介します。

表示は左のスクリーンショットのようになり、「+」「-」をクリックするとツリーを開閉することができます。また、カテゴリー名をクリックすると該当のカテゴリーページにジャンプします。一番下の「open all」「close all」をクリックすると全ツリーの一括開閉もできます。

動作についてはサンプルをご利用ください。

後で気がつきましたが、「MovableType備忘録」さんでも同じようなカスタマイズを公開されています。

以下、カスタマイズ方法です。

1.スクリプトのダウンロード

Destroydrop » Javascripts » Tree の右上にある、Download の dtree.zip のリンクをクリックしてダウンロード。

dTree

2.スクリプトのアップロード

アーカイブを解凍した中にある下記のファイルまたはディレクトリを index.html と同じディレクトリにアップロード(他は使いません)。

/img
dtree.css
dtree.js

3.画像ファイルパスの修正

dtree.js を任意のエディタで開き、下記の

this.icon = {
    root        : 'img/base.gif',
    folder      : 'img/folder.gif',
    folderOpen  : 'img/folderopen.gif',
    node        : 'img/page.gif',
    empty       : 'img/empty.gif',
    line        : 'img/line.gif',
    join        : 'img/join.gif',
    joinBottom  : 'img/joinbottom.gif',
    plus        : 'img/plus.gif',
    plusBottom  : 'img/plusbottom.gif',
    minus       : 'img/minus.gif',
    minusBottom : 'img/minusbottom.gif',
    nlPlus      : 'img/nolines_plus.gif',
    nlMinus     : 'img/nolines_minus.gif'
};

を下のようにご自身のドメイン(ブログのURL)を追加します。

this.icon = {
    root        : 'http://user-domain/img/base.gif',
    folder      : 'http://user-domain/img/folder.gif',
    folderOpen  : 'http://user-domain/img/folderopen.gif',
    node        : 'http://user-domain/img/page.gif',
    empty       : 'http://user-domain/img/empty.gif',
    line        : 'http://user-domain/img/line.gif',
    join        : 'http://user-domain/img/join.gif',
    joinBottom  : 'http://user-domain/img/joinbottom.gif',
    plus        : 'http://user-domain/img/plus.gif',
    plusBottom  : 'http://user-domain/img/plusbottom.gif',
    minus       : 'http://user-domain/img/minus.gif',
    minusBottom : 'http://user-domain/img/minusbottom.gif',
    nlPlus      : 'http://user-domain/img/nolines_plus.gif',
    nlMinus     : 'http://user-domain/img/nolines_minus.gif'
};

4.script 要素追加

dTree を表示したいテンプレートに、下記の link 要素と script 要素を追加します。

<link rel="stylesheet" href="<$MTBlogURL$>dtree.css" type="text/css" />
<script type="text/javascript" src="<$MTBlogURL$>dtree.js"></script>

5.dTree サブカテゴリーリスト表示用タグ設定

テンプレートで、サブカテゴリーリストを表示したい位置に下記のタグを設定してください。

表示用タグは PHP 版と JavaScript 版を用意しました。表示される結果はどちらも同じですが、PHP 版の方がページのファイルサイズを抑えることができます。

5.1 PHP版

このタグを設定する場合、PHP化を行っていることが前提です。

<script type="text/javascript">
d = new dTree('d');
d.config.useCookies=false;
d.add(0, -1,'SubCategories','javascript: void(0);');
<?php $a = 0; $b = 0; $link = array(); ?>
<MTTopLevelCategories>
<?php $link[$b] = ++$a; if(!$b) { ?>
    d.add(<?php echo $a ?>, 0,'<$MTCategoryLabel encode_php="1"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
<?php } else { if(!$link[$b - 1]) { ?>
    d.add(<?php echo $a ?>, 1,'<$MTCategoryLabel encode_php="1"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
<?php } else { ?>
    d.add(<?php echo $a ?>, <?php echo $link[$b - 1] ?>,'<$MTCategoryLabel encode_php="1"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
<?php }} $b++; ?>
<MTSubCatsRecurse max_depth="3">
<?php $b--; ?>
</MTTopLevelCategories>
document.write(d);
</script>
<p style="text-align:center"><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

5.2 JavaScript 版

こちらは JavaScript 版です。

<script type="text/javascript">
d = new dTree('d');
d.config.useCookies=false;
d.add(0, -1, 'SubCategories','javascript: void(0);');
var a = 0;
var b = 0;
var link = new Array();
<MTTopLevelCategories>
link[b] = ++a;
if(!b) {
    d.add(a, 0,'<$MTCategoryLabel$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
} else {
    if(!link[b - 1]) {
        d.add(a, 1,'<$MTCategoryLabel$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
    } else {
        d.add(a, link[b - 1],'<$MTCategoryLabel$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
    }
}
b++;
<MTSubCatsRecurse max_depth="3">
b--;
</MTTopLevelCategories>
document.write(d);
</script>
<p style="text-align:center"><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

以上です。

関連記事:

2007.06.26
3項を追加しました。

2007.12.01
PHP版タグの MTCategoryLabel タグに encode_php="1" を追加しました。

2007.12.18
MTSubCategories タグを MTTopLevelCategories タグに変更しました。

Comments [35] | Trackbacks [1]
2007年3月 6日

サブカテゴリーリストのエクスプローラ風折りたたみ

March 6,2007 1:36 AM
Tag:[, ]
Permalink

サブカテゴリーリストのエクスプローラー式折りたたみ当サイトでこれまで紹介してきた「サブカテゴリーリストの折りたたみ」カスタマイズは、「折りたたみマーク(+ツリー化)」という形式が主体でしたが、新たに Windows のエクスプローラのツリー表示と同じように、タイトルの左側に折りたたみ画像を表示し、折りたたみ状態によって画像を切り替えられるカスタマイズを紹介致します。

ここでは、Movable Type のデフォルトテンプレート(スクリーンショット)および公開テンプレートでのカスタマイズ方法について説明します。

1.スクリプトのダウンロード

下記のリンクをクリックし、リンク先のページにある menufolder.js のリンクをクリックしてダウンロードしてください。

download

2.menufolder.js の設定変更

ダウンロードした menufolder.js を任意のエディタで開き、下記のように該当部分を青色の内容に変更してください。

// サブカテゴリー用折りたたみマーク
// 上:閉じている状態で表示されるマーク
// 下:開いている状態で表示されるマーク
var openMarkForSubCategories  = '<img src="close.png" style="border:none;vertical-align:middle;" />';
var closeMarkForSubCategories = '<img src="open.png" style="border:none;vertical-align:middle;" />';
 
// サブカテゴリー用折りたたみマーク挿入位置
// カテゴリー前に折りたたみマークを配置:true
// カテゴリー後に折りたたみマークを配置:false
var preMarkForSubCategory = true;
 
// サブカテゴリーのタイトルとマークのスペース
var offsetForTitleAndMarkOfSubcategory = 1;

3.スクリプトのアップロード

menufolder.js の修正が終わったら保存し、メインページと同じディレクトリにアップロードしてください。

4.テンプレートに script 要素追加

サブカテゴリーリストの折りたたみを利用する各テンプレートの </head> の直前に下記のタグを追加してください。charset 属性は menufolder.js の文字コードを指定してください(分からなければとりあえずサンプルのまま貼り付けてください)。

<script type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="utf-8"></script>

5.テンプレートにサブカテゴリーリスト表示用タグを追加

デフォルトテンプレートの場合は5.1項、公開テンプレートの場合は5.2項のサブカテゴリーリスト表示用タグを、表示したいテンプレートの任意の位置に追加します。

5.1 公開テンプレート

<div class="sidetitle">
Categories
</div>
<div class="side">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
 
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','off',false);</MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

5.2 デフォルトテンプレート

<div class="module-categories module">
<h2 class="module-header">カテゴリー</h2>
<div class="module-content" id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul class="module-list"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="module-list-item"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li class="module-list-item"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
 
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','initState',false);</MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

6.スタイルシート変更

デフォルトテンプレートの場合は6.1項、公開テンプレートの場合は6.2項の CSS をスタイルシートに追加してください。

6.1 デフォルトテンプレート

#categories ul {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}
#categories ul li {
    padding-left: 15px;
}
div .subcategories {
    margin-left: -15px;
}

6.2 公開テンプレート

#categories ul {
    margin: 0 0 0 2px;
    padding: 0;
    list-style: none;
}
#categories ul li {
    margin: 2px 0 2px 5px;
    padding-left: 10px;
    list-style: none;
}
#categories li li {
    margin: 2px 0 2px 5px;
    padding-left: 10px;
    list-style: none;
}
div .subcategories {
    margin-left: -15px;
}

公開テンプレートの場合は、すでに設定されている下記の CSS を削除してください。

.side #categories ul {
    padding-left: 16px;
}
.side #categories ul ul {
    padding-left: 10px;
}
.side #categories li {
    list-style-type: circle;
}

7.画像のアップロード

下記の折りたたみマーク画像をダウンロード(Windows であれば右クリックして「名前を付けて画像を保存」を選択)し、メインページと同じディレクトリにアップロードしてください。

開くマーク開くマーク

画像はお好みのものをご利用ください。

Comments [32] | Trackbacks [1]
2007年3月 1日

サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する

March 1,2007 12:17 AM
Tag:[, , ]
Permalink

先日エントリーした「CSS 変更(2007.02.11)」でお知らせした通り、サブカテゴリーリストの親カテゴリーだけ異なる画像を表示させるカスタマイズをご紹介致します。

サブカテゴリーリストで親カテゴリー以外をツリー化する

この変更を行なえば、ツリー画像が各親カテゴリー内に閉じた形で表示されるようになります。またカテゴリー表示が長大になる場合、従来の表示では親カテゴリーのツリー画像が途切れる可能性が高かったのですが、この方法であればある程度問題なく表示されると思います。

変更方法は、CSS の修正と親カテゴリー用の画像の用意です。

元のサンプルは「サブカテゴリーリストの折りたたみ+ツリー化 for Movable Type」を利用していますが、CSS についてはブログツール・ブログサービスに依存しませんので、変更箇所を確認しながら修正してください。

スクリーンショットの完成例で使用している親カテゴリーのリストマークは、下記から頂きました。

StylegalaBullet Madness

全く同じマークは下から 30 番目あたりにあります。

下記にスクリーンショットと同じ変更をした CSS を示します。変更箇所は赤、追加は青で示していますが、お好みに応じて適宜修正してください。

変更前

ul.tree {
    margin: 0 0 0 5px;
    padding: 0;
    font-size: 9px;
    list-style: none;
}
ul.tree ul {
    margin: 0;
    padding: 0;
}
ul.tree li {
    margin: 0;
    padding: 0 0 0 13px;
    background: url(tree_lst.gif) no-repeat 2px 0;
    list-style: none;
}
ul.tree li.tree_end {
    background: url(tree_end.gif) no-repeat 2px 0;
    list-style: none;
}

変更後

ul.tree {
    margin: 0 0 0 3px;
    padding: 0;
    font-size: 9px;
    list-style: none;
}
ul.tree ul {
    margin: 0;
    padding: 0;
}
ul.tree li {
    margin: 0px;
    padding: 0 0 0 17px;
    background: url([親カテゴリー用画像ファイル]) no-repeat 1px 0.15em;
    list-style: none;
}
ul.tree li li {
    margin: 0;
    padding: 0 0 0 15px;
    background: url(tree_lst.gif) no-repeat 4px 0;
    list-style: none;
}
ul.tree li li.tree_end {
    background: url(tree_end.gif) no-repeat 4px 0;
    list-style: none;
}

ご覧の通り、親カテゴリー用の li 要素セレクタと、子カテゴリー用の li 要素セレクタを分割しています。子カテゴリーは、li 要素セレクタを重ねて指定し、li 要素が再帰的に出現する場合のみ、ツリー画像を表示するようにしています。

参考までにサンプルのHTMLマークアップも掲載しておきます。折りたたみ用の div 要素が含まれてやや複雑になってますが予めご了承ください。

<ul class="tree">
  <li class="tree">
    <div class="subcategories" id="subcategories9name"><a href="..." title="9">ブログ</a> [1]</div>
    <div id="subcategories9list">
      <ul class="tree">
        <li class="tree_end">
          <div class="subcategories" id="subcategories10name"><a href="..." title="10">Movable Type</a> [1]</div>
          <div id="subcategories10list">
            <ul class="tree">
              <li class="tree"><a href="..." title="11">カスタマイズ</a> [1]</li>
              <li class="tree_end"><a href="..." title="12">テンプレート</a> [2]</li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
  <li class="tree">
    <div class="subcategories" id="subcategories1name"><a href="..." title="1">日記</a> [1]</div>
    <div id="subcategories1list">
      <ul class="tree">
        <li class="tree_end"><a href="..." title="2">食事</a> [1]</li>
      </ul>
    </div>
  </li>
  <li class="tree_end">
    <div class="subcategories" id="subcategories3name"><a href="..." title="3">趣味</a> [1]</div>
    <div id="subcategories3list">
      <ul class="tree">
        <li class="tree">
          <div class="subcategories" id="subcategories5name"><a href="..." title="5">パソコン</a> [1]</div>
          <div id="subcategories5list">
            <ul class="tree">
              <li class="tree"><a href="..." title="7">Linux</a> [1]</li>
              <li class="tree_end"><a href="..." title="8">Windows</a> [1]</li>
            </ul>
          </div>
        </li>
        <li class="tree_end">
          <div class="subcategories" id="subcategories4name"><a href="..." title="4">車</a> [1]</div>
          <div id="subcategories4list">
            <ul class="tree">
              <li class="tree_end"><a href="..." title="6">VW</a> [1]</li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
</ul>
Comments [29] | Trackbacks [2]
2007年2月18日

サブカテゴリーリストの折りたたみ(MT3.x デフォルトテンプレート版)

February 18,2007 1:03 AM
Tag:[, , ]
Permalink

サブカテゴリーリストの折りたたみ(デフォルトテンプレート版)Movable Type 3.x のデフォルトテンプレートにサブカテゴリーリストの折りたたみを適用する場合のカスタマイズを紹介します。
このエントリーではツリー化する場合としない場合の2通りを説明します。スクリーンショットはツリー化した場合の完成例です。

1.スクリプトのダウンロード

下記のリンクをクリックし、リンク先のページにある menufolder.js のリンクをクリックしてダウンロードしてください。

download

2.menufolder.js の設定変更

ダウンロードした menufolder.js を任意のエディタで開き、下記の該当部分を青色の内容であることを確認(または修正)してください。

// カテゴリーリスト数計算方法
// サブカテゴリーのカテゴリー数を適正に計数する
// サブカテゴリーに対応:true
// 従来のカテゴリーに対応:false
var subCategoryCount = true;
 
       :
 
// サブカテゴリーフラグ
// サブカテゴリーの折りたたみを有効にする(テンプレート要設定)
// 有効にする:true
// 無効にする:false
var subCategory = true;
  
// サブカテゴリー用折りたたみマーク
var openMarkForSubCategories  = '';
var closeMarkForSubCategories = '';
 
// サブカテゴリーのタイトルとマークのスペース
var offsetForTitleAndMarkOfSubcategory = 1;

設定内容の詳細は下記の通りです。

subCategoryCount

  • 名称:カテゴリーリスト数計算方法
  • 用途:カテゴリーリスト数計算方法を li タグ(サブカテゴリー表示)で計数するか、a タグ(従来の一括表示)で計数するかを指定します。
  • 設定値: true:li タグで計数/false:a タグで計数

subCategory

  • 名称:サブカテゴリーの折りたたみ有効フラグ
  • 用途:サブカテゴリーの折りたたみの有効/無効を設定します。ここでは有効にします。
  • 設定値: true:有効/false:無効

openMarkForSubCategories/closeMarkForSubCategories

  • 名称:サブカテゴリーの折りたたみマーク
  • 用途:サブカテゴリー名横に表示する折りたたみ用リンクのマーク
  • 設定値:任意の文字(設定したマークを''で括るように)

offsetForTitleAndMarkOfSubcategory

  • サブカテゴリーのタイトルとマークのスペース
  • 用途:サブカテゴリーのタイトルとマークの間に挿入する半角空白文字数を指定
  • 設定値:0以上

3.スクリプトのアップロード

menufolder.js の修正が終わったら保存し、メインページと同じディレクトリにアップロードしてください。

4.テンプレートに script 要素追加

サブカテゴリーリストの折りたたみを利用する各テンプレートの </head> の直前に下記のタグを追加してください。charset 属性は menufolder.js の文字コードを指定してください(分からなければとりあえずサンプルのまま貼り付けてください)。

<script type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="utf-8"></script>

5.テンプレートにサブカテゴリーリスト表示用タグを追加

ツリー化しない場合は1.1項、ツリー化する場合は1.2項のサブカテゴリーリスト表示用タグを、表示したいテンプレートの任意の位置に追加します。

5.1 ツリー化しない場合

<div class="module-categories module">
<h2 class="module-header">カテゴリー</h2>
<div class="module-content" id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul class="module-list"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="module-list-item"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li class="module-list-item"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
 
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','initState',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

5.2 ツリー化する場合

<div class="module-categories module">
<h2 class="module-header">カテゴリー</h2>
<div class="module-content" id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul class="tree"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
 
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','initState',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

赤色部分は下記を参照して適宜変更してください。

initState

  • 名称:初期状態
  • 用途:ページを最初に表示した時の折りたたみ状態を指定します
  • 設定値: on:開いた状態/off:閉じた状態

またカテゴリーアーカイブページで、どのページでも同じカテゴリーリストを表示したい場合は、上記サブカテゴリーリストの先頭および末尾にある MTSubCategories タグを MTTopLevelCategories タグに変更してください。

6.スタイルシート変更

ツリー化しない場合は2.1項、ツリー化する場合は2.2項の CSS をスタイルシートに追加してください。

6.1 ツリー化しない場合

.subcategories a.foldmark {
    font-size:7px; /* マークのフォントサイズ */
    text-decoration: none; /* マーク装飾 */
}

6.2 ツリー化する場合

.subcategories a.foldmark {
    font-size:7px; /* マークのフォントサイズ */
    text-decoration: none; /* マーク装飾 */
}
ul.tree {
    margin: 0 0 10px 0; /* 全体マージン */
    padding: 0;
    list-style: none;
}
ul.tree ul {
    margin: 0px 0; /* 間隔を空ける時はここを変更 */
    padding-top: 2px; /* インデント部分のパディング */
}
ul.tree li {
    margin: 0; /* 0 以上にすると画像が切れる */
    padding: 4px 0 1px 13px; /* top を大きくすると画像とずれる */
    background-image: url(tree_lst.gif);
    background-position: 2px 0; /* 垂直方向を0以上にすると画像が切れる */
    background-repeat: no-repeat;
    list-style: none;
    line-height: 100%;
}
ul.tree li.tree_end {
    background-image: url(tree_end.gif);
    background-position: 2px 0;
    list-style: none;
}

7.ツリー画像のダウンロード

ツリー化する場合は、7項・8項を実施してください。

下記のファイルをダウンロードしてください。これはツリーを表示するための画像で、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。

実線:tree_lst_solid.gif / tree_end_solid.gif
点線:tree_lst_dotted.gif / tree_end_dotted.gif

保存方法は、(IEの場合)リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。

ツリー画像のファイルは6項の CSS(青色部分)で読み込まれますので、ファイル名は一致させてください。つまり、tree_lst_solid.gifをダウンロードする時(またはダウンロード後)、ファイル名は tree_lst.gif に変更してください。

8.画像のアップロード

ダウンロードした画像をメインページと同じディレクトリにアップロードしてください。

以上です。

2010.05.02
タイトルおよび本文の一部にMT3.x向けの記事である旨を追記しました。

Comments [14] | Trackbacks [2]
2007年2月 9日

サブカテゴリーリストの折りたたみ+ツリー化 for Movable Type

JavaScript不要なサブカテゴリーリストのツリー化+折りたたみ for Movable Type以前、Movable Type のツリー化記事で「JavaScript 不要なサイドメニューのツリー化 for Movable Type」を紹介しましたが、当サイトで定番カスタマイズとなっている「サブカテゴリーリストの折りたたみ」と併用する場合の設定方法についてご質問を頂きましたので、本エントリーにて改めてご紹介致します。

このエントリーのカスタマイズを行うことで、スクリーンショットのようにサブカテゴリーリストを折りたたみ+ツリー化することができます。
なお、JavaScript が不要なのはツリー化のみで、折りたたみ動作には必要です。

1.スクリプトのダウンロード

下記のリンクをクリックし、リンク先のページにある menufolder.js のリンクをクリックしてダウンロードしてください。

download

2.menufolder.js の設定変更

ダウンロードした menufolder.js を任意のエディタで開き、下記の該当部分を青色の内容であることを確認(または修正)してください。

// カテゴリーリスト数計算方法
// サブカテゴリーのカテゴリー数を適正に計数する
// サブカテゴリーに対応:true
// 従来のカテゴリーに対応:false
var subCategoryCount = true;
 
       :
 
// サブカテゴリーフラグ
// サブカテゴリーの折りたたみを有効にする(テンプレート要設定)
// 有効にする:true
// 無効にする:false
var subCategory = true;
  
// サブカテゴリー用折りたたみマーク
var openMarkForSubCategories  = '';
var closeMarkForSubCategories = '';
 
// サブカテゴリーのタイトルとマークのスペース
var offsetForTitleAndMarkOfSubcategory = 1;

設定内容の詳細は下記の通りです。

subCategoryCount

  • 名称:カテゴリーリスト数計算方法
  • 用途:カテゴリーリスト数計算方法を li タグ(サブカテゴリー表示)で計数するか、a タグ(従来の一括表示)で計数するかを指定します。
  • 設定値: true:li タグで計数/false:a タグで計数

subCategory

  • 名称:サブカテゴリーの折りたたみ有効フラグ
  • 用途:サブカテゴリーの折りたたみの有効/無効を設定します。ここでは有効にします。
  • 設定値: true:有効/false:無効

openMarkForSubCategories/closeMarkForSubCategories

  • 名称:サブカテゴリーの折りたたみマーク
  • 用途:サブカテゴリー名横に表示する折りたたみ用リンクのマーク
  • 設定値:任意の文字(設定したマークを''で括るように)

offsetForTitleAndMarkOfSubcategory

  • サブカテゴリーのタイトルとマークのスペース
  • 用途:サブカテゴリーのタイトルとマークの間に挿入する半角空白文字数を指定
  • 設定値:0以上

3.スクリプトのアップロード

menufolder.js の修正が終わったら保存し、メインページと同じディレクトリにアップロードしてください。

4.テンプレートに script 要素追加

サブカテゴリーリストの折りたたみを利用する各テンプレートの </head> の直前に下記のタグを追加してください。charset 属性は menufolder.js の文字コードを指定してください(分からなければとりあえずサンプルのまま貼り付けてください)。

<script type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="utf-8"></script>

5.テンプレートにサブカテゴリーリスト表示用タグを追加

折りたたみ+ツリー化用のサブカテゴリーリスト表示用タグ(下記)をテンプレートの任意の位置に設定します。

<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul class="tree"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryID$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]<MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel><MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
 
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','initState',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

青色は「JavaScript 不要なサイドメニューのツリー化 for Movable Type」のサブカテゴリーリストとの差分を参考までに示しています。

赤色部分は下記を参照して適宜変更してください。

initState

  • 名称:初期状態
  • 用途:ページを最初に表示した時の折りたたみ状態を指定します
  • 設定値: on:開いた状態/off:閉じた状態

またカテゴリーアーカイブページで、どのページでも同じカテゴリーリストを表示したい場合は、上記サブカテゴリーリストの先頭および末尾にある MTSubCategories タグを MTTopLevelCategories タグに変更してください。

6.CSS追加

下記を styles-site.css に追加してください。

ul.tree {
    margin: 0 0 0 5px;
    padding: 0;
    font-size: 9px;
    list-style: none;
}
ul.tree ul {
    margin: 0;
    padding: 0;
}
ul.tree li {
    margin: 0;
    padding: 0 0 0 13px;
    background: url(tree_lst.gif) no-repeat 2px 0;
    list-style: none;
}
ul.tree li.tree_end {
    background: url(tree_end.gif) no-repeat 2px 0;
    list-style: none;
}
.subcategories a.foldmark {
    font-size:9px; /* マークのフォントサイズ */
    text-decoration: none; /* マークの文字装飾(装飾なし) */
}

7.ツリー画像のダウンロード

下記のファイルをダウンロードしてください。これはツリーを表示するための画像で、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。

実線:tree_lst_solid.gif / tree_end_solid.gif
点線:tree_lst_dotted.gif / tree_end_dotted.gif

保存方法は、(IEの場合)リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。

ツリー画像のファイルは6項の CSS(青色部分)で読み込まれますので、ファイル名は一致させてください。つまり、tree_lst_solid.gifをダウンロードする時(またはダウンロード後)、ファイル名は tree_lst.gif に変更してください。

8.画像のアップロード

ダウンロードした画像をメインページと同じディレクトリにアップロードしてください。

以上です。
これでサブカテゴリーリストに折りたたみマークとツリーが表示されればOKです。

2008.10.14
リストの MTSubCategories タグを MTTopLevelCategories タグに変更しました。

Comments [33] | Trackbacks [4]
2006年11月10日

エントリーのない親カテゴリーに子カテゴリーを表示する

Movable Type 3.3 でエントリーのない親カテゴリーをアーカイブとして生成し、そこに子カテゴリーを表示するためのカスタマイズです。

Movable Type のカテゴリーアーカイブでは、自カテゴリーでエントリーがひとつも公開されていない場合、そのカテゴリーに子カテゴリーがある場合でも、自カテゴリーのアーカイブを生成することができません。言い換えると、エントリーのない親カテゴリーでの MTEntriesWithSubCategories タグは有効にならない、ということです。

本エントリーでは、下記の方法で親カテゴリーに子カテゴリーを表示する解決案を示してみたいと思います。

  • 親カテゴリーにダミーのエントリーを作る
  • メインページ、各アーカイブページで親カテゴリーのエントリーを表示しない設定をする
  • サイドバーのエントリーリストがある場合も親カテゴリーのエントリーを表示しない設定をする

ただし、エントリーアーカイブの前後のエントリーへのリンクについては親カテゴリーが表示されてしまいますので、ここではそのリンクがないページ構造であることを前提にします。
また実験では親-子カテゴリーまでの動作しか確認しておりません(子カテゴリーに対しさらに子カテゴリーがある場合の動作は未確認です)ので、予めご了承ください。

1.MTEntries タグの変更(カテゴリーアーカイブ)

カテゴリーアーカイブの MTEntries タグ(リスト1.1)をリスト1.2 のタグに変更します。

<MTEntries>
   :
[通常のMTタグ]
   :
</MTEntries>
リスト1.1 カテゴリーアーカイブ(変更前)
<MTEntriesWithSubCategories>
<MTIfCategory name="[除外したいカテゴリー]">
<MTElse>
   :
[通常のMTタグ]
   :
</MTElse>
</MTIfCategory>
</MTEntriesWithSubCategories>
リスト1.2 カテゴリーアーカイブ(変更後)

変更後の設定は、MTEntriesWithSubCategories タグでサブカテゴリーのエントリーも表示し、MTIfCategory タグで name 属性に記述されたカテゴリー、つまり親カテゴリーであれば何もしない(その他のカテゴリーであれば通常通り表示)という意味です。

たとえば、foo という親カテゴリーを除外したい場合は MTIfCategory タグの name 属性を

<MTIfCategory name="foo">
リスト1.3 name 属性設定例

とします。カテゴリー名は日本語でも大丈夫です。

除外したいカテゴリーが複数存在する場合、たとえば "foo" と "bar" という二つのカテゴリーを除外したい場合は、MTIfCategory タグを追加(リスト1.4の青色部分)して、

<MTEntriesWithSubCategories>
<MTIfCategory name="foo">
<MTElse>
<MTIfCategory name="bar">
<MTElse>
   :
[通常のMTタグ]
   :
</MTElse>
</MTIfCategory>
</MTElse>
</MTIfCategory>
</MTEntriesWithSubCategories>
リスト1.4 複数のカテゴリーを除外する方法

としてください。

2.MTEntries タグの変更(メインページ・日付アーカイブ・サイドバーの「最近のエントリー」等)

メインページ(アーカイブページも利用していれば含む)・日付アーカイブ・サイドバー等の MTEntries タグをリスト3.1 からリスト3.2 の内容に変更します。

<MTEntries>
   :
[通常のMTタグ]
   :
</MTEntries>
リスト3.1 メインページ・日付アーカイブ・サイドバー(変更前)
<MTEntries category_name="NOT [除外したいカテゴリー]">
   :
[通常のMTタグ]
   :
</MTEntries>
リスト3.2 メインページ・日付アーカイブ・サイドバー(変更後)

たとえば、foo という親カテゴリーを除外したい場合は MTEntries タグの category_name 属性を

<MTEntries category="NOT foo">
リスト3.3 category 属性設定例1

とします。カテゴリー名は日本語でも大丈夫です。

除外したいカテゴリーが複数存在する場合、たとえば "foo" と "bar" という二つのカテゴリーを除外したい場合は OR で区切り、さらにカッコで括って、

<MTEntries category="NOT (foo OR bar)">
リスト3.4 category 属性設定例2

としてください。

3.親カテゴリーにダミーエントリーをひとつ作る

カスタマイズは3項までで完了です。あとは子カテゴリーを表示したい親カテゴリーにエントリーをひとつ作成して「公開」で保存してください。

これで子カテゴリーのエントリーを書いて再構築を実行し、各ページでの表示を確認してください。

2006.11.10 追記
Ogawa::memoranda さんのアドバイスを受けて、カスタマイズ内容を修正しました(パッチの削除&MTIfCategory タグの記述変更)。

Comments [9] | Trackbacks [1]
2006年8月21日

カテゴリー・アーカイブにカテゴリーの月別リストを表示する

August 21,2006 1:10 AM
Tag:[, , ]
Permalink
カテゴリー・アーカイブにカテゴリーの月別リストを表示するカテゴリー・アーカイブに当該カテゴリーのエントリーを月別に表示するカスタマイズを紹介します。
スクリーンショットは当サイトの「Movable Type テンプレート」のカテゴリーの最近3ヶ月分を抜粋して表示したものです。

このカスタマイズは次のサイトで紹介されています。

Chitatopopsアーカイブ系のページでMTMonthHeaderを擬似的に実現

ということで、詳細につきましては上記サイトの「カテゴリーアーカイブで<MTMonthHeader>」下に表示されているリストをご利用ください。

また説明にある通り、MTTagInvokeCompare プラグインが事前に設定されていることが必要です。3.31-ja で利用する場合は MTTagInvoke のコードを修正する必要があります(下記参照)。

Movable Type 3.3 の再構築で「<MTTagName>タグが閉じられていません」になる問題の対処(改)

スクリーンショットのようにツリー表示をするためには、タグに若干の修正を加えます。

  • リストの h3 要素を span 要素に変更
  • タグ全体を div 要素で括り id 属性(名称は任意)を設定
  • ツリー化のカスタマイズを実施する

カテゴリー内で(そのカテゴリーの)エントリーを月別表示をするというテクニックはこれまでなかったと思われます。個人ブログ・ビジネスブログに関わらず色々活用できるのではないでしょうか。

Comments [14] | Trackbacks [1]
2006年8月18日

エントリー・アーカイブで親カテゴリーに含まれる全エントリーをサブカテゴリー別に表示

August 18,2006 12:25 AM
Tag:[, , , ]
Permalink

エントリー・アーカイブで、親カテゴリーに含まれる全エントリーをサブカテゴリー別に表示するカスタマイズです。

タイトルから機能を理解して頂くのは困難と思いますので、とりあえずサンプルで説明します。
まず、下記のようなサブカテゴリーリストを仮定します。

 植物
  ├ バラ科
  │  ├ やまぶき
  │  └ ワレモコウ
  ├ ユリ科
  │  ├ チューリップ
  │  └ ヒアシンス
  └ ラン科
     ├ サギソウ
     └ カトレア

 昆虫
  ├ コガネムシ科
  │  ├ カブトムシ
  │  └ スジコガネ
  └ アガハチョウ科
     ├ キアゲハ
     └ アゲハ

このサブカテゴリーリストは次の規則にもとづいています。

  • メインカテゴリー:「植物」または「昆虫」
  • サブカテゴリー:科目
  • エントリー:科目に属する植物または昆虫の「和名」

この前提で、ブラウザに表示するエントリー・アーカイブが「チューリップ」である場合、エントリー・アーカイブには親カテゴリー(植物)が属するすべてのエントリーをサブカテゴリー別に表示、つまり、

 植物
  ├ バラ科
  │  ├ やまぶき
  │  └ ワレモコウ
  ├ ユリ科
  │  ├ チューリップ
  │  └ ヒアシンス
  └ ラン科
     ├ サギソウ
     └ カトレア

を表示するというものです。

以下に、公開テンプレートを使ったサンプルを作ってみました。

サンプル

エントリー・アーカイブの左上に表示されている「親カテゴリーに属する全カテゴリー」が今回紹介するリストです。

エントリー・アーカイブに同一カテゴリーのエントリーを表示する方法は「個別エントリーアーカイブに同一カテゴリーのエントリーを表示」で紹介している通り、よく知られているテクニックですが、エントリーをカテゴリー別に表示したり、同じ親カテゴリーのエントリーを表示する方法は知られていません。

ただしこのカスタマイズには下記の制約があります。

  • 親カテゴリー(「植物」や「昆虫」)にエントリーが存在しないこと。
  • サブカテゴリーの下にサブカテゴリーが存在しない(「バラ科」の下に「サクラ属」というサブカテゴリーが存在しない)こと。

上記のリストを表示するMTタグです。

<MTParentCategory><MTSubCategories include_current="1">
<MTSubCatIsFirst><ul></MTSubCatIsFirst><MTIfNonZero tag="MTCategoryCount"><li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><$MTCategoryLabel$></a>
<MTEntries><MTEntriesHeader><ul></MTEntriesHeader><li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li><MTEntriesFooter></ul></MTEntriesFooter></MTEntries><MTElse><li><$MTCategoryLabel$></MTElse></MTIfNonZero><MTSubCatsRecurse max_depth="3"></li><MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories></MTParentCategory>

ツリー化するには、maketree.js を利用して、下記の青色部分を追加します。

<div class="side">
<div id="parentCategoryEntries">
<MTParentCategory><MTSubCategories include_current="1">
<MTSubCatIsFirst><ul></MTSubCatIsFirst><MTIfNonZero tag="MTCategoryCount"><li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><$MTCategoryLabel$></a>
<MTEntries><MTEntriesHeader><ul></MTEntriesHeader><li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li><MTEntriesFooter></ul></MTEntriesFooter></MTEntries><MTElse><li><$MTCategoryLabel$></MTElse></MTIfNonZero><MTSubCatsRecurse max_depth="3"></li><MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories></MTParentCategory>
</div>
</div>
 
<script type="text/javascript">
generateTreeForTreeStructure('parentCategoryEntries');
</script>

CSSは下記です。

ul.tree {
    margin: 0px!important;
    padding: 0px!important;
    font-size: 9px;
    list-style: none!important;
}
ul.tree ul {
    margin-left: 10px;
    padding: 0!important;
}
ul.tree li {
    margin: 0;
    padding: 0;
    background: none;
    list-style: none!important;
}
ul.tree li ul li {
    margin: 0 0 0 10px;
    padding-left: 13px;
    background-image: url(tree_lst.gif);
    background-repeat: no-repeat;
    list-style: none;
}
ul.tree li ul li.end {
    background-image: url(tree_end.gif);
    list-style: none;
}

このカスタマイズはカテゴリー・アーカイブに適用した場合も同様の動作をします。

Comments [13] | Trackbacks [1]
2006年2月11日

カテゴリー・アーカイブに前後カテゴリーのリンクを表示する

February 11,2006 11:57 PM
Tag:[, , , ]
Permalink

カテゴリー・アーカイブに前後カテゴリーのリンクを表示するエントリー・アーカイブで前後のエントリーのリンク、月別アーカイブで前後月のアーカイブリンクを表示するのと同じように、カテゴリー・アーカイブで前後のカテゴリーリンクを表示する(スクリーンショット)というオーソドックスなカスタマイズです。

リンクの表示には Supplemental Category Tags プラグインの MTCategoryPrevious/MTCategoryNext タグを利用します。参考サイトは下記です。ありがとうございました。

絵文録ことのはMT:前/次のカテゴリーへリンク

上記で配布元サイトの和訳が掲載されていますので、ここでは基本的な設定方法のみ記しておきます。

1.プラグインのダウンロード

配布元サイトの Supplemental Category Tags(下記)へジャンプし、Availability の項にある mtcatx-1_5.zip のリンクをクリックしてアーカイブをダウンロードします。

Brad ChoateSupplemental Category Tags

2.プラグインのアップロード

アーカイブを解凍した中にある、catx.pl および catx.pm を、下記の配置になるようにアップロードします。

(mt home)/plugins/catx.pl
(mt home)/extlib/bradchoate/catx.pm

bradchoate というディレクトリが存在しない場合は新しく作ってください。

3.テンプレートの修正

カテゴリー・アーカイブテンプレートに下記のリストを追加します。挿入箇所は <MTEntries> というタグより上の辺り(あるいは </MTEntries> より下)になります。エントリー・アーカイブの前後リンクを参考にされると良いでしょう。

<div id="menu">
<MTCategoryPrevious>
<a href="<$MTCategoryArchiveLink$>"> &laquo;
<$MTCategoryLabel$></a> |
</MTCategoryPrevious>
<a href="<$MTBlogURL$>">Main</a>
<MTCategoryNext> |
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$>
&raquo;</a>
</MTCategoryNext>
</div>

リストは配布元で公開されているものですので、赤色で示した div 要素 や id 属性はご自身のサイトに合わせ、リンクマーク(&laquo; または &raquo;)はお好きなものに適宜変更してください。

設定が完了したらカテゴリー・アーカイブを再構築してください。前後リンクが表示されれば完成です。

Comments [0] | Trackbacks [3]
2005年9月25日

親カテゴリーアーカイブにサブカテゴリーのエントリーを表示する

表題の通り、親カテゴリーのアーカイブページでサブカテゴリーのエントリーを表示する方法です。このサイトを例に挙げると、「カスタマイズ」というカテゴリーのサブカテゴリーには色々なサブカテゴリーがぶら下がってますが、「カスタマイズ」カテゴリーのページを開くとサブカテゴリーのエントリーも全て表示するようになっています。なんだかよく分からないけれどとりあえずカスタマイズ記事を色々眺めてみたい、という場合に便利です。

Movable Type ではオーソドックスなカスタマイズですが、改めてご紹介しておきます。

1.テンプレートの修正

カテゴリーアーカイブにある

<MTEntries>
     :
</MTEntries>

<MTEntriesWithSubCategories>
          :
</MTEntriesWithSubCategories>

に変更して、保存・再構築します。これで親カテゴリーにサブカテゴリーのエントリーが反映されるようになります。

2.サブカテゴリーのエントリー投稿時に親カテゴリーアーカイブを再構築する

Movable Type では「エントリの存在するカテゴリーしか再構築しません」という仕様になっています。つまり、あるカテゴリーAのサブカテゴリーであるカテゴリーBにエントリーを投稿した時、親カテゴリーAのアーカイブページは再構築されません(3.2でもこの仕様は変わっていないようです)。
これを解消するために ParentCategoryRebuild というプラグインを利用します。

David Raynes
ParentCategoryRebuild 1.1(3.1x用)
ParentCategoryRebuild 2.0(3.2用)

上記サイトより、parent-rebuild-1.1.zip (または parent-rebuild-1.1.tar.gz) をダウンロードし、アーカイブを解凍した中にある parent_rebuild.pl を plugins フォルダにアップロード(自宅サーバであればコピー)します。管理画面のメインメニューのプラグイン一覧に「ParentCategoryRebuild」が表示されればOKです。
この状態でエントリーを投稿すれば上記の問題は解消されます。

なお3.2日本語版ベータ2で上記プラグインを利用する場合、管理画面の「設定」→「プラグイン」→「ParentCategoryRebuild」欄の「設定を表示」をクリックして「Rebuild parent categories when an entry is published in a child category.」のチェックボックスをチェックし、変更を保存することで有効になります。

以上です。参考サイトは下記です。ありがとうございました。

我楽Movable Type 3.11-ja サブカテゴリー表示。
Magic WhiteMTEntriesWithSubCategoriesタグをもっと便利に
Ogawa::Memorandaサブカテゴリー機能について考えてみた。

2005.09.26 追記
3.2のプラグイン設定方法を追記しました。

Comments [36] | Trackbacks [11]
2005年7月30日

親カテゴリーにサブカテゴリーのエントリー数の合計を表示する

親カテゴリーにサブカテゴリーのエントリー数合計を表示Movable Type のサブカテゴリーリストで、親カテゴリーのエントリー数に、サブカテゴリーのエントリー数を合計して表示するカスタマイズです。SubCatCount プラグインを利用します。当サイトでは右側にあるカテゴリーリストの ( ) 部分に、サブカテゴリーとのエントリー数の合計を表示しています。

1.プラグインのダウンロード
下記のサイトの本文下の方にある「download」のリンクからアーカイブをダウンロードします。

Don't Back DownSub-Category Counting

2.プラグインファイルのアップロード
ダウンロードしたアーカイブを解凍して、その中にある SubCatCount.pl を plugins ディレクトリにアップロードします。

3.テンプレート修正
各テンプレートのサブカテゴリーリストを表示しているタグを下記のように修正します。

3.1 デフォルトテンプレートに追加:常にサブカテゴリーとの合計を表示
デフォルトテンプレートではカテゴリー数を表示する状態になっていませんので、単純に MTSubCatCount タグを追加します(青色部分)。この場合、サブカテゴリーをもつ親カテゴリーは常にサブカテゴリーのエントリー数の合計を表示します。

<div id="categories">
<h2>カテゴリー</h2>
 
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTSubCatCount$>]
<MTElse>
<li><MTCategoryLabel> [<$MTSubCatCount$>]
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>

3.2 デフォルトテンプレートに追加:親カテゴリーは自カテゴリーと合計の両方を表示
こちらはサブカテゴリーをもつ親カテゴリーに対して、自カテゴリーのエントリー数とサブカテゴリーのエントリー数の合計を両方表示する場合です。青色部分を追加します。

<div id="categories">
<h2>カテゴリー</h2>
 
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]<MTHasSubCategories>(<$MTSubCatCount$>)</MTHasSubCategories>
<MTElse>
<li><MTCategoryLabel><MTHasSubCategories> (<$MTSubCatCount$>)</MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>

3.3 公開テンプレートに追加:常にサブカテゴリーとの合計を表示
公開テンプレートではカテゴリー数を表示する状態になっているので、MTCategoryCount を MTSubCatCount タグに置き換え(赤色部分を削除し、青色部分を追加)、カテゴリーのエントリーがない条件タグには新たに追加します(青色部分)。表示内容は3.1と同様です。

<div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$><$MTSubCatCount$>]
<MTElse>
<li><MTCategoryLabel> [<$MTSubCatCount$>]
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>

3.4 公開テンプレートに追加:親カテゴリーは自カテゴリーと合計の両方を表示
サブカテゴリーをもつ親カテゴリーに対して、自カテゴリーのエントリー数とサブカテゴリーのエントリー数の合計を両方表示する場合です。青色部分を追加します。

<div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]<MTHasSubCategories>(<$MTSubCatCount$>)</MTHasSubCategories>
<MTElse>
<li><MTCategoryLabel> (<$MTSubCatCount$>)
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>

3.5 サブカテゴリーリストの折りたたみを利用:常にサブカテゴリーとの合計を表示
サブカテゴリーリストの折りたたみを利用している場合の修正方法です。赤色部分を削除し、青色部分を追加します。内容は3.1と同様です。

<div class="side">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$><$MTSubCatCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> [<$MTSubCatCount$>]<MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>

3.6 サブカテゴリーリストの折りたたみを利用:親カテゴリーは自カテゴリーと合計の両方を表示
サブカテゴリーリストの折りたたみを利用している場合で、サブカテゴリーをもつ親カテゴリーに対して、自カテゴリーのエントリー数とサブカテゴリーのエントリー数の合計を両方表示する場合です。青色部分を追加します。

<div class="side">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]<MTHasSubCategories>(<$MTSubCatCount$>)</div></MTHasSubCategories>
<MTElse>
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> (<$MTSubCatCount$>)<MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
Comments [13] | Trackbacks [7]
2005年5月 2日

個別エントリーアーカイブに同一カテゴリーのエントリーを表示

タイトルの通り、個別エントリーアーカイブで同一カテゴリーに属するエントリーの一覧を表示するカスタマイズです。公開テンプレートのカテゴリーアーカイブで同一カテゴリーのエントリー一覧を表示していますが、本カスタマイズを行うことで同じものを個別エントリーアーカイブに表示することができます。

一番最初にこのカスタマイズを発見したのは実はかなり昔で、下の記事です。

今日まで、そして明日から。-3rd spiral-個別記事のページにカテゴリのエントリ一覧を表示する
87designThis Category Entries (easy)(元記事)

ご近所サイトさんでは下記がありました(とりこぼしご容赦ください)。

ぐーたら on MT個別記事にその記事の属するカテゴリーの記事一覧を。
Magic White個別記事にカテゴリー内記事一覧表示
Stupid ExcuseThis Category Entries
やむやむThisCategoryEntriesですと!?

以下、カスタマイズ方法です。

1.MTTagInvoke プラグインをダウンロード

下記のサイトよりプラグインをダウンロード・解凍して、0.9 の場合は MTTagInvoke.pl を plugins フォルダに配置(またはアップロード)、1.0の場合は MTTagInvoke フォルダごと plugins フォルダに配置(またはアップロード) します。

MT ExtensionsMTTagInvoke

アップロード後、Movable Type 管理画面の

メイン・メニュー > システム・メニュー > プラグイン

でプラグインの一覧が表示されますので、その中に「MTTagInvoke」が表示されていればOKです。

2.テンプレートの設定

個別エントリーアーカイブテンプレートのサイドバーに下記のタグを設定します。上記のサイトからの情報をまとめて3パターン用意してみました。緑色は公開テンプレート用の設定を示しています。

注:MTTagInvoke プラグインは2006年9月7日、Movable Type 3.3 対応のため、1.0 にバージョンアップされました。これによりプラグインで使用されているMTタグの名称が下記のように変更されています。サンプルリストは 1.0 に合わせた内容に変更しましたので、もし 0.9 を使っている場合は、記事のサンプルリストをご利用になる際、適宜読み替えてください。

MTTagInvoke プラグインMTタグ対応表
1.0(現在)0.9
MTTagInvokeNameMTTagName
MTTagInvokeAttributeMTTagAttribute
MTTagInvokeContentMTTagContent

2.1 同一カテゴリーに属するエントリー一覧を表示

<div class="sidetitle">
Entries of this Category
</div>
 
<div class="side">
<MTTagInvoke tag_name="MTEntries">
<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>
<MTTagInvokeContent>
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTTagInvokeContent>
</MTTagInvoke>
</div>

2.2 表示するエントリー数を指定

2.1に青色部分を追加します。サンプルは最近の5件を表示する設定です。

<div class="sidetitle">
Entries of this Category
</div>
 
<div class="side">
<MTTagInvoke tag_name="MTEntries">
<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>
<MTTagInvokeAttribute name="lastn">5</MTTagInvokeAttribute>
<MTTagInvokeContent>
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTTagInvokeContent>
</MTTagInvoke>
</div>

2.3 エントリー毎にコメントを表示

2.1または2.2に青色字部分を追加します。サンプルは最近の5コメントを表示する設定です。

<div class="sidetitle">
Entries of this Category
</div>
 
<div class="side">
<MTTagInvoke tag_name="MTEntries"> 
<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>
<MTTagInvokeContent>
<MTIfNonZero tag="MTEntryCommentCount">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
<MTComments lastn="5">
└ <a href="<$MTEntryLink$>#<$MTCommentID$>"><MTCommentAuthor></a><br />
</MTComments>
</MTIfNonZero>
</MTTagInvokeContent>
</MTTagInvoke>
<div class="side">

2.4 ツリー化&日別表示をつける

「最近のエントリー」の日別表示を適用させてみました。サンプルは最近の10件を表示する設定になっています。lastn 指定の行を外せば全エントリーが表示されます。タグは ul -li のリスト形式になっていますのでご注意ください。

<div class="sidetitle">
Entries of this Category
</div>
 
<div class="side">
<MTTagInvoke tag_name="MTEntries">
<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>
<MTTagInvokeAttribute name="lastn">10</MTTagInvokeAttribute>
<MTTagInvokeContent>
<MTDateHeader>
<ul><$MTEntryDate format="%m/%d"$>
</MTDateHeader>
<li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a></li>
<MTDateFooter>
</ul>
</MTDateFooter>
</MTTagInvokeContent>
</MTTagInvoke>
</div>

MTTagInvoke プラグインはMTタグのタグアトリビュート(属性)に対してさらにMTタグを利用できるというものです。一番目のサンプルを例にすると、本来書きたいMTタグは

<MTEntries category="<$MTEntryCategory$>">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries>

となります。これは「最近のエントリー」表示用タグで、これに赤色部分で「表示されているエントリーのカテゴリーと同じエントリーを表示」を指定しているのですが、タグアトリビュート category の指定にMT変数タグ <$MTEntryCategory$> は指定できません(再構築でエラーとなります)。そこで MTTagInvoke プラグインを用いて、MTEntries の代わりに MTタグ名の指定

<MTTagInvoke tag_name="MTEntries">

を行い、続いて「タグアトリビュート category に <$MTEntryCategory$> を使う」という指定、

<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>

を行うことで、

<MTEntries category="<$MTEntryCategory$>">

と同じ効果を得ることができる訳です。ここではタグアトリビュートをひとつだけ指定していますが、複数指定することも可能です。

2006.05.25 追記
2.3項のタグで、コメントがないエントリーが表示される不具合を修正しました。

2006.10.02 追記
MTTagInvoke 1.0 の記述を追加しました。

2006.11.23 追記
サンプルリストを MTTagInvoke 1.0 にあわせました。

Comments [29] | Trackbacks [21]
2005年2月10日

カテゴリーリストをサブカテゴリー表示に切り替える

February 10,2005 4:35 PM
Tag:[]
Permalink

公開テンプレートのサイドメニューのカテゴリーリストですが、デフォルト状態では一括表示するように設定しています。これをサブカテゴリー表示に変更する方法を本エントリーにて記します。

サブカテゴリー表示に変更する場合、サブカテゴリー表示にしたいテンプレートのカテゴリーリスト用MTタグを下記のいずれかの方法で変更します。
カテゴリーリスト表示用のMTタグは下記です。「Categories」で検索すると良いでしょう。

<div class="sidetitle">
Categories
</div>
 
<!-- 全カテゴリー用 -->
<div class="side">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a>  [<$MTCategoryCount$>]<br />
</MTCategories>
</div>
<!-- 全カテゴリー用 -->
 
<!-- サブカテゴリー用
<div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>
     サブカテゴリー用 -->

なんとなくお分かりかと思いますが一番上がメニューリストのタイトルです。その下がメニューリスト表示用MTタグで、一括表示用の部分とサブカテゴリー表示用の部分に分かれています。デフォルトではサブカテゴリー表示部分を無効にしておりますので、これを有効にすればOKです。

一括表示のMTタグを残しておかなくて良い場合は赤線部分の行を単純に削除します。

<div class="sidetitle">
Categories
</div>
 
<!-- 全カテゴリー用 -->
<div class="side">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a>  [<$MTCategoryCount$>]<br />
</MTCategories>
</div>
<!-- 全カテゴリー用 -->
 
<!-- サブカテゴリー用
<div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>
     サブカテゴリー用 -->

一括表示のMTタグを残しておきたい場合は下記の通り赤色部分を削除し、青色部分を追加します。これはHTMLの「コメントアウト」という機能を利用してMTタグの有効・無効を制御しています。

<div class="sidetitle">
Categories
</div>
 
<!-- 全カテゴリー用 -->
<div class="side">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a>  [<$MTCategoryCount$>]<br />
</MTCategories>
</div>
<!-- 全カテゴリー用 -->
 
<!-- サブカテゴリー用 -->
<div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>
<!-- サブカテゴリー用 -->

なおリストをサブカテゴリー表示に変更した場合、上記のMTタグをデフォルト状態で使用するとカテゴリーアーカイブページにジャンプした時、カテゴリーリストには表示されているカテゴリー配下のカテゴリーしか表示されません。この問題を解消するためには下記のエントリーを参照ください。

カテゴリーアーカイブで全カテゴリーリストを表示

またインポート(管理メニューの「読み込み/書き出し」)を利用してエントリーを読み込んだ場合は以前のサブカテゴリー構成が解除されておりますので、管理メニューの「カテゴリー」をクリックした次のページで再度サブカテゴリーの設定が必要になります。
設定方法は、まず別のカテゴリーのサブカテゴリーとして移動したいカテゴリーの右側にある「移動」をクリックします。クリックするとページが切り替わりますので、親カテゴリーにしたいカテゴリーの左側にあるラジオボタンをクリックすればOKです。

Comments [22] | Trackbacks [9]
2004年12月13日

サブカテゴリーリストの折りたたみ

December 13,2004 1:00 AM
Tag:[]
Permalink

サイドメニューのサブカテゴリーリストの折りたたみカスタマイズをご紹介致します。

仕様

  • サブカテゴリーが存在する親カテゴリーの右側に折りたたみマークを表示します
  • 折りたたみマークは任意の文字を指定できます
  • カテゴリーのエントリーの有無には依存しません
  • 折りたたみ状態をcookieで保持します
  • カテゴリー名が折り返されても(多分)大丈夫です。

また、サイドメニューのツリー化スクリプトとの併用が可能です。以下設定方法です。
なおV3.0にサブカテゴリー折りたたみ機能を盛り込み済ですので、サイドメニューの折りたたみを既にご利用くださっている方につきましては下記の1項および6項をスキップしてください。

1.menufolder.js ダウンロード

下記のリンクをクリックするとスクリプトのページへジャンプします。そこで menufolder.js をクリックし、同じファイル名でご自身のPCに保存してください。

download

ファイルは UTF-8 で作成していますのでブログと同じ文字コードに合わせてください(よく分からない方はそのままで結構です)。

2.menufolder.js 設定変更

menufolder.js をテキストエディタ等を用いて、下記の青色行の赤色部分を本リストの通り(折りたたみマークは任意)に変更してください。

// カテゴリーリスト数計算方法
// サブカテゴリーのカテゴリー数を適正に計数する
// サブカテゴリーに対応:true
// 従来のカテゴリーに対応:false
var subCategoryCount = true;
 
       :
 
// サブカテゴリーフラグ
// サブカテゴリーの折りたたみを有効にする(テンプレート要設定)
// 有効にする:true
// 無効にする:false
var subCategory = true;
 
// サブカテゴリー用折りたたみマーク
var openMarkForSubCategories  = '';
var closeMarkForSubCategories = '';

設定内容の詳細は下記の通りです。

subCategoryCount

  • 名称:カテゴリーリスト数計算方法
  • 用途:カテゴリーリスト数計算方法を li タグ(サブカテゴリー表示)で計数するか、a タグ(従来の一括表示)で計数するかを指定します。
  • 設定値: true:li タグで計数/false:a タグで計数

subCategory

  • 名称:サブカテゴリーの折りたたみ有効フラグ
  • 用途:サブカテゴリーの折りたたみの有効/無効を設定します。ここでは有効にします。
  • 設定値: true:有効/false:無効

openMarkForSubCategories/closeMarkForSubCategories

  • 名称:サブカテゴリーの折りたたみマーク
  • 用途:サブカテゴリー名横に表示する折りたたみ用リンクのマーク
  • 設定値:任意の文字(設定したマークを''で括るように)

3.menufolder.js 配置

menufolder.js の修正が終わったら保存し、ローカル・サイト・パスに配置してください。「配置」とはレンタルサーバの場合はFTPツール等によるアップロード、自宅サーバの場合は単なるコピーを示します。

4.カテゴリーリスト表示用タグ修正

折りたたみを利用する各テンプレートの、カテゴリーリストを表示するタグを変更します。上は3.1x用の公開テンプレートからの抜粋ですので、この赤色部分を下のリストの青色部分と入れ替えてください。

<div class="sidetitle">
Categories
</div>
 
<!-- 全カテゴリー用 -->
<div class="side">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a>  [<$MTCategoryCount$>]<br />
</MTCategories>
</div>
<!-- 全カテゴリー用 -->
 
<!-- サブカテゴリー用
<div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>
     サブカテゴリー用 -->
<div class="sidetitle">
Categories
</div>
 
<!-- サブカテゴリー用 -->
<div class="side">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
<!-- サブカテゴリー用 -->

緑色は公開テンプレートからの変更または追加部分を示しています。また

<div class="side">

の部分に折りたたみ用の id 属性を設定されている場合は、現在の設定を反映させてください。

5.JavaScript起動用スクリプト設定

折りたたみを利用する各テンプレートに、menufoleder.js の FoldNavigation を起動するスクリプトを設定します。この設定方法には 起動スクリプトの自動生成と手動設定の2通りがあります。
menufolder.js を起動する単位は親カテゴリーです。つまり、折りたたむ親カテゴリーの増減が発生するとこの起動部分も増減、つまり変更の必要が生じます。自動生成ではMTタグを用いており、折りたたみが必要な親カテゴリーの id 属性を取得し、起動スクリプトを再構築時に自動生成ます。手動設定の場合は親カテゴリー分の起動スクリプトを文字通り手動で挿入します。
普通に考えれば前者しかありえませんが、自動生成では折りたたみの初期状態を「全て開く」または「全て閉じる」のいずれかのみしか選択できない、また子カテゴリーを持つ全ての親カテゴリーに折りたたみマークが付与されるのがデメリットです。手動設定は面倒な反面、初期状態を親カテゴリー別にきめ細かく設定できます。また折りたたむ親カテゴリーを任意に選択することができます。
という訳で自動生成を行う場合は5.1を、手動設定の場合は5.2の作業を行ってください。

5.1 自動生成の場合

折りたたみを利用する各テンプレートに下記のタグを、4項で設定したタグの直下に挿入します。

<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','off',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

赤色部分は5.2(2)項の initState を参照して適宜変更してください。

5.2 手動設定の場合

(1)MTCategoryID取得

まず折りたたみマークが付与される各親カテゴリーのMTCategoryIDを取得(単なるメモ)します。繰り返しになりますが5.2項を選択された場合は、サブカテゴリーをもつ親カテゴリーが増減する度に修正が必要になります。
管理メニューの「カテゴリー」をクリックしてカテゴリー名をマウスオン(またはクリック)するとステータスバー(あるいはアドレス)に

http://~/mt.cgi?__mode=view&_type=category&blog_id=1&id=n

が表示されます。このURLの最後の n がMTCategoryIDですので、カテゴリー名とMTCategoryIDの対応を(メモする等で)記録してください。
とりあえず5.1(1)をテンプレートに設定・再構築して、そのソースを取得して5.2(2)に反映させるという手もあります。

(2)JavaScript起動用スクリプト設定

折りたたみを利用する各テンプレートで、menufolder.js を起動するためのスクリプトを4項で設定したタグの直下に挿入します。まずはサンプルをご覧ください。

<script type="text/javascript">
<!--
FoldNavigation('subcategories18','on',false);
FoldNavigation('subcategories22','on',false);
FoldNavigation('subcategories24','on',false);
FoldNavigation('subcategories31','off',false);
//-->
</script>

青色は挿入部分、赤色は適宜修正します。それぞれのフォーマット、意味および設定値は下記の通りです。

FoldNavigation('idName','initState',viewListNumber);

idName

  • 名称:id属性名
  • 用途:折りたたむメニューのid属性を指定します。
  • 設定値:このスクリプトの直前のメニューのid属性名("name"または"list"を除去した形)

initState

  • 名称:初期状態
  • 用途:ページを最初に表示した時の折りたたみ状態を指定します
  • 設定値: on:開いた状態/off:閉じた状態
viewListNumber
  • 名称:リスト数表示
  • 用途:メニュータイトル横にリスト数の表示・非表示を設定します
  • 設定値: true:表示/false:非表示(本カスタマイズでは false 固定)

この例ではMTCategoryIDが18、22、24、31を折りたたむ親カテゴリーとして4行記述しています。18、22、24の3つは開いた状態、31は閉じた状態で表示されます。
折りたたむカテゴリー数は各サイトで異なりますので折りたたみが必要なカテゴリー数分を上記の例にならって記述し、5.2(1)で記録したMTCategoryIDは赤色部分に

subcategories + MTCategoryID

という文字列で設定してください(「複数形になっている」とかいうツッコミはなし)。スクリプトはこの文字列「subcategories」を判別してサブカテゴリーの折りたたみ処理を実行していますのでお間違えのないように気をつけてください。

6.menufolder.js インクルード文挿入

折りたたみを利用する各テンプレートの <head>~</head> の間に下記のタグを追加してください。charset 属性は menufolder.js の文字コードを指定してください。

<script type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="utf-8"></script>

7.スタイルシート設定

スタイルシート(styles-site.css)に下記の位置(.side #categories li の下)に、折りたたみマーク装飾用のスタイル(青色部分)を追加してください。

.side #categories li {
    margin-top: 0px;
    margin-bottom: 0px;
    list-style-type: circle;
 
.subcategories a.foldmark {
    font-size:9px; /* マークのフォントサイズ */
    text-decoration: none; /* マークの文字装飾(何も表示しない) */
}

設定はデザインに応じて適宜変更ください。

8.注意事項

・本カスタマイズを行う場合、他の折りたたみメニューで "subcategories" という id 属性は使用しないで下さい。
・カテゴリーリスト自体を折りたたむ場合、リスト数の計数を適正に行うためにカテゴリーリストの id 属性名を「category」にしてください。id 属性名を変更したい場合は、menufolder.js の下記の赤色部分を使用する id 属性名に修正してください。

if (subCategoryCount) {
    if (idName == 'category') {
        objItems = objLists.getElementsByTagName('li');
    } else {
        objItems = objLists.getElementsByTagName('a');
    }
} else {
    objItems = objLists.getElementsByTagName('a');
}

9.FAQ

Q:折りたたみマークが表示されません
A:menufolder.js 起動スクリプトの設定(5.2(2)項)が誤っている、6項が設定されていない、6項で設定したパスに menufolder.js がない、2項のサブカテゴリーフラグが true になっていない、ブログと menufolder.js の文字コードが一致していない等が考えられます。

Q:カテゴリーリストのリスト数が表示されているカテゴリー数と一致しません
A:2項の subCategoryCount および8項の2番目の内容を再度ご確認ください。

Q:折りたたみマークをクリックするとマークが変わってしまいます
A:テンプレート内のどこかで不要な menufolder.js をインクルードしています。私はこれで2日ほど悩みました(バカ)

Q:他のアーカイブページにジャンプすると折りたたみマークや表示位置が変わってしまいます
A:ジャンプしたアーカイブのテンプレートで誤った menufolder.js をインクルードしている可能性があります(これも私)。

2004.12.13 追記
カテゴリーリスト数表示の注意事項がもれてましたので、記事引用くださっている方は8項の記述も追加してやってください。また5.2(2)のリストに冗長な部分がありましたので削除致しました。

2005.03.31 追記
サイドメニューツリー化スクリプトへのリンクを文中に追加しました。

2006.04.04 追記
リストから language 属性を削除しました(HTML4.01/XHTMLで非推奨あるいは廃止されているため)。

Comments [120] | Trackbacks [40]
2004年12月 8日

サブカテゴリーと副カテゴリーでカテゴライズ

December 8,2004 1:00 AM
Tag:[, , ]
Permalink
[旧カテゴリー] 旧カテゴリーサブカテゴリー機能を用いて、手始めに Movable Type 関連のエントリーをカテゴライズしました。 これまで Movable Type に関するエントリーについては使用中のバージョンに属する形で書いていたのですが、これを大幅に見直しました。文章で書くより左の新旧画像を見て頂ければお分かりになると思います。 例えばカテゴリーリストを用いて検索を行う場合、バージョンよりも機能や操作・概念等で分類した方が明らかに都合がいいです。テンプレートを公開している割に「テンプレート」というカテゴリーがないのも何なので独立したカテゴリーにしました。まだ全部ではありませんがカスタマイズについてはカテゴリーリストから視覚的に検索できるように分類してみました。時間をかけて他のエントリーについても適正なカテゴリーに配したいと考えてます。 訪問される方にとってはテンプレート等の一部のカテゴリーを除いて、バージョンがいくつであるかはたいした問題ではないのですが、個人的には日付アーカイブとは別にどのバージョンでどのような作業を行っていたかを記録したいと考えました。 この両者の要求を実現するにはエントリータイトルにバージョンを付与する等といった力任せの作戦もありますが、今回は「副カテゴリー」を用いることにしました。
[新カテゴリー] 新カテゴリー

副カテゴリー選択Movable Type ユーザー・マニュアル:カテゴリーに書かれている通り、各エントリーは、1つの主カテゴリーと1つ以上の副カテゴリーに割り当てることができます。主カテゴリーと副カテゴリーの間に優劣はなく、アーカイブリンクに主カテゴリーが便宜上用いられます。この機能を用いることで異なるカテゴリーに同一エントリーを配することができます。
副カテゴリーの設定方法は、図のようにエントリー編集画面の「主カテゴリー」の下に

複数のカテゴリーを設定する

というリンクをクリックします。クリックすると副カテゴリー設定画面がポップアップします。左の「ウェブログのカテゴリー」から新たに加えたいカテゴリーを選択し、>> ボタンで右の「副カテゴリー」に移動させ「保存」をクリックします。保存後、さらにエントリー編集画面の「保存」をクリックすれば作業完了です。

ということで、これまでのバージョン別のカテゴリーもそのまま残すことにしました。このカテゴリーには今までと同じエントリーが含まれています。が作業をやっている途中で気がついたので、一部該当カテゴリーから削除されているものもあります(バカ)。予めご了承ください。

Comments [14] | Trackbacks [1]
2004年11月24日

カテゴリーアーカイブで全サブカテゴリーリストを表示

November 24,2004 1:31 AM
Tag:[, ,