開始日を指定してプラグインなしでカウントアップタイマーの設置方法

今日は2025年4月25日です。

カウントダウンタイマーは言わずと知れた機能となっていますが、カウントアップタイマーというものもあります。例えば平成になってから…。とか令和になってから…とか自分が生まれてから…とかというように、その頃からいったいどのくらいの日数や時間が経過しのだろう。と思われることはないでしょうか。そんな時のためにカウントアップタイマーのプラグインを使わずに設置する方法を残しておきたいと思います。

以前は、いくつかの方法にてカウントアップタイマーの設置方法をプラグインを使わずに設置する方法を以下に記載しているので、そちらもご参照ください。

プラグインなしでカウントアップタイマーの設置方法

前回はプラグインを使わずにカウントダウンタイマーの設置方法を記載しました。ですが、カウントダウンタイマーがあるのならカウントアップタイマーもあるんじゃないのか。といことで、カウン

カウントアダウンタイマーの設置方法は以下をご参照ください。

カウントダウンタイマーをプラグインなしで作成方法

カウントダウンタイマーというともうインターネットが普及したばかりの頃からあるように思います。ホームページの時から始まりブログなどでも使用され今ではCMSなどでも良く使われます。企

開始時期を設定したプラグインを使わずにカウントアップタイマーの設置方法です。

function.phpに追記するので、必ずfunction.phpのバックアップをしてから行ってください。

以下にプラグインを使わずにカウントアップタイマーの設置するためのコードを記載します。

以下のコードを`functions.php`に追加することで、WordPressにカウントアップタイマーのショートコードを作成できます。このショートコードを利用すると、指定した日時から現在までの経過時間を表示するタイマーを簡単に挿入できます。

// カウントアップタイマーのショートコードを作成
function enqueue_countup_timer_scripts() {
    // jQueryを登録（既にテーマで使用している場合は不要）
    wp_enqueue_script('jquery');
    
    // カウントアップ用のJavaScriptを追加
    wp_enqueue_script(
        'countup-timer',
        get_template_directory_uri() . '/js/countup-timer.js',
        array('jquery'),
        '1.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_countup_timer_scripts');

// ショートコードの定義
function countup_timer_shortcode($atts) {
    // デフォルトの属性値
    $atts = shortcode_atts(
        array(
            'from' => '2023-01-01 00:00:00', // カウントアップを開始する日時
            'format' => 'Y年m月d日 H時i分s秒', // 表示形式
            'id' => 'countup-timer', // タイマーのID
        ),
        $atts,
        'countup_timer'
    );

    // タイマーを表示するHTML
    $output = '<div id="' . esc_attr($atts['id']) . '" data-from="' . esc_attr($atts['from']) . '" data-format="' . esc_attr($atts['format']) . '">';
    $output .= 'カウントアップタイマー: <span class="timer">0</span>';
    $output .= '</div>';

    return $output;
}
add_shortcode('countup_timer', 'countup_timer_shortcode');

次に、`countup-timer.js`というJavaScriptファイルをテーマの`js`フォルダに作成し、以下のコードを追加してください。このスクリプトは、指定された日時から現在までの経過時間をリアルタイムでカウントアップします。

```javascript
jQuery(document).ready(function($) {
    $('.timer').each(function() {
        var container = $(this).closest('div[id^="countup-timer"]');
        var fromDate = new Date(container.data('from'));
        var format = container.data('format');

        function updateTimer() {
            var now = new Date();
            var elapsed = now - fromDate;

            if (elapsed < 0) elapsed = 0;

            var seconds = Math.floor(elapsed / 1000) % 60;
            var minutes = Math.floor(elapsed / (1000 * 60)) % 60;
            var hours = Math.floor(elapsed / (1000 * 60 * 60)) % 24;
            var days = Math.floor(elapsed / (1000 * 60 * 60 * 24));

            var formattedTime = format
                .replace('Y', days)
                .replace('m', hours)
                .replace('d', minutes)
                .replace('H', seconds);

            $(this).text(formattedTime);
        }

        // 初回呼び出し
        updateTimer.call(this);

        // 1秒ごとに更新
        setInterval(updateTimer.bind(this), 1000);
    });
});

具体的なショートコードの使用方法は以下になります。

ショートコードの使用方法

投稿や固定ページ内で以下のようにショートコードを使用してください。

［countup_timer from="2023-01-01 00:00:00" format="経過日数: Y 日, 時間: m 時間, 分: d 分, 秒: H 秒"］
（［］は半角英数字に変換しなおしてください。）

• from：カウントアップを開始する基準日時を指定します（YYYY-MM-DD HH:MM:SS形式）。
• format：表示形式をカスタマイズできます。Yが日数、mが時間、dが分、Hが秒に置き換えられます。

注意点

1. JavaScriptファイルの配置：

• 上記のコードでは、countup-timer.jsをテーマ内のjsフォルダに配置することを想定しています。存在しない場合はフォルダを作成してください。
• ファイルのパスが異なる場合は、get_template_directory_uri() . '/js/countup-timer.js'の部分を適宜変更してください。

1. 日時形式：

• from属性で指定する日時は、必ずYYYY-MM-DD HH:MM:SS形式で入力してください。誤った形式の場合、タイマーが正しく動作しない可能性があります。

1. スタイリング：

• 必要に応じてCSSを追加して、タイマーの見た目をカスタマイズしてください。たとえば、テーマのstyle.cssに以下のようなスタイルを追加できます。

#countup-timer {
    font-size: 1.5em;
    color: #333;
}

この設定により、［countup_timer］ショートコードを使用して、カウントアップタイマーを簡単に挿入およびカスタマイズできます。

最後にWeblog（ウェブログ）からブログとして（ウェブログとブログは同義語）サービスが開始されてからのカウントアップタイマーを以下に設定して設置してみます。

ブログサービスが始まったのが米国（アメリカ）においては1999年とのことです。日本にて普及したのは2000年代初頭から中盤くらいからですね。

参考）

ブログ

ブログ（blog）とは、World Wide Web上のウェブページに、日記や覚え書き、論評などを記すソーシャルメディアのことである。写真やイラストなどの画像を掲載することもできる。「WebにLogする」ウェブログ (weblog) をブログ（blog）と略称する［1］。執筆者はブロガー (blogger) 、個別記事はブログエントリー (blog entry) と呼ばれる。1999年4月15日米国で「LiveJournal」がサービス開始。8月23日：「Blogger」がサービス開始（英語版。2003年2月にGoogleが買収。2004年11月15日より多言語対応）

Wikipedia

1999年 4月15日：米国で「LiveJournal」がサービス開始。 8月23日：「Blogger」がサービス開始（英語版。2003年2月にGoogleが買収。2004年11月15日より多言語対応）
ブログ - Wikipedia

以下のように開始時期を指定してのカウントアップタイマーが表示可能になります。

↓

ブログサービスが始まってから:

0