WordPress 归档页面模板[WP原生函数实现2014版]

WordPress 归档页面模板,效果可参考 归档 页面。

教程来自 zww 大叔,下面是实现方法。

归档函数

下面代码放到主题文件 functions.php 里面,另外注意代码里面有中文,所以要把 functions.php 文件编码改为 UTF8 无 BOM 格式。

/* Archives list v2014 by zwwooooo | http://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' => 'post', //如果你有多个 post type,可以这样 array('post', 'product', 'news')
'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 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) {
$output .= '<h3 class="al_year">'. $key_y .' 年</h3><ul class="al_mon_list">'; //输出年份
foreach ($y as $key_m => $m) {
$posts = ''; $i = 0;
foreach ($m as $p) {
++$i;
$posts .= $p;
}
$output .= '<li><span class="al_mon">'. $key_m .' 月 <em> ( '. $i .' 篇文章 )</em></span><ul class="al_post_list">'; //输出月份
$output .= $posts; //输出 posts
$output .= '</ul></li>';
}
$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'); // 新发表文章/修改文章时

PS: 因为查询度有点大,所以有加数据库缓存,只在文章发表/修改时才会更新缓存数据,所以测试时,可以特意去后台点“快速编辑”文章然后点更新就可以更新缓存数据。

建立页面模板

复制一份主题的 page.php 更名为 archives.php,然后在最顶端加入以下代码:

<?php
/*
Template Name: Archives
*/
?>

在 archives.php 找到类似 ,在其下面加入如下代码

<?php zww_archives_list(); ?>

然后新建页面(如叫:归档),选择模版为 Archives

加载 jQuery 库

给主题加载 jQuery 库,没有加载的,把下面这句扔到 functions.php 里面就行了。

wp_enqueue_script('jquery');

jQuery 代码

这次玩了逐个下拉/收缩效果,想着很好,但我博客感觉效果一般,因为文章太多了...如果文章不多,可以把代码里面 2 个 (s-10<1)?0:s-10 改为 s,效果会好看点。

(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);

PS:不知道怎么写 js 文件然后调用的朋友就直接打开 header.php 并找到 ,在其下面加上

<script type="text/javascript"> jQuery </script>

因为是放在主题的 the_content() 下面,所以会默认使用主题写好的 h3 ul li 格式,如果要更加有特色,那么就要自己去修改 css 了。

原文:http://zww.me/wordpress-archive-page-template-wp-primary-function-2014-edition.z-turn

除非注明,沙唐桔文章均为原创,本文地址 https://cyhour.com/125/,转载时必须以链接形式注明原始出处。
声明:我们不销售主机,选主机需合法使用。任何主机需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!

LLStack 轻量、高性能 LiteSpeed+PHP+MySQL 安装 WordPress 体验 HTTP/3

原本偷懒,想买个便宜虚拟主机体验一下 LiteSpeed 和 HTTP/3,无奈大意了,最终并没有体验到。记得米饭粑有个 LLStack 可以快速搭建 LiteSpeed 建站环境,就拿闲置鸡试了一下。 温馨提示:LLStack 仅适用于 RHEL 7 系操作系统及其衍生版,RHEL7、CentOS7、OracleLinux7、CloudLinux 7等,RHEL 8 系…
浏览: 28 标签:  ,  ,  ,  , 

本想买个虚拟主机体验一下 LiteSpeed 和 HTTP/3

去去年就看到博友 KN007 小试 HTTP3,今天看到一个博友虚拟主机居然上 HTTP3 了,看完评论发现是老薛主机,虚拟主机居然上 LiteSpeed 了,腻害啊。 而2021年跨年活动还没结束,最便宜的美国主机¥78/两年,没多想就买了。买完,看了几圈,才发现并不是 LiteSpeed,只是 Apache,再找找,目前也…
浏览: 116 标签:  ,  , 

WordPress 官方主题简单优化增强

截至 2021-01-16,WordPress 一共发布了 13 款主题:Twenty Twenty-One、Twenty Twenty、Twenty Nineteen、Twenty Seventeen、Twenty Sixteen、Twenty Fifteen、Twenty Fourteen、Twenty Thirteen、Twenty Twelve、Twenty Eleven、Twenty Ten、Classic、Default。 个人偏向于双栏并且侧栏在右…

Adobe Flash Player 34.0.0.92 及可用 Flash Player 模拟扩展 [Windows]

Adobe 在2020年12月31日后将不再支持 Adobe Flash Player,从2021年1月12日开始,阻止 Flash 内容在 Flash Player 中运行。截图 虽然不喜欢 Adobe Flash Player,但是有些网站目前仍然离不开 Adobe Flash Player,过渡解决方法是:安装中国特供版 Adobe Flash Player 或者安装网友修改 Adobe Flash…
浏览: 130

Comments:0

发表留言

Vultr 送$100,搬瓦工年付最低$49,优惠码 BWH3HYATVBJW,更多推荐VPS信息