MovableType 2018.09.26

リンクの修正漏れを防ぐテンプレートを作る方法

はじめに

MTタグでなく、直接HTMLに書かれているリンクを、ヘッダーやフッターなど、様々なテンプレートに記述してしまうと、URLやテキストの修正時に漏れてしまう危険性があります。

このような自体を防ぐため、URL情報をMTタグから出力できる様に設定する方法をご紹介します。

サンプルテンプレートの様に作ると、リンク情報の流用ができるようになるので、リンクの設定漏れが減るほか、テンプレートの可読性も良くなるテンプレートが完成します。

MTSetVarTemplate タグを使用するのは、このような特徴があるためです。

囲んだ内容が処理されずテンプレートのまま値になる。
ハッシュのキーを指定することができる。

サンプルテンプレート

サンプルでは、リンク設定で定義した内容を「ヘッダー」「フッター」のメニューで出力するものです。

リンク設定

1リンクごとに、MTSetVarTemplateタグを使用します。「name」にリンク名を入力して下さい。「タイトル」：リンク名「URL」：遷移先URL 「外部リンク」：外部リンクの場合は1を入力。

<mt:Ignore>リンク設定</mt:Ignore>
<mt:SetVarTemplate name="トップページ">
    <mt:Setvars>
        タイトル=トップページ
        URL=/
        外部リンク=
    </mt:Setvars>
</mt:SetVarTemplate>
<mt:SetVarTemplate name="ブログ">
    <mt:Setvars>
        タイトル=ブログ
        URL=https://cms-note.com/
        外部リンク=1
    </mt:Setvars>
</mt:SetVarTemplate>
<mt:SetVarTemplate name="会社概要">
    <mt:Setvars>
        タイトル=会社概要
        URL=/about/
        外部リンク=
    </mt:Setvars>
</mt:SetVarTemplate>

ヘッダーメニュー設定

リンク設定した内容を、ハッシュのキー指定したMTSetVarTemplateタグに設定します。キーの番号はメニューの並び順になります。

<mt:Ignore>ヘッダーメニュー設定</mt:Ignore>
<mt:SetVarTemplate name="ヘッダーメニュー{01}"><mt:var name="トップページ"></mt:SetVarTemplate>
<mt:SetVarTemplate name="ヘッダーメニュー{02}"><mt:var name="ブログ"></mt:SetVarTemplate>
<mt:SetVarTemplate name="ヘッダーメニュー{03}"><mt:var name="会社概要"></mt:SetVarTemplate>

ヘッダーメニュー出力

作成したハッシュをMTLoopで出力します。 value値には、テンプレートのまま値として設定された、リンク設定の内容が含まれていますので、MTLoopタグの開始タグ直後で出力します。リンク設定の内容が、メニュー設定で指定した順番で出力されるので、MTVarタグで値を出力します。

<mt:Ignore>ヘッダーメニュー出力</mt:Ignore>
<mt:Loop name="ヘッダーメニュー" sort_by="key"><mt:var name="__value__">
    <mt:if name="__first__"><ul></mt:if>
        <li><a href="<mt:Var name="URL">"<mt:if name="外部リンク"> target="_blank"</mt:if>><mt:Var name="タイトル"></a>
    <mt:if name="__last__"></ul></mt:if>
</mt:Loop>

フッターメニュー

同様にリンク設定した内容を、フッターメニュー用のMTSetVarTemplateタグに設定し、上記と同じMTLoopタグで出力します。(nameは変更して下さい。) キーの指定方法を別パターンにしてみました。お好みの方で良いと思います。

<mt:Ignore>フッターメニュー設定</mt:Ignore>
<mt:SetVarTemplate name="フッターメニュー" key="01"><mt:var name="ブログ"></mt:SetVarTemplate>
<mt:SetVarTemplate name="フッターメニュー" key="02"><mt:var name="会社概要"></mt:SetVarTemplate>
<mt:SetVarTemplate name="フッターメニュー" key="03"><mt:var name="トップページ"></mt:SetVarTemplate>