日星网
搜索

记录日常点点滴滴，欢迎来到我的小站。

0%

定制WordPress后台列表方法汇总及补足

发表于 更新于 分类于

这篇文章总结一下修改列表页面用到的hooks及修改page、custom post type、comments、media和user列表页的方法。最后奉上收集到的一些很有用的文章和代码。

了解列表页面的字段类型

打开文章列表，大致能看到以下内容

  • 批量操作的多选按钮（checkbox），通常在列表第一排
  • 标题下的编辑、删除等连接，这些链接称为row actions
  • 普通的字段，例如作者、分类等，它们只能展示简单结果
  • 可排序的字段，例如评论数，发布日期等

这些都是WordPress内置的栏目字段。

如何添加/删除/修改列表中的字段——基本原理陈述

简单的说：用filter添加/删除/修改字段标题（column headers），用action打印出每一列表格单元应该显示的结果。所需的filter和action如下

Filters:

manage_posts_columns
过滤文章列表页的字段

manage_${post_type}_posts_columns
过滤自定义文章类型（custom post type）列表页的字段，${post_type}是custom post type的名称.

anage_pages_columns
过滤页面（page）列表页字段

manage_edit-comments_columns
过滤评论列表页字段

manage_upload_columns
过滤媒体列表页字段

manage_users_columns
过滤用户列表页字段

Actions：

manage_posts_custom_column
输出文章列表页面字段的内容

manage_${post_type}_posts_custom_column
输出自定义文章类型列表页面字段内容

manage_pages_custom_column
输出页面列表页字段内容

manage_comments_custom_column
输出评论列表页字段内容

manage_media_custom_column
输出媒体列表页字段内容

manage_users_custom_column
输出用户列表页字段内容

显然上述的filters和actions具有一一对应的关系，应该成对使用。通过观察其构成，可以简化为下面的形式方便记忆，${screen_id}的解释见下文。

Filter： manage_${screen_id}_columns

Action: manage_${type}_custom_column

让字段可排序

manage_${screen_id}_sortable_columns
是一个filter，定义哪些字段是可排序的，因为是filter，只负责定义，不具备处理功能，处理代码需要另外写。

${screen_id}是每个页面独有的ID，例如：

  • 文章列表页 – edit-post
  • custom post type列表页 – edit-{custom post type name}
  • page列表页 – edit-page
  • 媒体列表页 – upload
  • 评论列表页 – edit-comments
  • 用户列表页 – users

下面就用定制文章列表页面为例说明。

定制文章（post）列表

例如用custom field给每篇文章添加一个副标题，custom field的名称是sub_menu，下面的代码演示在文章列表页面添加副标题字段，并删除评论字段。放在主题的functions.php中测试。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
add_filter( 'manage_posts_columns', 'my_post_custom_columns' );
add_action( 'manage_posts_custom_column', 'output_my_post_custom_columns', 10, 2 );
function my_post_custom_columns( $columns ){
    // Add a new field
    $columns['subtitle'] = __( 'Sub Title' );

    // Delete an existing field, eg. comments
    unset( $columns['comments'] );

    return $columns;
}

function output_my_post_custom_columns( $column_name, $post_id ){
    switch( $column_name ){
        case "subtitle" :
            // Retrieve data and echo result
            $sub_title = get_post_meta( $post_id, 'sub_title', true );
            echo $sub_title;
            break;
    }
}

add_action()参数中的10和2分别表示该函数执行的优先级是10（默认值，值越小优先级越高），该函数接受2个参数。

如果需要重新排列字段的顺序

直接创建一个包含新顺序的数组即可，处理代码不变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
add_filter( 'manage_posts_columns', 'my_post_custom_columns' );
function my_post_custom_columns( $columns ){
    $newcolumns = array(
        'cb' => $columns['cb'],
        'title' => __( 'Title' ),
        'subtitle' => __( 'Sub Title' ),
        'author' => __( 'Author' ),
        'tas' => __( 'Tags' ),
        'categories' => __( 'Categories' ),
        'date' => __( 'Date' ),
        'comments' => $columns['comments']
    );
    return $newcolumns;
}

修改页面列表字段，换瓶不换酒

修改页面列表与修改文章列表极为相似，唯一的区别就是所使用的filter和action不同，只需要将修改文章列表的代码作如下更改即可

1
2
add_filter( 'manage_pages_columns', 'my_post_custom_columns' );
add_action( 'manage_pages_custom_column', 'output_my_post_custom_columns', 10, 2 );

定制custom post type的列表

假如我有一个自定义的类型叫做book，每篇文章都是一本书的相关信息，有作者、出版时间、出版社、摘要等等。custom post type的列表页面是从posts继承过来的，只能显示默认的几个字段，而这里把出版社和摘要列出来更恰当。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
add_filter('manage_reading-notes_posts_columns', 'my_book_columns', 1);
add_action('manage_reading-notes_posts_custom_column', 'output_my_book_custom_columns', 1, 2);

function my_book_columns( $columns ){
    $newcolumns = array(
        'cb' => $columns['cb'],
        'title' => __( '书籍名称' ),
        'author' => __( '作者' ),
        'pub_time' => __( '出版时间' ),
        'publisher' => __( '出版社' ),
        'short_description' => __( '书籍摘要' )
    );
    return $newcolumns;
}
function output_my_book_custom_columns( $column_name, $post_id ) {
    switch( $column_name ) {
        case 'pub_time' :
            echo get_post_meta( $post_id, 'pub_time', true );
            break;
        case 'publisher' :
            echo get_post_meta( $post_id, 'publisher', true );
            break;
        case 'short_description' :
            echo get_post_meta( $post_id, 'short_description', true );
            break;
    }
}

定制评论列表页

假定站点的评论有评分功能，每条评论的得分用comment meta记录，字段名称为ratings，要在评论列表中添加得分这一列，代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
add_filter( 'manage_edit-comments_columns', 'my_comments_columns' );
add_action( 'manage_comments_custom_column', 'output_my_comments_columns', 10, 2 );
function my_comments_columns( $columns ){
    $columns[ 'ratings' ] = __( 'Ratings' );
    return $columns;
}
function  output_my_comments_columns( $column_name, $comment_id ){
    switch( $column_name ) {
        case "ratings" :
            echo get_comment_meta( $comment_id, 'ratings', true );
            break;
    }
}

如果你给评论表单添加了额外的字段，那这个方法就可以帮你将这些字段展示到后台。

同样的道理，定制媒体列表字段

在媒体列表中添加一个image ratings字段，跟上面评论的例子类似，只是换一换钩子和函数名称罢了。

1
2
3
4
5
6
7
8
9
10
11
12
13
add_filter( 'manage_upload_columns', 'my_media_columns' );
add_action( 'manage_media_custom_column', 'output_my_media_columns', 10, 2 );
function my_media_columns( $columns ){
    $columns[ 'image-ratings' ] = __( 'Ratings' );
    return $columns;
}
function  output_my_media_columns( $column_name, $post_id ){
    switch( $column_name ) {
        case "image-ratings" :
            echo get_post_meta( $post_id, 'image-ratings', true );
            break;
    }
}

媒体文件存储在wp_posts表中，是一类特殊的post，所以可以使用post meta存储数据。

修改用户列表，与前面有所不同

与之前不一样的是，用来输出内容的不是action而是filter。例如在用户列表添加自我介绍这一项，这是资料中默认有的一项。

1
2
3
4
5
6
7
8
9
10
11
12
13
add_filter( 'manage_users_columns', 'my_users_columns' );
add_action( 'manage_users_custom_column', 'output_my_users_columns', 10, 3 );
function my_users_columns( $columns ){
    $columns[ 'description' ] = __( '自我介绍' );
    return $columns;
}
function  output_my_users_columns( $var, $column_name, $user_id ){
    switch( $column_name ) {
        case "description" :
            return get_user_meta( $user_id, 'description', true );
            break;
    }
}

让字段可排序

首先按照上面的方法创建这个字段，无论在哪个列表页。为了方便，我们就将一个现有的字段变成可排序的字段——post列表页的作者一项

1
2
3
4
5
add_filter( 'manage_edit-post_sortable_columns', 'my_post_sortable_columns' );
function my_post_sortable_columns( $columns ) {
    $columns['author'] = 'author';
    return $columns;
}

看起来很简单吧，只要将这个字段添加到可排序字段的数组中，WordPress就会自动为其添加箭头UI，箭头地址如下

wp-admin/edit.php?orderby=author&order=asc

orderby的字段就是代码中定义的，而order的值会在asc和desc中切换。

这段代码只能为字段添加UI，不涉及任何处理的功能，要真正影响文章排列顺序，还要去处理wp query的东西。具体方法可以参看参考文章[1]。

结语

无论怎么修改，我们只是在WordPress定制好的界面上小打小闹。例如，如果列表中根本不需要title这一项，那么如何把row actions挪到别的字段上呢？ 目前我没什么好方法。好消息是，如果你想在自己的插件中使用WordPress列表样式，完全可以自己决定一切，利用WP_List_Table Class，WordPress管网上有详细的解释。

补足

可是按照上面制作的排序，会发现并不尽人意
所以，国外的朋友们有设计了以下代码，完善了排序功能

1
2
3
4
5
6
7
8
9
10
11
function price_column_orderby( $vars ) {
    if ( isset( $vars['orderby'] ) && 'price' == $vars['orderby'] ) {
        $vars = array_merge( $vars, array(
            'meta_key' => 'price',  //自定义字段 price
            'orderby' => 'meta_value'  //自定义字段price的值
        ) );
    }

    return $vars;
}
add_filter( 'request', 'price_column_orderby' );

这回我们再去post列表页去看看吧，可以正确的排序了。