記事の文字数を自動カウントして表示する方法

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

実装のポイント

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

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');
    

汎用CSS

/*記事の文字数を自動カウントして表示する*/
.word-count {
    margin-top: 15px;
    padding: 8px 12px;
    background: #f7f7f7;
    border-left: 4px solid #0073aa;
    font-size: 14px;
    color: #333;
}
    

テーマ別サンプルCSS

Lightning用

/* Lightning用 文字数表示デザイン */
.entry-body .word-count {
    background: #eef6ff;
    border-left: 4px solid #005bac;
    font-size: 13px;
    padding: 6px 10px;
}
    

Cocoon用

/* Cocoon用 文字数表示デザイン */
.article .word-count {
    background: #fff7e6;
    border-left: 4px solid #ff9900;
    font-size: 13px;
    padding: 6px 10px;
}
    

代用プラグイン

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

まとめ

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