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/,转载时烦请以链接形式注明原始出处。
声明:我们不销售主机,任何VPS主机均有跑路风险且需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!
🍄:Netflix 奈飞 YouTube 合租

使用 WordPress 内置 XML Sitemaps 替换 Google XML Sitemaps

内容是王道,但是有时候酒香也怕巷子深,向搜索引擎提交 sitemap 是快速提高网站收录的最好方法之一。老头一直使用 Google XML Sitemaps 插件自动生成 sitemap.xml 站点地图。 WordPress 5.5 版本起 内置 sitemap 功能 WordPress 5.5 版本之后,核心代码已经内置 XML Sitemaps 功能,只要访问:…

WordPress 5.0+ 禁用 Gutenberg & WordPress 5.8+ 禁用 Widget 块编辑器

2018.12.06,WordPress 5.0 发布,代号 Bebo。最大的亮(黑)点就是正式引入新的基于块(block-based)的编辑器 —— Gutenberg 编辑器,以及新的默认主题 —— Twenty Nineteen。 WordPress 5.0+ 禁用 Gutenberg 编辑器 第一时间升级,打开文章编辑,一股说不出的杯具感在心头……变化太大,心累…
浏览: 141 标签:  ,  ,  , 

Adobe Flash Player 去helper(Win10 完美恢复)

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

升级新版 Google AdSense 代码提升广告效果

2021年7月19日,Google AdSense 最近发布了新版 AdSense 代码。通过新版 AdSense 代码,AdSense 可以更早触发优化功能,从而提升网站上广告效果。新广告代码适用于自动广告和广告单元。 如何获取 Google AdSense 新版代码? 无需采取任何措施。在下次登录 AdSense 后,您将拥有对新广告代码的访…
浏览: 117

Comments:0

发表留言

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