WordPress 3分間フッキング：投稿一覧に文字数カラムを追加する方法

WordPress 3分間フッキングシリーズについて

こんにちは！埼玉県川越市を拠点に活動しているWordPressエンジニアです。WordPressサイトの制作やカスタマイズ、トラブル解決など、日々様々なプロジェクトに取り組んでいます。

料理番組「3分間クッキング」をもじった「WordPress 3分間フッキング」シリーズでは、WordPressの「フック」という機能を使った便利なカスタマイズ術を、短時間で理解・実装できるように解説しています。

WordPressのフックを使いこなせると、プラグインをインストールしなくても独自の機能を追加できるようになります。今回は管理画面の投稿一覧をもっと便利にするテクニックを紹介します！

投稿一覧カスタマイズの目的と概要

WordPressの管理画面で「投稿」をクリックすると表示される投稿一覧。タイトルや投稿日時、カテゴリなどの情報は表示されますが、「文字数」は表示されていません。

記事の文字数は、SEOや読者の閲覧時間などを考慮する上で重要な指標です。また、複数のライターがいるチームでは、記事の分量を一目で把握できると便利ですよね。

今回は「manage_posts_columns」と「manage_posts_custom_column」という2つのフックを使って、投稿一覧に「文字数」カラムを追加する方法を解説します。これにより、各記事の文字数を一覧で確認できるようになります！

フックコードの全体像

まずは、今回使用するコード全体を見てみましょう。

// 投稿一覧にカラムを追加
add_filter('manage_posts_columns', 'wp3min_add_post_columns');
function wp3min_add_post_columns($columns) {
    return array_merge(
        array('cb' => $columns['cb']),
        array('post_id' => '投稿ID'),
        $columns,
        array('words' => '文字数')
    );
}

// カラムの内容を表示
add_action('manage_posts_custom_column', 'wp3min_show_post_columns', 10, 2);
function wp3min_show_post_columns($column, $post_id) {
    global $post;
    if('post_id' === $column) {
        echo $post_id;
    } else if('words' === $column) {
        echo mb_strlen(wp_strip_all_tags(trim($post->post_content)));
    }
}

// 投稿一覧にカラムを追加

add_filter('manage_posts_columns', 'wp3min_add_post_columns');

function wp3min_add_post_columns($columns) {

return array_merge(

array('cb' => $columns['cb']),

array('post_id' => '投稿ID'),

$columns,

array('words' => '文字数')

);

}

// カラムの内容を表示

add_action('manage_posts_custom_column', 'wp3min_show_post_columns', 10, 2);

function wp3min_show_post_columns($column, $post_id) {

global $post;

if('post_id' === $column) {

echo $post_id;

} else if('words' === $column) {

echo mb_strlen(wp_strip_all_tags(trim($post->post_content)));

}

このコードをfunctions.phpに追加するだけで、「投稿ID」と「文字数」という2つのカラムが追加されます。非常にシンプルですね！

フックコードの詳細解説

コードを詳しく解説していきましょう。上記のコードは2つの部分からなっています。

1. カラムの定義（ヘッダー追加）

add_filter('manage_posts_columns', 'wp3min_add_post_columns');
function wp3min_add_post_columns($columns) {
    return array_merge(
        array('cb' => $columns['cb']),
        array('post_id' => '投稿ID'),
        $columns,
        array('words' => '文字数')
    );
}

add_filter('manage_posts_columns', 'wp3min_add_post_columns');

function wp3min_add_post_columns($columns) {

return array_merge(

array('cb' => $columns['cb']),

array('post_id' => '投稿ID'),

$columns,

array('words' => '文字数')

);

}

ここでは「manage_posts_columns」というフィルターフックを使って、投稿一覧のカラム配列を修正しています。

「$columns」はWordPressが用意した既存のカラムで、連想配列の形式になっています。キーにはカラムの識別子、値にはカラムの見出しが入っています。

重要なポイントは「array_merge()」関数で4つの配列をマージしている部分です：

array('cb' => $columns['cb']) – チェックボックスカラムを最初に配置
array('post_id' => '投稿ID') – 投稿IDカラムを2番目に配置
$columns – 既存のカラム（タイトル、投稿者など）をそのまま配置
array('words' => '文字数') – 文字数カラムを最後に配置

この順序で配列をマージすることで、チェックボックスと投稿IDを左側に、文字数を右側に配置した状態で、その他の既存カラムも維持されます。

2. カラムの内容表示

add_action('manage_posts_custom_column', 'wp3min_show_post_columns', 10, 2);
function wp3min_show_post_columns($column, $post_id) {
    global $post;
    if('post_id' === $column) {
        echo $post_id;
    } else if('words' === $column) {
        echo mb_strlen(wp_strip_all_tags(trim($post->post_content)));
    }
}

add_action('manage_posts_custom_column', 'wp3min_show_post_columns', 10, 2);

function wp3min_show_post_columns($column, $post_id) {

global $post;

if('post_id' === $column) {

echo $post_id;

} else if('words' === $column) {

echo mb_strlen(wp_strip_all_tags(trim($post->post_content)));

}

ここでは「manage_posts_custom_column」というアクションフックを使って、追加したカラムの内容を表示しています。

この関数は各投稿行の各カラムごとに呼び出され、「$column」に現在表示しようとしているカラムのIDが、「$post_id」に現在の投稿IDが渡されます。

このコードの重要な部分を解説します：

global $post; – 現在の投稿オブジェクトをグローバル変数として取得
if('post_id' === $column) – 「post_id」カラムの場合は投稿IDをそのまま表示
else if('words' === $column) – 「words」カラムの場合は文字数を計算して表示
mb_strlen(wp_strip_all_tags(trim($post->post_content))) – 投稿内容からHTMLタグを除去し、文字数をカウント

特に文字数カウントの部分は重要ですので、詳しく見ていきましょう：

trim($post->post_content) – 投稿内容の前後の空白を削除
wp_strip_all_tags(...) – HTMLタグを全て削除して純粋なテキストにする
mb_strlen(...) – マルチバイト文字（日本語など）に対応した文字数カウント

「mb_strlen」を使うことで、日本語の文字も正確にカウントします。通常の「strlen」関数は日本語などのマルチバイト文字を1文字あたり複数バイトとカウントするため、正確な文字数が得られません。

実装手順

では、このカスタマイズを実際にWordPressサイトに追加する方法を見ていきましょう：

WordPressの管理画面にログインします
「外観」→「テーマファイルエディター」を開きます（または「テーマエディター」）
- 子テーマを使用している場合は、子テーマを選択してください
- テーマエディターが表示されない場合は、プラグインで無効化されているかもしれません
右側のファイル一覧から「functions.php」を選択します
ファイルの末尾（PHPの終了タグ「?>」がある場合はその前）に、先に紹介したコードを貼り付けます
「ファイルを更新」ボタンをクリックします
「投稿」メニューに移動し、投稿一覧を表示します

これで、投稿一覧に「投稿ID」と「文字数」の2つの新しいカラムが表示されているはずです！

テーマファイルを直接編集する場合は、事前にバックアップを取っておくことをお勧めします。コードに誤りがあるとサイトが表示されなくなる可能性があります。

カスタマイズのバリエーション

アイキャッチ画像プレビュー

投稿のアイキャッチ画像をサムネイルとして一覧に表示。視覚的な管理が容易になります。

カスタムフィールド値の表示

投稿に関連付けされたカスタムフィールド（価格、評価など）を一覧で確認できます。

読了時間の表示

投稿の文字数から推定読了時間を計算し表示。コンテンツ管理の参考指標になります。

SNSシェア数の表示

各SNSでのシェア数を取得して表示。人気コンテンツを一目で把握できます。

1. 推定読了時間の表示

// 投稿一覧に「読了時間」カラムを追加
add_filter('manage_posts_columns', 'wp3min_add_reading_time_column');
function wp3min_add_reading_time_column($columns) {
    $columns['reading_time'] = '読了時間';
    return $columns;
}

// 読了時間を計算して表示
add_action('manage_posts_custom_column', 'wp3min_show_reading_time', 10, 2);
function wp3min_show_reading_time($column, $post_id) {
    if('reading_time' === $column) {
        // コンテンツを取得
        $content = get_post_field('post_content', $post_id);
        $word_count = mb_strlen(wp_strip_all_tags($content));
        
        // 読了時間を計算（日本語は1分あたり400文字と仮定）
        $minutes = ceil($word_count / 400);
        if($minutes < 1) $minutes = 1;
        
        echo "{$minutes}分";
    }
}

// 投稿一覧に「読了時間」カラムを追加

add_filter('manage_posts_columns', 'wp3min_add_reading_time_column');

function wp3min_add_reading_time_column($columns) {

$columns['reading_time'] = '読了時間';

return $columns;

}

// 読了時間を計算して表示

add_action('manage_posts_custom_column', 'wp3min_show_reading_time', 10, 2);

function wp3min_show_reading_time($column, $post_id) {

if('reading_time' === $column) {

// コンテンツを取得

$content = get_post_field('post_content', $post_id);

$word_count = mb_strlen(wp_strip_all_tags($content));

// 読了時間を計算（日本語は1分あたり400文字と仮定）

$minutes = ceil($word_count / 400);

if($minutes < 1) $minutes = 1;

echo "{$minutes}分";

}

このコードでは、文字数をもとに記事の読了時間を計算して表示します。日本語の場合、一般的に1分あたり400文字程度を読むと言われているため、その基準で計算しています。

2. アイキャッチ画像のサムネイル表示

// 投稿一覧に「サムネイル」カラムを追加
add_filter('manage_posts_columns', 'wp3min_add_thumbnail_column');
function wp3min_add_thumbnail_column($columns) {
    $new_columns = array();
    $new_columns['cb'] = $columns['cb'];
    $new_columns['thumbnail'] = 'サムネイル';
    
    return array_merge($new_columns, $columns);
}

// サムネイル画像を表示
add_action('manage_posts_custom_column', 'wp3min_show_thumbnail', 10, 2);
function wp3min_show_thumbnail($column, $post_id) {
    if('thumbnail' === $column) {
        if(has_post_thumbnail($post_id)) {
            echo get_the_post_thumbnail($post_id, array(50, 50));
        } else {
            echo '<span style="color:#ccc;">画像なし</span>';
        }
    }
}

// 投稿一覧に「サムネイル」カラムを追加

add_filter('manage_posts_columns', 'wp3min_add_thumbnail_column');

function wp3min_add_thumbnail_column($columns) {

$new_columns = array();

$new_columns['cb'] = $columns['cb'];

$new_columns['thumbnail'] = 'サムネイル';

return array_merge($new_columns, $columns);

}

// サムネイル画像を表示

add_action('manage_posts_custom_column', 'wp3min_show_thumbnail', 10, 2);

function wp3min_show_thumbnail($column, $post_id) {

if('thumbnail' === $column) {

if(has_post_thumbnail($post_id)) {

echo get_the_post_thumbnail($post_id, array(50, 50));

} else {

echo '<span style="color:#ccc;">画像なし</span>';

}

このコードでは、投稿のアイキャッチ画像をサムネイルとして表示します。視覚的に記事を管理したい場合に便利です。

3. カスタムフィールド値の表示

// 投稿一覧に「価格」カラムを追加（カスタムフィールド値を表示）
add_filter('manage_posts_columns', 'wp3min_add_price_column');
function wp3min_add_price_column($columns) {
    $columns['price'] = '価格';
    return $columns;
}

// 価格のカスタムフィールド値を表示
add_action('manage_posts_custom_column', 'wp3min_show_price', 10, 2);
function wp3min_show_price($column, $post_id) {
    if('price' === $column) {
        $price = get_post_meta($post_id, 'product_price', true);
        if(!empty($price)) {
            echo '¥' . number_format($price);
        } else {
            echo '—';
        }
    }
}

// 投稿一覧に「価格」カラムを追加（カスタムフィールド値を表示）

add_filter('manage_posts_columns', 'wp3min_add_price_column');

function wp3min_add_price_column($columns) {

$columns['price'] = '価格';

return $columns;

}

// 価格のカスタムフィールド値を表示

add_action('manage_posts_custom_column', 'wp3min_show_price', 10, 2);

function wp3min_show_price($column, $post_id) {

if('price' === $column) {

$price = get_post_meta($post_id, 'product_price', true);

if(!empty($price)) {

echo '¥' . number_format($price);

} else {

echo '—';

}

カスタム投稿タイプ「商品」があり、価格情報をカスタムフィールドに保存している場合などに役立つコードです。

カスタマイズ	用途	難易度
文字数表示	コンテンツ量の把握、SEO対策	★☆☆
読了時間表示	コンテンツ消費時間の把握	★☆☆
サムネイル表示	視覚的な記事管理	★☆☆
カスタムフィールド表示	追加情報の一覧化	★★☆
SNSシェア数表示	人気コンテンツの把握	★★★

カスタマイズ時の注意点

投稿一覧をカスタマイズする際には、いくつか注意すべき点があります：

カラムを多く追加しすぎると、テーブルが横に広がりすぎてレイアウトが崩れる可能性があります。必要最小限のカラム追加にとどめるか、CSSでカラム幅を調整することを検討してください。

また、以下の点にも注意が必要です：

パフォーマンスへの影響：カラム内で複雑な処理を行うと、投稿数が多い場合にページ読み込みが遅くなる可能性があります。必要に応じてキャッシュ機構を導入しましょう。
他プラグインとの互換性：一部のプラグインも投稿一覧をカスタマイズしている場合、カラムの順序が意図しない形になることがあります。
レスポンシブデザイン：管理画面のモバイル表示では、カラムが適切に表示されない可能性があります。

カスタム投稿タイプに適用する方法

上記の例は通常の「投稿」に対するカスタマイズですが、カスタム投稿タイプにも同様の手法で適用できます。以下のようにフック名を変更するだけです：

// 「商品」カスタム投稿タイプに文字数カラムを追加する例
add_filter('manage_product_posts_columns', 'wp3min_add_product_columns');
function wp3min_add_product_columns($columns) {
    $columns['words'] = '文字数';
    return $columns;
}

add_action('manage_product_custom_column', 'wp3min_show_product_columns', 10, 2);
function wp3min_show_product_columns($column, $post_id) {
    if('words' === $column) {
        $post = get_post($post_id);
        echo mb_strlen(wp_strip_all_tags(trim($post->post_content)));
    }
}

// 「商品」カスタム投稿タイプに文字数カラムを追加する例

add_filter('manage_product_posts_columns', 'wp3min_add_product_columns');

function wp3min_add_product_columns($columns) {

$columns['words'] = '文字数';

return $columns;

}

add_action('manage_product_custom_column', 'wp3min_show_product_columns', 10, 2);

function wp3min_show_product_columns($column, $post_id) {

if('words' === $column) {

$post = get_post($post_id);

echo mb_strlen(wp_strip_all_tags(trim($post->post_content)));

}

フック名の「posts」と「custom_column」の間に投稿タイプ名を入れるだけで、特定のカスタム投稿タイプの一覧画面をカスタマイズできます。

カラムをソート可能にする方法

追加したカラムをクリックしてソートできるようにしたい場合は、さらに「manage_edit-post_sortable_columns」フィルターを使用します：

add_filter('manage_edit-post_sortable_columns', 'wp3min_sortable_columns');
function wp3min_sortable_columns($columns) {
    $columns['words'] = 'word_count';
    return $columns;
}

// ソート処理を実装
add_action('pre_get_posts', 'wp3min_sort_by_word_count');
function wp3min_sort_by_word_count($query) {
    // 管理画面の投稿一覧かつ、word_countでソートする場合のみ処理
    if(!is_admin() || !$query->is_main_query() || $query->get('orderby') !== 'word_count') {
        return;
    }
    
    // この例では実装が難しいため、実際にはメタデータとして文字数を保存し、
    // そのメタデータでソートするようにする必要があります
}

add_filter('manage_edit-post_sortable_columns', 'wp3min_sortable_columns');

function wp3min_sortable_columns($columns) {

$columns['words'] = 'word_count';

return $columns;

}

// ソート処理を実装

add_action('pre_get_posts', 'wp3min_sort_by_word_count');

function wp3min_sort_by_word_count($query) {

// 管理画面の投稿一覧かつ、word_countでソートする場合のみ処理

if(!is_admin() || !$query->is_main_query() || $query->get('orderby') !== 'word_count') {

return;

}

// この例では実装が難しいため、実際にはメタデータとして文字数を保存し、

// そのメタデータでソートするようにする必要があります

}

ただし、文字数のような動的に計算される値でソートするには、別途メタデータとして文字数を保存する仕組みが必要になります。ソート機能の完全な実装は、本記事の範囲を超えるため、基本的な方向性のみ示しています。

まとめ

今回は「manage_posts_columns」と「manage_posts_custom_column」という2つのフックを使って、投稿一覧に文字数カラムを追加する方法を紹介しました。

これらのフックを理解して活用することで、WordPressの管理画面をより効率的で使いやすいものにカスタマイズできます。プラグインに頼らずに独自の機能を追加できるのは、WordPressを使いこなす上での大きなメリットです。

今回のカスタマイズポイントを振り返ると：

「manage_posts_columns」フィルターでカラムのヘッダー（見出し）を定義
「manage_posts_custom_column」アクションでカラムの内容を表示
array_merge()を使って既存カラムと新規カラムを配置
mb_strlen()を使って日本語対応の文字数カウント
WordPress関数（wp_strip_all_tags）でHTMLタグを除去して純粋なテキスト量を計測

私たちは埼玉県川越市にて、このようなWordPressの専門的なカスタマイズやプラグイン開発、さらにはトラブルシューティングなどのサポートを行っています。WordPressを最大限に活用して、使いやすく効率的なサイト運営を実現しましょう。

よくある質問

Q: カラムの順序を変更するにはどうすればいいですか？

A: array_merge()関数を使う際の配列の順序を変更することで、カラムの表示順序を調整できます。また、個別にカラムの位置を指定したい場合は、より複雑なアルゴリズムでカラム配列を再構築する必要があります。

Q: カスタム投稿タイプごとに異なるカラムを表示したいです。

A: 「manage_{投稿タイプ名}_posts_columns」と「manage_{投稿タイプ名}_custom_column」フックを使用することで、投稿タイプごとにカスタマイズできます。例えば「商品」カスタム投稿タイプなら「manage_product_posts_columns」と「manage_product_custom_column」になります。

Q: 文字数カラムにCSSスタイルを適用して目立たせるにはどうすればいいですか？

A: 管理画面のスタイルをカスタマイズするには、admin_head または admin_enqueue_scripts フックを使用してCSSを追加します。以下は例です：

add_action('admin_head', 'wp3min_custom_admin_styles');
function wp3min_custom_admin_styles() {
    echo '
    <style>
        .column-words {
            background-color: #f7fcff;
            font-weight: bold;
            color: #0073aa;
            text-align: center;
        }
    </style>
    ';
}

add_action('admin_head', 'wp3min_custom_admin_styles');

function wp3min_custom_admin_styles() {

echo '

<style>

.column-words {

background-color: #f7fcff;

font-weight: bold;

color: #0073aa;

text-align: center;

}

</style>

}

Q: 文字数以外のメトリクス（画像数など）も表示できますか？

A: はい、可能です。例えば投稿内の画像数を表示する場合は以下のようなコードになります：

add_filter('manage_posts_columns', 'wp3min_add_image_count_column');
function wp3min_add_image_count_column($columns) {
    $columns['image_count'] = '画像数';
    return $columns;
}

add_action('manage_posts_custom_column', 'wp3min_show_image_count', 10, 2);
function wp3min_show_image_count($column, $post_id) {
    if('image_count' === $column) {
        $post = get_post($post_id);
        // <img>タグの数をカウント
        $count = substr_count($post->post_content, '<img');
        echo $count;
    }
}

add_filter('manage_posts_columns', 'wp3min_add_image_count_column');

function wp3min_add_image_count_column($columns) {

$columns['image_count'] = '画像数';

return $columns;

}

add_action('manage_posts_custom_column', 'wp3min_show_image_count', 10, 2);

function wp3min_show_image_count($column, $post_id) {

if('image_count' === $column) {

$post = get_post($post_id);

// <img>タグの数をカウント

$count = substr_count($post->post_content, '<img');

echo $count;

}

WordPressのカスタマイズに関するご質問や、より高度な開発サポートが必要な場合は、WordPressカスタマイズ・プラグイン開発サービスをご検討ください。また、WordPressの運用でお困りの方はWordPressトラブル対応・お悩み相談もご利用いただけます。

エーデルハーツ

Custom WordPress Support & Development