MT５テンプレート大分解（４）ウェブサイト・Aboutタブをクリック

【あらすじ】

ページを構成するのにトップページの他に様々なページを用意する必要があります。今回は、前回の「ブログ」に続いて、「About」をクリックした時に表示されるページを読みます。

【なんとなく】

トップページで見たように、「About」タブをクリックすると、なにやら用意されたページが表示されているのが分かります。推測では、これもトップページと同じように「Aboutページ」が作られているのかな？っと。逆に考えれば、追加したいメニューとページも同様に作っていけばできるのかな？っと想像を膨らませながら、ソースを表示させてみます。


１．今回見るページ

２．この内容があるページ

３．Aboutの内容

４．このAboutを呼び出すのはどこからか？

５．ウェブページで表示されるタグ

※関数部分※

<$mt:Var name="page_layout" value="layout-wm"$>

　→ page_layout 値を layout-wm に。

<mt:SetVarBlock name="nav_on"><$mt:PageID$></mt:SetVarBlock>

　→ nav_on 値に PageID を。

　　メモ：mt:SetVarBlockは、Blockで囲まれた中で処理された値を取得できる。
　　　　　呼び出す時は、MTGetVar, MTVar ファンクションタグを使う。　　　　　参照元：テンプレートタグリファレンス

<mt:SetVarBlock name="title"><$mt:PageTitle encode_html="1"$> - <$mt:BlogName encode_html="1"$></mt:SetVarBlock>

　→ mt:PageTitle：表示するページのタイトル。ここでは、「About」が当てはまる。

　→mt:BlogName：このブログの名前を表示する。

　→encode_html="1"：HTMLへ変換（エンコード）する。例えば＜なら、&lt; など。

<mt:SetVarBlock name="html_head">

<$mt:Var name="comments_per_page" value="50"$>

<mt:If tag="EntryCommentCount" gt="$comments_per_page">

    <script type="text/javascript">

        MT.entryID = <$mt:PageID$>;

        MT.commentsPerPage = <$mt:Var name="comments_per_page"$>;

        MT.entryCommentCount = <$mt:EntryCommentCount$>;

        MT.commentIds = [<mt:Comments sort_order="ascend" glue=","><mt:CommentID></mt:Comments>];

    </script>

</mt:If>

    <$mt:EntryTrackbackData$>

</mt:SetVarBlock>

　→この段落はさらっと読むと、ページにコメントがある場合、トラックバックがある場合の処理を記載してある。

※本文表示部分※

<$mt:Include module="ヘッダー" body_class="mt-page-archive"$>

　→ヘッダーテンプレートの読み込み

<$mt:Include module="ウェブページの詳細"$>

　→ウェブページの詳細テンプレートの読み込み

<$mt:Include module="トラックバック"$>

　→トラックバックテンプレートの読み込み

<$mt:Include module="コメント"$>

　→コメントテンプレートの読み込み

<$mt:Include module="フッター"$>

　→フッターテンプレートの読み込み

ここまで書いておいて、ヘッダーテンプレートの説明へ移るのには長すぎるー＞＜、ので、すみません、また次回に。

MT5テンプレート大分解（２）ウェブサイト・インデックステンプレート

MTページ作成にあたり、やっぱり基本のテンプレートが勉強の素材になるので、それを分解して自分の知識の確認、果ては備忘録にしてしまおうかと。そんな記事を何回か分からないけれど書いてみようと思います。知識不足、また表現力の不足で不明なところが多々あるかと思いますが、ブログを通じてご指摘、ご指導していただければ幸いです。


【前回の記事】
インデックステンプレートの基本的な部分についてMTテンプレートを読んでみた。

<$mt:Var name="page_layout" value="layout-wm"$>

<mt:SetVarBlock name="html_head">
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$mt:Link template="rsd"$>" />
</mt:SetVarBlock>
<mt:SetVarBlock name="title"><$mt:BlogName encode_html="1"$></mt:SetVarBlock>

<$mt:Include module="ヘッダー" body_class="mt-main-index"$>

<mt:Pages tag="@home" lastn="1">
<h1 id="page-title" class="asset-name"><$mt:PageTitle$></h1>
<$mt:PageBody$>
</mt:Pages>

<$mt:Include module="フッター"$>


【今回】
残った部分を読む。

<$mt:Var name="page_layout" value="layout-wm"$>

→ page_layout　の値を　layout-wm　にしようね。っと。

　テンプレートはページのレイアウトをこのように指定することで、ページによってはレイアウトを簡単に変更できるように、っと考えられているようで。この方法には好き嫌いが別れるかもしれないけれど、とりあえずもう少し紐解いてみる。

　レイアウトってスタイルシート（CSS)指定なので、デフォルトで読み込んでいるスタイルシートファイルからリンクを辿ると

　mt0502(MTのインストールフォルダ名)/mt-static/themes-base/blog.css

　を指定しているのがわかるのでそのファイルを開いて　/*layout*/というところをみて　layout-wm　を探してみる。


/* Thin-Wide */

.layout-tw #alpha {
    left: 190px;
    width: 750px;
}

.layout-tw #beta {
    left: -750px;
    width: 190px;
}


/* Medium-Wide */

.layout-mw #alpha {
    left: 330px;
    width: 610px;
}

.layout-mw #beta {
    left: -610px;
    width: 330px;
}

/* Wide-Medium */

.layout-wm #alpha {
    width: 610px;
}

.layout-wm #beta {
    width: 330px;
}


　すると、また分からんことに alpha beta　とか出てくるけれど、何となくそれぞれの幅を指定しているだけというのが分かる。この点は、後でレイアウト構成のタグを紐解く時にわかってくると思いますので、ここでは深く追求しません。

MTvarのタグリファレンスはこちら。

　次、見てみます。


<mt:SetVarBlock name="html_head">
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$mt:Link template="rsd"$>" />
</mt:SetVarBlock>


　なんとなく、html_head　に　<link~~ を読み込ませているのが分かる。そして、この　html_head　を別のところで呼ぶのだろうなあ〜っと（＾＾。いいんすよ、こんな軽い認識で。


　RSDと書いてあるからRSDを作りなさいってことなんでしょうね。これを読み込んでできるHTMLタグは、

　<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://***/mt/temp/rsd.xml" />


  <$mt:Link template="rsd"$>って、テンプレート名rsdを読み込みなさいってこと。それは前回のファイル一覧画面にちょろっと表示されているけれど、テンプレート一覧にRSDというのが見えるはず。そのテンプレートのことですね。RSDについてはここでは触れないので、他のサイトで説明を読んでみてください。
　


　最後の一行。


<mt:SetVarBlock name="title"><$mt:BlogName encode_html="1"$></mt:SetVarBlock>



　これもざっくりと、title　に　<$mt:BlogName encode_html="1"$>　を読み込ませているのが分かります。

　<$mt:BlogName encode_html="1"$>は、このブログ（ウェブサイト？）の名前を拾ってきています。ここを敢えてこのようにしているのは、後で変更したい時などは一発で変更できるためですね。



　やっと一枚のテンプレを読み終えた。。。
　ざ〜っと書いてしまったので読みにくいところがあると思いますが＞＜
　ご参考になれば幸いです。

MTテンプレート大分解（１）ウェブサイト・インデックステンプレート

MTページ作成にあたり、やっぱり基本のテンプレートが勉強の素材になるので、それを分解して自分の知識の確認、果ては備忘録にしてしまおうかと。そんな記事を何回か分からないけれど書いてみようと思います。知識不足、また表現力の不足で不明なところが多々あるかと思いますが、ブログを通じてご指摘、ご指導していただければ幸いです。



まずはMTをインストール（この情報はまた後日）して、デフォルトのサイト、ブログが出来上がったことにして、以下はその後の話し。


　構成としては

• ウェブサイトをトップページにする。
• ブログをウェブサイト内のカテゴリとして考える。
• 利用するのは、プロフェッショナルテンプレート。

としました。ウェブサイトは、トップページ＋基本情報ページ（会社概要、FAQ、お問い合わせなど）と考えて良いかと。ブログは、これから追加していく情報を追加していくページというイメージです。

１．ウェブサイト・インデックステンプレート

ログインし、作成したウェブサイト名をクリックして開くと、下記のように管理ページへ移動する。これから、メインページを開く。

ウェブサイトテンプレートの管理画面

２．メインページのイメージ

MT・プロフェッショナルスタイルで作成したサイトイメージ

　３．メインページテンプレートのタグ

<$mt:Var name="page_layout" value="layout-wm"$>

<mt:SetVarBlock name="html_head">
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$mt:Link template="rsd"$>" />
</mt:SetVarBlock>
<mt:SetVarBlock name="title"><$mt:BlogName encode_html="1"$></mt:SetVarBlock>

<$mt:Include module="ヘッダー" body_class="mt-main-index"$>

<mt:Pages tag="@home" lastn="1">
<h1 id="page-title" class="asset-name"><$mt:PageTitle$></h1>
<$mt:PageBody$>
</mt:Pages>

<$mt:Include module="フッター"$>




　み、見ると固まるなー（＾＾；

　まあ、ホームページにしても何しても基本的な構成があり、ホームページだと大きく分けると、ヘッダー部、メイン部（サイド部、メイン部とも）、フッター部になる。なので、ここだけに注目すると、とりあえずここの部分がページを構成する部分になる。




<$mt:Include module="ヘッダー" body_class="mt-main-index"$>

<mt:Pages tag="@home" lastn="1">
<h1 id="page-title" class="asset-name"><$mt:PageTitle$></h1>
<$mt:PageBody$>
</mt:Pages>

<$mt:Include module="フッター"$>




　とりあえず、ここでは、「ヘッダー」「フッター」という部品（テンプレートモジュールと言います）を呼び出して、その間にメイン部があると分かるかと思います。


　ぶっちゃけ、ここを　<$mt:Include module="メイン"$> 　とかにしたらとってもシンプルで分かりやすいのにー＾＾。

　ま、そうして無いのはこの「プロフェッショナルスタイル」は、どちらかといえば企業・会社向けの感じで使えるようになっているからだと思います。企業のページのトップページには、記事がずらずらと並んでいるのではなく、基本情報からオススメ情報からお客様が必要とする情報を並べていることがほとんど。ブログのスタイルとは異なるんですね。

　逆に、ここにずらずらと情報を記載していないのは、なるべく構成する部分と中身の部分を分けたいからだと思うんですね。なので、ここの内容は別のところから呼び出すようにしてあります。通常のブログスタイルでは、ここに更新されたブログ記事がずらずらと並ぶので、そのためのタグが記載されますが、ここではそれに触れません。



<mt:Pages tag="@home" lastn="1">

　→　@home　がタグ付けされたページを読み込んでね

<h1 id="page-title" class="asset-name"><$mt:PageTitle$></h1>
<$mt:PageBody$>

　→　そのページのタイトルと本文を読み込んでね。

</mt:Pages>

　

　ここでいきなり、@home　がタグ付けされたページというのが出て来ましたが、これはページを読み込むためのお約束みたいなもので、@をつけて隠しタグにしてあり、通常記事に付与するタグの一覧には表示されません。

　そのページは下記のところから確認することができます。

ウェブページの管理画面

　ページの中身は下記の通り。

ウェブページの編集画面

　次回は、記載しなかった残りの上部について説明します♪＾＾

MTで同じパーツを使いまわすために覚えること

MTのテンプレートを触っていると、色々と覚えないといけないこともあったり、実現したいことができたりできなかったり＾＾

MTに用意されているWidgetなどを苦労することなく流用したいことがよくある。ただ、Widgetって、Divタグでくくられていて、idやclassなどが固定化されている。よくわからないとこのWidgetをコピーして、ID名を変更して複数保存していたが、あとで変更が入ったときの手間が大変＞＜。　これは変数を使うと簡単に解決できる。

例えば、


<mt:IfArchiveTypeEnabled archive_type="Category">
<mt:if tag="BlogCategoryCount">
<div id="archives" class="widget-archive widget-archive-category widget">
    <h3 class="widget-header">カテゴリ</h3>
    <div class="widget-content">
    <mt:TopLevelCategories>
        <mt:SubCatIsFirst>
        <ul>
        </mt:SubCatIsFirst>
        <mt:If tag="CategoryCount">
            <li><a href="<$mt:CategoryArchiveLink$>"<mt:If tag="CategoryDescription"> title="<$mt:CategoryDescription remove_html="1" encode_html="1"$>"</mt:If>><$mt:CategoryLabel$> (<$mt:CategoryCount$>)</a>
        <mt:Else>
            <li><$mt:CategoryLabel$>
        </mt:If>
        <$mt:SubCatsRecurse$>
            </li>
        <mt:SubCatIsLast>
        </ul>
        </mt:SubCatIsLast>
    </mt:TopLevelCategories>
    </div>
</div>
</mt:if>
</mt:IfArchiveTypeEnabled>


この３行目のid="archive"をトップページとその他のページで使い分けたい場合、ここに変数名をいれることで対応できる。


<mt:IfArchiveTypeEnabled archive_type="Category">
<mt:if tag="BlogCategoryCount">
<div id="<$mt:Var name="page_id"$>" class="widget-archive widget-archive-category widget">
    <h3 class="widget-header">カテゴリ</h3>
    <div class="widget-content">
    <mt:TopLevelCategories>
        <mt:SubCatIsFirst>
        <ul>
        </mt:SubCatIsFirst>
        <mt:If tag="CategoryCount">
            <li><a href="<$mt:CategoryArchiveLink$>"<mt:If tag="CategoryDescription"> title="<$mt:CategoryDescription remove_html="1" encode_html="1"$>"</mt:If>><$mt:CategoryLabel$> (<$mt:CategoryCount$>)</a>
        <mt:Else>
            <li><$mt:CategoryLabel$>
        </mt:If>
        <$mt:SubCatsRecurse$>
            </li>
        <mt:SubCatIsLast>
        </ul>
        </mt:SubCatIsLast>
    </mt:TopLevelCategories>
    </div>
</div>
</mt:if>
</mt:IfArchiveTypeEnabled>


で、変数の設定は、呼び出すテンプレートの上部に記入しておく。
ここでは、変数名を　page_id　としている。interviews_top_category が作成したいID名

<mt:SetVarBlock name="page_id">interviews_top_category</mt:SetVarBlock>