WordPress 的后台文章列表默认样式排版比较传统,可通过修改 CSS 代码来美化文章列表的样式。但WordPress后台加载有大量JS和CSS文件,样式容易冲突,为了居中,研究了一天,总算搞定了。
先看下默认样式,一屏勉强就6篇文章,不太整齐美观。
将标题列表宽度做了调整,太长会换行,字数跟编辑器的差不多。
除了文章标题外,其它所有内容均居中显示,列表宽度还做了调整,改完一屏可以显示10篇,基本上挺满意的。
/* 修改后台文章列样式 */
function nzonex_admin_list_styles() {
/* 限定在后台列表页加载 */
global $pagenow;
if (is_admin() && $pagenow == 'edit.php') {
echo '<style type="text/css">
/* 设置文章标题列宽度 */
.column-title {
width: 29%;
}
/* 设置分类目录列宽度 */
.wp-list-table th#categories {
width: 6%;
}
/* 标签列名和内容居中显示 */
.wp-list-table th#tags,
.wp-list-table td.column-tags {
text-align: center;
width: 12%;
}
/* 分类目录列名和内容居中 */
.wp-list-table th#categories,
.wp-list-table td.column-categories {
text-align: center;
}
/* ID列名和内容居中 */
.wp-list-table th#ssid,
.wp-list-table td.column-ssid {
text-align: center;
}
/* 评论列内容居中 */
.fixed .column-comments {
text-align: center;
}
/* 日期列内容居中 */
.fixed .column-date {
text-align: center;
}
/* 列名-带排序按钮居中 */
th.sortable a,
th.sorted a,
.fixed .column-comments .vers {
display: flex;
justify-content: center;
}
/* 设置浏览列宽度 */
.column-views {
width: 9%;
}
/* 浏览次数内容 */
td.views.column-views,
.fixed .column-views {
width: 9%;
text-align: center;
}
/* 每列之间添加竖线 */
.wp-list-table th,
.wp-list-table td {
border-right: 1px dotted #c3c4c7;
}
/* 最后一列去掉竖线,避免重叠显示 */
.wp-list-table th:last-child,
.wp-list-table td:last-child {
border-right: none;
}
</style>';
}
}
add_action('admin_head-edit.php', 'nzonex_admin_list_styles');
把这段代码加到主题文件中,文件名一般是:functions.php 或 inc.php,代码只在文章或页面的列表页加载,不影响其它网页加载速度。也可以调整稳定后,再把这css单独移植出来。
代码有点多,主要为了可读性,以方便自定义修改,可以把相同的居中样式合并了。
默认是没有更新日期这个列,这是后面手动添加的。
顺便对比下后台两个深色模式插件:Dark Mode for WP Dashboard、WP Dark Mode。
我在想,不专业的人还是不要做不专业的事,真的很耗时间。所以一个主题卖个百来块似乎不算贵了。
公众号
闹着玩下网