js記述

$(document).ready(function() {
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count').replace(/,/g, ''); // カンマを取り除く

$({ countNum: $this.text().replace(/,/g, '') }).animate({
countNum: countTo
},
{
duration: 2000,
easing:'linear',
step: function() {
$this.text(commaSeparateNumber(Math.floor(this.countNum))); // 数字にカンマを追加
},
complete: function() {
$this.text(commaSeparateNumber(this.countNum)); // 数字にカンマを追加
}
});
});
});

// 数字をカンマ区切りに変換する関数
function commaSeparateNumber(val){
while (/(\d+)(\d{3})/.test(val.toString())){
val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
}
return val;
}

カウントアップする数字にカンマが含まれている場合、カンマを取り除く必要があります。以下のように、data-count 属性の値を取得してカンマを取り除いた後、カウントアップすることで、正しく動作するようになります。

このコードをWordPressの投稿やページのエディタにそのまま貼り付けて保存することで、カウントアップする要素にカンマを追加することができます。ただし、テーマによってはjQueryが読み込まれていない場合があるため、その場合は別途jQueryを読み込む必要があります。また、カウントアップする要素のクラス名やデータ属性名は必要に応じて変更してください。

HTML

<div class="counter" data-count="5,000">0</div>

上記の例では、カウントアップの対象となる要素に counter クラスが設定されており、data-count 属性でカウントアップする最終値を指定しています。