はぐれメタルはにげだした

身近な趣味からテクニカルな話題まで幅広く取り扱っていきます

ブログ

ブログで指定した期日を過ぎたら自動で文章を更新させる方法

投稿日:2018年2月17日 更新日:

この記事の所要時間: 1117

さきほどtwitterを見てたらこんなツイートが話題になってました。

○○のサービスが受けられるのは○○年○○月○○日までです!

みたいなカウントダウン系の文章を、期日が過ぎたら自動で他の文章に変えたいって需要です。

なにやら超欲しい人だらけらしいので作ってみました。

 

前提

話題に挙がってるのはwordpressのプラグインらしいんですが、wordpress使ってない人にも需要ありそうな雰囲気だったのでjavascriptにしました。

なので普通のサイトでもレンタルブログでもとりあえずjavascriptさえ動けばコピペだけで導入できます。

ただ細かいエラー処理とか入れてないので、書式に合わない形でパラメータ入れると動かないです。

 

メイン処理 (ヘッダタグ内にjavascriptのコードをコピペ)

<script>
<!--
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>
↑ヘッダタグ開始位置

ヘッダタグの中にコピペする

↓ヘッダタグの終了位置
</head>

 

各記事からjavascriptを記述

コードをコピペしたらもう準備完了なんで、あとは記事の本文から呼び出すだけです。

<script>updateStringAfterDeadline("2030/02/18","23:50:00","期日前の文章 %D%日 %H%時間 %M%分 %S%秒","期日後の文章");</script>

 
とりあえずこれをそのまま記事にコピペすると↓こんな感じで2030年2月18日までの時間が表示されます。(ブラウザを更新すると秒数が変わるはずです)

次は、パラメータを少し変えて2016年までの日数を表示してみましょう。

<script>updateStringAfterDeadline("2016/02/18","23:50:00","期日前の文章 %D%日 %H%時間 %M%分 %S%秒","期日後の文章");</script>

 
すると↓こんな感じで「期日後の文章」が表示されます。

 

既に期日を過ぎているので画面を更新しても変更ありません。

慣れない方には何が何やらサッパリだと思うんで、1つずつ説明していきます。

 

javascriptの使用宣言

<script></script>

黄色時の部分です。

これは「ここからここまでjavascriptを使いますよ~」という命令です。

これについてはただのオマジナイなので、そういうものだと思ってください。

 

メイン処理を呼び出す

updateStringAfterDeadline("2030/02/18","23:50:00","期日前の文章 %D%日 %H%時間 %M%分 %S%秒","期日後の文章");

 

まず白地の部分ですが、これは

「updateStringAfterDeadlineを使いますよ〜」
「その際にパラメータを4つ渡しますよ〜」

という意味です。

パラメータはカンマ区切りで、必ずダブルクオーテーションでくくって指定します。

そして、赤字で記されているのがパラメータです。

必ずこの順番で4つ指定する必要があります。

順番 パラメータ概要 詳細
1 期日とする年月日 期日の 年/月/日 を半角文字で指定します。
入力書式は YYYY/MM/DD (Year/Month/Day)です。
2 期日の時刻 期日の 時:分:秒 を半角文字で指定します。
入力書式は hh:mm:ss (hour:minute:sec)です。
3 期日前に表示する文章 期日前に表示しておきたい文章を指定します。以下の特殊文字を指定すると、 残りの日数、時間、分、秒を表示できます。

%D% : 日
%H% : 時間
%M% : 分
%S% : 秒

4 期日後に表示する文章 期日後に表示しておきたい文章を指定します。
特殊文字はありません。
指定した文章がそのまま表示されます。

赤字部分をご自分の用途に合わせて書き換えてください。

 

試してみる

書き方がよく分からないという方の為にジェネレータも用意しておきます。

期日の年月日
期日の時刻
期日前の文章
期日後の文章


コピペ用。↓これを自分のブログにコピペしてください。

 

 

まとめ

習うより慣れろなので、実際にコピペしたり変更してみたりして試してみて下さい。

もちろん記事だけじゃなくてサイドバーでもヘッダでもフッタでも動くはずです。

不明点あればtwitterまでご連絡ください。

-ブログ
-, ,

関連記事

wordpressにDoSの脆弱性が見つかった話(CVE-2018-6389)

この記事の所要時間: 926

この記事の所要時間: 約 9分26秒 2018年2月5日、Barak Tawily氏によってwordpressの新たな脆弱性が発見されました。 Barak氏によると、load-scripts.phpに …

プロフィール

プロフィール



はぐれん@フリーランサー

10代〜20代前半くらいまではガンガンいこうぜ。20代半ばで鼻っ柱を砕かれて一度はめいれいさせろの支配下に置かれかけたものの、いや逃げりゃいいんじゃんって気付いてからはまた違う世界が見えて来た。30代半ばに差し掛かった今、いろいろやろうぜ。