在浏览其他人的博客时，无意间看到这个功能，觉得很适合，便自己动手在个人博客网站上也实现这个功能，记录一下。

1.使用「子主题」编辑文件

2. 在子主题functions.php中创建自定义短代码

// 自定义创作时间线短代码（前台调用[custom_create_timeline]）
// 实现：1. 文章列表倒序（最新在前） 2. 序号规则（最早=1，最新=N，第一页第一篇显示N） 3. 同一天文章共用一个日期，不重复显示
function custom_create_timeline() {
    ob_start(); // 开启输出缓冲，避免代码执行顺序异常

    // 1. 兼容页面分页参数page/paged，解决分页重复
    $paged = (get_query_var('paged')) ? get_query_var('paged') : (get_query_var('page') ? get_query_var('page') : 1);
    $paged = intval($paged);

    // 2. 定义查询基础参数（复用，避免重复代码）
    $base_args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'ignore_sticky_posts' => true, // 忽略置顶文章，保证序号连续不混乱
    );

    // 3. 获取符合条件的「总文章数」（用于计算序号，仅获取ID提升性能）
    $total_posts_query = new WP_Query(array_merge($base_args, array(
        'posts_per_page' => -1, // 查询所有符合条件的文章
        'fields' => 'ids' // 只获取文章ID，减少数据库压力
    )));
    $total_posts = $total_posts_query->post_count; // 总文章数（最新文章的序号=N）
    wp_reset_postdata(); // 重置查询，不影响后续逻辑

    // 4. WP_Query查询：文章列表仍保持倒序（DESC），每页显示指定数量
    $posts_per_page = 10; // 每页显示10篇，可按需调整
    $args = array_merge($base_args, array(
        'posts_per_page' => $posts_per_page,
        'orderby' => 'date',
        'order' => 'DESC', // 核心：保持文章倒序展示（最新在前），不修改
        'paged' => $paged,
    ));
    $timeline_query = new WP_Query($args);

    // 5. 核心修改：计算当前页面的「序号起始值」（最新文章对应序号N，分页递减）
    // 逻辑：总文章数 - (当前页码-1)*每页数量 = 当前页面第一篇文章的序号（如总2篇，第1页起始=2，第2页起始=1）
    $start_serial = $total_posts - ($paged - 1) * $posts_per_page;
    $current_serial = $start_serial; // 当前文章的序号（循环中递减）

    // 6. 新增：定义一个变量，用于记录「上一篇文章的日期」（核心：实现同一天共用日期）
    $previous_post_date = ''; // 初始化上一篇日期为空

    // 7. 生成时间线HTML结构（包含目标序号+同日期合并）
    if ($timeline_query->have_posts()) {
        echo '<div class="custom-timeline-container">';
        
        echo '<div class="custom-timeline">';

        while ($timeline_query->have_posts()) {
            $timeline_query->the_post();
            // 提取文章核心信息
            $post_title = get_the_title();
            $post_link = get_permalink();
            $post_date = get_the_date('Y年m月d日'); // 当前文章日期（格式统一，确保对比准确）

            
            // 对比当前文章日期与上一篇文章日期，只有不同时才输出日期和时间线圆点
            $is_same_date = ($post_date == $previous_post_date); // 判断是否为同一天

            // 单个时间线条目容器（无论是否同日期，都需要容器，仅内部元素按需渲染）
            echo '<div class="timeline-item">';
            
            // 非同一天：输出时间线圆点和日期（不重复渲染）
            if (!$is_same_date) {
                echo '<div class="timeline-dot"></div>';
                echo '<div class="timeline-date">' . $post_date . '</div>';
            } else {
                // 同一天：输出空的圆点和日期容器（保持布局对齐，不显示内容）
                echo '<div class="timeline-dot timeline-dot-hidden"></div>';
                echo '<div class="timeline-date timeline-date-hidden"></div>';
            }

            echo '<div class="timeline-content">';
            // 显示全局序号（最早=1，最新=N，列表倒序）
            echo '<h5><a href="' . esc_url($post_link) . '" target="_blank">第 ' . $current_serial . ' 篇：' . $post_title . '</a></h5>';
            echo '</div>';
            echo '</div>';
            

            // 核心修改：序号递减（每循环一篇，序号-1，对应更早的文章）
            $current_serial--;

           
            $previous_post_date = $post_date; // 将当前日期赋值给「上一篇日期」，用于下一次循环对比
            
        }

        echo '</div>'; // 关闭custom-timeline

        // 分页导航（无修改，保持原有功能）
        echo '<div class="timeline-pagination">';
        $pagination_args = array(
            'base' => str_replace('999999999', '%#%', esc_url(get_pagenum_link(999999999))),
            'format' => '',
            'total' => $timeline_query->max_num_pages,
            'current' => $paged,
            'show_all' => false,
            'end_size' => 1,
            'mid_size' => 2,
            'prev_next' => true,
            'prev_text' => '« 上一页',
            'next_text' => '下一页 »',
            'type' => 'list'
        );
        echo paginate_links($pagination_args);
        echo '</div>'; // 关闭timeline-pagination

        echo '</div>'; // 关闭custom-timeline-container
        wp_reset_postdata();
    } else {
        echo '<p>暂无创作内容，敬请期待~</p>';
    }

    return ob_get_clean();
}
add_shortcode('custom_create_timeline', 'custom_create_timeline');

3. 在内置 CSS 编辑器中添加美化样式

添加css代码：

/* 新增：时间线核心布局样式（必加，否则圆点和竖线不显示） */
.custom-timeline-container {
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
}

.custom-timeline {
    position: relative; /* 作为时间线竖线和圆点的定位容器，核心 */
}

/* 新增：时间线主轴（竖线），贯穿整个时间线 */
.custom-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background-color: #e0e0e0; /* 竖线颜色，可按需修改 */
    z-index: 1; /* 确保竖线在圆点下方，不遮挡圆点 */
}

/* 新增：时间线条目基础布局，支撑圆点和日期定位 */
.timeline-item {
    position: relative;
    margin-bottom: 60px; /* 条目之间的间距，可按需调整 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 新增：圆点核心样式（关键，确保圆点正常显示） */
.timeline-dot {
    position: absolute;
    width: 20px; /* 圆点大小 */
    height: 20px; /* 圆点大小 */
    border-radius: 50%; /* 圆形样式 */
    background-color: #2c7ae0; /* 圆点颜色，可按需修改 */
    z-index: 2; /* 确保圆点在竖线上方，显示清晰 */
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid #fff; /* 可选：添加白色边框，让圆点更醒目 */
    box-shadow: 0 0 0 2px rgba(44, 122, 224, 0.2); /* 可选：添加阴影，提升视觉效果 */
}

/* 新增：日期基础样式，确保和圆点对齐 */
.timeline-date {
    position: absolute;
    top: -30px; /* 日期在圆点上方的间距 */
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.1rem;
    color: #666;
    font-weight: 500;
}

/* 新增：文章内容区布局，确保对齐美观 */
.timeline-content {
    width: 45%;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 可选：添加阴影，提升质感 */
}

/* 新增：左右交替排列，提升时间线美观度（保持原有布局逻辑） */
.timeline-item:nth-child(even) .timeline-content {
    margin-left: 55%;
}

.timeline-item:nth-child(odd) .timeline-content {
    margin-right: 55%;
}

/* 你原有：自定义时间线分页样式 */
.timeline-pagination {
    margin-top: 60px;
    text-align: center;
}

.timeline-pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    gap: 8px; /* 页码之间的间距 */
}

.timeline-pagination li {
    margin: 0;
}

.timeline-pagination a,
.timeline-pagination span {
    display: inline-block;
    padding: 10px 16px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    color: #2c7ae0;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* 当前页码样式 */
.timeline-pagination .current {
    background-color: #2c7ae0;
    color: #fff;
    border-color: #2c7ae0;
    font-weight: 500;
}

/* 页码 hover 效果 */
.timeline-pagination a:hover {
    background-color: #f5f9ff;
    border-color: #1a5bb8;
    color: #1a5bb8;
}

/* 禁用状态（如第一页的上一页、最后一页的下一页） */
.timeline-pagination .disabled {
    color: #ccc;
    cursor: not-allowed;
    background-color: #f9f9f9;
    border-color: #eee;
}

/* 你原有：文章全局序号样式 */
.timeline-serial {
    font-size: 1rem;
    font-weight: 700;
    color: #1a5bb8;
    margin-bottom: 10px;
    padding: 5px 0;
    border-bottom: 1px dashed #e0e0e0;
}

/* 你原有：隐藏同一天的重复圆点和日期，保持布局对齐 */
.timeline-dot-hidden {
    visibility: hidden; /* 隐藏但保留占位，不破坏布局 */
}

.timeline-date-hidden {
    visibility: hidden; /* 隐藏但保留占位，确保内容对齐 */
}

/* 新增：同一天文章内容间距优化，视觉更紧凑 */
.timeline-item + .timeline-item .timeline-content {
    margin-top: -20px;
}

/* 你原有：手机端适配（整合补充核心样式的手机端适配） */
@media (max-width: 768px) {
    /* 补充：手机端时间线主轴和圆点定位 */
    .custom-timeline::before {
        left: 20px;
    }

    .timeline-dot {
        left: 20px;
    }

    .timeline-date {
        left: 60px;
        transform: none;
        top: -25px;
        font-size: 1rem;
    }

    .timeline-content {
        width: 100%;
        margin-left: 60px !important;
        margin-right: 0 !important;
    }

    /* 你原有：手机端分页适配 */
    .timeline-pagination a,
    .timeline-pagination span {
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    /* 你原有：手机端序号适配 */
    .timeline-serial {
        font-size: 0.9rem;
        margin-bottom: 8px;
    }

    /* 你原有：手机端隐藏重复内容 */
    .timeline-dot-hidden,
    .timeline-date-hidden {
        visibility: hidden;
    }

    /* 补充：手机端同一天文章间距优化 */
    .timeline-item + .timeline-item .timeline-content {
        margin-top: -15px;
    }
}

4. 实现效果