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

今朝、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の

• add_action
• add_filter

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