WordPress 自定义文章列表列的实现方法

昙花美 發表於 2023-12-7 00:00:00

WordPress 自定义文章列表列的实现方法

<div id="content" style="margin: 0px auto; padding: 0px; outline: none; width: 700px; line-height: 25.2px; clear: both; font-size: 14px; word-wrap: break-word; word-break: break-all; overflow: hidden;">
上一篇，我们使用 Meta Box 为文章添加了一个“推荐指数”字段。添加后用了一段时间，似乎不那么方便，编辑文章虽然方便了，但是在文章列表里却不能直观的显示出文章推荐指数，而且不能根据推荐指数来排序文章，鉴于这些不足，今天就来完善一下，让他更方便好用。 
今天要实现的效果如下图，具体的功能就是在列表里添加一列“推荐指数”，用来显示每篇文章的推荐指数，同时可以根据“推荐指数”来进行文章排序。 <img title="WordPress 自定义文章列表列的实现方法" alt="WordPress 自定义文章列表列的实现方法" src="https://zhuji.jb51.net/uploads/img/202305/290fc5ebe2f574d14f6be39c047b8f61.jpg" style="max-width:100%!important;height:auto!important;border: 1px solid rgb(204, 204, 204); vertical-align: middle; padding: 1px; overflow: hidden; max-width: 696px; width: 600px; height: 312px;"> 
首先要做的就是在表头添加“推荐指数”列。 <div style='margin: 8px 0px 1.1em; padding: 0px 0px 5px; outline: none; line-height: normal; font-size: 12px; border: 1px solid rgb(165, 165, 248); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-family: "Courier New", monospace; overflow: hidden; width: 686px; word-break: break-all;'>
<div style="margin: 0px; padding: 5px 5px 5px 10px; outline: none; line-height: 21.6px; font-weight: bold; background: rgb(244, 245, 255); border-bottom: 1px solid rgb(242, 251, 246); height: 15px;">
PHP Code复制内容到剪贴板
</div>
<div id="code_4513" style="margin: 0px; padding: 0px; outline: none; line-height: 21.6px;">
<ol style="margin: 0px 1px 0px 45px; padding: 2px 0px; outline: none; list-style-position: initial; list-style-image: initial; line-height: 25px; word-break: break-word; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 1px solid rgb(221, 221, 221); color: rgb(92, 92, 92);">
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
function add_rating_column($columns) { 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 $columns['rating'] = '推荐指数'; 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 return $columns; 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
} 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
add_filter('manage_posts_columns' , 'add_rating_column'); 
</li>
</ol>
</div>
</div>
 manage_posts_columns Filter可以应用管理文章页面的表头里，用来修改表头信息。注意该Filter不会应用到Page的列表页面，如需用到，请使用manage_pages_columns 或者 manage_${post_type}_posts_columns

有了表头，只是添加了这一列，但是该列还没有内容，我们来为该列填充数据。
<div style='margin: 8px 0px 1.1em; padding: 0px 0px 5px; outline: none; line-height: normal; font-size: 12px; border: 1px solid rgb(165, 165, 248); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-family: "Courier New", monospace; overflow: hidden; width: 686px; word-break: break-all;'>
<div style="margin: 0px; padding: 5px 5px 5px 10px; outline: none; line-height: 21.6px; font-weight: bold; background: rgb(244, 245, 255); border-bottom: 1px solid rgb(242, 251, 246); height: 15px;">
PHP Code复制内容到剪贴板
</div>
<div id="code_2978" style="margin: 0px; padding: 0px; outline: none; line-height: 21.6px;">
<ol style="margin: 0px 1px 0px 45px; padding: 2px 0px; outline: none; list-style-position: initial; list-style-image: initial; line-height: 25px; word-break: break-word; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 1px solid rgb(221, 221, 221); color: rgb(92, 92, 92);">
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
function rating_column_content($column_name, $post_id) { 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 if ($column_name == 'rating') { 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 $rating_value = get_post_meta( $post_id, '_rating', true ); 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 echo ($rating_value / 2) . '星'; 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 } 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
} 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
add_action('manage_posts_custom_column', 'rating_column_content', 10, 2); 
</li>
</ol>
</div>
</div>

这里用到了 manage_posts_custom_column Action，查看该Action的文档，我们可以知道该Action可以用来添加或修改列表的列，包括内建的以及自定义的列表列。该Action 接受两个参数，第一个是列表列的名字（$column_name，即第一步中的’rating’，而非’推荐指数’），第二个是当前的文章ID（$post_id）。根据这两个参数，我们就可以根据当前列的名字来获取文章的相关信息了。

这里通过判断当前列表列是不是’rating’，是则根据文章ID获取到推荐指数的值，并格式化输出。

接下来让他能够进行排序。通过 manage_edit-post_sortable_columns Filter来指定哪些列可以用来排序。
<div style='margin: 8px 0px 1.1em; padding: 0px 0px 5px; outline: none; line-height: normal; font-size: 12px; border: 1px solid rgb(165, 165, 248); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-family: "Courier New", monospace; overflow: hidden; width: 686px; word-break: break-all;'>
<div style="margin: 0px; padding: 5px 5px 5px 10px; outline: none; line-height: 21.6px; font-weight: bold; background: rgb(244, 245, 255); border-bottom: 1px solid rgb(242, 251, 246); height: 15px;">
PHP Code复制内容到剪贴板
</div>
<div id="code_8858" style="margin: 0px; padding: 0px; outline: none; line-height: 21.6px;">
<ol style="margin: 0px 1px 0px 45px; padding: 2px 0px; outline: none; list-style-position: initial; list-style-image: initial; line-height: 25px; word-break: break-word; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 1px solid rgb(221, 221, 221); color: rgb(92, 92, 92);">
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
function rating_column_table_sorting( $columns ) { 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 $columns['rating'] = 'rating'; 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 return $columns; 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
} 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
add_filter( 'manage_edit-post_sortable_columns', 'rating_column_table_sorting' ); 
</li>
</ol>
</div>
</div>
添加后，点击“推荐指数”列表头，可以看到页面的地址已经变到了排序的页面（/wp-admin/edit.php?orderby=rating&order=asc），但是列表却并没有排序。这是因为WordPress并不如何根据’rating’来排序。 
接下来就告诉WordPress如何根据’rating’排序。 <div style='margin: 8px 0px 1.1em; padding: 0px 0px 5px; outline: none; line-height: normal; font-size: 12px; border: 1px solid rgb(165, 165, 248); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-family: "Courier New", monospace; overflow: hidden; width: 686px; word-break: break-all;'>
<div style="margin: 0px; padding: 5px 5px 5px 10px; outline: none; line-height: 21.6px; font-weight: bold; background: rgb(244, 245, 255); border-bottom: 1px solid rgb(242, 251, 246); height: 15px;">
PHP Code复制内容到剪贴板
</div>
<div id="code_6331" style="margin: 0px; padding: 0px; outline: none; line-height: 21.6px;">
<ol style="margin: 0px 1px 0px 45px; padding: 2px 0px; outline: none; list-style-position: initial; list-style-image: initial; line-height: 25px; word-break: break-word; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 1px solid rgb(221, 221, 221); color: rgb(92, 92, 92);">
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
function rating_column_orderby( $vars ) { 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 if ( isset( $vars['orderby'] ) && $vars['orderby'] == 'rating' ) { 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 $vars['orderby'] = 'meta_value_num'; 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 $vars['meta_key'] = '_rating'; 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 } 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 return $vars; 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
} 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
add_filter( 'request', 'rating_column_orderby' ); 
</li>
</ol>
</div>
</div>
这里我们通过改变request Filter，判断当前是否有’orderby’参数，以及是否等于’rating’，如果是，则将orderby=meta_value_num和meta_key=_rating加入到了当前请求的query vars中，这样WordPress就知道需要根据自定义字段’_rating’的整数顺序来排序。 
至此，自定义文章列表列的功能已经实现。这里只是一个示例，稍作修改，便可以将“推荐指数”换成你文章中的任何数据，从而实现不同站点的不同需求。 
另外，你是不是又注意到自己根据教程实现的效果有点不一样？你的“推荐指数”在最后一列？ 
告诉你一个小技巧，在第一段代码中，传给Filter的参数$columns，是一个列的数组，包含了所有的列的信息，在没有自定义列的情况下，返回的就是内建的列，其顺序如下：cb（复选框）、title（标题）、author（作者）、categories（分类目录）、tags（标签）、comments（评论）、date（日期）。如果要将自定义的列加到特定位置，就需要循环该数组，到特定位置时，再添加自定义的列，代码如下。如果需要删除某些列，在循环中删除该key=>value即可（代码中注释的部分，删除了评论列）。 <div style='margin: 8px 0px 1.1em; padding: 0px 0px 5px; outline: none; line-height: normal; font-size: 12px; border: 1px solid rgb(165, 165, 248); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-family: "Courier New", monospace; overflow: hidden; width: 686px; word-break: break-all;'>
<div style="margin: 0px; padding: 5px 5px 5px 10px; outline: none; line-height: 21.6px; font-weight: bold; background: rgb(244, 245, 255); border-bottom: 1px solid rgb(242, 251, 246); height: 15px;">
PHP Code复制内容到剪贴板
</div>
<div id="code_3011" style="margin: 0px; padding: 0px; outline: none; line-height: 21.6px;">
<ol style="margin: 0px 1px 0px 45px; padding: 2px 0px; outline: none; list-style-position: initial; list-style-image: initial; line-height: 25px; word-break: break-word; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 1px solid rgb(221, 221, 221); color: rgb(92, 92, 92);">
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
function add_rating_column($columns) { 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 $new = array(); 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 foreach($columns as $key => $title) { 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 if ($key == 'comments') { 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 $new['rating'] = '推荐指数'; 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 } 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 // if ($key == 'comments') { 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 // continue; 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 // } 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 $new[$key] = $title; 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 } 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
 return $new; 
</li>
<li style="margin: 0px; padding: 0px 0px 0px 5px; outline: none; list-style: decimal; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(170, 0, 0);">
} 
</li>
</ol>
</div>
</div>
<div style="margin: 0px; padding: 0px; outline: none; line-height: 25.2px;">
</div>
</div>
<div style="margin: 8px 0px 10px; padding: 0px; outline: none; width: 700px; overflow: hidden;">
<ul style='margin: 0px; padding-right: 0px; padding-left: 0px; outline: none; list-style: none; max-width: 500px; line-height: 12px; font-family: tahoma, arial, "Microsoft YaHei";'></ul>
</div>

頁: [1]

琼殿技术论坛's Archiver

WordPress 自定义文章列表列的实现方法