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

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

• 本日
• 週間
• 月間

1. 

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

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

   もっと読む

2. 

   エクストレイルフォグランプが下を向きすぎている光軸調整方法 2PV

   人気車種のSUVで日産エクストレイルT32型のフォグランプは、光軸が下を向きすぎているためせっかくLEDフォグランプにしたりHIDにしたりしてもその恩恵をあまりかんじられません。要は、ボンネットが少し…

   もっと読む

3. 

   エクストレイルT32でブレーキを踏まずにエンジンスタートする方法 1PV

   今や国産自動車メーカー車のみならず外車と言われるものも、ほとんどの車種にてエンジンプッシュスタート式になってきています。エンジン始動時に昔のように鍵（キー）を回すという動作がなくなってきています。もし…

   もっと読む

1. 

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

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

   もっと読む

2. 

   エクストレイルでカーテシランプ新設、増設取り付け方法 119PV

   現行型のNISSANエクストレイルNT32・T32型には、カーテシランプが付いていません。前期型、後期型共にです。そこで、カーテシランプの意味としてはドアを開けた時の足元を照らしてくれる意味役割と、後…

   もっと読む

3. 

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

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

   もっと読む

1. 

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

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

   もっと読む

2. 

   エクストレイルでカーテシランプ新設、増設取り付け方法 119PV

   現行型のNISSANエクストレイルNT32・T32型には、カーテシランプが付いていません。前期型、後期型共にです。そこで、カーテシランプの意味としてはドアを開けた時の足元を照らしてくれる意味役割と、後…

   もっと読む

3. 

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

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

   もっと読む

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

目次に行く･戻る

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

• ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法10
• カーメイトのエンジンスターターでエラー15表示と対処方法9
• エクストレイルフォグランプが下を向きすぎている光軸調整方法7
• 新型デイズプロパイロットのステアリングをエクストレイルT32に取り付ける3
• エクストレイルリアワイパー交換方法と純正部品番号2
• Windows11 24H2不具合エクスプローラーのツールバー詳細 (…)が下に表示でなく上に表示解決方法2
• ECUをリセットする方法。アイドリング不安定だったのでしょうがなく2
• シガーライターがない車にシガーライターソケットの付け方と増設方法1
• WAKO'Sエンジンオイル添加剤SUPERHVはかなりおすすめです1
• エクストレイルおすすめエンジンオイルにプロステージSの10W-40を試してみた1

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

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

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

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

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

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

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