メインページを作る・その３〜内容編〜　| トフでもできる！？MovableType.net テーマ開発

知識編

2 テーマ書き出す読み込む
テーマを書き出す/読み込む

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

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

次はニュース記事の表示を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:EntryDate$>: ブログ記事の公開日を表示します。; https://movabletype.net/tags/2007/08/entrydate.html; モディファイアの指定で色々なオプションがつけられます。; https://movabletype.net/tags/date-formats.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"><$mt:EntryDate$></p>
        <a href="news/"><p class="newsArea__category">カテゴリ</p></a>
    </dt>
    <dt>
      <p class="newsArea__title"><$mt:EntryTitle$></p>
    </dt>
    <dd>
      <$mt:EntryExcerpt$>
      <p class="newsArea__link">
        <a href="<$mt:EntryPermalink$>">続きを読む</a>
      </p>
    </dd>
  </dl>
</mt:Entries>

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

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

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

で、リンクが完成です！

カテゴリ名を表示させる

記事の表示が完了したら、カテゴリ名も正しく表示していきましょう。
現在「カテゴリ」と表示されている場所に、実際に記事が属しているカテゴリの名前を表示させます。さらに、クリックするとカテゴリ別アーカイブに飛ぶようにリンクを設置してみましょう。
カテゴリ関連のMTタグはこちらです。

<mt:EntryCategories>: ブログ記事に指定したカテゴリの一覧のためのブロックタグです。; https://movabletype.net/tags/2007/08/entrycategories.html
<$mt:CategoryLabel$>: カテゴリ名を表示します。; https://movabletype.net/tags/2007/08/categorylabel.html
<$mt:CategoryArchiveLink$>: カテゴリアーカイブの URL を表示します。; https://movabletype.net/tags/2007/08/categoryarchivelink.html

先ほど書き換えた、<mt:Entries>〜</mt:Entries> 内にあるカテゴリに関する箇所を、以下のように変更していきます。

<mt:Entries>
  <dl class="newsArea__dateList">
    <dt>
      <p class="newsArea__day">
        <$mt:EntryDate$>
      </p>
    <mt:EntryCategories>
      <a href="<$mt:CategoryArchiveLink$>" class="category">
        <p class="newsArea__category"><$mt:CategoryLabel$></p>
      </a>
    </mt:EntryCategories>
    </dt>
    <dt>
      <p class="newsArea__title"><$mt:EntryTitle$></p>
    </dt>
    <dd>
      <$mt:EntryExcerpt$>
      <p class="newsArea__link">
        <a href="<$mt:EntryPermalink$>">続きを読む</a>
      </p>
    </dd>
  </dl>
</mt:Entries>

モディファイアを使おう

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

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

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

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

そんなときはlimit="N"を追加しましょう。
さらにsort_by="foo"、sort_order="ascend | descend"を追加すると、ブログ記事を並び替える対象と並び順を指定できるようになります。 sort_by="foo"の初期値は公開日順、sort_order="ascend | descend"の初期値は降順 (新しいものが上) 、になっているため、今回は追記しなくても最新3件を表示することができます。

limit="N": limit モディファイアは、指定された条件でフィルタリングした結果を指定数を最大件数として表示します。
指定可能な値は1-100のみです。; https://movabletype.net/tags/2007/08/entries.html
sort_by="foo": ブログ記事を並び替える対象を指定します。初期値は公開日順です。; https://movabletype.net/tags/2007/08/entries.html
sort_order="ascend | descend": 並べる順序を指定します。初期値は descend です。; https://movabletype.net/tags/2007/08/entries.html

<mt:Entries limit="3">

3件が表示されました！

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

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

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

また、カテゴリの一覧を表示する <mt:EntryCategories>〜</mt:EntryCategories> は、モディファイアの指定がない場合、記事が属している全てのカテゴリが表示されます。
今回は、メインに設定したカテゴリのみを表示させたいので、モディファイア type="primary" を付けましょう。

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

<mt:Entries limit="3">
  <dl class="newsArea__dateList">
    <dt>
      <p class="newsArea__day">
        <$mt:EntryDate 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>
      <p class="newsArea__title"><$mt:EntryTitle$></p>
    </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>

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

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

次に進む！

前に戻る！

サーバー不要の
高速WebCMSサービス

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

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

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

カテゴリ名を表示させる

モディファイアを使おう

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