Movable TypeでHeadのタイトル要素などを条件分岐させる

Yuuです。

HTMLのheadのtitle、description、keywordsをMovable Typeで条件分岐して最適化してみようと思います。 いろいろなブログでも解説されていますが、結構使いまわせるのでお勧めです。

使用するテンプレートは以前使用したHTML5のテンプレートです。

基礎テンプレート

HTML element

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<head>
  <meta charset="UTF-8" />

  <title>Code Life株式会社</title>

  <meta name="description" content="Code Life株式会社ではPHP、Java、C#を用いた開発サービスをご提供します。" />
  <meta name="keywords" content="codelife,php,java,c#,開発,サービス" />
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

  <link rel="icon" type="image/png" href="/favicon.png" />
  <link rel="shortcut icon" href="/favicon.ico" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

  <link rel="index" href="/" title="Code Life株式会社" />
  <link rel="sitemap" href="/sitemap.html" title="サイトマップ" />

  <link rel="stylesheet" href="/css/reset.css" media="screen,print" />
  <link rel="stylesheet" href="/css/layout.css" media="screen,print" />

  <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

</head>

Movable Type element

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<head>
  <meta charset="<$mt:PublishCharset$>" />

  <mt:SetvarBlock name="SiteURL"><mt:BlogParentWebsite><$mt:WebsiteURL$></mt:BlogParentWebsite></mt:SetvarBlock>
  <mt:Include module="ページタイトル" parent="1">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

  <link rel="icon" type="image/png" href="<$mt:GetVar name="SiteURL"$>favicon.png" />
  <link rel="shortcut icon" href="<$mt:GetVar name="SiteURL"$>favicon.ico" />
  <link rel="apple-touch-icon" href="<$mt:GetVar name="SiteURL"$>apple-touch-icon.png" />

  <link rel="index" href="<$mt:GetVar name="SiteURL"$>" title="<mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite>" />
  <link rel="sitemap" href="<$mt:GetVar name="SiteURL"$>sitemap.html" title="サイトマップ" />

  <link rel="stylesheet" href="<$mt:GetVar name="SiteURL"$>css/reset.css" media="screen,print" />
  <link rel="stylesheet" href="<$mt:GetVar name="SiteURL"$>css/layout.css" media="screen,print" />

  <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

</head>

Movable Type Module element

モジュール名:ページタイトル

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<mt:If name="main_index"><!-- ▼テンプレート設定のテンプレート種類がメインインデックスの場合 -->

  <mt:IfWebsite><!-- ▼ウェブサイトのコンテキストの場合 -->
    <title><$mt:WebsiteName$></title>
    <meta name="description" content="<$mt:WebsiteDescription$>" />
    <meta name="keywords" content="codelife,php,java,c#,開発,サービス" />
  <mt:Else><!-- ▼ブログのコンテキストの場合 -->
    <title><$mt:BlogName$> | <mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite></title>
    <meta name="description" content="<$mt:BlogDescription$>" />
    <meta name="keywords" content="<$mt:BlogName$>,codelife,php,java,c#,開発,サービス" />
  </mt:IfWebsite>

<mt:ElseIf name="page_archive"><!-- ▼ページアーカイブの場合 -->

  <title><$mt:PageTitle remove_html="1"$> | <mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite></title>
  <meta name="keywords" content="<$mt:PageKeywords$>" />
  <meta name="description" content="<$mt:PageExcerpt remove_html="1"$>" />

<mt:ElseIf name="entry_archive"><!-- ▼エントリーアーカイブの場合 -->

  <title><$mt:EntryTitle remove_html="1"$> - <$mt:BlogName$> | <mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite></title>
  <meta name="keywords" content="<$mt:EntryKeywords$>" />
  <meta name="description" content="<$mt:EntryExcerpt remove_html="1"$>" />

<mt:ElseIf name="category_archive"><!-- ▼カテゴリアーカイブの場合 -->

  <title><$mt:CategoryLabel remove_html="1"$> - <$mt:BlogName$> | <mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite></title>
  <meta name="keywords" content="<$mt:CategoryLabel remove_html="1"$>,codelife,php,java,c#,開発,サービス" />
  <meta name="description" content="<$mt:CategoryDescription$>" />

<mt:Else><!-- ▼それ以外、カスタムテンプレートなどの場合 -->

  <mt:IfWebsite><!-- ▼ウェブサイトのコンテキストの場合 -->
    <title><$mt:TemplateName$> | <$mt:WebsiteName$></title>
    <meta name="keywords" content="<$mt:TemplateName$>,codelife,php,java,c#,開発,サービス" />
    <meta name="description" content="<$mt:TemplateDescription$>" />
  <mt:Else><!-- ▼ブログのコンテキストの場合 -->
    <title><$mt:TemplateName$> - <$mt:BlogName$> | <mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite></title>
    <meta name="keywords" content="<$mt:TemplateName$>,codelife,php,java,c#,開発,サービス" />
    <meta name="description" content="<$mt:TemplateDescription$>" />
  </mt:IfWebsite>

</mt:If>

解説

Movable Type elementで使用したMTタグ

※タグの説明はMTタグリファレンスページを引用しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
<$mt:PublishCharset$>
※環境設定ファイル (mt-config.cgi)のPublishCharsetに設定した値を表示します。
※デフォルトはUTF-8

<mt:Include module="ページタイトル" parent="1">
※後述するテンプレートモジュールを呼び出しています。
※parent="1"を指定することで、ブログからも呼び出しが可能。

<mt:BlogParentWebsite>
※ブログの所属している親ウェブサイトを取得するブロックタグです。

<$mt:WebsiteURL$>
※ウェブサイトの URL (サイト URL) を http:// から始まる絶対 URL で表示します。

下のURLの表記が長いので、

1
<mt:BlogParentWebsite><$mt:WebsiteURL$></mt:BlogParentWebsite>

Setvarblockを使用して変数設定します。

1
<mt:SetvarBlock name="SiteURL"><mt:BlogParentWebsite><$mt:WebsiteURL$></mt:BlogParentWebsite></mt:SetvarBlock>

あとはそれをgetで取得してあげるだけ。すっきり。

1
<$mt:GetVar name="SiteURL"$>

Movable Type Module element

main_indexの処理

インデックステンプレートのテンプレート設定のところにあるテンプレートの種類をMain Index(main_index)に設定したテンプレートに対して表示を行います。

1
2
3
4
5
6
7
8
<mt:IfWebsite>
※ウェブサイトのコンテキストにあるかどうかを判別します。

<$mt:WebsiteName$>
※ウェブサイトの名前を表示します。

<$mt:WebsiteDescription$>
※ウェブサイトの説明文に入力した内容を表示します。
1
2
3
4
5
<$mt:BlogName$>
※ブログの名前を表示します。

<$mt:BlogDescription$>
※ブログの説明を表示します。

page_archiveの処理

ページアーカイブ、つまりウェブページで作成したページに対して、処理が行われます。

1
2
3
4
5
6
7
8
9
10
<$mt:PageTitle remove_html="1"$>
※ウェブページのタイトルを表示します。

<$mt:PageKeywords$>
※ウェブページのキーワードに入力した内容を表示します。

<$mt:PageExcerpt remove_html="1"$>
※ウェブページの概要を表示します。
※概要に記述がないときは、ウェブページの本文を、
ブログ記事の設定で指定した概要の文字数だけ先頭から表示します。

remove_html=“1"を指定することで、htmlタグが使用されていたらそれを削除します。

entry_archiveの処理

エントリーアーカイブ、ブログ記事などで作成したページに対して、処理が行われます。

1
2
3
4
5
6
7
8
<$mt:EntryTitle remove_html="1"$>
※ブログ記事のタイトルを表示します。

<$mt:EntryKeywords$>
※ブログ記事のキーワードフィールドの内容を表示します。

<$mt:EntryExcerpt remove_html="1"$>
※ブログ記事の概要を表示します。

ページアーカイブ同様の設定をこちらにも反映しています。

category_archiveの処理

カテゴリアーカイブ、カテゴリに所属するブログ記事一覧などで表示されます。

1
2
3
4
5
<$mt:CategoryLabel remove_html="1"$>
※カテゴリ名を表示します。

<$mt:CategoryDescription$>
※カテゴリの説明を表示します。

それ以外の処理

インデックステンプレートでテンプレート種類をmain_index以外に設定した場合などに適用されます。

ただ、インデックステンプレートには、タイトル入力欄や説明文入力欄がないので、新たにカスタムフィールドで設定してあげる必要があります。

システムのカスタムフィールドの作成から、それぞれフィールドを作成することで、インデックステンプレートの入力欄に表示されます。 あとはそのカスタムフィールドを表示します。

1
2
3
4
<$mt:TemplateName$>
※カスタムフィールドで指定したページ名を表示します。
<$mt:TemplateDescription$>
※カスタムフィールドで指定したページの説明文を表示します。

補足

デフォルトでは、ウェブサイトの設定画面にはサイトキーワードを設定するところがないので、テンプレート上に記述しています。 こちらもカスタムフィールドでフィールドを用意してあげるといいと思います。

ウェブページでフォルダを使用する場合で、フォルダ名を表示をさせたい場合はページアーカイブの処理を下記のように変更します。

1
2
3
4
5
6
<mt:ElseIf name="page_archive"><!-- ▼ページアーカイブの場合 -->

<title><$mt:PageTitle remove_html="1"$>
<mt:IfFolder>- <mt:TopLevelFolder><$mt:FolderLabel$></mt:TopLevelFolder></mt:IfFolder> | <mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite></title>
<meta name="keywords" content="<$mt:PageKeywords$>" />
<meta name="description" content="<$mt:PageExcerpt remove_html="1"$>" />

もし、フォルダーに所属していたら、所属しているメインフォルダを表示しなさいって感じです。

Comments