スタッフブログ

  • カテゴリ XOOPS の最新配信
  • RSS

クリスマスまであと何日?をブロックに表示する

mik : XOOPS » テーマ/デザイン 2012/12/1 0:00

Blogger's Avatar

本日から qiita で「XOOPS Themes and Templates Advent Calendar 2012」が始まりました。

http://qiita.com/advent-calendar/2012/xoops-themes-templates

このページを見ていただけるとわかりますが、1ヶ月にわたって毎日異なる執筆者がXOOPSのテーマやテンプレートなどについての話題をお届けするという、夢のような企画です♪その栄えある初日を飾らせていただきます。よろしくお願いします!

カウントダウンカスタムブロックの表示方法


最近はすっかり寒くなり、今日から12月といよいよ押し詰まってきました。クリスマスやお正月まであと何日?って考えるだけで楽しくなりますね♪そこで「自分の決めた日付までのカウントダウンをカスタムブロックで表示する」方法を書いてみます。

カスタムブロック タイプ:PHPスクリプト で


カスタムブロックにはいくつかのタイプがあります。今回は日付の計算などをしたいので PHPスクリプト を選択して作ってみましょう。

スクリプトの解説をここから書きますが「もう、見ただけでくじけそう」という方のためにダウンロード出来るファイルも用意していますのでちょっと読んでみてくださいね(^^)/。

カウントダウンさせるカスタムブロックに書くのは以下のコードです。

/* ここに指定したい日付を入れる */
$toYear = 2012;
$toMonth = 12;
$toDay = 25;

$toTime1=mktime(0,0,0,$toMonth,$toDay,$toYear);
$currentTime=mktime(0,0,0,date("m"),date("d"),date("Y"));

$atoDay=($toTime1-$currentTime)/86400;

この場合は「2012年の12月25日までの日数」を求めています。日付の指定はそれぞれの年、月、日を数字で指定しています。

日付の計算をするために mktime という関数でunixタイムスタンプに変換をしておいてから引き算をします。

計算結果は秒になりますのでそれを1日の秒:86400(24時間×60分×60秒)で割ります。

ここまで来たらあとはHTMLを使って表示するだけです。

?>
<div style="background:#ffff99;text-align:center;padding-top:10px;padding-bottom:10px;width:100%;border:dotted 3px #00ff00;">
<div>クリスマスまであと <?php echo $atoDay;?> 日!</div>
</div>

?>はPHPスクリプトの終わりを示します。この後は通常のHTMLを書けばその通りに表示してくれます。ポイントは クリスマスまであと の後に書いてある

<?php echo $atoDay;?>

の部分です。HTMLの中でもこのように書くことでPHPと同じ書き方が出来ます。この場合はさっき計算した残りの日数($atoDay)をこの場所に表示しています。

サンプルをダウンロードしてやってみてくださいね



この2カ所のコードをコピペしていただいて試してみてください。HTML部分は適当に作ってありますので、お好きなように変更するといいかと思います。

サンプルのダウンロードはこちら
http://ryus.co.jp/modules/d3downloads/index.php?page=singlefile&lid=96

*2012/12/03追記
utf-8が自動認識できないエディタで開くと日本語が化けて使えないという事例がありましたのでコードも書いておきます。内容は上記ダウンロードしたものと同じですので下をコピーペーストでもいいかと思います。

/************************************************
 その日まであと何日を表示するカスタムブロック
 ************************************************/


// toYear/toMonth/toDayまでの日数 を数えます
// 例)2012年12月25日
// $toYear = 2012;
// $toMonth = 12;
// $toDay = 25;

/* ここに指定したい日付を入れる */
$toYear = 2012;
$toMonth = 12;
$toDay = 25;

$toTime1=mktime(0,0,0,$toMonth,$toDay,$toYear);
$currentTime=mktime(0,0,0,date("m"),date("d"),date("Y"));

/* 以下はデバッグ用の表示です。見てみたい場合は頭の//を外してみてね */
//$toDay1=date("Y-m-d",$toTime1);
//$currentDate=date("Y-m-d",$currentTime);
//echo "<br>day1=".$toDay1;
//echo "<br>今日=".$currentDate;

$atoDay=($toTime1-$currentTime)/86400;

/* おまけ もう一つの日まで何日か? */
/* 1つで良い場合はしていなくてOKです */
$toYear2 = 2013;
$toMonth2 = 1;
$toDay2 = 1;
$toTime2=mktime(0,0,0,$toMonth2,$toDay2,$toYear2);
$atoDay2=($toTime2-$currentTime)/86400;

?>
<div style="background:#ffff99;text-align:center;padding-top:10px;padding-bottom:10px;width:100%;border:dotted 3px #00ff00;">
<div>クリスマスまであと <?php echo $atoDay;?> 日!</div>
<div style="font-size:0.6em;margin-top:5px;">お正月まであと <?php echo $atoDay2;?> 日!</div>
</div>

このサンプルではクリスマスだけでなくお正月もカウントダウン出来たらいいなぁということで追加してあります。他に、PHPスクリプトを書きながらデバッグしやすいようにデバッグ用のコードも書いてあります(コメントアウトしてあるので使うときは外してくださいね)。

また、もしも $atoDay がマイナスになったら(指定した日付を過ぎたら)別の表示にするということも可能ですね。さらに23日までの待っている感じのの画像、クリスマスイブの画像、クリスマスの画像など状況によって表示させることもできますので是非PHPにチャレンジしてみてください。

サンプルコードで実際の表示はどうなるのかということを

「うさぎにもできるXOOPS Cube入門♪」
http://usadeki.jp/

の左ブロックにに表示しておきます。12月26日になったら非表示にする予定ですのでもし見えたら参考にしてください。

おまけ ブロックの表示、非表示を切り替えるモジュールあります!



このブログを書いていて「あー、でも日にちが過ぎたらとか忘れずに消したりするの面倒だな」と思いました。そこで思い出したのですがRYUSのダウンロードコーナーには「RYUSブロックタイマー」という便利なモジュールがあったのです。

これはブロックの表示を日時でコントロールできるものです。例えば今回のようにクリスマス用のブロックを作った場合「12月1日になったら表示して、26日になったらブロックを非表示にしたいな」という事になると思います。その場合通常では管理者としてログインして管理画面からその作業をすることになります。

RYUSブロックタイマーを使えば開始日時、終了日時を指定しておくだけで自動的にやってくれます。


  


これを使うと夏休みやお正月休みの時に「○月○日?○月○日まではお休みとさせていただいております。休み中にいただいたご連絡につきましては○月○日より順次ご連絡します。」みたいなブロックを目立つところにおいて、休みの期間中だけ表示するように仕込んでおけば休みの前後にばたばたしていて忘れちゃった!ということも無くなるかと思います。

開始日時を指定して、開始になるまで表示したくない場合は非表示にしておいてくださいね。

トラックバック

スタッフブログ最新
カテゴリ一覧

〒104-0061 東京都中央区銀座1丁目3番3号 G1ビル7階
お問い合わせ TEL 03-3524-8860

Copyright(c) 2012 RYUS.All Rights Reserved.