新着記事一覧を表示する

カスタマイズの第三弾は、メインページの下部に「新着記事一覧を表示する」です。

通常はサイドバーに適用されるウィジェットセットを利用してみました。
ウィジェットセットの利点は、良く使うツールを「ウィジェットテンプレート」として作成しておけば、必要に応じて簡単にコンテンツの入れ替えが可能ところです。
ここでは、新着記事リストを、5件表示させるウィジェットテンプレートを作成し、メインページに表示させましょう。
前回同様に、「デザイン」→「テンプレート」→「メインページ」を開きます。
「サイトポリシーを表示する」の項目で挿入した ~</mt:Pages>の後ろの <mt:Entries> から </mt:Entries> までを削除します。(この削除する部分は、ブログシステムのメイン部分の最新記事の概要表示を指定しているソースコードです。)
この代わりに、ウィジェットセットを挿入するソースコードを書き加えます。

ウィジェットセット挿入



以下のようなソースコードが自動意的に挿入されますので、名前を"news"と入力し、変更を保存します。

<$mt:WidgetSet name="news"$>
 
ウィジェットセットへのリンク













テンプレートソースの窓の右側に、新規作成の表示が見えるので、クリックしウィジェットセットを作成します。

内容が空の状態のままで、保存します。

ウェジィットセット作成

 

アクションツール

ウィジェットテンプレート「最近のブログ記事」を開き、右下のアクションツールで「複製」をクリックします。(MTのバージョンによっては、複製メニューがない場合があります。その場合は、[デザイン」→「ウィジェット」の画面に行き、「ウィジェットテンプレート」から「作成をクリックします。

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



「最近のブログ記事コピー」を開き、タイトルを「新着記事」と直し、ソースには以下のものを貼り付けます。(新規作成した場合は、タイトルを「新着記事」とし、ソースを貼り付けます)

<mt:If tag="BlogEntryCount">
    <mt:Entries lastn="5">
        <mt:EntriesHeader>
<h2 class="news">新着記事</h2>
     <div class="asset-header">
        <ul>
        </mt:EntriesHeader>
            <li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a>(<$mt:EntryDate format="%y/%m/%d"$>)<br />
<$mt:EntryExcerpt$>
</li>
        <mt:EntriesFooter>
        </ul>
    </div>
        </mt:EntriesFooter>
    </mt:Entries>
</mt:If>



ウェジィットセットのnews(左側表示部分)に、作成した「新着記事」ウェジィットテンプレートをドラッグアンドドロップでインストール済みに移動して「変更を保存」します。
あらためて、システムを再構築し、出来栄えを確認してみましょう。