さきほどtwitterを見てたらこんなツイートが話題になってました。
前回公開した記事の中で、実は残日数をカウントダウンさせるプラグインが入ってます。
残日数の計算と終了後の文章入れ替えが自動でできる機能です。
これ作ってもらったんだけど、欲しい人います？
需要あったら、無料で配ろうと思うんですが・・・
（※制作者には許可もらってます） pic.twitter.com/O5T0nHBMel— ユウ@アフィリエイター (@mokume7) 2018年2月16日
○○のサービスが受けられるのは○○年○○月○○日までです！
みたいなカウントダウン系の文章を、期日が過ぎたら自動で他の文章に変えたいって需要です。
おぉー！めっちゃいいじゃないですか！！！！#ほしいぃぃぃぃいです
— ウィズ (@withkun1) 2018年2月16日
これめっちゃ欲しいです！！
おおおおおおおおお！！！
ご飯奢らせてください＼(^o^)／＼(^o^)／— いのま@記事めちゃ書くで8月末300万！ (@inomavtec) 2018年2月16日
めちゃくちゃいいですね！
これは欲しい人だらけですよ
（超欲しい）— ミヤ＠アイコン変更 (@miya_si2) 2018年2月16日
なにやら超欲しい人だらけらしいので作ってみました。
目次
前提
話題に挙がってるのはwordpressのプラグインらしいんですが、wordpress使ってない人にも需要ありそうな雰囲気だったのでjavascriptにしました。
なので普通のサイトでもレンタルブログでもとりあえずjavascriptさえ動けばコピペだけで導入できます。
ただ細かいエラー処理とか入れてないので、書式に合わない形でパラメータ入れると動かないです。
メイン処理 (ヘッダタグ内にjavascriptのコードをコピペ)
<!--
function updateStringAfterDeadline(target_day,target_time,str_before,str_after) {
var msg = str_after;
var today = new Date();
var deadline = Math.ceil((Date.parse(target_day + " " + target_time)-today.getTime()) / 1000);
if ( deadline > 0 ) {
msg = str_before;
}
days = Math.floor(deadline / 24 / 60 / 60);
days_sec = days * 24 * 60 * 60;
hours = Math.floor((deadline-days_sec) / 60 / 60);
hours_sec = hours * 60 * 60;
minutes = Math.floor((deadline-days_sec-hours_sec) / 60);
minutes_sec = minutes * 60;
secs = deadline-days_sec-hours_sec-minutes_sec;
msg = msg.replace("%D%",days);
msg = msg.replace("%H%",hours);
msg = msg.replace("%M%",minutes);
msg = msg.replace("%S%",secs);
document.write(msg);
}
-->
</script>
これが残りの日数を計算して文章を切り替える処理です。
引数で期日の年月日、時刻、期日前の文言、期日後の文言を渡しています。
よく分からない人はとりあえず「updateStringAfterDeadline」っていう魔法を使って何やら計算するってことだけ知っといてください。
まずはこのコードをヘッダ部分に丸々コピペします。
wordpressを使ってる人
wordpressを使ってる人なら外観のテーマ編集からいけるはずです。
①[外観]
②[テーマの編集]
③[編集するテーマを選択] (自分が使用しているテーマを選択)
④[テーマヘッダー(header.php)]
⑤<body>タグの手前にある</header>の直前の行にコピペします
⑥コピペしたら下にスクロールして「ファイルを更新」をクリック
wordpressを使ってない人
wordpressを使ってない人はご自身のブログのヘッダ部分を直接編集してコピペしてください。
↑ヘッダタグ開始位置
ヘッダタグの中にコピペする
↓ヘッダタグの終了位置
</head>
各記事からjavascriptを記述
コードをコピペしたらもう準備完了なんで、あとは記事の本文から呼び出すだけです。
とりあえずこれをそのまま記事にコピペすると↓こんな感じで2030年2月18日までの時間が表示されます。（ブラウザを更新すると秒数が変わるはずです）
次は、パラメータを少し変えて2016年までの日数を表示してみましょう。
すると↓こんな感じで「期日後の文章」が表示されます。
既に期日を過ぎているので画面を更新しても変更ありません。
慣れない方には何が何やらサッパリだと思うんで、1つずつ説明していきます。
javascriptの使用宣言
黄色時の部分です。
これは「ここからここまでjavascriptを使いますよ～」という命令です。
これについてはただのオマジナイなので、そういうものだと思ってください。
メイン処理を呼び出す
まず白地の部分ですが、これは
「updateStringAfterDeadlineを使いますよ〜」
「その際にパラメータを４つ渡しますよ〜」
という意味です。
パラメータはカンマ区切りで、必ずダブルクオーテーションでくくって指定します。
そして、赤字で記されているのがパラメータです。
必ずこの順番で４つ指定する必要があります。
| 順番 | パラメータ概要 | 詳細 |
|---|---|---|
| 1 | 期日とする年月日 |
期日の 年/月/日 を半角文字で指定します。 入力書式は YYYY/MM/DD (Year/Month/Day)です。 |
| 2 | 期日の時刻 |
期日の 時:分:秒 を半角文字で指定します。 入力書式は hh:mm:ss (hour:minute:sec)です。 |
| 3 | 期日前に表示する文章 |
期日前に表示しておきたい文章を指定します。以下の特殊文字を指定すると、 残りの日数、時間、分、秒を表示できます。
%D% : 日 |
| 4 | 期日後に表示する文章 |
期日後に表示しておきたい文章を指定します。 特殊文字はありません。 指定した文章がそのまま表示されます。 |
赤字部分をご自分の用途に合わせて書き換えてください。
試してみる
書き方がよく分からないという方の為にジェネレータも用意しておきます。
コピペ用。↓これを自分のブログにコピペしてください。
まとめ
習うより慣れろなので、実際にコピペしたり変更してみたりして試してみて下さい。
もちろん記事だけじゃなくてサイドバーでもヘッダでもフッタでも動くはずです。
不明点あればtwitterまでご連絡ください。
