WordPress博客后台文章列表样式美化

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。

我在想，不专业的人还是不要做不专业的事，真的很耗时间。所以一个主题卖个百来块似乎不算贵了。