CommentOut

WordPressの記事一覧にオリジナルの項目(カラム)を追加する WordPressの記事一覧にオリジナルの項目(カラム)を追加する

WordPressの記事一覧にオリジナルの項目(カラム)を追加する

公開日:  最終更新日:

WordPressの記事一覧にオリジナルの項目を追加する方法です。
記事ごとに特定のキーワードの出現回数を表示したり、最終更新日を表示したり、文字数を表示したり、画像数を表示したり、記事一覧画面に項目が追加できると、記事一覧で出来ることが一気に増えます。
そんな記事一覧にオリジナルの項目(カラム)を追加する方法を紹介します。

WordPressの記事一覧に項目(カラム)を追加する手順はたったの2つ

記事一覧に項目(カラム)を追加する手順は大きく分けて2つです。
1.filterフック”manage_posts_columns”で項目(カラム)自体を追加する
2.actionフック”manage_posts_custom_column”で項目(カラム)の中の値を出力する

今回はユーザー一覧にユーザーIDの項目を追加してみましょう。

手順1.filterフック”manage_posts_columns”で項目(カラム)自体を追加する

// フィルターフック:カラムを追加
add_filter('manage_posts_columns', 'add_posts_columns');

// カラムを追加
function add_posts_columns($columns) {
    $columns['last_update'] = '最終更新日';
    $columns['thumbnail'] = 'アイキャッチ画像';
 
    return $columns;
}

以上です。
部分ごとに解説すると

// アクションフック:カラムを追加
add_filter('manage_posts_columns', 'add_posts_columns');

manage_posts_columnsのフィルターフックに項目追加メソッド『add_posts_columns』を登録します。

ユーザー一覧に項目を追加した時はactionフックでしたが、記事一覧に項目を追加する時はfilterフックになっています。間違えないように!

次に『add_posts_columns』メソッドを実装します。

// カラムを追加
function add_posts_columns($columns) {
    $columns['last_update'] = '最終更新日';
    $columns['thumbnail'] = 'アイキャッチ画像';
 
    return $columns;
}

※add_posts_columnsメソッドの所は他のメソッドと名前が被らないようにしてください。既存メソッドと名前が被るとWordpressがエラーを吐きます。解決方法は下の方で解説します。


引数の$columnsに追加する項目を代入します。
形式は$columns[‘{項目ID:文字列}’] = ‘{表示項目名:文字列}’;です。
例えば、最終更新日を表示するなら、$columns[‘last_update’] = ‘最終更新日’;って感じで、項目IDも表示項目名も(既存の項目と重複しない限り)自由に名前を付けることが出来ます。

手順2.actionフック”manage_users_custom_column”で項目(カラム)の中の値を出力する

// カラムの中身を追加
add_action('manage_posts_custom_column', 'add_posts_columns_row', 10, 2);

// 表示カラムの内容を表示
function add_posts_columns_row($column_name, $post_id) {
    switch ($column_name) {
        case 'last_update':
            {
                $update = '<time>' . get_the_modified_date('Y年n月j日', $post_id) . '</time>';

                echo $update;
            }
            break;
        case 'thumbnail':
            {
                // サムネイル画像を取得
                $thumb = get_the_post_thumbnail($post_id, array(80,80), 'thumbnail');

                echo ( $thumb ) ? $thumb : '-';
            }
            break;
    }
}

項目の中身を表示するのも複雑なコードは必要ありません。
以下で詳細を解説していきます。

// カラムの中身を追加
add_action('manage_posts_custom_column', 'add_posts_columns_row', 10, 2);

先ほど項目自体を追加した時にはフィルターフックでしたが、今回はアクションフックを使います。
アクションフックmanage_posts_custom_columnにメソッド名を登録します。
今回は値を表示するメソッドに引数が2つあるので、add_actionの第3引数に10(デフォルト値)、第4引数に2(引数の数)を入れておきます。

// 表示カラムの内容を表示
function add_posts_columns_row($column_name, $post_id) {
    switch ($column_name) {
        case 'last_update':
            {
                $update = '<time>' . get_the_modified_date('Y年n月j日', $post_id) . '</time>';

                echo $update;
            }
            break;
        case 'thumbnail':
            {
                // サムネイル画像を取得
                $thumb = get_the_post_thumbnail($post_id, array(80,80), 'thumbnail');

                echo ( $thumb ) ? $thumb : '-';
            }
            break;
    }
}

項目の中身を表示するメソッドでは、記事一覧で項目の値問い合わせが行われた時にmanage_posts_custom_columnアクションフックが動作するので、この関数が呼び出されます。
内容は表示したい値をechoで表示しているだけです。

ユーザー一覧に項目の値を追加した時は値をreturnで返していましたが、記事一覧ではechoで表示します。間違えないように

また、問い合わせてきた項目が今回追加した項目なのか、元々ある項目なのかを判別しなければいけない点です。
if文でそれぞれ判定しても良いのですが、今回は複数項目追加しているので、switchで分けています。
ユーザー一覧に項目を追加した記事ではif文で判定しています。参考にしてください。

メソッド名が既存メソッドと被るのを防ぐ方法

はい、答えは簡単です。クラス化しましょう。
クラス化することにより、単純なaddColumnsメソッドではなく、あるクラスの中のaddColumnsメソッドを呼び出すことになるので、メソッド名被りは発生しにくくなります。
以下クラス化した全コードです。

class AddPostsColumns {
    static $inst = NULL;
    
    // コンストラクター
    private function __construct() {
        // カラムを追加
        add_filter('manage_posts_columns', array($this, 'add_posts_columns'));
        // カラムの中身を追加
        add_action('manage_posts_custom_column', 'add_posts_columns_row', 10, 2);
    }

    // インスタンスの呼び出し
    public static function getInst() {
         if (self::$inst === NULL) {
              self::$inst = new self();
         }
         return self::$inst;
    }

    // カラムを追加
    function add_posts_columns($columns) {
        $columns['last_update'] = '最終更新日';
        $columns['thumbnail'] = 'アイキャッチ画像';
 
        return $columns;
    }

    // カラムの中身を追加
    function add_posts_columns_row($column_name, $post_id) {
        switch ($column_name) {
            case 'last_update':
                {
                    $update = '<time>' . get_the_modified_date('Y年n月j日', $post_id) . '</time>';

                    echo $update;
                }
                break;
            case 'thumbnail':
                {
                    // サムネイル画像を取得
                    $thumb = get_the_post_thumbnail($post_id, array(80,80), 'thumbnail');

                    echo ( $thumb ) ? $thumb : '-';
                }
                break;
        }
    }
}

// クラスをインスタンス化
$AddPostsColumns = AddPostsColumns::getInst();
宣伝
WordPressサイトのテンプレート編集やトラブル対応、バグ修正、簡単なJavascriptの作成(カルーセルやバリデーション等)など、小規模なスポット対応を受け付けております。
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。

この記事を書いた人

uilou

uilou

プログラマー

基本的に、自分自身の備忘録のつもりでブログを書いています。 自分と同じ所で詰まった人の助けになれば良いかなと思います。 システムのリファクタリングを得意としており、バックエンド、フロントエンド、アプリケーション、SQLなど幅広い知識と経験があります。 広いだけでなく、知識をもっと深堀りしていきたいですね。