記事の文字数を自動カウントする方法｜執筆効率が上がる便利ツール

WordPress で記事本文の文字数を自動カウントして表示したい場合、テーマの functions.php にカスタム関数を追加すれば簡単に実装できます。この記事では、汎用コードとテーマ別のサンプルCSSをご紹介します。

1 実装のポイント

• 投稿本文からHTMLタグを除去して文字数を取得
• 記事下部や記事タイトル下に自動で表示
• CSSでデザイン調整（Lightning・Cocoon用サンプルあり）

2 functions.php にコードを追加

//-------------------------------------------
// 記事の文字数をカウントして本文下に表示
//-------------------------------------------
function show_post_word_count($content) {
    if (is_single() && in_the_loop() && is_main_query()) {
        // 本文の文字数をカウント（タグを除去してカウント）
        $word_count = mb_strlen(strip_tags($content));
        $count_html = '<div class="word-count">この記事の文字数: ' . $word_count . '文字</div>';
        return $content . $count_html;
    }
    return $content;
}
add_filter('the_content', 'show_post_word_count');
    

3 汎用CSS

/* -----------------------------
 * 記事の文字数を自動カウントして表示
 * ----------------------------- */

/* 文字数表示用のボックス */
.word-count {
    margin-top: 15px;                /* 上に余白 */
    padding: 8px 12px;               /* 内側の余白（上下8px・左右12px） */
    background: #f7f7f7;             /* 背景色を薄いグレーに */
    border-left: 4px solid #0073aa;  /* 左側にテーマカラーのアクセントライン */
    font-size: 14px;                  /* フォントサイズ */
    color: #333;                      /* 文字色 */
}
    

4 テーマ別サンプルCSS

4.1 Lightning用

/* -----------------------------
 * Lightning用：記事の文字数表示デザイン
 * ----------------------------- */

/* 文字数表示ボックスのデザイン */
.word-count {
    background: #eef6ff;             /* 背景色を薄いブルーに */
    border-left: 4px solid #005bac;  /* 左側に濃いブルーのアクセントライン */
    font-size: 13px;                  /* フォントサイズを少し小さめに */
    padding: 6px 10px;                /* 内側の余白（上下6px・左右10px） */
}
    

4.2 Cocoon用

/* -----------------------------
 * Cocoon用：記事の文字数表示デザイン
 * ----------------------------- */

/* 文字数表示ボックスのデザイン */
.word-count {
    background: #fff7e6;             /* 背景を淡いオレンジ系に */
    border-left: 4px solid #ff9900;  /* 左側にアクセントカラー（オレンジ） */
    font-size: 13px;                 /* フォントサイズは小さめで控えめに */
    padding: 6px 10px;               /* 内側余白を確保して見やすく */
}
    

5 代用プラグイン

もしコード編集が苦手な場合は、文字数カウントを行うプラグイン「WP Word Count」などを利用するのもおすすめです。記事ごとの文字数だけでなく、サイト全体の統計も確認できます。

6 まとめ

WordPressで記事の文字数を自動表示する方法はシンプルなコードで実装できます。テーマごとにCSSを調整すれば、デザインにも自然に組み込めます。記事の質を客観的に把握する指標として、ぜひ活用してみてください。