MLY Timeline时间轴与大事记WordPress插件

<p>简洁、可扩展的<strong>年份分组时间轴</strong>插件：左侧<strong>日期 + 大圆点</strong>，右侧<strong>分类徽章 / 标题 / 摘要 / 封面图</strong>。支持<strong>分类筛选</strong>、<strong>按钮自定义排序</strong>、<strong>数量徽标</strong>、<strong>COS 对象存储</strong>、<strong>主题灯箱适配</strong>。仅在使用短代码的页面加载 CSS/JS。</p><p><strong>特点</strong>：年份分组 · 左侧时间轴主线 · 分类筛选 · 兼容主题</p><hr class="wp-block-separator has-alpha-channel-opacity"/><h2 class="wp-block-heading">✨ 特性、</h2><ul class="wp-block-list"><li>🧩 自定义文章类型：mly_tl_event；自定义分类：mly_tl_category</li> <li>📅 年份自动分组，日期显示 MM-DD，左侧主线 + 大圆点指示</li> <li>🏷️ 顶部分段式筛选器（支持按钮排序、默认激活、隐藏“全部”）</li> <li>🔢 筛选按钮数量徽标</li> <li>📝 摘要完整显示（不影响全站其它页面）</li> <li>🖼️ 封面图使用 </li> <li>⚡ 仅在短代码页面加载资源；查询使用 no_found_rows 等优化</li> <li>♿ 语义化 HTML、基本 ARIA 属性</li></ul><hr class="wp-block-separator has-alpha-channel-opacity"/><h2 class="wp-block-heading">📦 安装</h2><ol class="wp-block-list"><li>上传插件到：<code>wp-content/plugins/mly-timeline/</code></li> <li>后台 → <strong>插件</strong> → 启用 <strong>MLY Timeline</strong></li> <li>后台侧栏会出现：<ul class="wp-block-list"><li><strong>Timeline Events</strong>：新增/编辑时间轴事件</li> <li><strong>Timeline Categories</strong>：管理分类（可设置颜色；也可扩展图标）</li></ul></li></ol><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>首次启用已自动刷新固定链接（activation hook）。</p></blockquote><hr class="wp-block-separator has-alpha-channel-opacity"/><h2 class="wp-block-heading">🛠️ 创建一条时间轴事件</h2><ol class="wp-block-list"><li>后台 → <strong>Timeline Events → Add New</strong></li> <li>右侧选择<strong>分类</strong></li> <li>右侧<strong>特色图像</strong> = 封面图</li> <li>侧栏 <strong>Timeline Date</strong> 选择日期（用于排序；留空则用文章发布日期）</li> <li>填写<strong>摘要</strong></li></ol><hr class="wp-block-separator has-alpha-channel-opacity"/><h2 class="wp-block-heading">🚀 快速开始</h2><p>在任意页面/文章正文插入短代码：</p><pre class="wp-block-code"><code>[mly_timeline show_filters="true" limit="100" order="DESC"] </code></pre><ul class="wp-block-list"><li><code>show_filters</code>：是否显示顶部筛选器</li> <li><code>limit</code>：最多读取多少条事件</li> <li><code>order</code>：<code>DESC</code> 从新到旧；<code>ASC</code> 从旧到新</li></ul><p><strong>只显示部分分类</strong>（按 slug）：</p><pre class="wp-block-code"><code>[mly_timeline show_filters="true" categories="xx,xxx" order="DESC"] </code></pre><hr class="wp-block-separator has-alpha-channel-opacity"/><h2 class="wp-block-heading">🔧 筛选器按钮排序 & 默认激活</h2><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>需要 v0.4.4（含排序补丁）或更高版本。</p></blockquote><pre class="wp-block-code"><code>[mly_timeline show_filters="true" filter_order="backend,frontend,design" filter_orderby="name" filter_order_dir="ASC" filter_all_label="全部" show_all="true" ] </code></pre><figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>参数</th><th>说明</th></tr></thead><tbody><tr><td><code>filter_order</code></td><td><strong>使用分类 slug 指定顺序</strong>，未列出的分类自动排在后面</td></tr><tr><td><code>filter_orderby</code></td><td>未列出的分类的备用排序字段：`name</td></tr><tr><td><code>filter_order_dir</code></td><td>备用排序方向：`ASC</td></tr><tr><td><code>filter_all_label</code></td><td>“全部”按钮文案</td></tr><tr><td><code>show_all</code></td><td>是否显示“全部”按钮：`true</td></tr></tbody></table></figure><p><strong>默认选中某个分类</strong>：<br>把 <code>show_all="false"</code>，并将目标分类放在 <code>filter_order</code> 的<strong>第一个</strong>位置：</p><pre class="wp-block-code"><code>[mly_timeline show_filters="true" show_all="false" filter_order="frontend,backend"] </code></pre><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>按钮上的<strong>数量徽标</strong>显示的是<strong>当前列表</strong>的计数（会受 <code>categories</code> / <code>limit</code> 影响）。</p></blockquote><hr class="wp-block-separator has-alpha-channel-opacity"/><hr class="wp-block-separator has-alpha-channel-opacity"/><h2 class="wp-block-heading">🎨 样式可调（CSS 变量）</h2><p>时间轴关键几何使用 CSS 变量（写在 <code>.mly-timeline</code> 上），可按页面风格微调：</p><pre class="wp-block-code"><code>.mly-timeline{ --line-x: 84px; /* 主线/圆点 X 坐标 */ --left-col: 72px; /* 左侧日期列宽 */ --col-gap: 22px; /* 左列与卡片间距 */ --dot: 12px; /* 圆点直径 */ --dot-top: 12px; /* 圆点距 li 顶部偏移 */ --item-gap: 28px; /* 条目竖向间距（影响连线长度） */ --year-tail:14px; /* 年份块最后一条的“收尾”长度 */ } </code></pre><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>颜色/圆角/卡片留白等已有合理默认，也都可在你的 <code>style.css</code> 中覆写。</p></blockquote><hr class="wp-block-separator has-alpha-channel-opacity"/><h2 class="wp-block-heading">🧪 示例</h2><div class="vlp-link-container vlp-layout-basic wp-block-visual-link-preview-link"><a href="https://www.meily.top/events/" class="vlp-link" title="里程碑"></a><div class="vlp-layout-zone-main"><div class="vlp-block-0 vlp-link-title">里程碑</div><div class="vlp-block-1 vlp-link-summary">🏆里程碑最近学到了一种震撼的思维模式 ——Think like a farmer(像农民一样思考) 像培育种子一样培养自己，本页面以时间线视图，呈现一些里程碑和重要时刻</div></div></div><figure class="wp-block-image size-full"><a href="https://cos.ryanzm.cn/wp/2025/09/78805a221a988e79ef3f42d7c5bfd418.png"><img src="https://cos.ryanzm.cn/wp/2025/09/78805a221a988e79ef3f42d7c5bfd418.png" alt="" class="wp-image-1911"/></a></figure><figure class="wp-block-image size-full"><a href="https://cos.ryanzm.cn/wp/2025/09/78805a221a988e79ef3f42d7c5bfd418-1.png"><img src="https://cos.ryanzm.cn/wp/2025/09/78805a221a988e79ef3f42d7c5bfd418-1.png" alt="" class="wp-image-1912"/></a></figure><figure class="wp-block-image size-full"><a href="https://cos.ryanzm.cn/wp/2025/09/78805a221a988e79ef3f42d7c5bfd418-3.png"><img src="https://cos.ryanzm.cn/wp/2025/09/78805a221a988e79ef3f42d7c5bfd418-3.png" alt="" class="wp-image-1914"/></a></figure><figure class="wp-block-image size-full"><a href="https://cos.ryanzm.cn/wp/2025/09/78805a221a988e79ef3f42d7c5bfd418-4.png"><img src="https://cos.ryanzm.cn/wp/2025/09/78805a221a988e79ef3f42d7c5bfd418-4.png" alt="" class="wp-image-1915"/></a></figure><hr class="wp-block-separator has-alpha-channel-opacity"/><h2 class="wp-block-heading">⚙️ 性能与兼容性</h2><ul class="wp-block-list"><li>仅在使用短代码的页面加载 CSS/JS（前端轻量，移动端徽标为<strong>纯 CSS</strong> 无重排）</li> <li>查询使用 <code>no_found_rows</code>、meta 索引；按 <code>mly_tl_date_ymd</code> 排序</li> <li>兼容现代主题；暗色模式适配</li> <li>基本 A11y：筛选 <code>role="tablist"</code>，按钮 <code>aria-selected</code> 切换等</li></ul><p></p>

简洁、可扩展的年份分组时间轴插件：左侧日期 + 大圆点，右侧分类徽章 / 标题 / 摘要 / 封面图。支持分类筛选、按钮自定义排序、数量徽标、COS 对象存储、主题灯箱适配。仅在使用短代码的页面加载 CSS/JS。

特点：年份分组 · 左侧时间轴主线 · 分类筛选 · 兼容主题

✨ 特性、

🧩 自定义文章类型：mly_tl_event；自定义分类：mly_tl_category
📅 年份自动分组，日期显示 MM-DD，左侧主线 + 大圆点指示
🏷️ 顶部分段式筛选器（支持按钮排序、默认激活、隐藏“全部”）
🔢 筛选按钮数量徽标
📝 摘要完整显示（不影响全站其它页面）
🖼️ 封面图使用
⚡ 仅在短代码页面加载资源；查询使用 no_found_rows 等优化
♿ 语义化 HTML、基本 ARIA 属性

📦 安装

上传插件到：wp-content/plugins/mly-timeline/
后台 → 插件 → 启用 MLY Timeline
后台侧栏会出现：
- Timeline Events：新增/编辑时间轴事件
- Timeline Categories：管理分类（可设置颜色；也可扩展图标）

首次启用已自动刷新固定链接（activation hook）。

🛠️ 创建一条时间轴事件

后台 → Timeline Events → Add New
右侧选择分类
右侧特色图像 = 封面图
侧栏 Timeline Date 选择日期（用于排序；留空则用文章发布日期）
填写摘要

🚀 快速开始

在任意页面/文章正文插入短代码：

[mly_timeline show_filters="true" limit="100" order="DESC"]

show_filters：是否显示顶部筛选器
limit：最多读取多少条事件
order：DESC 从新到旧；ASC 从旧到新

只显示部分分类（按 slug）：

[mly_timeline show_filters="true" categories="xx,xxx" order="DESC"]

🔧 筛选器按钮排序 & 默认激活

需要 v0.4.4（含排序补丁）或更高版本。

[mly_timeline
  show_filters="true"
  filter_order="backend,frontend,design"
  filter_orderby="name"
  filter_order_dir="ASC"
  filter_all_label="全部"
  show_all="true"
]

参数	说明
`filter_order`	使用分类 slug 指定顺序，未列出的分类自动排在后面
`filter_orderby`	未列出的分类的备用排序字段：`name
`filter_order_dir`	备用排序方向：`ASC
`filter_all_label`	“全部”按钮文案
`show_all`	是否显示“全部”按钮：`true

默认选中某个分类：
把 show_all="false"，并将目标分类放在 filter_order 的第一个位置：

[mly_timeline show_filters="true" show_all="false" filter_order="frontend,backend"]

按钮上的数量徽标显示的是当前列表的计数（会受 categories / limit 影响）。

🎨 样式可调（CSS 变量）

时间轴关键几何使用 CSS 变量（写在 .mly-timeline 上），可按页面风格微调：

.mly-timeline{
  --line-x:   84px;  /* 主线/圆点 X 坐标 */
  --left-col: 72px;  /* 左侧日期列宽 */
  --col-gap:  22px;  /* 左列与卡片间距 */
  --dot:      12px;  /* 圆点直径 */
  --dot-top:  12px;  /* 圆点距 li 顶部偏移 */
  --item-gap: 28px;  /* 条目竖向间距（影响连线长度） */
  --year-tail:14px;  /* 年份块最后一条的“收尾”长度 */
}