インデックスページを作る・その２〜ナビ編〜　| トフでもできる！？テーマ開発講座

知識編

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

インデックスページを作る・その２〜ナビ編〜

ナビゲーションを表示させる

つづいて、ナビゲーションをMT化していきます。
今表示しているぺージ１、２…というのは、HTMLで書いているものなので、
MovableType.net でつくったwebぺージが表示されているわけではありません。

ナビ部分です。

これを、 MovableType.net 上で作ったぺージのタイトルが並ぶようにします。

まずは管理画面、ウェブページ＞新規から、webぺージをいくつか作りましょう。

わかりやすいタイトルをつけてあげましょう。

つくったら、再びテンプレート編集画面に戻ります。
ウェブページ関連のMTタグをご紹介します。ウェブページ一覧を表示させるには、その範囲を<mt:Pages>〜〜</mt:Pages>で囲み、
その中にウェブページのタイトルを表示させる<mt:PageTitle>、
ウェブページのアドレスを表示させる、<mt:PagePermalink>を使います。

<mt:Pages>: ウェブページの一覧を表示するためのブロックタグです。; https://movabletype.net/tags/2007/08/pages.html
<$mt:PageTitle$>: ウェブページのタイトルを表示します。; https://movabletype.net/tags/2007/08/pagetitle.html
<$mt:PagePermalink$>: 現在のページのアーカイブへの絶対 URL を表示します。; https://movabletype.net/tags/2007/08/pagepermalink.html

タグの種類

上で、<mt:Pages>〜〜</mt:Pages>で「囲む」、また「ブロックタグ」と解説しました。
実はMTタグには種類があり、その種類によって使い方が異なります。

ブロックタグ: 開始タグと終了タグがあり、ひとまとまりのテンプレートを囲みます。（HTMLタグのような使い方ですね。）<mt:Pages>は、それにあたります。
ファンクションタグ: 単体での利用が可能です。どこでも利用可能なもの、特定のブロックタグの囲み内でのみ、利用可能なものがあります。

例えば、ページ名やページのアドレスを取得したい場合は、<mt:Pages>〜〜</mt:Pages>のブロックタグで囲んであげると、そのブロック内のページの名前が、ファンクションタグ<$mt:PageTitle$>で取得できるようになります。

あ！ファンクションタグは"$"で囲まれてるんだ！

タグに種類について詳しくは、こちらのページに書かれているので参考にしてみてくださいね！
タグリスト＞テンプレートタグの種類と働き

ナビゲーションを表示させる

以上を踏まえて、ウェブページのタイトルとリンク先をMTタグで取得できるように記述してみます。

<mt:Pages>
  <ul  class="navi-list clearfix">
    <li>
      <a href="<$mt:PagePermalink$>"><$mt:PageTitle$></a>
    </li>
  </ul>
</mt:Pages>

一旦、サンプルに実装されれているホバーの仕組みをなくしてしまいます。（後でまたつけますので安心してくださいね。）
ページの数だけを自動で取得してくれるので以前より短くなります。
これで保存してみると…

ナビが表示されています！

ぺージが表示され、メニューになりました！！

フォルダ内のウェブページを取得する

さて、このナビゲーション。このままでもいいのですが、さらに MovableType.net の機能に合わせて改良していく必要があります。それはどこかというと…
フォルダ！！

ぺージはフォルダに入れることができます。ぺージをフォルダ構造にしたら、ナビにはフォルダ名を表示させたいですよね。

ナビにはフォルダ名が並んでいて、ホバーしたら中にあるぺージ名がでてきてくれたらいいな〜

ホバーの仕組みはCSSの方に用意してあるので、ここではフォルダ名と、中のページ名を表示する方法を覚えましょう。
確認のため管理画面のウェブページ＞フォルダフォルダ作成から新しいフォルダを作り、
ウェブページをその中にいれておきましょう。

ホバーのCSSに対応させたHTMLをもとに、先ほどのMTタグを入れたものを用意してあります。

<mt:Pages>
  <ul class="navi-list clearfix">
    <li>
     <a href="<$mt:PagePermalink$>"><$mt:PageTitle$></a>
      <ul class="navi-list__sub">
        <li><a href="#">サブメニュー</a></li>
        <li><a href="#">サブメニュー</a></li>
        <li><a href="#">サブメニュー</a></li>
        <li><a href="#">サブメニュー</a></li>
      </ul>
    </li>
  </ul>
</mt:Pages>

これをもとに考えてみましょう。

また、フォルダの中にフォルダを置くこともできるので（ここでは最上位のフォルダ・サブフォルダと呼びます）すべてのフォルダの中に入っているぺージが表示できるようにします。

<mt:TopLevelFolders>: 現在のフォルダに関わりなく、最上位のフォルダからサブフォルダを含めたリストを表示するブロックタグです。<mt:TopLevelFolders>〜</mt:TopLevelFolders>で囲んで使います。
https://movabletype.net/tags/2015/03/mttoplevelfolders.html
<mt:SubFolders>: 現在のフォルダのサブフォルダを階層化して一覧表示するブロックタグです。; https://movabletype.net/tags/2015/12/subfolders.html
<$mt:FolderLabel$>: フォルダの名前を表示します。; https://movabletype.net/tags/2007/08/folderlabel.html
<$mt:SubFolderRecurse$>: そのフォルダに属するサブフォルダのmt:SubFoldersブロックを表示します; https://movabletype.net/tags/2015/12/subfolderrecurse.html

これをホバーができるHTMLに組みこみます。

<ul class="navi-list clearfix">
  <mt:TopLevelFolders>
    <li>
    <a href="#">
    <$mt:FolderLabel$>
    </a>
      <ul class="navi-list__sub">
        <mt:Pages>
          <li>
            <a href="<$mt:PagePermalink$>">
              <$mt:PageTitle$>
            </a>
          </li>
        </mt:Pages>
        <mt:SubFolders>
          <li class="navi-list__sub--title">
            <$mt:FolderLabel$>
          </li>
          <mt:Pages>
          <li>
          <a href="<$mt:PagePermalink$>">
          <$mt:PageTitle$>
          </a>
          </li>
          </mt:Pages>
          <$mt:SubFolderRecurse$>
        </mt:SubFolders>
      </ul>
    </li>
  </mt:TopLevelFolders>
</ul>

これでフォルダ名とフォルダに含まれたページが表示されました。

最後に、フォルダに入っていないページを表示するための記述

<mt:Pages no_folder="1">
 　 <li>
  　  <a href="<$mt:PagePermalink$>">
   　   <$mt:PageTitle$>
   　 </a>
  　</li>
</mt:Pages>

を追加しましょう。

no_folder="1": フォルダに属さない、トップレベルに作成されたウェブページのみを表示する、モディファイアです。モディファイアについては後ほど詳しく説明します。

最終的なコードはこうなりました。

<ul class="navi-list clearfix">
  <mt:TopLevelFolders>
    <li>
    <a href="#">
    <$mt:FolderLabel$>
    </a>
      <ul class="navi-list__sub">
        <mt:Pages>
          <li>
            <a href="<$mt:PagePermalink$>">
              <$mt:PageTitle$>
            </a>
          </li>
        </mt:Pages>
        <mt:SubFolders>
          <li class="navi-list__sub--title">
            <$mt:FolderLabel$>
          </li>
          <mt:Pages>
          <li>
          <a href="<$mt:PagePermalink$>">
          <$mt:PageTitle$>
          </a>
          </li>
          </mt:Pages>
          <$mt:SubFolderRecurse$>
        </mt:SubFolders>
      </ul>
    &lt/li>
  </mt:TopLevelFolders>
<mt:Pages no_folder="1">
    <li>
      <a href="<$mt:PagePermalink$>">
      <$mt:PageTitle$>
      </a>
    </li>
</mt:Pages>
</ul>

これで保存してみると…

フォルダ名、フォルダに入っていないページの全てを表示できました！
フォルダを増やしたりして、確認してみてくださいね。

次に進む！

前に戻る！

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

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