Movable Typeで新規構築する際に使用する想定で、テンプレートの構成のベースを考えてみます。
サイト構成
今回作成するサイト構成は以下の通りです。
- トップ
- 会社概要
- ニュース
- 一覧ページ
- カテゴリ別一覧ページ
- 詳細ページ
- ブログ
- 一覧ページ
- カテゴリ別一覧ページ
- 詳細ページ
トップや会社概要は親サイトでの管理として、会社概要はウェブページでの投稿とします。
ニュースとブログ配下はそれぞれ子サイトとして、ニュースは記事、ブログはコンテンツタイプでの投稿として作成してみます。
親サイトのテンプレートモジュール
親サイトのテンプレートモジュールで、サイト全体で使用するパーツを作成します。
まずは共通のデータを管理するためのconfigファイルを作成します。
<mt:Ignore><!-- サイト共通情報 --></mt:Ignore> <mt:SetVar name="SITE_NAME" value="サイト名"> <mt:SetVar name="SITE_DOMAIN" value="https://example.com"> <mt:SetVars>SITE_OGP_IMG=<mt:Var name="SITE_DOMAIN">/assets/img/common/ogp.png</mt:SetVars>
このconfigを各テンプレートで読み込むことで、サイト全体で使用するようなデータを1箇所で管理できます
必要に応じて変数を追加してください。
後述しますが、子サイトのIDなどのようなステージングと本番で値の変わる項目や、コンテンツタイプのフィールド名などのように後から変更の可能性のある項目なども合わせて管理するとよさそうです。
次にheadの中身です。
<mt:Ignore><!-- 各ページで変数を定義していない場合の初期値を設定 --></mt:Ignore> <mt:Unless name="ogImage"><mt:SetVars>ogImage=<mt:Var name="SITE_OGP_IMG"></mt:SetVars></mt:Unless> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="format-detection" content="telephone=no"> <title><mt:Var name="metaTitle"></title> <mt:If name="metaDescription"><meta name="description" content="<mt:Var name="metaDescription">"></mt:If> <meta property="og:title" content="<mt:Var name="metaTitle">"> <mt:If name="metaDescription"><meta property="og:description" content="<mt:Var name="metaDescription">"></mt:If> <meta property="og:url" content="<mt:CanonicalURL>"> <meta property="og:image" content="<mt:Var name="ogimage">"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="<mt:Var name="metaTitle">"> <mt:If name="metaDescription"><meta name="twitter:description" content="<mt:Var name="metaDescription">"></mt:If> <meta name="twitter:image" content="<mt:Var name="ogimage">">
metaTitleとmetaDescriptionについては各ページのテンプレート内で設定する想定で、OGP画像についても基本的には共通画像で、ページによって固有の画像にしたい場合はogImageで設定できるようにしています。
次にglobal-headerです。
<mt:Ignore><!-- トップと下層ページでロゴのタグを出し分け --></mt:Ignore>
<mt:If name="pageType" eq="home">
<mt:SetVar name="logoTag" value="h1">
<mt:Else>
<mt:SetVar name="logoTag" value="p">
</mt:If>
<header>
<<mt:Var name="logoTag">>
<a href="/"><img src="/assets/img/common/logo.png" alt="<mt:Var name="SITE_NAME">"></a>
</<mt:Var name="logoTag">>
</header>
サイトトップでだけヘッダーロゴのタグをh1に変えたいということがよくあるので、その設定を入れています。
次にglobal-footerです。
<footer>フッター</footer>
bodyの開始直後や終了直前に何らかのコードを追加したいということがあるので、prepend-bodyとappend-bodyを用意します。
まずはprepend-bodyです。
<mt:Ignore><!-- bodyの開始直後に追加 --></mt:Ignore>
次にappend-bodyです。
<mt:Ignore><!-- bodyの閉じる直前に追加 --></mt:Ignore>
最後に、一覧ページなどで使用するページャー(pager)も、テンプレートモジュールで用意しておきます。
<div>
<mt:Pagination>
<mt:PaginationHeader>
<mt:IfPaginationPrev>
<a href="<mt:PaginationPrev>">PREV</a>
</mt:IfPaginationPrev>
<ol>
</mt:PaginationHeader>
<mt:IfPaginationCurrent>
<li class="is-current"><a href=""><mt:PaginationLink element="number"></a></li>
<mt:Else>
<li><a href="<mt:PaginationLink>"><mt:PaginationLink element="number"></a></li>
</mt:IfPaginationCurrent>
<mt:PaginationFooter>
</ol>
<mt:IfPaginationNext>
<a href="<mt:PaginationNext>">NEXT</a>
</mt:IfPaginationNext>
</mt:PaginationFooter>
</mt:Pagination>
</div>
ページャーはPageButeを使う想定にしています。
これでテンプレートモジュールの用意が完了しました。
トップと会社概要ページの作成
作成したテンプレートモジュールを使って、トップと会社概要ページを作成してみます。
まずはインデックステンプレートで、以下の内容で作成します。
<mt:Include module="config"> <mt:SetVars> metaTitle=トップ metaDescription=トップの説明文 ogImage=<mt:Var name="SITE_DOMAIN">/assets/img/top/ogp.png pageType=home </mt:SetVars> <!DOCTYPE html> <html lang="ja"> <head> <mt:Include module="head"> </head> <body> <mt:Include module="prepend-body"> <mt:Include module="global-header"> <main> <h1>トップ</h1> </main> <mt:Include module="global-footer"> <mt:Include module="append-body"> </body> </html>
先頭の変数でmeta情報の設定を行っています。
pageTypeはページの分類の管理用で、ここではグローバルヘッダーのタグの出しわけ(トップページのみh1に変更)で使っています。
再構築を行うと、以下のような内容で生成できました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<title>トップ</title>
<meta name="description" content="トップの説明文">
<meta property="og:title" content="トップ">
<meta property="og:description" content="トップの説明文">
<meta property="og:url" content="https://example.com/">
<meta property="og:image" content="https://example.com/assets/img/top/ogp.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="トップ">
<meta name="twitter:description" content="トップの説明文">
<meta name="twitter:image" content="https://example.com/assets/img/top/ogp.png">
</head>
<body>
<header>
<h1>
<a href="/"><img src="/assets/img/common/logo.png" alt="サイト名"></a>
</h1>
</header>
<main>
<h1>トップ</h1>
</main>
<footer>フッター</footer>
</body>
</html>
次にウェブページで会社概要ページを作成します。
ウェブページアーカイブで以下の内容で作成します。
<mt:Include module="config">
<mt:SetVars>
metaTitle=<mt:PageTitle> | <mt:Var name="SITE_NAME">
metaDescription=<mt:PageExcerpt>
</mt:SetVars>
<!DOCTYPE html>
<html lang="ja">
<head>
<mt:Include module="head">
</head>
<body>
<mt:Include module="prepend-body">
<mt:Include module="global-header">
<main>
<h1><mt:PageTitle></h1>
<div>
<mt:PageBody>
</div>
</main>
<mt:Include module="global-footer">
<mt:Include module="append-body">
</body>
</html>
ウェブページで会社概要の内容を登録すると、以下のように生成できました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<title>会社概要 | サイト名</title>
<meta name="description" content="会社概要ページの概要です。">
<meta property="og:title" content="会社概要 | サイト名">
<meta property="og:description" content="会社概要ページの概要です。">
<meta property="og:url" content="https://example.com/company/">
<meta property="og:image" content="https://example.com/assets/img/common/ogp.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="会社概要 | サイト名">
<meta name="twitter:description" content="会社概要ページの概要です。">
<meta name="twitter:image" content="https://example.com/assets/img/common/ogp.png">
</head>
<body>
<header>
<p>
<a href="/"><img src="/assets/img/common/logo.png" alt="サイト名"></a>
</p>
</header>
<main>
<h1>会社概要</h1>
<div>
<p>会社概要ページの記事本文です。</p>
</div>
</main>
<footer>フッター</footer>
</body>
</html>
ニュースの作成
次にニュースの子サイトを作成して、ニュース配下のページを作成していきます。
まずはページを作成する前に、ニュース配下用のサイドバーがある想定で、テンプレートモジュールでサイドバー(sidebar)を作成します。
<aside>ニュースのサイドバー</aside>
次にニュースの記事詳細ページを作成してみます。
ニュースは記事での投稿になるので、記事アーカイブのテンプレートで以下の内容で作成します。
<mt:Include module="config" parent="1">
<mt:SetVars>
metaTitle=<mt:EntryTitle> | <mt:Var name="SITE_NAME">
metaDescription=<mt:EntryExcerpt>
</mt:SetVars>
<!DOCTYPE html>
<html lang="ja">
<head>
<mt:Include module="head" parent="1">
</head>
<body>
<mt:Include module="prepend-body" parent="1">
<mt:Include module="global-header" parent="1">
<main>
<h1><mt:EntryTitle></h1>
<div>
<mt:EntryBody>
</div>
<mt:Include module="sidebar">
</main>
<mt:Include module="global-footer" parent="1">
<mt:Include module="append-body" parent="1">
</body>
</html>
親サイトのテンプレートモジュールを使う場合、parent属性で1を設定する必要があります。
記事の登録を行うと、以下のような内容でページ生成されました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<title>記事A | サイト名</title>
<meta name="description" content="記事Aの概要です。">
<meta property="og:title" content="記事A | サイト名">
<meta property="og:description" content="記事Aの概要です。">
<meta property="og:url" content="https://example.com/news/event/article/">
<meta property="og:image" content="https://example.com/assets/img/common/ogp.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="記事A | サイト名">
<meta name="twitter:description" content="記事Aの概要です。">
<meta name="twitter:image" content="https://example.com/assets/img/common/ogp.png">
</head>
<body>
<header>
<p>
<a href="/"><img src="/assets/img/common/logo.png" alt="サイト名"></a>
</p>
</header>
<main>
<h1>記事A</h1>
<div>
<p>記事A本文です。</p>
</div>
<aside>ニュースのサイドバー</aside>
</main>
<footer>フッター</footer>
</body>
</html>
次にインデックステンプレートでニュースの一覧ページを作成します。
<mt:Include module="config" parent="1">
<mt:SetVars>
metaTitle=ニューストップ
metaDescription=ニューストップの説明文
</mt:SetVars>
<!DOCTYPE html>
<html lang="ja">
<head>
<mt:Include module="head" parent="1">
</head>
<body>
<mt:Include module="prepend-body" parent="1">
<mt:Include module="global-header" parent="1">
<main>
<h1>ニューストップ</h1>
<mt:PageContents count="5" navi_count="3">
<mt:SetVars>totalEntry=<mt:BlogEntryCount></mt:SetVars>
<mt:Entries lastn="$totalEntry">
<div>
<a href="<mt:EntryPermalink>">
<mt:EntryTitle>
</a>
</div>
<mt:EntryCategories type="primary">
<div><mt:CategoryLabel></div>
</mt:EntryCategories>
<div><mt:EntryDate format="%Y.%m.%d"></div>
<mt:PageSeparator>
</mt:Entries>
</mt:PageContents>
<mt:Include module="pager" parent="1">
<mt:Include module="sidebar">
</main>
<mt:Include module="global-footer" parent="1">
<mt:Include module="append-body" parent="1">
</body>
</html>
再構築を行うと、以下のような内容でページ生成されました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<title>ニューストップ</title>
<meta name="description" content="ニューストップの説明文">
<meta property="og:title" content="ニューストップ">
<meta property="og:description" content="ニューストップの説明文">
<meta property="og:url" content="https://example.com/news/">
<meta property="og:image" content="https://example.com/assets/img/common/ogp.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="ニューストップ">
<meta name="twitter:description" content="ニューストップの説明文">
<meta name="twitter:image" content="https://example.com/assets/img/common/ogp.png">
</head>
<body>
<header>
<p>
<a href="/"><img src="/assets/img/common/logo.png" alt="サイト名"></a>
</p>
</header>
<main>
<h1>ニューストップ</h1>
<div>
<a href="https://example.com/news/company/1/">
企業情報1
</a>
</div>
<div>企業情報</div>
<div>2024.11.16</div>
<div>
<a href="https://example.com/news/event/article/">
記事A
</a>
</div>
<div>イベント</div>
<div>2024.11.16</div>
<div>
<a href="https://example.com/news/company/2/">
企業情報2
</a>
</div>
<div>企業情報</div>
<div>2024.11.16</div>
<div>
<a href="https://example.com/news/event/b/">
記事B
</a>
</div>
<div>イベント</div>
<div>2024.11.16</div>
<div>
<a href="https://example.com/news/company/3/">
企業情報3
</a>
</div>
<div>企業情報</div>
<div>2024.11.16</div>
<div>
<ol>
<li class="is-current"><a href="">1</a></li>
<li><a href="https://example.com/news/index_2.html">2</a></li>
<li><a href="https://example.com/news/index_3.html">3</a></li>
</ol>
<a href="https://example.com/news/index_2.html">NEXT</a>
</div>
<aside>サイドバー</aside>
</main>
<footer>フッター</footer>
</body>
</html>
次にニュースのカテゴリ別一覧ページを作成します。
<mt:Include module="config" parent="1">
<mt:SetVars>
metaTitle=<mt:ArchiveTitle> | <mt:Var name="SITE_NAME">
metaDescription=<mt:ArchiveTitle>の説明文です。
</mt:SetVars>
<!DOCTYPE html>
<html lang="ja">
<head>
<mt:Include module="head" parent="1">
</head>
<body>
<mt:Include module="prepend-body" parent="1">
<mt:Include module="global-header" parent="1">
<main>
<h1><mt:ArchiveTitle></h1>
<mt:PageContents count="5" navi_count="3">
<mt:SetVars>totalEntry=<mt:BlogEntryCount></mt:SetVars>
<mt:Entries lastn="$totalEntry">
<div>
<a href="<mt:EntryPermalink>">
<mt:EntryTitle>
</a>
</div>
<mt:EntryCategories type="primary">
<div><mt:CategoryLabel></div>
</mt:EntryCategories>
<div><mt:EntryDate format="%Y.%m.%d"></div>
<mt:PageSeparator>
</mt:Entries>
</mt:PageContents>
<mt:Include module="pager" parent="1">
<mt:Include module="sidebar">
</main>
<mt:Include module="global-footer" parent="1">
<mt:Include module="append-body" parent="1">
</body>
</html>
以下のような内容でページ生成されました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<title>イベント | サイト名</title>
<meta name="description" content="イベントの説明文です。">
<meta property="og:title" content="イベント | サイト名">
<meta property="og:description" content="イベントの説明文です。">
<meta property="og:url" content="https://example.com/news/event/">
<meta property="og:image" content="https://example.com/assets/img/common/ogp.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="イベント | サイト名">
<meta name="twitter:description" content="イベントの説明文です。">
<meta name="twitter:image" content="https://example.com/assets/img/common/ogp.png">
</head>
<body>
<header>
<p>
<a href="/"><img src="/assets/img/common/logo.png" alt="サイト名"></a>
</p>
</header>
<main>
<h1>イベント</h1>
<div>
<a href="https://example.com/news/event/article/">
記事A
</a>
</div>
<div>イベント</div>
<div>2024.11.16</div>
<div>記事A本文です。</div>
<div>
<a href="https://example.com/news/event/b/">
記事B
</a>
</div>
<div>イベント</div>
<div>2024.11.16</div>
<div></div>
<div>
<a href="https://example.com/news/event/c/">
記事C
</a>
</div>
<div>イベント</div>
<div>2024.11.16</div>
<div></div>
<div>
<a href="https://example.com/news/event/d/">
記事D
</a>
</div>
<div>イベント</div>
<div>2024.11.16</div>
<div></div>
<div>
<a href="https://example.com/news/event/e/">
記事E
</a>
</div>
<div>イベント</div>
<div>2024.11.16</div>
<div></div>
<div>
<ol>
<li class="is-current"><a href="">1</a></li>
<li><a href="https://example.com/news/event/index_2.html">2</a></li>
<li><a href="https://example.com/news/event/index_3.html">3</a></li>
</ol>
<a href="https://example.com/news/event/index_2.html">NEXT</a>
</div>
<aside>サイドバー</aside>
</main>
<footer>フッター</footer>
</body>
</html>
ブログの作成
次にブログの子サイトを作成して、ブログ配下のページを作成していきます。
コンテンツタイプのフィールドは以下の内容で作成しました。
- 本文(複数行テキスト)
- カテゴリ(カテゴリ)
- サムネイル(画像アセット)
- description(テキスト)
ブログのテンプレートを作成していく前に、親サイトのconfigに子サイトのIDやコンテンツタイプで作成したフィールド名などを追加しておきます。
<mt:Ignore><!-- サイト共通情報 --></mt:Ignore> <mt:SetVar name="SITE_NAME" value="サイト名"> <mt:SetVar name="SITE_DOMAIN" value="https://example.com"> <mt:SetVars>SITE_OGP_IMG=<mt:Var name="SITE_DOMAIN">/assets/img/common/ogp.png</mt:SetVars> <mt:Ignore><!-- 子サイトのID --></mt:Ignore> <mt:SetVar name="NEWS_SITE_ID" value="15"> <mt:SetVar name="BLOG_SITE_ID" value="16"> <mt:Ignore><!-- ブログのコンテンツタイプのフィールド名 --></mt:Ignore> <mt:SetVar name="BLOG_CONTENT" value="ブログ"> <mt:SetVar name="BLOG_CONTENT_BODY" value="本文"> <mt:SetVar name="BLOG_CONTENT_CATEGORY" value="カテゴリ"> <mt:SetVar name="BLOG_CONTENT_THUMBNAIL" value="サムネイル"> <mt:SetVar name="BLOG_CONTENT_DESCRIPTION" value="description">
ブログの子サイトに戻って、テンプレートを作成していきます。
まずはブログ配下用のサイドバーがある想定で、テンプレートモジュールでサイドバー(sidebar)を作成します。
<aside>ブログのサイドバー</aside>
次にブログの記事詳細ページを作成してみます。
コンテンツタイプアーカイブのテンプレートで、以下の内容で作成します。
<mt:Include module="config" parent="1">
<mt:SetVars>
metaTitle=<mt:ContentLabel> | <mt:Var name="SITE_NAME">
metaDescription=<mt:ContentField content_field="$BLOG_CONTENT_DESCRIPTION"><mt:ContentFieldValue></mt:ContentField>
</mt:SetVars>
<!DOCTYPE html>
<html lang="ja">
<head>
<mt:Include module="head" parent="1">
</head>
<body>
<mt:Include module="prepend-body" parent="1">
<mt:Include module="global-header" parent="1">
<main>
<h1><mt:ContentLabel></h1>
<mt:ContentField content_field="$BLOG_CONTENT_CATEGORY">
<div><mt:CategoryLabel></div>
</mt:ContentField>
<mt:ContentField content_field="$BLOG_CONTENT_THUMBNAIL">
<div><img src="<mt:AssetURL>" alt=""></div>
<mt:Else>
<div><img src="/assets/img/common/noimage.png" alt=""></div>
</mt:ContentField>
<div>
<mt:ContentField content_field="$BLOG_CONTENT_BODY">
<mt:ContentFieldValue>
</mt:ContentField>
</div>
<mt:Include module="sidebar">
</main>
<mt:Include module="global-footer" parent="1">
<mt:Include module="append-body" parent="1">
</body>
</html>
コンテンツタイプでデータの登録を行うと、以下のような内容でページ生成されました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<title>ブログA | サイト名</title>
<meta name="description" content="ブログAのdescription">
<meta property="og:title" content="ブログA | サイト名">
<meta property="og:description" content="ブログAのdescription">
<meta property="og:url" content="https://example.com/blog/cata/a/">
<meta property="og:image" content="https://example.com/assets/img/common/ogp.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="ブログA | サイト名">
<meta name="twitter:description" content="ブログAのdescription">
<meta name="twitter:image" content="https://example.com/assets/img/common/ogp.png">
</head>
<body>
<header>
<p>
<a href="/"><img src="/assets/img/common/logo.png" alt="サイト名"></a>
</p>
</header>
<main>
<h1>ブログA</h1>
<div>カテゴリA</div>
<div><img src="https://example.com/blog/01a.jpg" alt=""></div>
<div>
<div><p>ブログAの本文です。</p></div>
</div>
<aside>ブログのサイドバー</aside>
</main>
<footer>フッター</footer>
</body>
</html>
次にインデックステンプレートでブログの一覧ページを作成します。
<mt:Include module="config" parent="1">
<mt:SetVars>
metaTitle=ブログトップ
metaDescription=ブログトップの説明文
</mt:SetVars>
<!DOCTYPE html>
<html lang="ja">
<head>
<mt:Include module="head" parent="1">
</head>
<body>
<mt:Include module="prepend-body" parent="1">
<mt:Include module="global-header" parent="1">
<main>
<h1>ブログトップ</h1>
<mt:PageContents count="5" navi_count="3">
<mt:Contents content_type="$BLOG_CONTENT">
<mt:SetVars>totalEntry=<mt:ContentsCount></mt:SetVars>
</mt:Contents>
<mt:Contents content_type="$BLOG_CONTENT" limit="$totalEntry">
<div>
<a href="<mt:ContentPermalink>">
<mt:ContentLabel>
</a>
</div>
<div><mt:ContentDate format="%Y.%m.%d"></div>
<mt:ContentField content_field="$BLOG_CONTENT_CATEGORY">
<div><mt:CategoryLabel></div>
</mt:ContentField>
<mt:ContentField content_field="$BLOG_CONTENT_THUMBNAIL">
<div><img src="<mt:AssetURL>" alt=""></div>
<mt:Else>
<div><img src="/assets/img/common/noimage.png" alt=""></div>
</mt:ContentField>
<div>
<mt:ContentField content_field="$BLOG_CONTENT_BODY">
<mt:ContentFieldValue>
</mt:ContentField>
</div>
<mt:PageSeparator>
</mt:Contents>
</mt:PageContents>
<mt:Include module="pager" parent="1">
<mt:Include module="sidebar">
</main>
<mt:Include module="global-footer" parent="1">
<mt:Include module="append-body" parent="1">
</body>
</html>
再構築を行うと、以下のような内容でページ生成されました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<title>ブログトップ</title>
<meta name="description" content="ブログトップの説明文">
<meta property="og:title" content="ブログトップ">
<meta property="og:description" content="ブログトップの説明文">
<meta property="og:url" content="https://example.com/blog/">
<meta property="og:image" content="https://example.com/assets/img/common/ogp.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="ブログトップ">
<meta name="twitter:description" content="ブログトップの説明文">
<meta name="twitter:image" content="https://example.com/assets/img/common/ogp.png">
</head>
<body>
<header>
<p>
<a href="/"><img src="/assets/img/common/logo.png" alt="サイト名"></a>
</p>
</header>
<main>
<h1>ブログトップ</h1>
<div>
<a href="https://example.com/blog/cata/a/">
ブログA
</a>
</div>
<div>2024.11.16</div>
<div>カテゴリA</div>
<div><img src="https://example.com/blog/01a.jpg" alt=""></div>
<div>
<div><p>ブログAの本文です。</p></div>
</div>
<div>
<a href="https://example.com/blog/cata/b/">
ブログB
</a>
</div>
<div>2024.11.16</div>
<div>カテゴリA</div>
<div><img src="/assets/img/common/noimage.png" alt=""></div>
<div>
</div>
<div>
<a href="https://example.com/blog/cata/c/">
ブログC
</a>
</div>
<div>2024.11.16</div>
<div>カテゴリA</div>
<div><img src="/assets/img/common/noimage.png" alt=""></div>
<div>
</div>
<div>
<a href="https://example.com/blog/cata/d/">
ブログD
</a>
</div>
<div>2024.11.16</div>
<div>カテゴリA</div>
<div><img src="/assets/img/common/noimage.png" alt=""></div>
<div>
</div>
<div>
<a href="https://example.com/blog/cata/e/">
ブログE
</a>
</div>
<div>2024.11.16</div>
<div>カテゴリA</div>
<div><img src="/assets/img/common/noimage.png" alt=""></div>
<div>
</div>
<div>
<ol>
<li class="is-current"><a href="">1</a></li>
<li><a href="https://example.com/blog/index_2.html">2</a></li>
<li><a href="https://example.com/blog/index_3.html">3</a></li>
</ol>
<a href="https://example.com/blog/index_2.html">NEXT</a>
</div>
<aside>ブログのサイドバー</aside>
</main>
<footer>フッター</footer>
</body>
</html>
コンテンツタイプリストアーカイブで、ブログのカテゴリ別一覧ページを作成します。
<mt:Include module="config" parent="1">
<mt:SetVars>
metaTitle=<mt:ArchiveTitle> | <mt:Var name="SITE_NAME">
metaDescription=<mt:ArchiveTitle>の説明文です。
</mt:SetVars>
<!DOCTYPE html>
<html lang="ja">
<head>
<mt:Include module="head" parent="1">
</head>
<body>
<mt:Include module="prepend-body" parent="1">
<mt:Include module="global-header" parent="1">
<main>
<h1><mt:ArchiveTitle></h1>
<mt:PageContents count="5" navi_count="3">
<mt:Contents content_type="$BLOG_CONTENT">
<mt:SetVars>totalEntry=<mt:ContentsCount></mt:SetVars>
</mt:Contents>
<mt:Contents limit="$totalEntry">
<div>
<a href="<mt:ContentPermalink>">
<mt:ContentLabel>
</a>
</div>
<div><mt:ContentDate format="%Y.%m.%d"></div>
<mt:ContentField content_field="$BLOG_CONTENT_CATEGORY">
<div><mt:CategoryLabel></div>
</mt:ContentField>
<mt:ContentField content_field="$BLOG_CONTENT_THUMBNAIL">
<div><img src="<mt:AssetURL>" alt=""></div>
<mt:Else>
<div><img src="/assets/img/common/noimage.png" alt=""></div>
</mt:ContentField>
<div>
<mt:ContentField content_field="$BLOG_CONTENT_BODY">
<mt:ContentFieldValue>
</mt:ContentField>
</div>
<mt:PageSeparator>
</mt:Contents>
</mt:PageContents>
<mt:Include module="pager" parent="1">
<mt:Include module="sidebar">
</main>
<mt:Include module="global-footer" parent="1">
<mt:Include module="append-body" parent="1">
</body>
</html>
以下の内容でページ生成されました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<title>カテゴリA | サイト名</title>
<meta name="description" content="カテゴリAの説明文です。">
<meta property="og:title" content="カテゴリA | サイト名">
<meta property="og:description" content="カテゴリAの説明文です。">
<meta property="og:url" content="https://example.com/blog/cata/">
<meta property="og:image" content="https://example.com/assets/img/common/ogp.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="カテゴリA | サイト名">
<meta name="twitter:description" content="カテゴリAの説明文です。">
<meta name="twitter:image" content="https://example.com/assets/img/common/ogp.png">
</head>
<body>
<header>
<p>
<a href="/"><img src="/assets/img/common/logo.png" alt="サイト名"></a>
</p>
</header>
<main>
<h1>カテゴリA</h1>
<div>
<a href="https://example.com/blog/cata/a/">
ブログA
</a>
</div>
<div>2024.11.16</div>
<div>カテゴリA</div>
<div><img src="https://example.com/blog/01a.jpg" alt=""></div>
<div>
<div><p>ブログAの本文です。</p></div>
</div>
<div>
<a href="https://example.com/blog/cata/b/">
ブログB
</a>
</div>
<div>2024.11.16</div>
<div>カテゴリA</div>
<div><img src="/assets/img/common/noimage.png" alt=""></div>
<div>
</div>
<div>
<a href="https://example.com/blog/cata/c/">
ブログC
</a>
</div>
<div>2024.11.16</div>
<div>カテゴリA</div>
<div><img src="/assets/img/common/noimage.png" alt=""></div>
<div>
</div>
<div>
<a href="https://example.com/blog/cata/d/">
ブログD
</a>
</div>
<div>2024.11.16</div>
<div>カテゴリA</div>
<div><img src="/assets/img/common/noimage.png" alt=""></div>
<div>
</div>
<div>
<a href="https://example.com/blog/cata/e/">
ブログE
</a>
</div>
<div>2024.11.16</div>
<div>カテゴリA</div>
<div><img src="/assets/img/common/noimage.png" alt=""></div>
<div>
</div>
<div>
<ol>
<li class="is-current"><a href="">1</a></li>
<li><a href="https://example.com/blog/cata/index_2.html">2</a></li>
<li><a href="https://example.com/blog/cata/index_3.html">3</a></li>
</ol>
<a href="https://example.com/blog/cata/index_2.html">NEXT</a>
</div>
<aside>ブログのサイドバー</aside>
</main>
<footer>フッター</footer>
</body>
</html>
トップに表示追加
最後に、子サイトで作成したニュースとブログを親サイトのトップでも表示されるようにします。
トップのテンプレートを以下のように変更します。
<mt:Include module="config">
<mt:SetVars>
metaTitle=トップ
metaDescription=トップの説明文
ogImage=<mt:Var name="SITE_DOMAIN">/assets/img/top/ogp.png
pageType=home
</mt:SetVars>
<!DOCTYPE html>
<html lang="ja">
<head>
<mt:Include module="head">
</head>
<body>
<mt:Include module="prepend-body">
<mt:Include module="global-header">
<main>
<h1>トップ</h1>
<h2>ニュース</h2>
<mt:Entries include_blogs="$NEWS_ID" lastn="3">
<div>
<a href="<mt:EntryPermalink>">
<mt:EntryTitle>
</a>
</div>
</mt:Entries>
<h2>ブログ</h2>
<mt:Contents site_id="$BLOG_ID" content_type="$BLOG_CONTENT" limit="3">
<div>
<a href="<mt:ContentPermalink>">
<mt:ContentLabel>
</a>
</div>
</mt:Contents>
</main>
<mt:Include module="global-footer">
<mt:Include module="append-body">
</body>
</html>
再構築を行うと、ニュースとブログの一覧が表示されるように変更されました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<title>トップ</title>
<meta name="description" content="トップの説明文">
<meta property="og:title" content="トップ">
<meta property="og:description" content="トップの説明文">
<meta property="og:url" content="https://example.com/">
<meta property="og:image" content="https://example.com/assets/img/top/ogp.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="トップ">
<meta name="twitter:description" content="トップの説明文">
<meta name="twitter:image" content="https://example.com/assets/img/top/ogp.png">
</head>
<body>
<header>
<h1>
<a href="/"><img src="/assets/img/common/logo.png" alt="サイト名"></a>
</h1>
</header>
<main>
<h1>トップ</h1>
<h2>ニュース</h2>
<div>
<a href="https://example.com/news/company/1/">
企業情報1
</a>
</div>
<div>
<a href="https://example.com/news/event/article/">
記事A
</a>
</div>
<div>
<a href="https://example.com/news/company/2/">
企業情報2
</a>
</div>
<h2>ブログ</h2>
<div>
<a href="https://example.com/blog/cata/a/">
ブログA
</a>
</div>
<div>
<a href="https://example.com/blog/cata/b/">
ブログB
</a>
</div>
<div>
<a href="https://example.com/blog/cata/c/">
ブログC
</a>
</div>
</main>
<footer>フッター</footer>
</body>
</html>
これだけだとニュースやブログ記事追加時にトップに反映されないため、再構築トリガーの設定を忘れず行うようにしてください。
コメントが承認されるまで時間がかかります。