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

nZone 2023年11月10日 共681字 80行代码 预计4分钟 评论 32
阿里云折扣】服务器活动对比【腾讯云秒杀

WordPress 的后台文章列表默认样式排版比较传统,可通过修改 CSS 代码来美化文章列表的样式。但WordPress后台加载有大量JS和CSS文件,样式容易冲突,为了居中,研究了一天,总算搞定了。

WordPress博客后台文章默认样式

先看下默认样式,一屏勉强就6篇文章,不太整齐美观。

将标题列表宽度做了调整,太长会换行,字数跟编辑器的差不多。

WordPress博客后台文章样式修改

除了文章标题外,其它所有内容均居中显示,列表宽度还做了调整,改完一屏可以显示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 DashboardWP Dark Mode

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

weinxin
公众号
闹着玩下网
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: