更新履歴 [2019年08月11日]「Photoshop で塗りの色を変更する」を追加。

トップページ > サイト作成 > CMS > Movable Type 7 ウェブページにタグを付けて一覧表示する

Movable Type 7 ウェブページにタグを付けて一覧表示する

「Movable Type 7」でウェブページにタグを付け、付けられているタグの一覧と数をサイト上に表示します。

タグとは各コンテンツ(ブログの記事、ウェブページ)に付与することができるキーワードです。
類似したものにカテゴリがありますが、一般的にコンテンツ一つにつき一つのカテゴリを設定できるのに対し、タグは複数設定することができます。

ウェブページにタグを付けるのは「Movable Type」の管理画面にログインした後、ページ登録するサイトを選択し左メニューの「ウェブページ」内の「新規」を選択するとウェブページを作成する画面が表示されます。
ウェブページ登録に必要な項目を入力した上で、「タブ」の欄に設定したいキーワードを入力します。
ここではウェブページのタイトルに「コンテンツ_002」、タグは「テストタグ」と登録します。
タグを複数設定したい場合は , (カンマ)で単語を区切って入力します。

ウェブページの作成画面

タグを設定したウェブページを公開するとウェブページ「コンテンツ_002」は表示されますが、設定したタグ「テストタグ」はまだ表示されていません。
利用するテーマやデザインテンプレートによっては予めタグの一覧が表示される場合がありますが、テンプレートを修正することでタグの一覧を表示することができます。

ウェブページの公開直後

テンプレートの修正は「Movable Type」の管理画面の左メニュー「デザイン」内の「テンプレート」を選択します。
さまざまなテンプレートが表示されますがタグの一覧を表示するテンプレートはこの中にはありません。

テンプレートの一覧

画面上部のメニューより"ウィジェットテンプレート"を選択し、ボタン「新規作成」をクリックします。

ウィジェットテンプレートの新規作成

次いで、ウィジェットテンプレートを作成する画面が表示されます。
テンプレート名に「タグ一覧」、テンプレートの内容には下記の内容を入力し登録します。

<mt:Tags top="20" type="page">
<mt:If name="__first__">
<div class="widget-tag-cloud widget">
<h3 class="widget-header">タグ一覧</h3>
<div class="widget-content">
<ul>
</mt:If>
<li><$mt:TagName$> (<$mt:TagCount$>)</li>
<mt:If name="__last__">
</ul>
</div>
</div>
</mt:If>
</mt:Tags>

タグ一覧の登録

ウィジェットテンプレートはサイトに配置する一つのパーツ(ブロック)となり、これを登録しただけではまだサイト上には表示されません。
サイト上に表示するためには管理画面「デザイン -> テンプレート」内の"ウィジェットセット"にある「関連コンテンツ(インデックス)」を選択します。
(利用しているテーマ等によってはウィジェットセットが無い場合があります)

ウィジェットセットの編集

ウィジェットセットの編集画面の左欄「利用可能」にあるパーツを右欄「インストール済」にドラッグして保存すると設置完了となります。
ボタン「変更を保存」をクリックし、再構築を実施するとサイト上にタグ一覧が表示されます。

タグ一覧の表示