zibll子比主题文章归档美化：可视化文章归档新体验[zibll子比美化]

0478

在 WordPress 主题的世界里，子比主题一直备受青睐。今天要给大家分享的，就是一款专为子比主题定制的文章归档页面模板，让你的网站文章归档页面更加个性化、数据化。

一、模板亮点抢先看

别的主题有带图表的文章归档页面，子比主题当然也不能落后。这款模板仅适用于子比主题，文章卡片借助子比主题自带的卡片函数生成，确保了整体风格的一致性。

  1. 数据可视化图表：利用 Apache ECharts 这一精美的图表组件，实现了多个维度的数据可视化。比如文章分类统计，能清晰展示基于文章数量的比例，帮助你快速了解网站不同分类文章的占比情况；用户类型统计基于用户数量的比例呈现，让你对网站用户构成一目了然；还有运营时间统计、文章总量统计、评论总量统计、注册用户统计等关键数据，都能直观呈现。
  2. 年度更新统计图：以 2025 年为例，有专门的文章更新年度更新统计图，从 1 月到 12 月，每月文章更新情况清晰可见，方便你回顾和分析文章发布规律。

二、技术实现与优势

  1. 缓存机制：运用 WordPress 自带的 Transient 瞬态 API 缓存，该页面缓存一天。这不仅能提高页面加载速度，还能减轻服务器压力，为用户带来更流畅的访问体验。
  2. 依赖子比主题内置函数：充分利用子比主题的内置函数，保障了模板与主题的高度适配，减少了兼容性问题。

三、安装使用指南

在子比主题目录下的pages文件夹创建一个 PHP 文件，文件名可自行设定。如果是使用子主题，示例中直接命名为archives.php。代码注释十分详细，对于有开发能力的用户来说，方便在此基础上进行二次开发，添加自己需要的功能。

四、演示效果

图片[1]-zibll子比主题文章归档美化：可视化文章归档新体验[zibll子比美化]-狸狸库 - 网络资源收集与分享

五、背景知识拓展

Apache ECharts 是一个开源的可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图等，能够满足各种数据可视化需求。在网站建设中，合理运用数据可视化技术，不仅能提升网站的专业性和美观度，还能帮助网站管理员更好地分析数据，做出决策。而 WordPress 的 Transient 瞬态 API 缓存则是一种临时存储数据的机制，它可以将频繁访问的数据缓存起来，下次请求时直接从缓存中读取，大大提高了网站性能。

效果（一）

图片[2]-zibll子比主题文章归档美化：可视化文章归档新体验[zibll子比美化]-狸狸库 - 网络资源收集与分享
<?php
/**
 * Template name: zibll-文章归档（1） Www.FuLiWu.Vip
 * Description: A archives page for displaying article statistics and monthly updates.
 */

// 获取分类统计信息并缓存
function get_category_statistics() {
    return get_cached_data('category_stats', function() {
        $categories = get_categories(['hide_empty' => false]);
        $data = [];
        foreach ($categories as $category) {
            $data[] = ['value' => $category->count, 'name' => $category->name];
        }
        return json_encode($data);
    });
}

// 获取文章热力图数据并缓存
function get_heatmap_data() {
    return get_cached_data('heatmap_data', function() {
        global $wpdb;
        // 使用SQL查询一次性获取所有必要的数据，以减少循环中的函数调用
        $query = "
            SELECT DATE(post_date) AS date, COUNT(*) AS count
            FROM {$wpdb->posts}
            WHERE post_type = 'post' AND post_status = 'publish'
            GROUP BY DATE(post_date)
            ORDER BY date ASC
        ";
        $results = $wpdb->get_results($query, ARRAY_A);

        // 填充缺失的日期
        if (!empty($results)) {
            $start_date = $results[0]['date'];
            $end_date = end($results)['date'];
            $current_date = strtotime($start_date);
            $heatmap_data = [];

            while (date('Y-m-d', $current_date) <= $end_date) {
                $formatted_date = date('Y-m-d', $current_date);
                $count = 0;

                foreach ($results as $result) {
                    if ($result['date'] === $formatted_date) {
                        $count = $result['count'];
                        break;
                    }
                }

                $heatmap_data[] = [$formatted_date, $count];
                $current_date = strtotime('+1 day', $current_date);
            }

            return json_encode($heatmap_data);
        } else {
            return json_encode([]);
        }
    });
}

// 获取用户统计数据并缓存
function get_user_vip_statistics() {
    return get_cached_data('user_vip_stats', function() {
        // 如果有更高效的获取会员级别的方式，请替换zib_get_user_vip_level()
        $users = get_users(['fields' => ['ID']]);
        $user_counts = [
            'normal' => 0,
            'vip_1' => 0,
            'vip_2' => 0
        ];

        foreach ($users as $user) {
            $vip_level = zib_get_user_vip_level($user->ID);

            switch ($vip_level) {
                case 1:
                    $user_counts['vip_1']++;
                    break;
                case 2:
                    $user_counts['vip_2']++;
                    break;
                default:
                    $user_counts['normal']++;
                    break;
            }
        }

        $chart_data = [
            ['value' => $user_counts['normal'], 'name' => '普通用户'],
            ['value' => $user_counts['vip_1'], 'name' => _pz('pay_user_vip_1_name')],
            ['value' => $user_counts['vip_2'], 'name' => _pz('pay_user_vip_2_name')]
        ];

        return json_encode($chart_data);
    });
}

// 使用瞬态API缓存数据以减少数据库查询次数
function get_cached_data($transient_key, $fetch_callback) {
    if (false === ($data = get_transient($transient_key))) {
        $data = call_user_func($fetch_callback);
        set_transient($transient_key, $data, DAY_IN_SECONDS); // 缓存一天
    }
    return $data;
}

// 渲染小部件
function render_archives_widgets($type = 'day') {
    // 初始化变量
    $icons = [
        'day' => ['icon' => 'fa fa-calendar-check-o', 'color' => 'c-blue-2', 'title' => '运营时间'],
        'post' => ['icon' => 'fa fa-file-text', 'color' => 'c-green', 'title' => '文章总量'],
        'comment' => ['icon' => 'fa fa-comments', 'color' => 'c-yellow', 'title' => '评论总量'],
        'user' => ['icon' => 'fa fa-users', 'color' => 'c-blue', 'title' => '注册用户']
    ];

    // 根据传入的参数类型获取统计数据并构建HTML
    switch ($type) {
        case 'day':
            // 尝试获取ID为1的用户注册时间作为运营时间起点
            $first_user = get_userdata(1);
            if ($first_user && !empty($first_user->user_registered)) {
                $start_time = strtotime($first_user->user_registered);
            } else {
                // 如果获取不到用户1的数据，则回退到站点设置时间或者当前时间
                $start_time = strtotime(get_option('siteorigin_setting_time')) ?: time();
            }
            $statistic = esc_html(floor((time() - $start_time) / (60 * 60 * 24))) . ' 天';
            break;
        case 'post':
            $statistic = esc_html(wp_count_posts()->publish);
            break;
        case 'comment':
            $approved_comments = get_comment_count()['approved'];
            $pending_comments = get_comment_count()['moderated'];
            $spam_comments = get_comment_count()['spam'];
            $trash_comments = get_comment_count()['trash'];
            $statistic = esc_html($approved_comments + $pending_comments + $spam_comments + $trash_comments);
            break;
        case 'user':
            $statistic = esc_html(count_users()['total_users']);
            break;
        default:
            return; // 如果类型不匹配，则不输出任何内容
    }

    // 输出美化后的HTML结构
    echo '<div class="stat-widget">';
    echo '<div class="stat-title">' . $icons[$type]['title'] . '</div>';
    echo '<div class="stat-content">';
    echo '<span class="stat-number ' . $icons[$type]['color'] . '">' . $statistic . '</span>';
    echo '<i class="stat-icon ' . $icons[$type]['icon'] . ' ' . $icons[$type]['color'] . '"></i>';
    echo '</div></div>';
}

// 在适当的地方调用这些函数以获取所需的数据
$json_data = get_category_statistics();
$json_heatmap_data = get_heatmap_data();
$json_chart_data = get_user_vip_statistics();

function Grace_archives_scripts() {
    // 注册并加载ECharts库
    wp_enqueue_script('echarts', 'https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js', array(), null, true);

    // 注册自定义JS文件
    wp_enqueue_script('archives-script', 'https://www.vxras.com/wp-content/themes/grace/assets/js/archives.js', array('echarts'), null, true);

    // 使用wp_localize_script将PHP变量传递给JavaScript
    $data_to_js = array(
        'vipChartData' => json_decode(get_user_vip_statistics(), true),
        'postChartData' => json_decode(get_category_statistics(), true),
        'heatmapData' => json_decode(get_heatmap_data(), true)
    );
    wp_localize_script('archives-script', 'chartData', $data_to_js);
    
    // 添加自定义CSS
    wp_enqueue_style('archives-style', get_template_directory_uri() . '/assets/css/archives.css', array(), null);
    
    // 如果没有archives.css文件，可以直接内联CSS
    $custom_css = "
        /* 整体页面样式 */
        .archives-container {
            background-color: #f9f9f9;
            padding: 30px 0;
        }
        
        /* 卡片样式 */
        .theme-box {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            overflow: hidden;
            margin-bottom: 30px;
            transition: all 0.3s ease;
        }
        
        .theme-box:hover {
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        /* 图表容器 */
        .chart-container {
            padding: 20px;
            margin-bottom: 25px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .chart-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        /* 统计小部件 */
        .stats-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 25px;
        }
        
        .stat-widget {
            flex: 1;
            min-width: 150px;
            background: #fff;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
        
        .stat-widget:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .stat-title {
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
        }
        
        .stat-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .stat-number {
            font-size: 22px;
            font-weight: 700;
        }
        
        .stat-icon {
            font-size: 24px;
            opacity: 0.8;
        }
        
        /* 颜色类 */
        .c-blue-2 { color: #3498db; }
        .c-green { color: #2ecc71; }
        .c-yellow { color: #f39c12; }
        .c-blue { color: #2980b9; }
        
        /* 文章归档部分 */
        .archives-list {
            padding: 0 20px 20px;
        }
        
        .archives-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        
        .archives-title h3 {
            font-size: 20px;
            font-weight: 600;
            color: #333;
            margin: 0;
        }
        
        .toggle-button {
            padding: 5px 15px;
            background: #3498db;
            color: white;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .toggle-button:hover {
            background: #2980b9;
        }
        
        /* 折叠面板样式 */
        .panel {
            margin-bottom: 15px;
            border: none;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .panel-heading {
            padding: 12px 15px;
            background-color: #f8f9fa;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .panel-heading:hover {
            background-color: #e9ecef;
        }
        
        .panel-heading i {
            margin-right: 10px;
            transition: transform 0.3s ease;
        }
        
        .panel-heading[aria-expanded='true'] i {
            transform: rotate(45deg);
        }
        
        .biaoti {
            font-size: 16px;
            color: #444;
        }
        
        .panel-body {
            padding: 15px;
            background-color: #fff;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .stats-container {
                flex-direction: column;
            }
            
            .stat-widget {
                margin-bottom: 15px;
            }
        }
    ";
    wp_add_inline_style('archives-style', $custom_css);
}
add_action('wp_enqueue_scripts', 'Grace_archives_scripts');

// 获取头部样式
get_header();
$post_id = get_queried_object_id();
$header_style = zib_get_page_header_style($post_id);
?>

<!-- 页面主体 -->
<main class="container archives-container">
    <div class="content-wrap">
        <div class="content-layout">
            <?php if ($header_style != 1) { echo zib_get_page_header($post_id);} ?>
            <div class="theme-box">
                <?php if ($header_style == 1) { echo zib_get_page_header($post_id);} ?>
                <article>
                    <div class="chart-container">
                        <div class="chart-title">文章分类统计</div>
                        <div id="post" style="height:400px;"></div>
                    </div>
                    
                    <div class="chart-container">
                        <div class="chart-title">文章发布时间热力图</div>
                        <div id="time" style="height:300px;"></div>
                    </div>
                    
                    <div class="archives-list">
                        <div class="archives-title">
                            <h3>文章归档</h3>
                            <a class="toggle-button" href="javascript:;" id="toggleAll">展开全部</a>
                        </div>
                        
                        <div data-nav="posts" class="wp-posts-content">
                            <?php
                                $previous_year = 0;
                                $previous_month = 0;
                                $collapse_id = 0;

                                // 获取所有文章
                                $myposts = get_posts('numberposts=-1&orderby=post_date&order=DESC');

                                foreach ($myposts as $post) :
                                    setup_postdata($post);

                                    $year = mysql2date('Y', $post->post_date);
                                    $month = mysql2date('n', $post->post_date);

                                    if ($year != $previous_year || $month != $previous_month) :
                                        // 如果不是第一个月，则关闭上一个折叠面板
                                        if ($collapse_id > 0) {
                                            echo '</div></div></div>';
                                        }

                                        // 开始新的月份折叠面板
                                        $collapse_id++;
                                        echo '<div class="wp-block-zibllblock-collapse">';
                                        echo '<div class="panel" data-theme="panel" data-isshow="false">';
                                        echo '<div class="panel-heading collapsed" href="#collapse_' . esc_attr($collapse_id) . '" data-toggle="collapse" aria-controls="collapseExample" aria-expanded="false">';
                                        echo '<i class="fa fa-plus"></i><strong class="biaoti">' . get_the_time('Y年n月') . '</strong>';
                                        echo '</div>';
                                        echo '<div class="collapse" id="collapse_' . esc_attr($collapse_id) . '" aria-expanded="false" style="height: 0px;">';
                                        echo '<div class="panel-body">';
                                    endif;

                                    // 输出单篇文章内容
                                    echo '<div class="archive-post">';
                                    echo '<span class="archive-date">' . get_the_time('d日') . '</span>';
                                    echo '<a href="' . get_permalink() . '" title="' . get_the_title() . '">' . get_the_title() . '</a>';
                                    echo '</div>';

                                    $previous_year = $year;
                                    $previous_month = $month;
                                endforeach;

                                // 关闭最后一个折叠面板（如果有）
                                if ($collapse_id > 0) {
                                    echo '</div></div></div>';
                                }

                                wp_reset_query();
                                wp_reset_postdata();
                            ?>
                        </div>
                    </div>
                </article>
            </div>
            <?php comments_template('/template/comments.php', true); ?>
        </div>
    </div>
    
    <div class="sidebar">
        <div class="chart-container">
            <div class="chart-title">用户会员统计</div>
            <div id="vip-user" style="height: 350px;"></div>
        </div>
        
        <div class="stats-container">
            <?php render_archives_widgets('day'); ?>
            <?php render_archives_widgets('post'); ?>
        </div>

        <div class="stats-container">
            <?php render_archives_widgets('comment'); ?>
            <?php render_archives_widgets('user'); ?>
        </div>
    </div>
</main>

<script type="text/javascript">
// 页面加载完成后初始化图表
document.addEventListener('DOMContentLoaded', function() {
    // 初始化折叠面板交互
    const toggleAllBtn = document.getElementById('toggleAll');
    const panels = document.querySelectorAll('.panel-heading');
    let isAllExpanded = false;
    
    if (toggleAllBtn) {
        toggleAllBtn.addEventListener('click', function() {
            isAllExpanded = !isAllExpanded;
            panels.forEach(panel => {
                const target = document.querySelector(panel.getAttribute('href'));
                if (isAllExpanded) {
                    panel.classList.remove('collapsed');
                    panel.setAttribute('aria-expanded', 'true');
                    target.classList.add('in');
                    target.setAttribute('aria-expanded', 'true');
                    target.style.height = 'auto';
                } else {
                    panel.classList.add('collapsed');
                    panel.setAttribute('aria-expanded', 'false');
                    target.classList.remove('in');
                    target.setAttribute('aria-expanded', 'false');
                    target.style.height = '0px';
                }
            });
            
            toggleAllBtn.textContent = isAllExpanded ? '收起全部' : '展开全部';
        });
    }
    
    // 单个面板点击事件
    panels.forEach(panel => {
        panel.addEventListener('click', function() {
            const isExpanded = this.getAttribute('aria-expanded') === 'true';
            this.classList.toggle('collapsed');
            this.setAttribute('aria-expanded', !isExpanded);
            
            const target = document.querySelector(this.getAttribute('href'));
            target.classList.toggle('in');
            target.setAttribute('aria-expanded', !isExpanded);
            target.style.height = isExpanded ? '0px' : 'auto';
            
            // 旋转加号图标
            const icon = this.querySelector('i');
            icon.style.transform = isExpanded ? 'rotate(0deg)' : 'rotate(45deg)';
        });
    });
});
</script>

<?php
// 加载页脚
get_footer();

效果（二）

图片[3]-zibll子比主题文章归档美化：可视化文章归档新体验[zibll子比美化]-狸狸库 - 网络资源收集与分享
<?php

/**
 * Template name: zibll-文章归档（2） Www.FuLiWu.Vip
 * Description:   A archives page for displaying article statistics and monthly updates.
 */

// 获取分类统计信息并缓存
function get_category_statistics() {
    return get_cached_data('category_stats', function() {
        $categories = get_categories(['hide_empty' => false]);
        $data = [];
        foreach ($categories as $category) {
            $data[] = ['value' => $category->count, 'name' => $category->name];
        }
        return json_encode($data);
    });
}

// 获取文章热力图数据并缓存
function get_heatmap_data() {
    return get_cached_data('heatmap_data', function() {
        global $wpdb;
        // 使用SQL查询一次性获取所有必要的数据，以减少循环中的函数调用
        $query = "
            SELECT DATE(post_date) AS date, COUNT(*) AS count
            FROM {$wpdb->posts}
            WHERE post_type = 'post' AND post_status = 'publish'
            GROUP BY DATE(post_date)
            ORDER BY date ASC
        ";
        $results = $wpdb->get_results($query, ARRAY_A);

        // 填充缺失的日期
        if (!empty($results)) {
            $start_date = $results[0]['date'];
            $end_date = end($results)['date'];
            $current_date = strtotime($start_date);
            $heatmap_data = [];

            while (date('Y-m-d', $current_date) <= $end_date) {
                $formatted_date = date('Y-m-d', $current_date);
                $count = 0;

                foreach ($results as $result) {
                    if ($result['date'] === $formatted_date) {
                        $count = $result['count'];
                        break;
                    }
                }

                $heatmap_data[] = [$formatted_date, $count];
                $current_date = strtotime('+1 day', $current_date);
            }

            return json_encode($heatmap_data);
        } else {
            return json_encode([]);
        }
    });
}

// 获取用户统计数据并缓存
function get_user_vip_statistics() {
    return get_cached_data('user_vip_stats', function() {
        // 如果有更高效的获取会员级别的方式，请替换zib_get_user_vip_level()
        $users = get_users(['fields' => ['ID']]);
        $user_counts = [
            'normal' => 0,
            'vip_1' => 0,
            'vip_2' => 0
        ];

        foreach ($users as $user) {
            $vip_level = zib_get_user_vip_level($user->ID);

            switch ($vip_level) {
                case 1:
                    $user_counts['vip_1']++;
                    break;
                case 2:
                    $user_counts['vip_2']++;
                    break;
                default:
                    $user_counts['normal']++;
                    break;
            }
        }

        $chart_data = [
            ['value' => $user_counts['normal'], 'name' => '普通用户'],
            ['value' => $user_counts['vip_1'], 'name' => _pz('pay_user_vip_1_name')],
            ['value' => $user_counts['vip_2'], 'name' => _pz('pay_user_vip_2_name')]
        ];

        return json_encode($chart_data);
    });
}

// 使用瞬态API缓存数据以减少数据库查询次数
function get_cached_data($transient_key, $fetch_callback) {
    if (false === ($data = get_transient($transient_key))) {
        $data = call_user_func($fetch_callback);
        set_transient($transient_key, $data, DAY_IN_SECONDS); // 缓存一天
    }
    return $data;
}

// 渲染小部件
function render_archives_widgets($type = 'day') {
    // 初始化变量
    $icons = [
        'day' => ['icon' => 'fa fa-birthday-cake', 'color' => 'c-blue-2', 'title' => '运营时间'],
        'post' => ['icon' => '#icon-post', 'color' => 'c-green', 'title' => '文章总量'],
        'comment' => ['icon' => '#icon-comment-color', 'color' => 'c-yellow', 'title' => '评论总量'],
        'user' => ['icon' => '#icon-user-color-2', 'color' => 'c-blue', 'title' => '注册用户']
    ];

    // 根据传入的参数类型获取统计数据并构建HTML
    switch ($type) {
        case 'day':
            // 尝试获取ID为1的用户注册时间作为运营时间起点
            $first_user = get_userdata(1);
            if ($first_user && !empty($first_user->user_registered)) {
                $start_time = strtotime($first_user->user_registered);
            } else {
                // 如果获取不到用户1的数据，则回退到站点设置时间或者当前时间
                $start_time = strtotime(get_option('siteorigin_setting_time')) ?: time();
            }
            $statistic = esc_html(floor((time() - $start_time) / (60 * 60 * 24))) . ' 天';
            break;
        case 'post':
            $statistic = esc_html(wp_count_posts()->publish);
            break;
        case 'comment':
            $approved_comments = get_comment_count()['approved'];
            $pending_comments = get_comment_count()['moderated'];
            $spam_comments = get_comment_count()['spam'];
            $trash_comments = get_comment_count()['trash'];
            $statistic = esc_html($approved_comments + $pending_comments + $spam_comments + $trash_comments);
            break;
        case 'user':
            $statistic = esc_html(count_users()['total_users']);
            break;
        default:
            return; // 如果类型不匹配，则不输出任何内容
    }

    // 输出HTML结构
    echo '<div style="flex: 1;" class="zib-widget flex1">';
    echo '<div class="muted-color em09 mb6">' . $icons[$type]['title'] . '统计</div>';
    echo '<div class="flex jsb">';
    echo '<span class="font-bold ' . $icons[$type]['color'] . ' em12">' . $statistic . '</span>';
    
    if (strpos($icons[$type]['icon'], '#') === 0) {
        // 使用SVG图标
        echo '<svg class="em14 ' . $icons[$type]['color'] . '" aria-hidden="true"><use xlink:href="' . $icons[$type]['icon'] . '"></use></svg>';
    } else {
        // 使用Font Awesome图标
        echo '<i class="' . $icons[$type]['icon'] . ' ' . $icons[$type]['color'] . ' em14"></i>';
    }
    
    echo '</div></div>';
}

// 在适当的地方调用这些函数以获取所需的数据
$json_data = get_category_statistics();
$json_heatmap_data = get_heatmap_data();
$json_chart_data = get_user_vip_statistics();

function Grace_archives_scripts() {
    // 注册并加载ECharts库
    wp_enqueue_script('echarts', 'https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js', array(), null, true);

    // 注册自定义JS文件
    wp_enqueue_script('archives-script', 'https://www.vxras.com/wp-content/themes/grace/assets/js/archives.js', array('echarts'), null, true);

    // 使用wp_localize_script将PHP变量传递给JavaScript
    $data_to_js = array(
        'vipChartData' => json_decode(get_user_vip_statistics(), true),
        'postChartData' => json_decode(get_category_statistics(), true),
        'heatmapData' => json_decode(get_heatmap_data(), true)
    );
    wp_localize_script('archives-script', 'chartData', $data_to_js);
}
add_action('wp_enqueue_scripts', 'Grace_archives_scripts');

// 获取头部样式
get_header();
$post_id = get_queried_object_id();
$header_style = zib_get_page_header_style($post_id);
?>

<!-- 页面主体 -->
<main class="container">
    <div class="content-wrap">
        <div class="content-layout">
            <?php if ($header_style != 1) { echo zib_get_page_header($post_id);} ?>
            <div class="theme-box radius8">
                <?php if ($header_style == 1) { echo zib_get_page_header($post_id);} ?>
                <article>
                        <div id="post" class="zib-widget" style="height:450px;"></div>
                        <div id="time" class="zib-widget" style="height:300px;"></div>
                        <div class="zib-widget">
                            <div class="title-theme mb20">文章归档<div class="pull-right em09 mt3"><a class="but c-blue radius" href="javascript:;" id="toggleAll">展开全部</a></div></div>
                            <div data-nav="posts" class="theme-box wp-posts-content">
                                <?php
                                    $previous_year = 0;
                                    $previous_month = 0;
                                    $collapse_id = 0;

                                    // 获取所有文章
                                    $myposts = get_posts('numberposts=-1&orderby=post_date&order=DESC');

                                    foreach ($myposts as $post) :
                                        setup_postdata($post);

                                        $year = mysql2date('Y', $post->post_date);
                                        $month = mysql2date('n', $post->post_date);

                                        if ($year != $previous_year || $month != $previous_month) :
                                            // 如果不是第一个月，则关闭上一个折叠面板
                                            if ($collapse_id > 0) {
                                                echo '</div></div></div>';
                                            }

                                            // 开始新的月份折叠面板
                                            $collapse_id++;
                                            echo '<div class="wp-block-zibllblock-collapse">';
                                            echo '<div class="panel" data-theme="panel" data-isshow="false">';
                                            echo '<div class="panel-heading collapsed" href="#collapse_' . esc_attr($collapse_id) . '" data-toggle="collapse" aria-controls="collapseExample" aria-expanded="false">';
                                            echo '<i class="fa fa-plus"></i><strong class="biaoti">' . get_the_time('Y年n月') . '</strong>';
                                            echo '</div>';
                                            echo '<div class="collapse" id="collapse_' . esc_attr($collapse_id) . '" aria-expanded="false" style="height: 0px;">';
                                            echo '<div class="panel-body">';
                                        endif;

                                        // 使用 add_shortcode_postsbox 函数输出单篇文章内容
                                        echo do_shortcode('');

                                        $previous_year = $year;
                                        $previous_month = $month;
                                    endforeach;

                                    // 关闭最后一个折叠面板（如果有）
                                    if ($collapse_id > 0) {
                                        echo '</div></div></div>';
                                    }

                                    wp_reset_query();
                                    wp_reset_postdata();
                                    ?>
                            </div>
                        </div>
                </article>

            </div>
            <?php comments_template('/template/comments.php', true); ?>
        </div>
    </div>
    
    <div class="sidebar">
        <div class="zib-widget" id="vip-user" style="height: 400px;"></div>
        <div class="flex ab jsb col-ml6 pointer">
            <?php render_archives_widgets('day'); ?>
            <?php render_archives_widgets('post'); ?>
        </div>

        <div class="flex ab jsb col-ml6 pointer">
            <?php render_archives_widgets('comment'); ?>
            <?php render_archives_widgets('user'); ?>
        </div>
    </div>
</main>

<script type="text/javascript">

</script>

<?php
// 加载页脚
get_footer();
© 版权声明
🎀 🌸
📜 版权声明：

本文为原创文章，版权归 狸狸库 所有。
未经许可，禁止转载。如需转载，请联系作者并获得授权。
授权方式：CC BY-NC-SA 4.0（署名-非商业性使用-相同方式共享）。

THE END
子比主题学习笔记网站优化
# 美化
喜欢就支持一下吧
点赞8 分享
狸狸的头像-狸狸库 - 网络资源收集与分享
绿联Pro 搭建rustdesk-api服务，为你的远程桌面程序添加Web管理能力-狸狸库 - 网络资源收集与分享
绿联Pro 搭建rustdesk-api服务，为你的远程桌面程序添加Web管理能力
绿联Pro 搭建rustdesk-api服务，为你的远程桌面程序添加Web管理能力
32天前 51
子比主题（zibll）热门小工具合集插件（最新修复版）-狸狸库 - 网络资源收集与分享
子比主题（zibll）热门小工具合集插件（最新修复版）
子比主题（zibll）热门小工具合集插件（最新修复版）
31天前 50
404页面美化-狸狸库 - 网络资源收集与分享
404页面美化
404页面美化
32天前 50
绿联Pro Docker创建专属桥接网络，用于容器间使用服务名或容器名访问-狸狸库 - 网络资源收集与分享
绿联Pro Docker创建专属桥接网络，用于容器间使用服务名或容器名访问
绿联Pro Docker创建专属桥接网络，用于容器间使用服务名或容器名访问
32天前 49
WordPress 子比主题美化教程：文章封面缩略图悬停展示动态LOGO-狸狸库 - 网络资源收集与分享
WordPress 子比主题美化教程：文章封面缩略图悬停展示动态LOGO
WordPress 子比主题美化教程：文章封面缩略图悬停展示动态LOGO
31天前 49
win10和Win11系统，打印机709错误，解决方案-狸狸库 - 网络资源收集与分享
win10和Win11系统，打印机709错误，解决方案
win10和Win11系统，打印机709错误，解决方案
32天前 48
相关推荐
绿联Pro 搭建rustdesk-api服务，为你的远程桌面程序添加Web管理能力-狸狸库 - 网络资源收集与分享
绿联Pro 搭建rustdesk-api服务，为你的远程桌面程序添加Web管理能力
绿联Pro 搭建rustdesk-api服务，为你的远程桌面程序添加Web管理能力
32天前 51
子比主题（zibll）热门小工具合集插件（最新修复版）-狸狸库 - 网络资源收集与分享
子比主题（zibll）热门小工具合集插件（最新修复版）
子比主题（zibll）热门小工具合集插件（最新修复版）
31天前 50
404页面美化-狸狸库 - 网络资源收集与分享
404页面美化
404页面美化
32天前 50
绿联Pro Docker创建专属桥接网络，用于容器间使用服务名或容器名访问-狸狸库 - 网络资源收集与分享
绿联Pro Docker创建专属桥接网络，用于容器间使用服务名或容器名访问
绿联Pro Docker创建专属桥接网络，用于容器间使用服务名或容器名访问
32天前 49
WordPress 子比主题美化教程：文章封面缩略图悬停展示动态LOGO-狸狸库 - 网络资源收集与分享
WordPress 子比主题美化教程：文章封面缩略图悬停展示动态LOGO
WordPress 子比主题美化教程：文章封面缩略图悬停展示动态LOGO
31天前 49
win10和Win11系统，打印机709错误，解决方案-狸狸库 - 网络资源收集与分享
win10和Win11系统，打印机709错误，解决方案
win10和Win11系统，打印机709错误，解决方案
32天前 48
评论 抢沙发

请登录后发表评论

    暂无评论内容