Nullyのぶろぐ

仙台で働くエンジニアの日記

読む時間を表示して、読めたか確認する

今朝、actyway.comさんの記事WordPress のプラグイン無しですごく簡単に記事を読む時間表示しよーという記事を見てて、面白かったので、時間を表示して、ついでに読めたか確認するソースを書いてみました。

まずは、WordPress のプラグイン無しですごく簡単に記事を読む時間表示しよーに掲載してあるソースを脳内停止でコピペ[wp_emoji2 code="d160" alt="double exclamation"] [wp_emoji2 code="d231" alt="うれしい顔"]

次に、以下のソースをfunctions.phpに書き足す。

 

// jQuery の追加

add_action("init", "init_countdown_js");

function init_countdown_js() {

wp_enqueue_script("jquery");

}

// jQueryを使ったカウントダウンコードと、表示処理

add_action("wp_head", "render_countdown_js");

function render_countdown_js() {

if(!is_singular()) return;

?>

<script type="text/javascript">

jQuery(function(){

var box = jQuery(".countdown"),

message = jQuery('読めましたか?'),

regex = /\w+/,

time = parseInt(regex.exec(box.text())[0]) * 60;

interval = null;

// 時間で読めますってとこにメッセージを追加

message.hide().appendTo(box);

// 時計

interval = setInterval(function(){

if(time <= 0) {

clearInterval(interval);

message.fadeIn();

return;

}

--time;

}, 1000);

});

</script>

<?php

}

 

動かすと...

ソースを動かした結果

こうなる[wp_emoji2 code="d160" alt="double exclamation"] [wp_emoji2 code="d233" alt="猫2"]

画像ではわかりませんが、「読めましたか?」ってところはフェードインで表示されます[wp_emoji2 code="d228" alt="指でOK"]

メッセージを表示する処理ではなく、なにか別な処理をしたい場合は、setIntervalで呼び出している関数(無名関数)のなかの処理を書き換えてあげればそれなりにうまくいくはず[wp_emoji2 code="d274" alt="ブタ"]

終りに

@actywavさんに動いてないよ!って送って、よくよく見たら実は動いていました。

@actywavさん、本当に申し訳ありませんでした...。

今回は、add_action関数で「このポストは〜〜〜」という文を追加していましたが、add_filterでも問題なく動きました。

add_actionとadd_filterの違いは、WordPress Codexの

をご覧になればいいかと思います[wp_emoji2 code="d160" alt="double exclamation"] [wp_emoji2 code="d140" alt="わーい (嬉しい顔)"]