トフでもできる!? Movabletype.netテーマ開発

もくじに戻る

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

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

次はニュース記事の表示を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

<$mt:EntryExcerpt$>をつかって記事の出だしだけを表示させることができるね。
最初にちょっぴり記事を出して、全文が読みたいときは記事にとべるように、リンクを設置したいな♩

たくらみトフ

こちらも記事と同様、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には、
記事を指定した数だけ表示するモディファイアや、並べる順番のルールを指定するモディファイアが用意されています。
またカスタムフィールドの値を使って表示したり、振り分けたりもできます。
組み合わせればテーマの幅が広がります!ぜひマスターしていきましょう!

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

記事が全部出ちゃうと、増えたときにトップページが長〜くなっちゃうよね。
最新記事を5件だけ表示したいな。

かちこちトフ

そんなときは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>

記事は新しい順に3件、表示する文字は20文字だけに指定できたよ。

虫眼鏡トフ

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

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

え〜と、ウェブページの情報を表示させるには<mt:pages></mt:pages>で囲んで…
タイトルを表示させるのは<$mt:PageTitle$>…いままで覚えたMTタグと使い方で、作れそう!!?

クエスチョントフ

<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>

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

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

サンプルを見る