たった 10 分！WordPress 固定ページに「リアルタイム文字数カウンター」を設置する方法

今回ご紹介する“リアルタイム文字数カウンター”は、入力と同時に文字数を4パターンで集計し、複数キーワードの出現回数までハイライト付きで可視化してくれる便利ツール。を作ってみました。

無料なので使ってみてください。
https://44310.net/blog/counter/

1. 1.用途
2.ざっくり仕組み
3.ファイルを用意
4. functions.php に追記（読込みだけ）
5.固定ページテンプレート
6.まとめ

1.用途

原稿の文字数チェック
複数キーワードの出現回数＆ハイライト確認
サーバー通信ゼロのシンプル構成

2.ざっくり仕組み

JavaScript	入力イベントを監視し、
文字数計算・キーワード出現数を更新
→ ハイライト付きプレビューを生成

3.ファイルを用意

child-theme/
└─ assets/
   └─ js/
      └─ counter.js   ←★ここに JS

counter.js


/* global omikujiVars */
(() => {
  /* --------------- 要素取得 --------------- */
  const ta      = document.getElementById('ry_textarea');
  const kwInput = document.getElementById('kw_input');
  const kwList  = document.getElementById('kw-list');
  const preview = document.getElementById('preview');

  const cntAll  = document.getElementById('cnt-all');
  const cntNL   = document.getElementById('cnt-nl');
  const cntNS   = document.getElementById('cnt-ns');
  const cntBoth = document.getElementById('cnt-both');

  /* --------------- ユーティリティ --------------- */
  const esc = s => s
    .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
    .replace(/"/g,'&quot;').replace(/'/g,'&#039;');

  const escapeReg = s => s.replace(/[.*+?^${}()|[\]\\]/g,'\\$&');

  /* --------------- メイン更新関数 --------------- */
  const update = () => {
    const textRaw = ta.value;

    /* ----- 1) 文字数カウント ----- */
    cntAll .textContent = Array.from(textRaw).length;
    cntNL  .textContent = Array.from(textRaw.replace(/[\r\n]/g,'')).length;
    cntNS  .textContent = Array.from(textRaw.replace(/[\u0020\u3000]/g,'')).length;
    cntBoth.textContent = Array.from(textRaw.replace(/[\u0020\u3000\r\n]/g,'')).length;

    /* ----- 2) キーワード出現数・ハイライト ----- */
    const kwArr = kwInput.value
                    .split(',')
                    .map(v => v.trim())
                    .filter(Boolean);

    /* 2-a 出現数リスト */
    kwList.innerHTML = '';
    if (!kwArr.length){
      kwList.innerHTML = '<li>—</li>';
    } else {
      kwArr.forEach(kw => {
        const regex = new RegExp(escapeReg(kw),'gi');
        const count = (textRaw.match(regex) || []).length;
        kwList.insertAdjacentHTML('beforeend',
          `<li>${esc(kw)}：<strong>${count}</strong> 回</li>`);
      });
    }

    /* 2-b プレビュー */
    let html = esc(textRaw).replace(/\r?\n/g,'<br>');
    if (kwArr.length){
      const regex = new RegExp(kwArr.map(escapeReg).join('|'),'gi');
      html = html.replace(regex, m => `<mark>${m}</mark>`);
    }
    preview.innerHTML = html || '(プレビューはここに表示されます)';
  };

  /* --------------- イベント --------------- */
  ta.addEventListener('input', update);
  kwInput.addEventListener('input', update);
  update();   // 初期化
})();

4. `functions.php` に追記（読込みだけ）

/**
 * 文字数カウンター用 JS をページテンプレート単位で読み込む
 */
function my_enqueue_char_counter() {
  // テンプレ名が page-char-counter.php のときだけ読み込む
  if ( is_page_template( 'counter.php' ) ) {
    wp_enqueue_script(
      'char-counter',
      get_stylesheet_directory_uri() . '/assets/js/counter.js',
      array(),        // 依存 (jQuery 不要なら空配列)
      '1.0',          // バージョン
      true            // フッター読み込み
    );
  }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_char_counter' );

5.固定ページテンプレート

<?php
 /**
  * Template Name: 文字数カウンター
  */
get_header();
// get_template_part( 'template-parts/layout/page/page-layout' );
?>
<main class="ry-counter-box">
      <h1>リアルタイム文字数 &amp; キーワードハイライト</h1>

        <!-- ① テキスト入力 -->
      <textarea id="ry_textarea" placeholder="ここに文章を入力してください"></textarea>

        <!-- ② キーワード入力（カンマ区切り） -->
        <div class="keyword-box">
          <label for="kw_input"><strong>キーワード：</strong></label>
          <input type="text" id="kw_input" placeholder="例) SEO, WordPress, AI">
        </div>

        <!-- ③ 文字数カウンター -->
        <div class="counts">
          <div><span>スペース・改行を含む</span><span id="cnt-all">0</span> 文字</div>
          <div><span>改行を含まない（スペースは含む）</span><span id="cnt-nl">0</span> 文字</div>
          <div><span>スペースを含まない（改行は含む）</span><span id="cnt-ns">0</span> 文字</div>
          <div><span>スペース・改行を含まない</span><span id="cnt-both">0</span> 文字</div>
        </div>

        <!-- ④ キーワード出現数 -->
        <div class="kw-result">
          <strong>出現数：</strong>
          <ul id="kw-list"><li>—</li></ul>
        </div>

        <!-- ⑤ ハイライト付きプレビュー -->
        <div class="preview" id="preview">(プレビューはここに表示されます)</div>
    </main>

<?php
get_footer();