WEBTODESIGN

投稿一覧のカスタムフィールドのカラムの追加とソート【WordPress】

投稿一覧のカラムに、カスタムフィールドを追加して、ソートもできるようにします。

コードの全体像

まず、コードの全体像は以下のようになります。

custom_field_nameにはカスタムフィールドのnameを指定します。

///// 投稿一覧のカラムの追加 /////
// 枠の追加
function add_posts_columns($columns){
    $columns['custom_field_name'] = '表示名';
    return $columns;
}
add_filter( 'manage_posts_columns', 'add_posts_columns' );

// 内容の指定
function add_posts_columns_slug_row($column_name, $post_id) {
    if( $column_name == 'custom_field_name' ) {
        $name = get_post($post_id) -> custom_field_name;
        echo $name;
    }
}
add_action( 'manage_posts_custom_column', 'add_posts_columns_slug_row', 10, 2 );

//ソート機能の追加
function add_posts_columns_sort($columns){
    $columns['custom_field_name'] = 'custom_field_name';
    return $columns;
}
add_filter( 'manage_edit-post_sortable_columns', 'add_posts_columns_sort' );

// ソート機能の内容設定
function column_custom_sort_param( $columns ) {
    if ( isset( $columns['orderby'] ) && 'custom_field_name' == $columns['orderby'] ) {
        $columns = array_merge( $columns, [
            'meta_key' => 'custom_field_name'
            'orderby' => 'meta_value',
        ]);
    }
    return $columns;
}
add_filter( 'request', 'column_custom_sort_param' );

一つずつ解説していきます。

カラムの追加

まずは、カラムの枠を追加します。manage_posts_columnsフィルターを使用します。

function add_posts_columns($columns){
    $columns['custom_field_name'] = 'カラムのタイトル';
    return $columns;
}
add_filter( 'manage_posts_columns', 'add_posts_columns' );

custom_field_nameにカスタムフィールドのname、カラムのタイトルの部分はカラムのタイトルに表示させたい適当な文字列を入力してください。

これは固定ページを除く全ての投稿タイプに適用されます。

固定ページの場合はmanage_pages_columnsフィルターで、特定のカスタム投稿タイプの場合はmanage_{$post_type}_posts_columnsフィルターとなります。

カラムの内容の追加

枠が準備できたので、次に内容を指定します。

function add_posts_columns_slug_row($column_name, $post_id) {
    if( $column_name == 'custom_field_name' ) {
        $name = get_post($post_id) -> custom_field_name;
        echo $name;
    }
}
add_action( 'manage_posts_custom_column', 'add_posts_columns_slug_row', 10, 2 );

これで、カラムにカスタムフィールドが追加されました。

ソート機能が不要であれば、ここまでの手順で完了です。

ソート機能の追加

ソート機能を追加するにはmanage_{$this->screen->id}_sortable_columnsフィルターを使用します。

通常の投稿の場合は{$this->screen->id}はedit-postとなります。

function add_posts_columns_sort($columns){
    $columns['custom_field_name'] = 'custom_field_name';
    return $columns;
}
add_filter( 'manage_edit-post_sortable_columns', 'add_posts_columns_sort' );

ソート機能の内容設定

先ほどのコードではソートの「機能」を追加しただけで、どのようにソートするのかを設定できていません。

どのようにソートをするのか、以下のように指定します。

function column_custom_sort_param( $columns ) {
    if ( isset( $columns['orderby'] ) && 'custom_field_name' == $columns['orderby'] ) {
        $columns = array_merge( $columns, [
            'meta_key' => 'custom_field_name'
            'orderby' => 'meta_value',
        ]);
    }
    return $columns;
}
add_filter( 'request', 'column_custom_sort_param' );

'meta_key' => 'custom_field_name'でカスタムフィールドnameを指定し、'orderby' => 'meta_value'でカスタムフィールドの値で並べ替えるという指定をしています。

コード全体のおさらい

以上の流れで、以下のようなコードとなりました。

///// 投稿一覧のカラムの追加 /////
// 枠の追加
function add_posts_columns($columns){
    $columns['custom_field_name'] = '表示名';
    return $columns;
}
add_filter( 'manage_posts_columns', 'add_posts_columns' );

// 内容の指定
function add_posts_columns_slug_row($column_name, $post_id) {
    if( $column_name == 'custom_field_name' ) {
        $name = get_post($post_id) -> custom_field_name;
        echo $name;
    }
}
add_action( 'manage_posts_custom_column', 'add_posts_columns_slug_row', 10, 2 );

//ソート機能の追加
function add_posts_columns_sort($columns){
    $columns['custom_field_name'] = 'custom_field_name';
    return $columns;
}
add_filter( 'manage_edit-post_sortable_columns', 'add_posts_columns_sort' );

// ソート機能の内容設定
function column_custom_sort_param( $columns ) {
    if ( isset( $columns['orderby'] ) && 'custom_field_name' == $columns['orderby'] ) {
        $columns = array_merge( $columns, [
            'meta_key' => 'custom_field_name'
            'orderby' => 'meta_value',
        ]);
    }
    return $columns;
}
add_filter( 'request', 'column_custom_sort_param' );

ソース

RECOMMENDATION

NEWEST