[WP] WordPress用のDpub 7カウントダウンプラグインを作りました #dpub7

Dpub 5以来、開催日までのカウントダウンタイマーを毎回作っている @azur256 です。
今回も WordPress 用のプラグインとして作りました。

くらちゃんありがとう

早速、Dpub永久幹事のくらちゃん (@kuracyan) も人柱になってくれました！

免責

無保証の野良プラグインです。問題は起さないと思いますが、ご利用は自己責任でお願いします。また、ダウンロードしたプラグインのソースを適当に変えてくれても構いません。ライセンスは GPL v2 で公開しています。

設置も改造も公開も自由にやってください

設定方法

設置はココにあるファイルをダウンロードしてから WordPress のダッシュボードでインストールします。

プラグインの管理画面で新規追加を選びます。

アップロードを選択します

ローカルにダウンロードしたファイルを選択してインストール

成功していればウィジェットの管理画面にDpub7 Counterというウィジェットが現れているはずなので、これを配置してください。

タイトルはカスタマイズ可能にしています。

表示のカスタマイズ

ウィジェットの中の表示部分は dpub_counter という id を付けているので、 CSS のセレクタで指定することで表示をカスタマイズすることができます。
(Dpub 6 カウンタと同じ id です)。

子テーマの中などで以下のようにスタイルを設定することができます。

div#dpub_counter {
  font-size:90%;
  font-weight:bold;
  color:#FFA500;
}

div#dpub_counter {

font-size:90%;

font-weight:bold;

color:#FFA500;

}

実際の処理は JavaScript を書けばOK

プラグインが怖い、とかウィジェットが使えないという場合は、以下のJavaScriptを記述することで同様のことが可能です。
もっと細かくカスタマイズしたい方はこれをお使いください。

<div id="dpub_counter"></div>
<script charset="utf-8" type="text/javascript"><!--
function count_down() {
    nowdaytime    = new Date();
    dpubdaytime   = new Date(2013, 1, 2, 13, 00, 00);
    cntdwnMils  = dpubdaytime.getTime() - nowdaytime.getTime();
    cntdwn_day  = Math.floor(cntdwnMils / (1000*60*60*24));
    cntdwnTime  = cntdwnMils - (cntdwn_day * (1000*60*60*24));
    cntdwn_hour = Math.floor(cntdwnTime / (1000*60*60));
    cntdwnTime  = cntdwnTime - (cntdwn_hour * (1000*60*60));
    cntdwn_min  = Math.floor(cntdwnTime / (1000*60));
    cmtdwnTime  = cntdwnTime - (cntdwn_min * (1000*60));
    if ( cntdwn_min < 10) {
        cntdwn_min = '0' + cntdwn_min;
    }

    if ((dpubdaytime - nowdaytime) > 0) {
        document.getElementById("dpub_counter").innerHTML =
           '<span>' +
           'Dpub7 開幕まで… <br />残り ' + 
           cntdwn_day  + '日 ' +
           cntdwn_hour + '時間' +
           cntdwn_min  + '分 です' +
           '</span>';
    } else {
        document.getElementById("dpub_counter").innerHTML = 'Dpub 7 is now!';
    }
    setTimeout('count_down()', 60000);
}
count_down();
// --></script>