インデックスページを作る・その３〜内容編〜

• シェアする
• 
• Tweet

ニュース記事の一覧を表示させる

次はニュース記事の表示をMT化していきます。
管理画面の記事からニュース記事をいくつか作っておきましょう。

作ったニュース記事を一覧にしてトップページに載せていきます。
ニュース記事を表示させる場所はここです！

そうです！ぺージ同様に、記事にもタイトル、URLを表示させるMTタグがあります。

<mt:Entries>

ブログ記事の一覧のためのブロックタグです。

https://movabletype.net/tags/2007/08/entries.html

まずはこのブロックタグでブロックを囲みましょう。

<$mt:EntryTitle$>

ブログ記事のタイトルを表示します。

https://movabletype.net/tags/2007/08/entrytitle.html

<$mt:EntryPermalink$>

ブログ記事を含むアーカイブの絶対 URL を表示します。

https://movabletype.net/tags/2007/08/entrypermalink.html

<$mt:EntryBody$>

ブログ記事の本文を表示します。

https://movabletype.net/tags/2007/08/entrybody.html

<$mt:EntryExcerpt$>

ブログ記事の概要に入力した内容を表示します。指定がない場合はブログ記事の本文を、最初から 40 文字（デフォルト値）表示します。（後述のモディファイアで指定します。）

https://movabletype.net/tags/2007/08/entryexcerpt.html

こちらも記事と同様、URLを表示させるMTタグと組み合わせて、テンプレートに入れ込んでみましょう。

<mt:Entries>
  <dl class="newsArea__dateList">
    <dt>
        <p class="newsArea__day">2017.02.11</p>
        <a href="news/"><p class="newsArea__category">カテゴリ</p></a>
    </dt>
    <dt>
      <h3 class="newsArea__title"><$mt:EntryTitle$></h3>
    </dt>
    <dd>
      <$mt:EntryExcerpt$>
      <p class="newsArea__link">
        <a href="<$mt:EntryPermalink$>">続きを読む</a>
      </p>
    </dd>
  </dl>
</mt:Entries>

記事一覧が表示されました！！

一覧はこちらにはニュース一覧を表示させる、news.htmlへのリンクを貼ってあげましょう。
前につかった、ブログのURLを表示させる<$mt:BlogRelativeURL$>をつかって、

<p class="top-newsArea__newsRelease">
  <a href="<$mt:BlogRelativeURL$>news.html">一覧はこちら</a>
</p>

で、リンクが完成です！

モディファイアを使おう

さて、マニュアルや既存のテーマを見ていると、MTタグの中にlastn="1"やsort_by="title"などが付いているものがありますね。
これらをモディファイアといい、設定することでMTタグに細かい指定ができるようになります。

例えば先ほど指定した、ブログ記事の一覧を表示するmt:Entriesには、
記事を指定した数だけ表示するモディファイアや、並べる順番のルールを指定するモディファイアが用意されています。
またカスタムフィールドの値を使って表示したり、振り分けたりもできます。
組み合わせればテーマの幅が広がります！ぜひマスターしていきましょう！

今回は、”エントリー記事の一覧”を、決まった記事数だけ表示させてみようと思います。

そんなときはlimit="N"を追加しましょう。

limit="N"

limit モディファイアは、指定された条件でフィルタリングした結果を指定数を最大件数として表示します。
指定可能な値は1-100のみです。

<mt:Entries limit="3">

3件が表示されました！

さらに、sort_by=""を追加すると、ブログ記事を並び替える対象を指定できるようになります。
初期値が公開日順番での並び替え（authored_on）になっているため、今回はこのままで最新3件を表示することができます。

最新3件以外にも、モディファイアの指定で任意の記事を出力することができます。タグリストを参考にカスタマイズしてみましょう！

同様に、日付を表示するタグもモディファイアで好きな表示方法にできますね。
日付に関するテンプレートタグのモディファイアリファレンス

ブログ記事の概要に入力した内容を表示する<$mt:EntryExcerpt$>も、モディファイアwords="20"で出力する文字数を指定できます。

上の最新ニュース一覧エリアはこのようになりました。

<mt:Entries limit="3">
  <dl class="newsArea__dateList">
    <dt>
      <p class="newsArea__day">
        <$MTDate format="%Y.%m.%d"$>
      </p>
    <mt:EntryCategories type="primary">
      <a href="<$mt:CategoryArchiveLink$>" class="category">
        <p class="newsArea__category"><$mt:CategoryLabel encode_html="1"$></p>
      </a>
    </mt:EntryCategories>
    </dt>
    <dt>
      <h3 class="newsArea__title"><$mt:EntryTitle$></h3>
    </dt>
    <dd><$mt:EntryExcerpt words="20"$>
      <p class="newsArea__link">
      <a href="<$mt:EntryPermalink$>">続きを読む</a>
      </p>
    </dd>
  </dl>
</mt:Entries>

ページの一覧を表示させる

同様に、ページの一覧を表示させましょう！以下の画像の箇所になります。

<ul class="top-pagesArea__thumbnailList">
  <mt:Pages limit="3">
    <li>
      <a href="<$mt:PagePermalink$>">
        <div class="top-pages__item">
          <h2 class="item__title"><$mt:PageTitle$></h2>
        </div>
      </a>
    </li>
  </mt:Pages>
</ul>

ページ３件と、ページタイトルが一覧表示できました！
<mt:Entries>同様、<mt:Pages>もモディファイアlimit="N"で、３つのみを表示させています。

ページ一覧のサムネイル画像は、カスタムフィールドを設定することで、ウェブページ編集画面から各ページ投稿することができるようになります。
カスタムフィールドの使い方は、後ほど説明します。