Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

Updated Today with jQuery

Jan242009
Vote:
http://bizcaz.com/archives/2009/01/24-225303.php
Categories: jQuery
Tags: jQuery
Social Bookmark

Prev Page: jQuery 1.3.1 リリース
Next Page: jQuery 1.3.2 リリース

こんばんわ^^

しょうもないものですが、だいぶ前に MovableType版 Updated Today という Movable Type のプラグインをご紹介したことがあります。
エントリを投稿したら 'Updated Today' という画像をその日、1 日だけ表示するというものですが、これの jQuery 版を作ってみました。
作ったというか、わたしのサイトで使ってるものを切り出したものです。

メリットとしては、

ブログを更新したよ･･･と訪問者さんに画像でお知らせします。
クリックするとそのページにジャンプします。( 厳密にはプラグインの機能ではないけど )
JavaScript なのですべてのページで即座に反映されます。

こんなとこでしょうか。
実際、訪問者さんが 'Updated Today' という画像を見てクリックしてるかどうかは分かりません (;￣∇￣A はは
作る画像によっては効果的に新規投稿ページに促すことができるのではないかと思います。

たとえば、わたしのサイトでは日別アーカイブもマッピングしてますので、クリックされたら Ajax を使って当日のアーカイブページを表示するようにしてます。

ダウンロード

Updated Today 1.00 プラグイン

使い方

以下の手順で設置します。

スクリプトのアップロード

上記スクリプトをダウンロードしてサーバにアップロードします。
アップロード先はどこでも構いません。各自の環境に合わせて jquery.updtoday.js をアップロードします。
テンプレートの変更

まず、HTML ヘッダ( <head> ～ </head> )の間に以下を追加します。
HTML ヘッダに追記
1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
2. <script type="text/javascript" src="http://●●●.com/js/jquery.updtoday.js"></script>
青字を各自の環境に合わせて変更します。
コードの記述

次に Updated Today プラグインのコードを記述します。
先ほどと同様に HTML ヘッダ中に以下を追加します。
コードの記述
1. <script type="text/javascript">
2. $(document).ready(function() {
3. <MTEntries lastn="1">
4. var lastupd = '<$MTEntryDate format="%Y-%m-%d"$>';
5. var lasturl = '<$MTEntryPermalink valid_html="1"$>';
6. </MTEntries>
7. $('...').UpdatedToday(lastupd);
8. $('#updated_today a').attr('href', lasturl);
9. });
10. </script>
青字の部分では、Movable Type のタグを使って、エントリの作成日付( YYYY-mm-dd )と、エントリの URL を取得してます。
赤字の部分は Updated Today の画像を表示したい場所をセレクタとして指定します。
そして緑字の部分でリンク先をエントリページの URL に変更してます。

以上です。
後はお好みで各自の CSS に合わせてデザインしてください。

ちなみにわたしのサイトでは以下のようなコードで日別アーカイブをリンク先としてます。

bzbell 向けコードの記述

mtmemo.last_updated = '<MTEntries lastn="1"><$MTEntryDate format="%Y-%m-%d"$></MTEntries>';
$('#bloglogo').UpdatedToday(mtmemo.last_updated);
$('#updated_today a').click(function() {
var lastent = mtmemo.last_updated.replace(/-/g, '/');
$('#alpha').LoadPage([<$MTBlogArchiveURL$>, lastent, '/'].join(''));
});

かんたんに説明すると、投稿日付( YYYY-mm-dd )を 'YYYY/mm/dd' というパスに変換して、'http://bizcaz.com/archives/2009/01/24/' という URL を作成してます。
その URL のページを Ajax を使って表示してるわけです (￣∇￣)b