[WP] 今回はプラグインでDpub 6カウンターを設置してみました #dpub6

Dpub 6 が告知され Twitter のリストもでき、否が応でも気分を盛り上げてくれる今日この頃ですが、前回の Dpub 5 でも作ったカウントダウンを、今回はWordPress のプラグインで作成してみました。

<追記>
サーバ上の圧縮ファイルがおかしかったようで23時位までの間にダウンロードしていただいた場合、展開できないことがあるようです。
先ほど、アップロードし直しましたので、もし展開できないことがあった場合は再度ダウンロードしていただけますようお願いいたします。
(@livlove007 さん、ありがとうございました)。

野良プラグインですので、動作保証やらデータ保証やらはできませんので、怖いと思う方は使わないでください。
一応、タイトル文字列をDBに格納している以外は何もしていないので、大丈夫だと思うのと、プラグインのアンインストールのテストは何度かやっているのですが、テストした環境は WordPress 3.4.1 だけですので、最終的には使う場合は自己責任でお願いします。

また、プラグインを入れるとウィジェットとして表示されるようになりますので、ウィジェットが利用できないテーマを使われている方は、JavaScrpt も掲載しておきますので、それを直接記述するなどしてください。

インストール

プラグインはここに置いてありますので使う方はダウンロードしてください。
ダウンロードしたら、WordPress のダッシュボードのプラグインで「新規追加」を選びます

プラグインのインストール画面で「アップロード」を選んで

プラグインのインストール画面で、先ほどダウンロードしたファイルを選択して「いますぐインストール」を選んでください

インストールが完了したら「プラグインを有効化」して

このが画面が出たら完了です

ウィジェットを配置する

ウィジェットの管理画面に「Dpub6 Counter」というウィジェットが現れると思いますので、これをサイドバーなどに配置してください。

一応、タイトルは編集できるようにしています。

あとは画面を表示すれば、冒頭のウィジェットのように表示されるはずです

表示のカスタマイズ

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

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

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(2012, 8, 17, 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>' +
           'Dpub6 開幕まで… <br />残り ' + 
           cntdwn_day  + '日 ' +
           cntdwn_hour + '時間' +
           cntdwn_min  + '分 です' +
           '</span>';
    } else {
        document.getElementById("dpub_counter").innerHTML = 'Dpub 6 is now!';
    }
    setTimeout('count_down()', 60000);
}
count_down();
// --></script>