新着表示プラグイン(投稿者情報版) for Serene Bach

新着表示プラグイン(投稿者情報版) for Serene Bach

Posted at December 14,2006 1:50 AM
Tag:[Comment, Customize, Plugin, SereneBach, Trackback]

新着コメント・新着トラックバックのある投稿者情報に New マークをつける記事に新着コメントまたは新着トラックバックがあった時に、記事本文下の投稿者情報に「New!!」というテキストや画像を表示するプラグインを作成しました。

本プラグインを適用し、ベースHTMLテンプレートに追加するスクリプトに「コメント投稿(またはトラックバック受信)後 n 時間以内」という指定を行うことで、該当記事の投稿者情報欄に任意のテキスト(または画像)を表示することができます。スクリーンショットは公開テンプレートに適用した完成イメージですが、どのテンプレートでも利用可能です。

動作の仕組みは、プラグインを用いて、最新記事リストの各エントリーの右側にエントリー投稿時間を span 要素で予め埋め込んでおき、CSSで非表示の状態にします。そしてページ表示時に JavaScript でその投稿時間を取得し、現在時刻との差を計算して指定時間以内であれば投稿時間の部分をテキストまたは画像に置き換えて表示する、という仕組みです。

プラグインの他に、ベースHTMLテンプレートに JavaScript を設定する必要がありますが、ページを読み込む毎に現在時刻との差を計算するので、誤差の少ない表示が可能です。なおサブカテゴリーリスト版をお使いの場合、JavaScript の設定が共用できるので設定不要です。
Windows2000/XPのIE6.0・Firefox1.0・Opera8.0で動作を確認しています。

以下カスタマイズ方法です。

1.プラグインのダウンロード・アップロード

下記の RecentDate.zip または RecentDate.lzh をクリックして、プラグインのアーカイブをダウンロードしてください。

RecentDate.zip / RecentDate.lzh

ダウンロードしたアーカイブを解凍し、中にある RecentDate.pm を plugins ディレクトリ直下に、resource/ja/recentdate.txt を、同じディレクトリの構成があると思いますので、recentdate.txt のみを ja 配下にアップロードしてください。

アップロードの後、Serene Bach の管理画面を起動し、「環境設定」→「プラグイン」をクリックし、プラグイン一覧に RecentDate.pm が表示されていることを確認し、一番右のチェックボックスをチェックして右下の「利用する」をクリックしてください。

2.テンプレートの修正

ベースHTMLテンプレートに対し、下記の新着表示用の独自タグ

  • コメント用:{recent_comment_date}
  • トラックバック用:{recent_trackback_date}

とスクリプトを entry ブロックの中に追加してください。リスト1 に公開テンプレートへの設定例を示します(スクリーンショットと同じ設定)。

リスト 1 独自タグの追加

<!-- BEGIN entry -->
    :
  (中略)
    :
<div class="entry-footer">
Posted by {user_name} at {entry_time} | Category: {category_name} | {comment_num} {recent_comment_date} | {trackback_num} {recent_trackback_date}
</div>
</div>
{trackback_auto_discovery}
<!-- END entry -->

また、</body> の直前に下記のスクリプトを追加します。

リスト2 スクリプトの追加

<script type="text/javascript">
//<![CDATA[
// passage time
var pass = 24;
 
// display content
var content = 'New!!';
 
var currentDate = new Date();
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
    if(spans[i].getAttribute('class') == 'new' ||
       spans[i].getAttribute('className') == 'new') {
        var now = (spans[i].innerHTML - (Math.ceil(currentDate.getTime()/1000))) /(60*60);
        now = Math.ceil(now);
        if(-now <= pass){
            spans[i].innerHTML = content;
            spans[i].style.display = 'inline';
        }
    }
}
//]]>
</script>

他の新着表示プラグイン(サブカテゴリーリスト版等)をすでにご利用の場合は、リスト2 を追加する必要はありません。

3.新着表示のチェック時間変更

デフォルトは 24時間以内のコメント・トラックバックに新着表示を行ないます。この時間を変更する場合は、リスト2 の最初の方の部分を、リスト3 の赤色部分のように変更してください。

リスト3 チェック時間変更

// passage time
var pass = 24;

設定する単位は「時間」です。(例は24時間)。

4.表示内容変更

新着表示の内容を変更する場合は、リスト2 の最初の方の部分を、リスト4 の赤色部分のように変更してください。

リスト4 スクリプトの追加

// display content
var content = 'New!!';

HTMLタグも大丈夫ですので、リスト5 のように、

リスト5 スクリプトの追加

var content = '<img src="http://~/hogehoge.gif" style="vertical-align: middle" />';

とすれば画像を表示することもできます。

5.スタイルシートの設定

スタイルシートに下記の設定を追加します。最初の display プロパティで2項のタグに設定したタイムスタンプを非表示にします。その下の color プロパティと font-weight プロパティは、 New!! という文字が表示された場合に適用される設定です。

リスト6 CSSの追加

span.new {
    display: none;
    color: red;
    font-weight: bold;
}

プロパティは適宜変更して、お好みのデザインに仕上げてください。他の新着表示プラグイン(サブカテゴリーリスト版等)をすでにご利用の場合は、リスト6 を追加する必要はありません。

以上です。不具合等ございましたらご連絡ください。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

新着表示プラグイン(投稿者情報版) from あれもこれも
久々にカスタマイズしてみました[20]。 [続きを読む]

Tracked on January 31, 2007 4:48 PM
コメント

お世話になります(-。?;)

毎回ご質問ばかりですみませんがご教授をお願いしますm(__)m
新着表示プラグイン(サブカテゴリーリスト・最新記事リスト版)はうまく動作したのですが、これだけ動作してくれません・。・;

ソースをみますと
comments (1)</a> <span class="new">1167005111</span>
等とあるので一応?入ってると認識しているのですが・・・
何かチェックする箇所等ありましたらご教授をお願いいしますm(__)m

[1] Posted by ken : December 25, 2006 9:33 AM

>kenさん
こんにちは。
ご質問の件ですが、現在テンプレートに挿入されているリスト2のスクリプトを </body> の直前に移動してください。これで24時間以内にコメントがあれば New マークが表示されます。

修正くださったコメントは勝手ながら削除致しました。タグをそのまま表示させる方法は「文字実体参照について」が参考になれば幸いです。
それではよろしくお願い致します。

[2] Posted by yujiro : December 26, 2006 11:27 AM

yujiro様

リスト2のスクリプトを </body> の直前に移動しましたら全てのNewが表示されなくなりましたヽ(;´Д`)ノ
ソースにはspan classが相変わらず全部ついてます。

他に何か変更する箇所などありますでしょうかm(__)m
教授をお願いいしますm(__)m


またタグ表示の知識がなくコメントを汚してすみませんでした(>_yujiro様

リスト2のスクリプトを </body> の直前に移動しましたら全てのNewが表示されなくなりましたヽ(;´Д`)ノ
ソースにはspan classが相変わらず全部ついてます。

他に何か変更する箇所などありますでしょうかm(__)m
教授をお願いいしますm(__)m

またタグ表示の知識がなくコメントを汚してすみませんでした(>_<")

[3] Posted by ken : December 26, 2006 1:48 PM

>kenさん
こんにちは。
</head> の直前ではなく、</body> の直前です。

JavaScript は(function { } で括られていなければ)HTMLページに書かれた順番に処理されるので、今回のようにスクリプトを </head> の直前においた場合、先に span タグ(の class="new")を見つける処理が走ります。ですが、HTML(の body タグ)がまだ読み込まれていないので、そのスクリプトでは何も処理ができません。
この仕組みが分かっていれば他のスクリプトを配置する時でも応用できると思います。

それではよろしくお願い致します。

[4] Posted by yujiro : December 26, 2006 2:49 PM

yujiro様

ご連絡が遅くなりましたが表示されました^^
body→headと脳内変換されてました(;´Д`)
お手数をおかけしましたm(__)m

また処理の順番もご教授いただきありがとうございました^^

よいお年をお迎え下さいませ^^

また何かございましたらすみませんがご助言をお願いします(;・∀・)

[5] Posted by ken : December 30, 2006 4:24 PM

>kenさん
こんばんは。
ご連絡ありがとうございました。
うまくできたようで良かったです。
ではでは!

[6] Posted by yujiro : January 1, 2007 1:54 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)