2
免插件实现WordPress文章归档页面
source link: https://www.shephe.com/2023/07/no-pluglin-wordpress-archive-page/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
虽说Web已经日薄西山，流量式微，但作为自己的一亩三分地偶尔看看还是不错的。于是这几日疯狂折腾现用的主题，包括代码修改及功能补齐，本文分享两个免插件实现WordPress文章归档页面的方法。
利用WordPress原生函数实现文章归档页面
此方式和代码来自国内知名博主@Zwwooooo，是一个经典的、简单的、广为流传的方式，我本人之前就用过，记录此处只是怕以后找不到代码。具体效果可以参考我的文章归档页面，或者Cyhour这个更改过样式表的页面。
默认样式
更改后的
文章归档主程序
将这段代码放进主题的function.php循环中，请注意因为有部分中文字符，所以你的代码格式必须为UTF-8。此程序会在WordPress数据库中创建一个归档页面的索引表，为了减小服务器压力，本程序的索引仅在文章发生更改后才重建。
/* Archives list v2014 by zwwooooo | https://zww.me */
function zww_archives_list() {
if( !$output = get_option('zww_db_cache_archives_list') ){
$output = '<div id="archives"><p><a id="al_expand_collapse" href="#">全部展开/收缩</a> <em>(注: 点击月份可以展开)</em></p>';
$args = array(
'post_type' => array('archives', 'post', 'zsay'),
'posts_per_page' => -1, //全部 posts
'ignore_sticky_posts' => 1 //忽略 sticky posts
);
$the_query = new WP_Query( $args );
$posts_rebuild = array();
$year = $mon = 0;
while ( $the_query->have_posts() ) : $the_query->the_post();
$post_year = get_the_time('Y');
$post_mon = get_the_time('m');
$post_day = get_the_time('d');
if ($year != $post_year) $year = $post_year;
if ($mon != $post_mon) $mon = $post_mon;
$posts_rebuild[$year][$mon][] = '<li>'. get_the_time('d日: ') .'<a target="_blank" href="'. get_permalink() .'">'. get_the_title() .'</a> <em>('. get_comments_number('0', '1', '%') .'条评论)</em></li>';
endwhile;
wp_reset_postdata();
foreach ($posts_rebuild as $key_y => $y) {
$y_i = 0; $y_output = '';
foreach ($y as $key_m => $m) {
$posts = ''; $i = 0;
foreach ($m as $p) {
++$i; ++$y_i;
$posts .= $p;
}
$y_output .= '<li><span class="al_mon">'. $key_m .' 月 <em>( '. $i .' 篇文章 )</em></span><ul class="al_post_list">'; //输出月份
$y_output .= $posts; //输出 posts
$y_output .= '</ul></li>';
}
$output .= '<h3 class="al_year">'. $key_y .' 年 <em>( '. $y_i .' 篇文章 )</em></h3><ul class="al_mon_list">'; //输出年份
$output .= $y_output;
$output .= '</ul>';
}
$output .= '</div>';
update_option('zww_db_cache_archives_list', $output);
}
echo $output;
}
function clear_db_cache_archives_list() {
update_option('zww_db_cache_archives_list', ''); // 清空 zww_archives_list
}
add_action('save_post', 'clear_db_cache_archives_list'); // 新发表文章/修改文章时创建一个独立的文章归档页面
在你的主题根目录或者类似page-templates这样的文件夹里边找一个page模板，复制一份并给予其一个新的文件名，将其头部修改成类似如下样式：
<?php
/*
Template Name: Archives Page
*
* @version 1.0
* @author 牧羊人
* @URI https://www.shephe.com/
*/然后找到此文件的正文处，将归档页面主程序function zww_archives_list()加进去后保存，比如：
<div id="grve-content" <?php impeka_grve_content_class(); ?>>
<div class="grve-content-wrapper">
<div id="grve-main-content">
<div class="grve-main-content-wrapper clearfix">
<div id="page-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php the_content(); ?>
<?php zww_archives_list(); ?>
<?php wp_link_pages(); ?>
</div>
</div>
</div>
<?php get_sidebar(); ?>
</div>
</div>最后在WordPress后台新建独立页面，模板选择为刚才建好的Archives Page。
Javascript和样式表
将如下js代码添加加载在jQuery库后面，比如你可以简单粗暴的直接把它放在footer.php中。其中的(s-10<1)?0:s-10用来控制收缩的时间，可以更改成s试试，据说效果会更好。至此你的文章归档页面已经初见成效，如果要把它弄好看一些，可能就需要更改部分css代码了，此处不表。
<script type="text/javascript">
(function ($, window) {
$(function() {
var $a = $('#archives'),
$m = $('.al_mon', $a),
$l = $('.al_post_list', $a),
$l_f = $('.al_post_list:first', $a);
$l.hide();
$l_f.show();
$m.css('cursor', 's-resize').on('click', function(){
$(this).next().slideToggle(400);
});
var animate = function(index, status, s) {
if (index > $l.length) {
return;
}
if (status == 'up') {
$l.eq(index).slideUp(s, function() {
animate(index+1, status, (s-10<1)?0:s-10);
});
} else {
$l.eq(index).slideDown(s, function() {
animate(index+1, status, (s-10<1)?0:s-10);
});
}
};
$('#al_expand_collapse').on('click', function(e){
e.preventDefault();
if ( $(this).data('s') ) {
$(this).data('s', '');
animate(0, 'up', 100);
} else {
$(this).data('s', 1);
animate(0, 'down', 100);
}
});
});
})(jQuery, window);
</script>时间轴样式的WordPress文章归档页面
这第二种方式其实更适用完全不会的新手小白，原作者@西部盒子将WordPress归档页面所需的完整代码集成在了一个文件中，并且可以作为插件适用，简单方便。真实效果查看这个页面：
这个程序可以实现按时间自动调用文章显示成时间轴效果，且支持按分页显示，也可按需排除特定分类。使用方式可以是将代码加入function.php中或者作为插件安装，插件按此下载后在后台去上传安装即可，代码如下：
<?php
/**
* Plugin Name: Wbox时间轴文章归档
* Author: 西部盒子
* Author URI: http://blog.wbox8.com
* Version: 1.2
* Plugin URI: http://wbox.taobao.com
* Description: 新建页面添加简码 <code>[wboxtimeline]</code>
*/
add_shortcode('wboxtimeline', 'wboxtimeline');
function wboxtimeline() {
$css = get_option('wb_time_line_css');
$html = <<<wbox
<style>
.wbcss-archive {
position: relative;
font-size: 14px;
color: rgba(0, 0, 0, 0.6);
}
.wbcss-archive:before {
content: "";
width: 3px;
background-color: rgba(0, 0, 0, 0.05);
position: absolute;
top: 0;
bottom: 0;
left: 100px;
}
.wbcss-archive h3{
border:0 !important;
}
h3.archive-year {
display: inline-block;
background-color: #fafafa;
border: 1px solid rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.44);
padding: 1px 0;
width: 120px;
margin-left: 40px;
text-align: center;
postion: relative;
border-radius: 3px;
margin-top: 30px;
margin-bottom: 10px;
position: relative;
}
h3.archive-month {
position: relative;
font-weight: 700;
margin:0 0 15px;
padding:0;
font-size: 16px;
line-height: 25px;
color: #999;
}
.archive-month:before,
.archive-month:after {
content: "";
background-color: #fff;
height: 19px;
width: 19px;
border-radius: 100%;
position: absolute;
left: 92px;
top: 3px;
}
.archive-month:after {
height: 15px;
width: 15px;
background-color: #eee;
left: 94px;
top: 5px;
}
.archive-month:hover:after {
background-color: #ec8c35;
}
.wbcss-ul {
margin:0 0 30px 100px !important;
margin-left: 100px !important;
margin-bottom: 30px !important;
}
.wbcss-ul .date {
margin-left: -80px;
width: 80px;
display: inline-block;
}
.wbcss-ul li {
margin:0 !important;
position: relative;
padding-left: 15px;
list-style: none !important;
}
.wbcss-ul li:before,
.wbcss-ul li:after {
content: "";
background-color: #fff;
height: 13px;
width: 13px;
border-radius: 100%;
position: absolute;
left: -5px;
top: 7px;
}
.wbcss-ul li:after {
height: 9px;
width: 9px;
background-color: #eee;
left: -3px;
top: 9px;
}
.wbcss-ul li:hover:after {
background-color: #ec8c35;
}
.wb-paged{
margin: 0;
padding: 0;
text-align: center;
}
.wb-paged a{
display: inline-block;
margin: 0 5px;
font-size: 14px;
color: #555;
line-height: 20px;
padding: 3px 10px;
background: #fff;
border: 1px #ddd solid;
}
.wb-paged a:hover{
background: #eee;
}
.wb-paged span{
display: inline-block;
margin: 0 5px;
font-size: 14px;
line-height: 20px;
color: #555;
padding: 0px;
}
{$css}
</style>
wbox;
$html .= '<div class="wbcss-archive">';
$paged = get_query_var('paged');
$args = array(
'post_type' => 'post',
'posts_per_page' => get_option('wb_time_line_showposts', 20),
'ignore_sticky_posts' => 1,
'category__not_in' => explode(',', get_option('wb_time_line_category_notin')),
'paged' => $paged ? $paged : 1,
);
$the_query = new WP_Query($args);
$posts_rebuild = array();
while ($the_query->have_posts()): $the_query->the_post();
$post_year = get_the_time('Y');
$post_mon = get_the_time('m');
$posts_rebuild[$post_year][$post_mon][] = '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a> <em>(' . get_comments_number('0', '1', '%') . ')</em></li>';
endwhile;
wp_reset_postdata();
foreach ($posts_rebuild as $key => $value) {
$output .= '<h3 class="archive-year">' . $key . '</h3>';
$year = $key;
foreach ($value as $key_m => $value_m) {
$output .= '<h3 class="archive-month">' . $year . ' - ' . $key_m . '</h3><ul class="wbcss-ul">';
foreach ($value_m as $key => $value_d) {
$output .= $value_d;
}
$output .= '</ul>';
}
}
$html .= $output;
$html .= '</div>';
$html .= wbox_paged_nav($the_query, $paged, 2);
return wbox_compress_html($html);
}
function wbox_paged_nav($query, $paged, $p = 2) {
$html = '';
$max_page = $query->max_num_pages;
if ($max_page > 1) {
if (empty($paged)) {
$paged = 1;
}
$html .= '<div class="wb-paged">';
if ($paged > $p + 1) {
$html .= wboxp_link(1, '最前页', '«');
}
if ($paged > 1) {
$html .= wboxp_link($paged - 1, '上一页', '‹');
}
if ($paged > $p + 2) {
$html .= '... ';
}
for ($i = $paged - $p; $i <= $paged + $p; $i++) {
if ($i > 0 && $i <= $max_page) {
if ($i == $paged) {
$html .= "<span class='page-numbers current'>{$i}</span>";
} else {
$html .= wboxp_link($i);
}
}
}
if ($paged < $max_page - $p - 1) {
$html .= '<span class="page-numbers">...</span>';
}
if ($paged < $max_page) {
$html .= wboxp_link($paged + 1, '下一页', '›');
}
if ($paged < $max_page - $p) {
$html .= wboxp_link($max_page, '最后页', '»');
}
$html .= '</div>';
}
return $html;
}
function wboxp_link($i, $title = '', $linktype = '') {
if ($title == '') {
$title = "第 {$i} 页";
}
if ($linktype == '') {
$linktext = $i;
} else {
$linktext = $linktype;
}
return "<a class='page-numbers' href='" . esc_html(get_pagenum_link($i)) . "' title='{$title}'>{$linktext}</a> ";
}
function wbox_compress_html($string) {
$string = str_replace("\r\n", '', $string); //清除换行符
$string = str_replace("\n", '', $string); //清除换行符
$string = str_replace("\t", '', $string); //清除制表符
$pattern = array(
"/> *([^ ]*) *</", //去掉注释标记
"/[\s]+/",
"/<!--[^!]*-->/",
"/\" /",
"/ \"/",
"'/\*[^*]*\*/'",
);
$replace = array(
">\\1<",
" ",
"",
"\"",
"\"",
"",
);
return preg_replace($pattern, $replace, $string);
}
//后台设置页面
function wbox_time_line_add_menu() {
add_menu_page('时间轴设置 - BY 西部盒子', '时间轴设置', 'edit_themes', 'wbox_time_line_setings', 'wbox_time_line_display_function', '', 999);
}
add_action('admin_menu', 'wbox_time_line_add_menu');
function wbox_time_line_display_function() {
$update = false;
if ($_POST['wb_time_line_showposts']) {
update_option('wb_time_line_showposts', trim($_POST['wb_time_line_showposts']));
update_option('wb_time_line_category_notin', trim($_POST['wb_time_line_category_notin']));
update_option('wb_time_line_css', trim($_POST['wb_time_line_css']));
$update = true;
}
?>
<div class="wrap" id="profile-page">
<?php if ($update) {
echo '<div class="notice notice-info"><p>更新成功</p></div>';
}
?>
<form method="post" name="wbox_seting" id="wbox_seting">
<h2>时间轴设置</h2>
<table class="form-table">
<tbody>
<tr class="form-field">
<th scope="row"><label for="wb_time_line_showposts">每页显示条数</label></th>
<td>
<input name="wb_time_line_showposts" type="text" id="wb_time_line_showposts" value="<?php echo get_option('wb_time_line_showposts'); ?>" style="max-width: 500px;" />
<p>不设置默认显示20条，设置为-1显示全部。</p>
</td>
</tr>
<tr class="form-field">
<th scope="row"><label for="wb_time_line_category_notin">要排除的分类</label></th>
<td>
<input name="wb_time_line_category_notin" type="text" id="wb_time_line_category_notin" value="<?php echo get_option('wb_time_line_category_notin'); ?>" style="max-width: 500px;" />
<p>多个分类ID请用英文逗号分开，请对照下面分类对照表进行设置。</p>
</td>
</tr>
<tr class="form-field">
<th scope="row"><label for="wb_time_line_css">额外的CSS样式</label></th>
<td>
<textarea name="wb_time_line_css" id="wb_time_line_css" rows="5" cols="30"><?php echo get_option('wb_time_line_css'); ?></textarea>
<p>自定义CSS区域，会在时间轴上方的CSS区域调用，前后不用添加style标签。</p>
</td>
</tr>
</tbody>
</table>
<?php submit_button('保存设置');?>
</form>
<h3>插件使用方法：</h3>
<p>新建一个页面，在内容区域输入简码： <code>[wboxtimeline]</code></p>
<h3>分类对照表：<small style="color: #e00">分类 - id</small></h3>
<style>.wb-cat{margin-right: 20px;background: #d2e9f3;padding: 5px}</style>
<p><?php
foreach (get_categories() as $cat) {
echo '<span class="wb-cat">' . $cat->cat_name . ' <code>' . $cat->cat_ID . '</code></span>';
}
?></p>
<p style="position: fixed;bottom: 20px;right: 20px;">时间轴插件由 <a href="https://blog.wbox8.com/" target="_blank">西部盒子</a> 提供</p>
</div>
<?php }使用方式是新建个页面，将程序短代码[wboxtimeline]扔进去，发布就行。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK