derric.org

MovableType:カレンダーに月送りを追加する

| トラックバック(0)
カレンダーに月送り機能を追加しようと思います。
僕が使っているのはMovableType4.2です。
以下のサイトを参考にしました。
>> 小粋空間: Ajax 月送りカレンダー(MT4版)

スクリプトのダウンロード・アップロード

以下の3つのスクリプトをダウンロードします。

prototype.js prototypejs.org
ajaxCalendar.js ダウンロード
dayChecker.js ダウンロード

ダウンロードしたら、サーバーにアップロードします。
僕の場合は/js/以下に置きました。

カレンダーテンプレートの作成

アーカイブテンプレートの作成

アーカイブテンプレートを作成 から「ブログ記事リスト」を選択します。
テンプレート名は「カレンダー(月送り)」として、以下のコードを入力、保存します。

<table summary="<mt:ArchiveDate format="%Y/%m">">
<caption class="calendarhead">
  <mt:ArchivePrevious>
    <a href="javascript:void(0);" onclick="changeMonth('<$mt:BlogArchiveURL$><mt:ArchiveDate format="calendar/%Y/%m/%i">');"><</a>
  </mt:ArchivePrevious>
  <$mt:ArchiveDate format="%B %Y"$> 
  <mt:ArchiveNext>
    <a href="javascript:void(0);" onclick="changeMonth('<$mt:BlogArchiveURL$><mt:ArchiveDate format="calendar/%Y/%m/%i">');" >></a>
  </mt:ArchiveNext>
</caption>
<tr height="15">
  <th abbr="Sunday" class="sunday">日</th>
  <th abbr="Monday">月</th>
  <th abbr="Tuesday">火</th>
  <th abbr="Wednesday">水</th>
  <th abbr="Thursday">木</th>
  <th abbr="Friday">金</th>
  <th abbr="Saturday" class="saturday">土</th>
</tr>
<mt:Calendar month="this">
<mt:CalendarWeekHeader>
<tr>
</mt:CalendarWeekHeader>
  <td>
    <mt:CalendarIfBlank>
    <mt:Else>
      <span>
    </mt:Else>
    </mt:CalendarIfBlank>
    <mt:CalendarIfEntries>
      <mt:Entries lastn="1">
        <a href="<$mt:EntryLink archive_type="Daily"$>"><$mt:CalendarDay$></a>
      </mt:Entries>
    </mt:CalendarIfEntries>
    <mt:CalendarIfNoEntries>
      <$mt:CalendarDay$>
    </mt:CalendarIfNoEntries>
    <mt:CalendarIfBlank>
    <mt:Else>
      </span>
    </mt:Else>
    </mt:CalendarIfBlank>
  </td>
<mt:CalendarWeekFooter>
</tr>
</mt:CalendarWeekFooter>
</mt:Calendar>
</table>

月別アーカイブへの関連付け

一度保存すると、同じ画面の下の方に「テンプレートの設定」というのがあるので、
これを開いて「新しいアーカイブマッピングを作成」から「月別」を選んで追加します。
そして、パスは「カスタム」を選んで以下の内容を設定し保存します。

calendar/%y/%m/%i

日別アーカイブの追加

アーカイブテンプレートから「月別ブログ記事リスト」を選択し、
「新しいアーカイブマッピングを作成」から「日別」を選んで追加します。
パスはそのままで構いません。
ここでは、必ず「保存と再構築」を実行してください。

カレンダーの出力ファイルをUTF-8にする

MTサイトをUTF-8で運用している人は作業不要です。
自分はShift-JISで運用していたようなので、これが必要でした。
日本語を使わなければさして問題はありませんが、
「月、火...」としたかったので、導入しました。

まず、MT-I18N Plugin.ja JP からmt-i18n.plをダウンロードして、MTのpluginsフォルダにアップロードします。

次に、さきほど作成したカレンダー(月送り)テンプレートの全文を以下のタグで囲みます。

<MTEncodeText to="utf8">
      :
 (カレンダーテンプレート)
      :
</MTEncodeText>

で、保存。

jsのインクルード

HTMLヘッダーテンプレートに、以下の内容を追加します。

<script type="text/javascript" src="<$MTBlogURL$>js/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/ajaxCalendar.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/dayChecker.js"></script>

カレンダー表示ウィジェットの作成

新しいウィジェットの作成を選択し、
名前を「カレンダー(月送り)」として以下のコードを入力、保存します。

<div class="widget-calendar widget">
  <div class="widget-content">
    <div id="calendar"></div>
    <script type="text/javascript">
      getCalendar("<$MTBlogArchiveURL$>", "<$MTBlogID$>", "<$MTBlogArchiveURL$><MTEntries lastn="1" sort_order="descend"><$MTEntryDate format="calendar/%Y/%m/" $></MTEntries>");
    </script>
  </div>
</div>

作成したウィジェットを、表示したい場所に設定します。

CSSの設定

デザインは好みですが、僕の場合は以下のように設定しています。

/* カレンダーウィジェット */
.calendarhead a {
	text-decoration:none;
}
.widget-calendar th {
	width: 22px;
}
.widget-calendar td {
	text-align: center;
}
.widget-calendar a {
	color: #006;
}
.widget-calendar a:hover {
	color: #f39;
}
.saturday, .saturday a {
	color: #00c;
}
.sunday, .holiday, .sunday a, .holiday a {
	color: #c00;
}
.saturday a:hover, .sunday a:hover, .holiday a:hover {
	color: #f39;
}
.today {
	font-weight: bold;
}

既存のカレンダーウィジェットと競合しないように配慮する場合もあるようですが、
僕の場合は一緒に扱っています。

このまま既存のカレンダーに戻すと、月送り機能がなくなり、
「土日祝日」の色や「今日」の強調表示がなくなるだけです。

再構築

ここまできたら、一度、すべて再構築します。
できあがりのイメージはこんな感じです。
カレンダー(月送り)

以上です。

トラックバック(0)

トラックバックURL: http://tech.derric.org/mt/mt/mt-tb.cgi/13

ページトップへ