投稿中の文字数・見出し階層を自動チェックする方法（投稿ページ限定）

この記事では、WordPress投稿画面で入力中の文字数や見出し階層（h2〜h4）をリアルタイムでチェックする方法を紹介します。
JavaScriptで投稿エディタの内容を監視し、記事の長さや見出し構成を自動的に可視化します。
固定ページ・お知らせ・カテゴリ・アーカイブなどには影響せず、投稿ページのみで動作します。

1 実装のポイント

• 投稿ページ（single）だけで動作
• functions.php にコードを追加してJavaScriptを読み込む
• 投稿本文内のh2〜h4タグを自動解析
• 文字数と見出し数をリアルタイムに表示

2 functions.php にコードを追加

注意： 必ず子テーマの functions.php に追加してください。親テーマに直接追加するとアップデートで消える可能性があります。

//-------------------------------------------
// 投稿中の文字数・見出し階層を自動チェック
//-------------------------------------------
add_action('wp_footer', function() {
    // 投稿ページ以外では非表示
    if (!is_single()) return;

    // 管理者だけに表示（閲覧者には見せない）
    if (!current_user_can('manage_options')) return;

    echo '
    <div id="post-checker" style="
        position:fixed;
        bottom:10px;
        right:10px;
        background:#fff;
        border:2px solid #0073aa;
        padding:10px 15px;
        border-radius:8px;
        box-shadow:0 3px 8px rgba(0,0,0,0.3);
        font-size:14px;
        color:#333;
        z-index:9999;
    ">
        <strong>投稿チェック</strong><br>
        文字数：<span id="charCount">0</span><br>
        H2：<span id="h2Count">0</span>　
        H3：<span id="h3Count">0</span>　
        H4：<span id="h4Count">0</span>
    </div>
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        const checker = document.getElementById("post-checker");
        const content = document.querySelector(".entry-content, .post-content, article");
        if (!checker || !content) return;

        function updateChecker() {
            const text = content.innerText || "";
            const h2Count = content.querySelectorAll("h2").length;
            const h3Count = content.querySelectorAll("h3").length;
            const h4Count = content.querySelectorAll("h4").length;

            document.getElementById("charCount").textContent = text.length;
            document.getElementById("h2Count").textContent = h2Count;
            document.getElementById("h3Count").textContent = h3Count;
            document.getElementById("h4Count").textContent = h4Count;
        }

        updateChecker();
        setInterval(updateChecker, 2000);
    });
    </script>
    ';
});
  

3 javascript にコードを追加

上記コードにはすでにJavaScriptを含めています。
別ファイルに分けたい場合は、js/post-checker.js にスクリプトを記述し、wp_enqueue_script()で読み込んでください。

4 汎用CSS

/* -----------------------------
 * 投稿中の文字数・見出し階層を自動チェック
 * ----------------------------- */

#post-checker { /** 投稿チェックボックス全体のスタイル **/
  position: fixed; /** 画面右下に固定配置 **/
  bottom: 10px; /** 下から10pxの位置 **/
  right: 10px; /** 右から10pxの位置 **/
  background: #fdfdfd; /** 背景色（明るいグレー） **/
  border: 1px solid #ccc; /** 枠線（薄いグレー） **/
  padding: 10px 15px; /** 内側余白：上下10px・左右15px **/
  border-radius: 8px; /** 角を丸める（半径8px） **/
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /** ふんわり影を付ける **/
  font-size: 14px; /** 文字サイズを14pxに設定 **/
  z-index: 9999; /** 最前面に表示するためのレイヤー設定 **/
}

#post-checker strong { /** 「投稿チェック」など見出し部分のスタイル **/
  display: block; /** ブロック要素にして改行させる **/
  margin-bottom: 4px; /** 下に4pxの余白を付ける **/
}
  

5 完成イメージ

管理者のみ画面の右下に表示されます。

6 代用プラグイン

• TinyMCE Advanced（クラシックエディタ拡張）
• Word Count Tool（文字数チェック）
• Table of Contents Plus（見出し階層の自動生成）

7 まとめ

このコードを使えば、WordPress投稿ページでリアルタイムに文字数と見出し数を確認できます。
記事構成のバランスを保つのに最適で、SEO対策や可読性向上にも役立ちます。