修改PIX主题 把专题页面变为归档页面
本文是《技术相关（共39篇）》目录的第 36 篇。阅读本文前，建议先阅读本文前3篇文章：
这两天看了沉沦兄的两篇文章《多了一个笔记归档》和《归档页面展开收缩功能》感觉受益匪浅。现在使用的PIX没有归档功能，只有一个专题页面非常的鸡肋。就想着把专题页面改成带展开收缩功能的归档页面。
试了试沉沦兄的代码，可惜主题不一样，里面的代码和变量不能通用。忽然发现以前我写过一个《给自己的网站加一个作者主页功能》的文章，怎么看怎么合适，就准备把它升级下改成自己理想的归档页面。
先看下改造后的演示：档案馆
话说原作的专题是这样的，并排2组，每组只能显示3篇文章。
经过我的一系列改造，变成了一排一组，每组显示10篇文章。
但这也仅仅是只显示文章而已。本站除了文章，还有片刻，也就是说说，更有和网友互动的评论。
改造后的代码比原来作者页面代码的不同如下：
1、作者代码是多用户作者代码，适合开放注册的网站使用。改造后变为只显示网站管理员的单用户页面。
2、文章、片刻和评论均加入展开折叠功能，默认当月不折叠，展开折叠项统计当月发布的文章、片刻及评论数量。
3、文章、片刻和评论均加入日期时间，评论显示回复某篇文章或片刻下某网友的评论。
改造开始：备份pix/page/column.php，用以下代码进行替换。
[reply]
<?php
/**
* Template name: 档案馆
*/
get_header(); ?>
<?php
// 直接设置管理员ID为1，这里根据管理员实际ID进行修改。
$user_id = 1;
$curauth = get_userdata($user_id);
// 获取管理员发布的文章数量
$post_count = count_user_posts($user_id);
// 获取管理员发布的评论数量
$comment_count = get_comments(array(
'user_id' => $user_id,
'count' => true,
));
// 获取管理员发布的片刻
$moment_args = array(
'author' => $user_id,
'post_type' => 'moment',
'post_status' => 'publish',
'posts_per_page' => -1,
);
$moment_query = new WP_Query($moment_args);
// 获取管理员发布的评论
$comments_args = array(
'user_id' => $user_id,
'status' => 'approve',
);
$comments = get_comments($comments_args);
// 用于存储按年月分组的文章数据
$articles_by_year_month = array();
// 用于存储按年月分组的片刻数据
$moments_by_year_month = array();
// 用于存储按年月分组的评论数据
$comments_by_year_month = array();
// 提取一个函数用于按年月分组数据
function groupDataByYearMonth($query, &$dataArray, $getTitleFunc, $getContentFunc = null, $getLinkFunc = 'get_permalink') {
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$post_date = get_the_date('Y-m-d H:i:s'); // 获取完整的发布日期时间
$post_date_formatted = '<span style="font-size: 12px; color: gray;">（'. get_the_date('Y-m-d H:i:s'). '）</span>'; // 格式化日期时间样式
$post_date_short = get_the_date('Y-m');
if (!isset($dataArray[$post_date_short])) {
$dataArray[$post_date_short] = array();
}
$data = array(
'title' => $getTitleFunc(),
'link' => $getLinkFunc(),
'date' => $post_date_formatted // 添加发布日期到数据数组
);
if ($getContentFunc) {
$content = $getContentFunc();
$text = wp_strip_all_tags($content);
$data['text'] = $text;
}
$dataArray[$post_date_short][] = $data;
}
}
}
// 遍历文章数据并按年月分组
$author_posts = new WP_Query(array(
'author' => $user_id,
'post_type' => 'post',
'post_status' => 'publish',
"posts_per_page" => -1,
));
groupDataByYearMonth($author_posts, $articles_by_year_month, 'get_the_title');
// 遍历片刻数据并按年月分组
groupDataByYearMonth($moment_query, $moments_by_year_month, 'get_the_title', 'get_the_content');
// 遍历评论数据并按年月分组
if ($comments) {
foreach ($comments as $comment) {
$comment_date = get_comment_date('Y-m', $comment->comment_ID);
if (!isset($comments_by_year_month[$comment_date])) {
$comments_by_year_month[$comment_date] = array();
}
$comments_by_year_month[$comment_date][] = $comment;
}
}
// 获取当前年份和月份
$current_year_month = date('Y-m');
?>
<style>
#content{margin:20px;background-color:#f7f7f7;padding:20px;}h2{font-size:18px;margin-bottom:10px;color:#333;text-align:center;font-weight:bold;}p{margin-bottom:5px;color:#333;}ul{list-style-type:none;padding-left:0;}.content-item{border:1px dashed #ccc;padding:10px;background-color:#fff;margin-bottom:10px;}a{text-decoration:none;color:#333;}.post-title{color:red;}.comment-text{color:red;word-wrap: break-word;white-space: normal;overflow-wrap: break-word; }.moment-title{color:red;}.moment-content{color:blue;}.tab{overflow:hidden;background-color:#f1f1f1;display:flex;border-top-left-radius:10px;border-top-right-radius:10px;}.tab a{flex:1;text-align:center;padding:14px 16px;text-decoration:none;color:#666;background-color:#f1f1f1;border:1px solid #ccc;border-bottom:none;border-top-left-radius:10px;border-top-right-radius:10px;}.tab a.active{background-color:#ccc;color:#333;font-weight:bold;border-bottom-color:#f1f1f1;}.tab a:hover{background-color:#ddd;}.tabcontent{display:none;padding:20px;background-color:#f9f9f9;border:1px solid #ccc;}.year-month-heading{cursor:pointer;background-color:#e5e5e5;padding:5px;margin-bottom:5px;}.year-month-content{display:block;}.collapsed{display:none;}.count-badge{background-color:#ccc;color:#fff;padding:2px 5px;border-radius:3px;margin-left:5px;}.comment-extra-info{font-size:12px;color:gray;display:block;}.comment-username{color:red;}
</style>
<div id="content" class="narrowarchive">
<div class="tab">
<a href="javascript:void(0);" class="tablinks active" onclick="openTab('articles')">文章(<?php echo $post_count;?>)</a>
<a href="javascript:void(0);" class="tablinks" onclick="openTab('moments')">片刻(<?php echo $moment_query->post_count;?>)</a>
<a href="javascript:void(0);" class="tablinks" onclick="openTab('comments')">评论(<?php echo $comment_count;?>)</a>
</div>
<div id="articles" class="tabcontent" style="display: block;">
<?php foreach ($articles_by_year_month as $year_month => $articles) :
// 判断是否为本年本月，决定是否折叠
$is_collapsed = ($year_month!= $current_year_month);
$collapse_class = ($is_collapsed)? 'collapsed' : '';
?>
<div class="year-month-heading" onclick="toggleCollapse('articles-<?php echo $year_month;?>')">
<?php echo $year_month;?>
<span class="count-badge"><?php echo count($articles);?></span>
</div>
<div id="articles-<?php echo $year_month;?>" class="year-month-content <?php echo $collapse_class;?>">
<ul>
<?php foreach ($articles as $article) :?>
<li class="content-item">
<a href="<?php echo $article['link'];?>" rel="bookmark" title="<?php echo $article['title'];?>">
<span class="post-title"><?php echo $article['title'];?></span>
</a>
<?php echo $article['date'];?>
</li>
<?php endforeach;?>
</ul>
</div>
<?php endforeach;?>
</div>
<div id="moments" class="tabcontent">
<?php foreach ($moments_by_year_month as $year_month => $momments) :
// 判断是否为本年本月，决定是否折叠
$is_collapsed = ($year_month!= $current_year_month);
$collapse_class = ($is_collapsed)? 'collapsed' : '';
?>
<div class="year-month-heading" onclick="toggleCollapse('moments-<?php echo $year_month;?>')">
<?php echo $year_month;?>
<span class="count-badge"><?php echo count($momments);?></span>
</div>
<div id="moments-<?php echo $year_month;?>" class="year-month-content <?php echo $collapse_class;?>">
<ul>
<?php foreach ($momments as $moment) :?>
<li class="content-item">
<?php if ($moment['title']) :?>
<?php echo '<a href="'. $moment['link']. '"><span class="moment-title">'. '《'. $moment['title']. '》'. '</span></a>';?>
<?php else :?>
<?php echo '<a href="'. $moment['link']. '"><span class="moment-content">'. wp_trim_words($moment['text'], 30, '...'). '</span></a';?>
<?php endif;?>
<?php echo $moment['date'];?>
</li>
<?php endforeach;?>
</ul>
</div>
<?php endforeach;?>
</div>
<div id="comments" class="tabcontent">
<?php foreach ($comments_by_year_month as $year_month => $comments) :
// 判断是否为本年本月，决定是否折叠
$is_collapsed = ($year_month!= $current_year_month);
$collapse_class = ($is_collapsed)? 'collapsed' : '';
?>
<div class="year-month-heading" onclick="toggleCollapse('comments-<?php echo $year_month;?>')">
<?php echo $year_month;?>
<span class="count-badge"><?php echo count($comments);?></span>
</div>
<div id="comments-<?php echo $year_month;?>" class="year-month-content <?php echo $collapse_class;?>">
<ul>
<?php foreach ($comments as $comment) :
$comment_text = get_comment_text($comment->comment_ID);
$comment_link = get_comment_link($comment);
$comment_date = get_comment_date('Y-m-d H:i:s'); // 获取评论发布日期
$comment_date_formatted = '<span style="font-size: 12px; color: gray;">（'. $comment_date. '）</span>'; // 格式化日期时间样式
// 判断是否为回复评论
$is_reply = ($comment->comment_parent > 0);
if ($is_reply) {
$parent_comment = get_comment($comment->comment_parent);
$parent_post_id = $parent_comment->comment_post_ID;
$parent_post_title = get_the_title($parent_post_id);
$replied_to_user = get_comment_author($comment->comment_parent);
$comment_text_with_info = $comment_text. $comment_date_formatted. '<br><span style="font-size: 12px; color: gray;">---</span><span style="font-size: 12px; color: gray;">回复《'. $parent_post_title. '》中</span><span style="font-size: 12px; color: red;">'. $replied_to_user. '</span><span style="font-size: 12px; color: gray;">的评论</span>';
} else {
$comment_text_with_info = $comment_text;
}
?>
<li class="content-item">
<a href="<?php echo $comment_link;?>">
<span class="comment-text"><?php echo $comment_text_with_info;?></span>
</a>
</li>
<?php endforeach;?>
</ul>
</div>
<?php endforeach;?>
</div>
</div>
<script>
function openTab(tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
document.querySelector(`[onclick="openTab('${tabName}')"]`).className += " active";
}
function toggleCollapse(id) {
var element = document.getElementById(id);
if (element.classList.contains("collapsed")) {
element.classList.remove("collapsed");
} else {
element.classList.add("collapsed");
}
}
</script>
<?php get_footer();?>[/reply]
改造结束。
您已阅读完《技术相关（共39篇）》目录的第 36 篇。请继续阅读本文后3篇文章：
Huo
大佬算是给 PIX 彻底玩明白了，后边还真得来这多学习学习，改造 PIX。哈哈
似水流年
学习不敢当，相互交流一下。👏
沉沦
这个好啊，我也考虑下，把归档页面合并，用选项卡切换。
似水流年
切换按钮和响应的js代码，我感觉是通用的。
刘郎
改好以后 效果确实不错 不堆积还可以展开查看
似水流年
现在有一个小BUG，由于是改的主题自带的页面，前台显示的标题并非后台自定义的标题，而是显示新主题新征程，还没查找到是原主题哪里在控制。