WordPressの管理画面の投稿一覧をカスタマイズする

ここ数年、このサイトではWordPressをヘッドレスCMSとして使っています。WordPressの管理画面になれているのと他のヘッドレスCMSと比べても酷く使いづらいみたいなこともないので使い続けているような形です。ただ、細かいところであったらいいなと思うような箇所があったりするのでそういうところをカスタマイズして管理画面を使いやすくしています。そこで今回は管理画面の投稿一覧を見やすくするカスタマイズを紹介します。

まずはWordPressをインストールしたて初期状態での投稿一覧はこんな感じだと思います。

このサイトで使っているWordPressの投稿一覧はこんな感じです。投稿ID・文字数、更新日時、サムネイル画像を追加しています。

このようにカスタマイズするには、主に2つのactionフックに読み込ませるように関数を作成します。

投稿一覧に新たにカラムを追加する関数
追加したカラムの内容を表示する関数

今回の管理画面のカスタマイズでは、投稿IDを投稿一覧に表示する方法とこのサイトで追加した項目のカスタマイズを紹介します。

投稿一覧に新たにカラムを追加する

まず投稿一覧にカラムを追加します。カラムの追加自体はなくてもうまいことできなくはないですが、投稿一覧の表示に影響が出たりする可能性があるのでおとなしくカラムを追加した方が、見やすさの観点からもいいです。下記の関数をfunctions.phpに追加します。

function add_column($cols) {
    $cols['sample_post_id'] = "投稿ID";
    return $cols;
}
add_action('manage_posts_columns', 'add_column');

上記の関数はmanage_posts_columnsフックにadd_columns()を呼び出す処理になってます。関数の引数$colsに投稿一覧のカラムの配列が入っています。$colsの配列に’sample_post_id’を追加することでカラムを追加します。’sample_post_id’は自由に設定できます。

関数をfunctions.phpに追加した状態の画像が下記のような感じです。

追加したカラムの行に表示したいデータの関数を作成する

カラムの追加ができたら表示したいデータの関数を作成します。カラムの追加が投稿IDなので投稿IDを表示する関数が以下になります。

function posts_post_id($column_name, $post_id) {
    if ($column_name == 'sample_post_id') {
        echo $post_id;
    }
}
add_action('manage_posts_custom_column',  'posts_post_id');

上記の関数は、$column_nameがadd_column()で定義したsample_post_idが入っている場合のみpost_idを出力するような処理になっています。actionフックのmanage_posts_custom_columnが$column_nameと$post_idを引数にしているので$column_nameの値によって$post_idを使った処理なんかもできるといった形になってます。

上記の2つの関数が適用された状態が下記の通りです。

応用して文字数・更新日時・サムネイル画像を追加する

投稿一覧に投稿IDを追加しましたが、post_idを使って投稿の情報をさらに表示することができるのでSAMURAI PROJECTではこんな感じのコードをfunctions.phpに追加して投稿一覧を少しわかりやすくしています。

functions.php

/**
 * カラムを追加
 */
function add_column($cols) {
    $cols['modified_at']   = "更新日時";
    $cols['post_id_count'] = "投稿ID / 文字数";
    $cols['thumbnail']     = "サムネイル";
    return $cols;
}
add_action('manage_posts_columns', 'add_column');

/**
 * 更新日時を出力
 */
function modified_post_time($column_name, $post_id) {
    if ($column_name != 'modified_at') {
        return;
    }

    $date = get_post_field('post_modified', $post_id);
    echo $date;
}
add_action('manage_posts_custom_column',  'modified_post_time', 5, 2);

/**
 * 投稿IDと投稿の文字数を出力
 */
function posts_post_id_count($column_name, $post_id) {
    if ($column_name != 'post_id_count') {
        return;
    }

    $content = get_post_field('post_content', $post_id);
    $content = strip_tags($content);
    $count   = mb_strlen($content);

    echo "{$post_id} / {$count}";
}
add_action('manage_posts_custom_column',  'posts_post_id_count', 5, 3);

/**
 * 投稿にサムネイル画像を出力
 * サムネイル画像がない場合は「なし」を出力
 */
function post_thumbnail_img($column_name, $post_id) {
    if ($column_name != 'thumbnail') {
        return;
    }

    $thumb = get_the_post_thumbnail($post_id, 'small', ['style' => 'max-width:75px;height:auto;']);
    if (isset($thumb) && $thumb) {
        echo $thumb;
    } else {
        echo __('None');
    }
}
add_action('manage_posts_custom_column',  'post_thumbnail_img', 5, 4);

まとめ

WordPressの投稿一覧は微妙に欲しい情報がない場合があったりしますが、多少のカスタマイズでわかりやすくすることができます。投稿一覧に欲しい情報を入れたい場合なんかはいろいろとカスタマイズしてみて使いやすくしてみてはどうでしょうか？