Movable Type.net

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

もくじに戻る

モジュールを作って効率的なサイトに!

ひきつづき、ぺージに必要なものをMT化していきましょう。
インデックスぺージにはフッターがあるのでそれを追加します。今回はシンプルに、ぺージタイトルを入れたものを作ります。

いままでのタグを使って表示させることができるね!

びっくりトフ

<footer class="footerArea">
    <div class="mt-container">
      <p class="footerArea_logo">
        <$mt:BlogName$>
      </p>
    </div>
</footer>

表示されました。

さて、今回作ったフッターもですが先につくったヘッダー、ナビゲーションなど…
どこのぺージにも共通する部分が出てきました。

これをほかのテンプレートにも何度書くのはめんどう…。 何かいい方法はないかな?

困ってるトフ

テンプレート・モジュールを使う

必要な部分だけ使いまわせる小さいテンプレート、テンプレート・モジュールがあります。

テンプレート・モジュールは、モジュールにパーツ毎にタグを記入し、それをインデックステンプレートや、アーカイブテンプレートから呼び出して使います

呼び出しのMTタグを1行書けばフッターをよびだせるので、インデックステンプレート側はすっきりしますね。
さらに、フッターに修正をする場合にもテンプレート・モジュールの中を変えれば、全ページのフッターが書き換わるのでとっても楽です♪
使いまわせるパーツは、モジュール化しておきましょう

テンプレート・モジュールを作ってみよう!

では、実際にヘッダーをモジュール化してみましょう!

デザイン>テンプレートテンプレート・モジュールの項目があり、ここから作成します。

今回はヘッダーのモジュールなので、名前をheaderとつけました。
モジュールはたくさん作ることができるので、わかりやすい名前をつけてあげてくださいね。

他テンプレート同様に、編集画面から記述ができます。そのモジュールが担う部分を書いて、保存しましょう。
今回はヘッダー内の内容をモジュール化するので、該当の部分をインデックステンプレートからコピーして持ってきます。

コピペでペタッともってこよう!

はこびトフ

テンプレート・モジュールを呼び出そう!

続いて、インデックステンプレート側を書き換えます。
モジュールを呼び出す際に使うタグはこちらです。

<$mt:Include module="モジュールの名前"$>

"モジュールの名前"部分には、つくったモジュールの名前を入れます。
先ほどheaderを作ったのでここは<$mt:Include module="header"$>ですね。
それを、モジュールheaderの内容を入れたい箇所に書きます。

これで保存すると…

先ほどと変わらずに表示されました!
同様にして、footer内のモジュールも作っておきましょう。

サンプルを見る