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

2025年3月17日 (月曜日)↓における週間月間人気記事トップ３は？↓

• 本日
• 週間
• 月間

1. 

   エンジンオイル漏れ止めのおすすめはPlus91評価レビュー 7PV

   以前、オイル漏れ・オイル滲みが分かりエンジンオイルシーリング剤であるNUTECのOEM版でpitworkのNC81エンジンオイルシーリング剤を使用してみました。 ですが、一時オイル滲み・オイル漏れが止…

   もっと読む

2. 

   Windows11 24H2不具合エクスプローラーのツールバー詳細 (…)が下に表示でなく上に表示解決方法 7PV

   Windows11が正式リリースされてから早3年が経過します。毎年10月から11月にはWindows10の頃からメジャーアップデートが繰り返されてきています。今年2024年はWindows11バージョ…

   もっと読む

3. 

   CPU温度とGPU温度が高いのでおすすめCPUグリスを塗り直し温度を下げた。 4PV

   パソコンに欠かせない中央演算装置CPUがあります。10年と少し前からCPU自体にグラフィック性能を組み込んだCPU製品が発売されています。GPUというものになります。CPU温度もGPU温度もどちらも高…

   もっと読む

1. 

   アイドリングストップシステム異常警告灯表示対処方法 34PV

   2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に（自動的に）アイド…

   もっと読む

2. 

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

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

   もっと読む

3. 

   シートベルトがきついのでシートベルト延長（バックル延長） 22PV

   すべての車に付いているシートベルト…。 ですが、体型や車種によってシートベルトのバックルが短いとシートベルトを締めた際にきつくて運転自体がしにくくなってしまいます。 それでは、せっかくの安全装置である…

   もっと読む

1. 

   アイドリングストップシステム異常警告灯表示対処方法 34PV

   2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に（自動的に）アイド…

   もっと読む

2. 

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

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

   もっと読む

3. 

   シートベルトがきついのでシートベルト延長（バックル延長） 22PV

   すべての車に付いているシートベルト…。 ですが、体型や車種によってシートベルトのバックルが短いとシートベルトを締めた際にきつくて運転自体がしにくくなってしまいます。 それでは、せっかくの安全装置である…

   もっと読む

今日は2025年3月17日です。

目次に行く･戻る

2025年3月17日 (月曜日)本日の人気記事トップ１０

• エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ16
• エクストレイルT32ヘッドライト光軸調整方法13
• エアコン吹き出し口エアコンダクト内LED化5
• アルミテープチューン貼る場所で燃費向上と走行性能アップTOYOTAの特許を試してみた3
• Windows10起動しない使えないアプリを起動する方法(筆ぐるめなど)3
• ステアリング交換とステアリングスイッチの増設と外し方後期型仕様に2
• ECUをリセットする方法。アイドリング不安定だったのでしょうがなく2
• エクストレイルT32マイナーチェンジ後ステアリング外し方2
• カーメイトのエンジンスターターでエラー15表示と対処方法2
• AdSense（アドセンス）新コードの遅延読み込み2つの方法2

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

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

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

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

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

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

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