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

2024年12月11日 (水曜日)↓における週間月間人気記事トップ３は？↓

• 本日
• 週間
• 月間

1. 

   車のキーナンバー確認方法。キーレス紛失や壊れた時 7PV

   初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

   もっと読む

2. 

   マウスの左クリックや右クリックが効かないのでマウス分解して直す方法 6PV

   マウスは今やパソコンなどにはなくてはならない入力装置です。入力機器。昔のキーボードのみでの操作には戻れませんね。そこで長年使ってきたマウスの右クリックではなく左クリックが効かなかったりジャダー（チャタ…

   もっと読む

3. 

   カーメイトのエンジンスターターでエラー15表示と対処方法 3PV

   夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

   もっと読む

1. 

   カーメイトのエンジンスターターでエラー15表示と対処方法 266PV

   夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

   もっと読む

2. 

   ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 215PV

   本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

   もっと読む

3. 

   マイクロプラスチック・マイクロビーズがつぶつぶ入り洗顔料や歯磨き粉に…。環境汚染も 99PV

   画像出典元：5 Gyres今年に入ってから、 インターネットニュースサイトやテレビのニュースなどでも報道されているマイクロプラスチック（もしくは、マイクロビーズ）というものがあります。このマイクロプラ…

   もっと読む

1. 

   カーメイトのエンジンスターターでエラー15表示と対処方法 266PV

   夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

   もっと読む

2. 

   ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 215PV

   本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

   もっと読む

3. 

   マイクロプラスチック・マイクロビーズがつぶつぶ入り洗顔料や歯磨き粉に…。環境汚染も 99PV

   画像出典元：5 Gyres今年に入ってから、 インターネットニュースサイトやテレビのニュースなどでも報道されているマイクロプラスチック（もしくは、マイクロビーズ）というものがあります。このマイクロプラ…

   もっと読む

今日は2024年12月11日です。

目次に行く･戻る

2024年12月11日 (水曜日)本日の人気記事トップ１０

• ブレーキペダル調整ストローク調整方法高さ調整80
• カーメイトのエンジンスターターでエラー15表示と対処方法52
• 車のキーナンバー確認方法。キーレス紛失や壊れた時22
• エクストレイルフォグランプが下を向きすぎている光軸調整方法11
• エクストレイルT32セレナC26C27リーフZE1パワーウィンドウオート化9
• ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法8
• エクストレイルリアワイパー交換方法と純正部品番号7
• マウスの左クリックや右クリックが効かないのでマウス分解して直す方法6
• エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ5
• ECUをリセットする方法。アイドリング不安定だったのでしょうがなく3

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

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

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

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

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

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

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