Movable Type 備忘録

MovableType版 Updated Today

Apr282007
Author: bzbell
Categories: Customize
Tags: JavaScript, PHP, Updated-Today

Next Page: PostToTwitterプラグイン
Prev Page: MTPrecodeプラグイン

こんにちわ^^

今週は大変でした。
ドライアイで目が痛くて、目薬が欠かせない毎日を送ってるbzbellです。

訪問者さんのコメントを返答する程度にして、家帰ったらパソコンを使わない生活が続いてました（つω-`｡）

さて、今回はWordPressの 'Updated Today'プラグインというものを解析して、MovableTypeで使えるようカスタマイズしてみましたのでご紹介です。

WordPressの 'Updated Today'プラグインというのは、エントリが今日投稿されたことをテンプレート上の左上にお知らせしてくれるプラグインです。
投稿されたその日のみ左上に表示されるというものです。

ですので、夜の23:00にエントリを投稿した場合、1時間だけ表示がされます (;￣∇￣A

似たようなものに、こちらのblogstickerというものがあります。

こちらは制限時間がなく、ただ左上にステッカーを表示する...というものです。
ステッカーの種類が豊富です。

設置方法

このカスタマイズでは、PHP化されていること、データベースにMySQLを使っていることが前提となります。
また、他データベース（SQLiteなど）で使用できません。JavaScriptも有効にしてください。

まず、以下から圧縮ファイルをダウンロードして、適当なフォルダに展開します。
updatedtoday.zip
次に環境設定を行います。
updatedtoday/updated-today-config.phpをテキストエディタで開いてください。そして、以下の項目について各自の環境に合わせて変更します。
1. $dbhost = '●●●';// サーバ名
2. $dbuser = '●●●';// ユーザ名
3. $dbpass = '●●●';// パスワード
4. $dbname = '●●●';// データベース名
上記青い字の部分を変更します。
各自のMySQLへの接続情報で変更します。
1. // updated-today/ディレクトリのURL
2. $base_url = 'http://●●●.com/updatedtoday/';
青い字の部分をアップロード先のURLで変更します。
updatedtoday/フォルダごとサーバにアップロードします。
アップロード先は先ほどの環境設定で指定したURL先となります。ここが異なると、正しく表示されませんのでご注意ください (￣∇￣)b
最後に、テンプレートを修正します。
表示したいテンプレート内の</body>タグの上あたりに以下のコードを追加します。

- 2007.04.30 追記 -
新規投稿日付また更新日付でのチェックを選択できるよう変更しました。
新規投稿日付は新規投稿日で、更新日付は投稿後、再構築した日付になります。ですので、トラックバックなどすると更新日付が変更されます。これは賛否両論あると思いますので、いずれかを選択できるようにしました。
1. 新規投稿日でチェックする場合
2. <?php include('<$MTBlogURL$>updatedtoday/updated-today.php?id=<$MTBlogID$>'); ?>
4. 更新日でチェックする場合
5. <?php include('<$MTBlogURL$>updatedtoday/updated-today.php?id=<$MTBlogID$>&mode=1'); ?>
青い字の部分をupdatedtoday/updated-today.phpのURLに変更します。
緑の字の部分で新規投稿日(=0)、更新日(=1)を選択します。デフォルトは新規投稿日(=0)です。

赤い字の部分はブログIDを指定しています。ここはこのままで大丈夫です (￣∇￣)v

以上でカスタマイズは完了です。
テンプレートを再構築して、次回エントリ投稿すると左上にステッカーが表示されるようになります。

ちなみにcaramel*vanillaさんのところで、各色のステッカーが公開されてます。

- 2007.05.07 追記 -
訪問者さんのご報告でスクリプトにミスがありましたので修正しました。
具体的には以下のように修正しました。
赤い字を削除しました。ソープさんありがとうございます。
26行目
if (!$num
&& !$static) return;

Trackback Pings(2)

TrackBack URL for this entry:

from K's Labo: いつもいつも、大変お世話になってる「MovableType備忘録」さんのサイト...
Tracked on May 16, 2007

from RingoLife: ブログが更新されると上方にUpdate画像が表示されるお茶目なカスタマイズを導入...
Tracked on June 7, 2007

Comments(13)

#1: Posted by oscar [RES]: こんばんは。
なるほど、そういえばこういうのないですよね。
なんか、SQL無関係なの作れそうなんで、ちょっとやってみるかな。
Posted on April 29, 2007

#2: Posted by bzbell [RES]

>>1 oscar さん

こんにちわ^^

> なんか、SQL無関係なの作れそうなんで、ちょっとやってみるかな。

ですね♪
WordPressはベースがPHPだし、フリーだし。
良さそうなもの、おもしろそうなものをどんどん取り入れていきたいですね (￣∇￣)/

Posted on April 29, 2007

#3: Posted by ソープ [RES]

>>2 bzbell さん

先日はお世話になりました！

updated today を試してみたのですが、ちゃっかり動きませんでした・・・
が、何とか動くように出来たのでご報告です！

updated-today.php 内で使われている $static をどこかで宣言しないと
私のところでは $static が空っぽで
if (!$num && !$static) return;
がきちんと実行されなかったです。
何度か試してみて $static="0"; でうまく実行されることが分かりましたが
これ動作的に合ってますかね？（＾＾；

Posted on May 7, 2007

#4: Posted by bzbell [RES]

>>3 ソープさん

こんにちわ^^

> updated-today.php 内で使われている $static を･･･

Σ(￣Д￣；)ガーン!!
ごめんなさい。

実はその変数ってわたしのサイト用のもので、静的表示(MovableTypeのバージョン表示など)させるための変数だったんです (;￣∇￣A

ちなみに、以下のように使ってます。

5行目に追加
$static  = $_REQUEST['static'];// 静的表示選択(1:コーナー表示 2:バージョン表示)
26行目以降を以下と差し替え
if (!$num && !$static) return;

$out = '<script type="text/javascript">
<!--
document.write(\'<style type="text/css">@import url('.$base_url.'updated-today.css);</style>\');
//-->
</script>';

if ($conf_use_pngfix)
{
    $out .= '<!--[if lt IE 7]>
    <script defer type="text/javascript" src="'.$base_url.'pngfix.js"></script>
    <![endif]-->';
}

// 静的表示(南斗六星拳の守護星表示)チェック
if ($static & 1)
{
    $second = time() % 7;
    $img    = array('updated-today-corner0.png', 'updated-today-corner1.png', 'updated-today-corner2.png',
                    'updated-today-corner3.png', 'updated-today-corner4.png', 'updated-today-corner5.png',
                    'updated-today-corner6.png');
    // ▲コーナー表示
    $out .= '<div id="triangle-corner"><img src="'.$base_url.$img[$second].'" alt="MovableType MEMO" /></div>';
}

// 投稿(更新)日付表示チェック
if (0 < $num)
{
    // 投稿(更新)日付表示
    $results_assoc = mysql_fetch_assoc($result);
    $modified_on   = $results_assoc[$item];
    $out .= '<div id="updated-today"><img src="'.$base_url.'updated.png" alt="'.$modified_on.'" /></div>';
}

// 静的表示(MTバージョン表示)チェック
if ($static & 2)
{
    // バージョン表示
    $out .= '<div id="mt-version"><img src="'.$base_url.'version.png" alt="MovableType 3.35" /></div>';
}

echo $out;

テンプレートからは以下のように記述します。

<?php include('<$MTBlogURL$>updatedtoday/updated-today.php?id=<$MTBlogID$>&static=3'); ?>

ちょっとした遊び心なんです･･･すいません (;￣∇￣A

Posted on May 7, 2007

#5: Posted by ソープ [RES]

>>4 bzbell さん

こんばんは～^^

なるほど、なかなか楽しそうなことをされていますね～^^
南斗六星拳とは・・・また懐かしい・・・
（ちなみに、今は慈母の星・・ユ○アのようです(笑) ）

スクリプトの件は了解いたしました！
解説もつけていただき感謝感謝です！

Posted on May 8, 2007

#6: Posted by bzbell [RES]

>>5 ソープさん

こんにちわ^^

> 南斗六星拳とは・・・また懐かしい・・・

最近、北斗の拳に凝ってるんですの(●＞∀＜●)
感動しましたの!!

コメント投稿の件ですが、以下のようにするともっとカックいいと思います♪

<head>～</head>内に追加
<script type="text/javascript" src="<$MTBlogURL$>js/scriptaculous.js?load=effects"></script>

ajaxcomments.jsのfunction ajax_comment_complete()内に追加
new Effect.Appear(outputDivId, { duration:3.0, queue:'end' } );

scriptaculous.jsはいろんなエフェクトをかけられます

Posted on May 8, 2007

#7: Posted by ぷーこ [RES]: これ、かっこい～～～～！
でもでも私はSQLite。。。(ノ◇≦。) ビェーン!!
そっか、一番左上の漢字一文字は
南斗六星拳だったんですね～(￣。￣)ホーーォ。
なんか引っかかってたんだけどなるほど、
思い出しましたよ(*^m^*) ムフッ
北斗の拳。。。ラオウの声優が宇梶さんなのが
どうもピンと来なくて慣れないのは私だけ？？
Posted on May 8, 2007

#8: Posted by bzbell [RES]

>>7 ぷーこさん

こんにちわ^^

> でもでも私はSQLite。。。(ノ◇≦。) ビェーン!!

あっ!! それなんですけど、MySQLでなくてもできます。
ぷーこさんはブログのPHP化やってましたよね!?

それでしたら以下の手順で同じことができます。

Updated Today用のインデックス・テンプレートを作成します。
以下のコードをコピペして、インデックス・テンプレートを作成してください。
ファイル名は任意(たとえば、updated-today.php)です。

<?php if (<MTEntries lastn="1"><$MTEntryDate format="%Y%m%d"$></MTEntries> == date("Ymd")) { ?>

<script type="text/javascript">
<!--
document.write('<style type="text/css">@import url(<$MTBlogURL$>updatedtoday/updated-today.css);</style>');
//-->
</script><!--[if lt IE 7]>
    <script defer type="text/javascript" src="<$MTBlogURL$>updatedtoday/pngfix.js"></script>
<![endif]-->
<img id="updated-today" src="<$MTBlogURL$>updatedtoday/updated.png" width="120" height="120" alt="Updated Today" />

<?php } ?>

その際、「インデックス・テンプレートを再構築するときに、このテンプレートを自動的に再構築する」に必ずチェックしてください。