現在の記事と同カテゴリ内記事を一覧表示する(MT6/モバイル対応)

  • 投稿日:
  • 更新日:2015/02/28
  • by
  • カテゴリ:

Movable Typeで同カテゴリの記事一覧を表示したい

MovableTypeLogo.png

Movable Typeで、今見ている記事と同じカテゴリの記事を一覧表示したいことがあります。本ページでも右側のサイドバー(携帯端末の場合は下の方)に「同カテゴリの記事」として表示されています。 それをウィジェット(画面の右や左に出ているカテゴリや最近の記事などが表示されるところ)で行いたいので、調べたところ方法はいろいろあるようです。 今回はこちらを参考にしつつモバイル対応しているMovable Type 6のレスポンシブデザインでできるようにしてみました。

1. まず、ブログの設定画面で「デザイン」→「ウィジェット」を選択します。

2. 次に、「ウィジェットテンプレート」のところで「ウィジェットテンプレートの作成」を押します。

3. 上のタイトル部分には適当な値(たとえば「同じカテゴリの記事」)と入力し、その下のコード部分には以下をコピーします。

<mt:Unless name="main_index">
  <mt:If name="entry_archive">
    <mt:SetVarBlock name="catname"><mt:EntryCategory></mt:SetVarBlock>
    <mt:SetVarBlock name="current"><mt:EntryTitle></mt:SetVarBlock>
    <mt:Entries category="$catname">
      <mt:SetVarBlock name="entitle"><mt:EntryTitle></mt:SetVarBlock>
      <mt:EntriesHeader>
        <nav class="widget-recent-entries widget">
        <h3 class="widget-header">同カテゴリの記事</h3>
        <div class="widget-content">
        <ul class="widget-list">
      </mt:EntriesHeader>
      <li class="<mt:If name="entitle" eq="$current">active</mt:If>"><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li>
      <mt:EntriesFooter>
        </ul>
        </div>
        </nav>
      </mt:EntriesFooter>
    </mt:Entries>
  </mt:If>
</mt:Unless>

4. 「変更を保存」をクリックして保存します。

5. 再び「デザイン」→「ウィジェット」を選択し、「ウィジェットセット」から「関連コンテンツ」(または関係するウィジェットセット)を選択します。

6. 「利用可能」のウィジェットに先ほど保存したウィジェット(たとえば「同じカテゴリの記事」)があるはずなので、それを「インストール済み」のどこかの位置にドラッグし、「変更を保存」を押します。

7. 再構築ボタンを押し、「記事アーカイブのみ」を選択して再構築します。

上記だと、同じカテゴリのすべての記事がウィジェットに出てきます。 これだと多すぎて困る場合などは、上記のコードのうちの5行目の

    <mt:Entries category="$catname">

の部分を

    <mt:Entries category="$catname" lastn="10">

などとすると表示数を調整できます(lastn="10"の数値の部分は表示する記事数ですので、適宜調整してください)。

あとこの場合、上記9行目の「同カテゴリの記事」と書いてある部分を「同カテゴリの最近の記事」とかした方がいいかもしれませんね。

こちらもよく読まれています