客户端配置指南★ 4.9 推荐评级

可以创建多列列表的插件:Lazy Lists

博主头像站长评测
发布于 2020/02/12(修订于 2020/02/11)原创独立站体系

我们在发文章的时候经常会用到列表,有些时候希望出现多列列表的话WP默认编辑器的列表功能就无法满足我们,所以这里给大家推荐这款Lazy Lists插件,它支持列表排序和多列展示的功能。

默认的单列显示列表效果如下:

换成多列显示后效果如下:

明显的,在长列表的情况下,分为多列展示对于网页界面展示来说要更好。

这款Lazy Lists的功能就可以帮助你实现了。

下载地址

除了多列外,还支持A-Z的排序,最多支持5列显示。

Lazy Lists是一款古腾堡编辑器下的插件,经典编辑器的话不支持。

多列列表排版的现代化思考

在早期的 WordPress 站点中,站长常常依赖如 Lazy Lists 等第三方小插件来实现无序列表(ul/li)的双列或三列横向排列。但随着现代前端 CSS 标准的演进,使用原生 CSS Grid(网格)实现多列列表不仅零代码冗余,而且完美适应多端屏幕。

极简现代纯 CSS 替代方案

只需在主题自定义的额外 CSS 中添加几行代码,并为列表赋予一个类名即可:

/* 纯原生响应式多列列表排版 */
.multi-column-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 24px;
  padding-left: 0;
  list-style-position: inside;
}