現在の接続環境は
です

記事内にプロモーションが含まれています。

Windows10サポート終了まで

プロモーションを含みます

WordPress カスタマイズ メンテナンス 伝えたいこと 備忘録

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

所要時間目安：約9分

This session is using　 IPv4 　is established in

カーメンテナンスWAKO'S

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

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

目次に行く･戻る

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

  • 本日
  • 週間
  • 月間
  1. エクストレイルフォグランプの光軸調整後

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

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

    もっと読む

  2. Windows10で動かないアプリを動かす方法2 16PV

    先日も書きましたWindows10の不具合？に関することです。 不具合と言うのか仕様と言えば良いのかわかりませんが、とにかくWindows10にアップグレードしたりWindows10に若干古めのアプリ…

    もっと読む

  3. エクストレイルステアリング内のスパイラルケーブル接続部コネクタ

    ステアリング交換とステアリングスイッチの増設と外し方後期型仕様に 9PV

    NISSANエクストレイルは日産の中でも人気のSUV車です。そのエクストレイルは今年の6月8日にT32型の後期型がマイナーチェンジして発売されました。新しい後期型にはメーカーオプションで話題の半分自動…

    もっと読む

  1. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

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

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

    もっと読む

  2. エンジンスターターリモコン

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

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

    もっと読む

  3. TRDステアリングTOYOTA純正品

    ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法 81PV

    ここ最近のハイブリッド車や電気自動車においては、ハンドル（ステアリング）を交換することなどは滅多にないかもしれません。 ですが、個体差というものがあって新車だとしてもハンドルの真ん中の位置がズレてしま…

    もっと読む

  1. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

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

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

    もっと読む

  2. エンジンスターターリモコン

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

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

    もっと読む

  3. TRDステアリングTOYOTA純正品

    ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法 81PV

    ここ最近のハイブリッド車や電気自動車においては、ハンドル（ステアリング）を交換することなどは滅多にないかもしれません。 ですが、個体差というものがあって新車だとしてもハンドルの真ん中の位置がズレてしま…

    もっと読む

メルカリ招待コード：

前回はプラグインを使わずにカウントダウンタイマーの設置方法を記載しました。ですが、カウントダウンタイマーがあるのならカウントアップタイマーもあるんじゃないのか。といことで、カウントアップタイマーの設置方法を記載したいと思います。例えば、生まれてから何日と何時間経った。とか、平成になってから何日目とか令和になってから何日目や結婚してから何日目などの時に使用可能かと思われます。

プラグインを使わずにカウントダウンタイマーは以下の記事を参照してください。

この記事を読む方へのオススメ

プラグインを使わずにカウントアップタイマーの設置方法になります。

今回もシンプルなカウントアップタイマーですが以下のコードをfunction.phpに追記することによって、カウントアップタイマーの設置が可能になります。

くれぐれも、function.phpは大切なファイルなので必ずバックアップをとってからおこなってください。

// Add shortcode [countup_timer] to display a count-up timer
function countup_timer_shortcode() {
    // Get the current timestamp
    $current_time = current_time('timestamp');
    
    // Enqueue necessary scripts
    wp_enqueue_script('countup-timer', '', [], '', true);
    wp_add_inline_script('countup-timer', "
        document.addEventListener('DOMContentLoaded', function() {
            var startTime = " . $current_time . ";
            function updateTimer() {
                var now = Math.floor(Date.now() / 1000);
                var elapsed = now - startTime;
                
                var hours = Math.floor(elapsed / 3600);
                var minutes = Math.floor((elapsed % 3600) / 60);
                var seconds = elapsed % 60;
                
                document.getElementById('countup-timer').textContent = 
                    ('0' + hours).slice(-2) + ':' + 
                    ('0' + minutes).slice(-2) + ':' + 
                    ('0' + seconds).slice(-2);
            }
            updateTimer();
            setInterval(updateTimer, 1000);
        });
    ");
    
    // Return the HTML for the timer
    return '<div id="countup-timer" style="font-size: 2em; font-weight: bold;">00:00:00</div>';
}
add_shortcode('countup_timer', 'countup_timer_shortcode');

**使い方:**

1. 上記のコードをテーマの `functions.php` ファイルに追加します。
2. 投稿や固定ページ内で `［countup_timer］` ショートコードを使用すると、カウントアップタイマーが表示されます。
（［］は半角英数字に変換しなおしてください。）

**説明:**

- `countup_timer_shortcode` 関数は、ショートコード `［countup_timer］` を定義します。
（［］は半角英数字に変換しなおしてください。）
- 現在のタイムスタンプを取得し、JavaScript を使用して秒単位でカウントアップを行います。
- タイマーは `HH:MM:SS` の形式で表示されます。
- スタイルはインラインで設定されており、必要に応じてカスタマイズできます。

このショートコードを使用することで、WordPressサイトに簡単にカウントアップタイマーを追加できます。

プラグインを使わずにカウントアップタイマーの設置方法その2は以下のコードになります。

// Function to enqueue necessary scripts
function enqueue_countup_timer_scripts() {
    wp_enqueue_script( 'countup.js', 'https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.7/countUp.min.js', array(), '2.0.7', true );
    wp_enqueue_script( 'countup-init', get_template_directory_uri() . '/js/countup-init.js', array('countup.js'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_countup_timer_scripts' );

// Shortcode function to display the count-up timer
function countup_timer_shortcode( $atts ) {
    // Extract shortcode attributes with defaults
    $atts = shortcode_atts( array(
        'start' => 0,
        'end' => 1000,
        'duration' => 5,
        'prefix' => '',
        'suffix' => '',
    ), $atts, 'countup_timer' );

    // Generate a unique ID for each timer instance
    $unique_id = 'countup-timer-' . uniqid();

    // Return the HTML for the timer
    return '
        <div style="font-size: 2em; font-weight: bold;" id="' . esc_attr( $unique_id ) . '">
            ' . esc_html( $atts['prefix'] ) . '<span>' . esc_html( $atts['start'] ) . '</span>' . esc_html( $atts['suffix'] ) . '
        </div>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                var options = {
                    startVal: ' . esc_js( $atts['start'] ) . ',
                    duration: ' . esc_js( $atts['duration'] ) . ',
                };
                var countUp = new CountUp("' . esc_js( $unique_id ) . '", ' . esc_js( $atts['end'] ) . ', options);
                if (!countUp.error) {
                    countUp.start();
                } else {
                    console.error(countUp.error);
                }
            });
        </script>
    ';
}
add_shortcode( 'countup_timer', 'countup_timer_shortcode' );

使用方法:

  1. function.php にコードを追加:
    上記のコードをあなたのテーマの function.php ファイルに追加してください。
  2. テンプレートファイルに JavaScript 初期化スクリプトを追加:
    テーマの js フォルダに countup-init.js ファイルを作成し、以下のコードを追加します（必要に応じて調整してください）。
   // countup-init.js
   document.addEventListener("DOMContentLoaded", function() {
       // ここにカスタムの初期化コードを追加できます
   });
  1. ショートコードを使用:
    投稿やページ内で以下のようにショートコードを使用してカウントアップタイマーを表示します。
   ［countup_timer start="0" end="5000" duration="10" prefix="$" suffix=" USD"］

［］は必ず半角英数字に変換しなおしてください。

属性の説明:

  • start: カウントアップの開始値（デフォルトは 0）
  • end: カウントアップの終了値（必須）
  • duration: アニメーションの時間（秒単位、デフォルトは 5）
  • prefix: 数値の前に表示するテキスト（オプション）
  • suffix: 数値の後に表示するテキスト（オプション）

例:

[countup_timer start="100" end="1000" duration="15" prefix="🔥 " suffix=" Points"]

このショートコードは、🔥 100 Points から 🔥 1000 Points まで15秒かけてカウントアップします。

注意点:

  • countUp.js ライブラリを使用しています。必要に応じてバージョンを最新のものに変更してください。
  • テーマによってはスクリプトのパス (get_template_directory_uri() . '/js/countup-init.js') を調整する必要があります。
  • セキュリティのため、ユーザー入力を適切にサニタイズしていますが、信頼できない入力には十分注意してください。

その他にはCloudflareのcountup.jsを利用してのカウントアップタイマーの設置方法です。

// Add this code to your theme's functions.php file

// Shortcode function to display the count-up timer
function custom_countuptimer_shortcode() {
    // Enqueue necessary scripts
    wp_enqueue_script( 'countup-js', 'https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.7/countUp.min.js', array(), '2.0.7', true );

    // Inline script to initialize the count-up timer
    $script = "
    <script type='text/javascript'>
        document.addEventListener('DOMContentLoaded', function() {
            var options = {
                duration: 5
            };
            var countUp = new CountUp('countup-timer', 0, 100, 0, options.duration, options);
            if (!countUp.error) {
                countUp.start();
            } else {
                console.error(countUp.error);
            }
        });
    </script>
    ";

    // Timer HTML
    $output = '
    <div id="countup-timer" style="font-size: 2em; font-weight: bold; text-align: center; padding: 20px; border: 2px solid #000; border-radius: 10px; display: inline-block;">
        0
    </div>
    ' . $script;

    return $output;
}

// Register the shortcode
add_shortcode('countuptimer', 'custom_countuptimer_shortcode');

使い方:

  1. 上記のコードをテーマの functions.php ファイルに追加します。
  2. 投稿や固定ページ内で ［countuptimer］ とショートコードを挿入すると、カウントアップタイマーが表示されます。
    （［］は必ず半角英数字に変換しなおしてください。）

説明:

  • countUp.js ライブラリを使用して、滑らかなカウントアップアニメーションを実現しています。
  • ショートコード ［countuptimer］ を使用することで、任意の場所にタイマーを簡単に追加できます。
    （［］は必ず半角英数字に変換しなおしてください。）
  • タイマーのスタイルはインラインCSSで調整しており、必要に応じてカスタマイズ可能です。

注意点:

  • countUp.js のCDNリンクを使用しています。インターネット接続が必要です。
  • タイマーの開始値や終了値、アニメーションの持続時間はスクリプト内で調整できます。

これにより、WordPressサイトに簡単にカウントアップタイマーを追加できます。

以上、カウントダウンタイマーがあるのならカウントアップタイマーもあっていいのではないかとのことでカウントアップタイマーの設置方法でした。ご参考にされてみてください。

もう一つ何秒単位でカウントアップされるカウントアップタイマーの設置コードになります

// Add this code to your theme's functions.php file

function countup_timerbyou_shortcode() {
    ob_start();
    ?>
    <div style="font-size: 2em; text-align: center; padding: 20px;">
        ⏰ <span id="countup">0</span> 秒経過 🎉
    </div>
    <script>
        (function(){
            var startTime = new Date().getTime();
            var countUpElement = document.getElementById('countup');

            function updateTimer() {
                var now = new Date().getTime();
                var elapsed = Math.floor((now - startTime) / 1000);
                countUpElement.textContent = elapsed;
            }

            // Initial update
            updateTimer();

            // Update every second
            setInterval(updateTimer, 1000);
        })();
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('countup_timerbyou', 'countup_timerbyou_shortcode');

**使い方:**

1. 上記のコードをあなたのテーマの `functions.php` ファイルに追加してください。
2. 投稿や固定ページ内で `［countup_timerbyou］` ショートコードを使用すると、カウントアップタイマーが表示されます。
（［］は必ず半角英数字に変換してください。）
🎈🎉🕒✨

最後にあなたが生まれてから何日目？か以下で計算してみてもいいかもしれませんね。

🎉✨あなたが生まれてから何日目？✨🎉

🔍 結果がここに表示されます 🔍
🐶 🐱 🐰 🦄 🐼 🐸 🦊 🐯

開始時期を指定してのカウントアップタイマーの設置方法は以下を参照してみてください。

クリスマスまであと…プレゼントは用意されましたか？

🎉 Counting Up! 🎉
Loading...

おすすめ！！

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう！！ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ！！

詳細ページへ

No.1シェアAmazon

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に！！楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

詳細ページへ

楽天市場

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

0

カウントダウンタイマー

あなたにおすすめな関連記事

熱中症応急処置対処方法

伝えたいこと 備忘録 時事ネタ 治療

熱中症の症状と予防方法。そして応急処置および対処方法

さて…。いつの間にか既に7月です。まだ梅雨のはずなのに、大雨による被害が発生してしまっている地域や関東などは水不足の懸念などで10%の取水制限？節水制限とかが出ているようです。そんな中、熱中症になる方…

もっと読む

インフィード広告アドセンス

伝えたいこと 備忘録 治療

肩こりにオススメ電気マッサージ器2種類と保坂尚希プロデュース製品など

現代人だけではなく昔から肩こりや体中のコリには皆さん悩まされるところではないでしょうか。 これまでに使用していたTHIRIVE社製の電気マッサージ器が頭部分の接着が取れてしまいうまく電動の振動が伝わら…

もっと読む

インフィード広告アドセンス

エクストレイルカーテシランプ増設

メンテナンス 車

エクストレイルにカーテシランプ増設方法２

以前にもカーテシランプの増設方法を記しましたが、それだけではなにか物足りない・・・。そんなこんなで、LEDにてもう少しカーテシランプを明るくしようと色の選定から迷いましたが、結果以前と同じく青のエーモ…

もっと読む

インフィード広告アドセンス

SMAP解散

伝えたいこと 備忘録 時事ネタ

SMAP解散撤回してくれないかな…。SMAPロスは中居君がなくしてくれるかな…。

言わずとも知られている国民的アイドルのSMAPが今年2016年12月31日で、解散してしまう…。1世代でもなく2世代、中には3世代にも渡ってファンです。 という方々も多いのではないでしょうか？ファンで…

もっと読む

インフィード広告アドセンス

php WordPress カスタマイズ カスタマイズ メンテナンス 備忘録

今日の日付を表示させる方法

時折、サイトに今日の日付をリアルタイムに自動的に表示させられると良いのかなと考えることがあると思います。当サイトにおいては、以下のように2箇所に自動的にページサイトが表示された時に本日の日付が自動的に…

もっと読む

インフィード広告アドセンス

巻き爪治療の巻き爪ロボ

伝えたいこと 治療

巻き爪を自分で治す方法の巻き爪ロボの評判と効果

歳をとってくると意外と多くの方々が悩まされてしまうことになってくる「巻き爪」があります。いったい病院の何科に行っていいのかよくわからないまま…。徐々に症状がひどくなってしまったりしてしまいます。皮膚科…

もっと読む

あなたが訪問してから

⏰ 0 秒経過 🎉

あなたが訪問してから

0 秒

おすすめの記事一部広告


お小遣い稼ぎにアンケート。

Multiplex 広告

Total35


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

よろしかったらシェアよろしくお願いします。

この記事タイトルとURLをコピー

-WordPress, カスタマイズ, メンテナンス, 伝えたいこと, 備忘録

目次に戻る

目次に戻る

コメントを閉じる

comment

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

あと5秒で記事が閲覧できます。

Protected by AFFINGER