MovableTypeで「Updated Today」を表示する(PHP版）

今巷で人気のblogのカスタマイズ法に「Updated Today」というのがあります。
これは記事を更新をトップページにバナーを貼ってお知らせする機能です。
この「Updated Today」の作成方法を紹介します。

Updated Todayって何？

blogに新規エントリーを書いたら、「blog書いたよ～」というのを視覚的にわかりやすく、blogのトップページに更新したよバナーを貼るというものです。
説明するより見たほうが早いですね。私のblogのスクリーンショットをご覧アレ。
Updated Today

これは、実はWordrPessというblogのプラグインとして登場しました。
本家の以下の海外のサイトです。
Updated Today Plugin at Chris K Designs // Blog

私のblogはMovableTyle（以下MTと略）なので、これはそのまま使えません。
で、WordrPessでこんな人気だからMT版もあるだろうと思い、探してみました。

しかし意外に検索できず、唯一発見できたのがこちらのサイト
MovableType備忘録: MovableType版 Updated Today

でもこれはWordrPessの「Updated Today」を改造している形のようなのでDB（データベース：logを格納しているところ）がMySQLでないと使用できないということ。
MTを使っていて、MySQLを使っている方は少ないのではないでしょうか。BerkeleyDBかSQLiteが多いのでは？かくいう私もSQLiteです。

これ以上探すのも面倒なので自分で作りました！
なんか前置きがかなり長くなりましたが、以下設置方法などです。

使用できる環境

・MovableType（バージョンは何でもOKだと思います。）
・ファイルがPHP化されている

もし、PHP化されていない方で、PHPを利用できる環境にあるのなら是非この機会にPHP化されてはどうでしょうか？blogをカスタマイズする場合には非常に有用です。
ただし、ファイル名（拡張子）が変わるので、一時的にSEO的に不利になったり、リンク先がなくなってしまうリスクもあることを知っておいてください。

MTのPHP化は小粋空間さんのサイトが詳しいです。
小粋空間: Movable Type の PHP化（その1）

PHP化できない環境にある方は、JavaScript版も作りましたので、そちらをお試しください。
MovableTypeで「Updated Today」を表示する(JS版） || Cool Web Window

設置方法

1. 更新用のバナーを表示するPHPプログラムファイルを作成
直接(x)htmlファイルにPHPを書いてもよいのですが、ソースが煩雑になるので、今回は外部ファイルを読み込むカタチを取ります。
「include」というフォルダを作成します。その中に「updated.php」という名前のファイル名を作成し以下のソースコードを記述します。

<?php
function updated($d_post){
$term=3;
$image='<img src="/image/updated.png" alt="update" />';
$d_term=date( "Ymd", mktime( 0,0,0,date("m") ,date("d")-$term, date("Y") ) );
if($d_post>=$d_term) print $image ;
}
?>

赤い文字を各自変更してください。
$term=3の3のところが新規エントリーをしてから何日間バナーを表示するかを決定します。
単位は「日」です。
img src="～"に画像を表示します。

画像はcaramel*vanillaさんが素敵なバナーを作られているのでそちらを使用するとよいと思います。
Updated Now プラグインのバナーを作りました | caramel*vanilla

2. (x)htmlファイルに画像ファイルを出力するソースコードを追加
以下のソースを</body>タグの前あたりに入れてください。

<div id="updated">
<MTEntries lastn="1">
<?php update("<$MTEntryDate language='en' format='%Y%m%d'$>"); ?>
</MTEntries>
</div>

画像に最新のエントリーへのリンクを貼りたい場合は以下のように書きます。

<div id="updated">
<MTEntries lastn="1">
<a href="<$MTEntryPermalink$>">
<?php update("<$MTEntryDate language='en' format='%Y%m%d'$>"); ?>
</a>
</MTEntries>
</div>

こちらで最新の記事の新規登録日時を取得して、PHPファイルにてそれが現在の日時と比較して、画像を表示するべきかどうかを判定します。

3. (x)htmlファイルに外部PHPファイルを読む込むソースコードを追加
以下のソースを<head>～</head>の間に記述してください。

<?php include('<$MTBlogURL$>include/updated.php'); ?>

お使いのサーバによるとは思うのですが、ロリポップの場合はサーバ上の絶対パスから書かないとエラーがでます。
つまり、「/home/sites/lolipop.jp/users/lolipop.jp-dpxxxxxxxx/web/include/updated.php」というふうに書きます。

4. CSSファイルに画像を表示する位置を指定するソースコードを追加
以下のソースをCSSファイルに追加してください。

div#updated {
position:absolute;
top:0;
left:0;
}

絶対配置で、左上に配置します。

以上のようにすれば、最初にxhtmlファイルを再構築すれば、画像の変更等は外部ファイルで制御するので、その都度再構築する手間は省けます。

※PHPに関しては私は素人同然なので、もっといい書き方があるよとか、ここがおかしいよとかありましたら教えてください。

投稿日:2007年5月 5日
« 前の記事 | webコラムのトップへ | 次の記事 »

トラックバック歓迎です。以下URLにて登録をお願いいたします。

このエントリーのトラックバックURL:

↓↓↓トラックバックしてくださった方々↓↓↓
※トラックバックされても管理人がスパムと判断したものは公開されません。

最近のコラム

top