怎么用代码制作WordPress的归档页面
先看看效果,这个是我网站的归档页面:http://www.shenjieblog.com/archives
其实WordPress自带了一个归档的功能,但是只能显示在网页中的某一个部分,但是我想单独制作一个归档页面,因为看见很多网站都有这个,制作一个单 独的归档页面可以让访问者清晰的看到我的网站内容,可以让访问者轻松地找到自己想要的内容,我最开始在阳光盒子的网站看见了他网站的归档页面,感觉效果很 不错,于是想制作一个和他一样的效果,百度了一下,加上自己的修改和美化,弄了一下午终于做成了上图的效果,不多说,方法如下:
原创作者:zwwooooo
特点:
1. 按照年份、月份显示文章列表
2. 显示每月的文章数量(需要配合及Query)
3. 显示每篇文章的评论数
4. 使用 WordPress 原生函数实现数据调用
5. 这个存档函数会在数据库生成一个表 zww_archives_list 来做缓存,只在发表/修改文章时才更新,减少数据库查询。
6. 即使不使用第5点的数据库缓存功能也比以前的直接 SQL 语句省资源。
这两天稍微空闲点,看到博客草已人高,所以就找找以前有没有没解决的来访朋友评论提到的问题。然后想起我 2012 年写的《代码实现WordPress归档页面模板[WP原生函数篇]》,按照这篇文档折腾的朋友大部分都成功了,但是总是有部分朋友说出现文章排列不对或 者文章不全什么的,因为觉得大部分朋友都能成功,所以就一直没去分析。
今天分析了一下,应该是有些月份如果 0 篇文章就会出现问题,这是判断代码没写好的原因,于是自己想了一下,就重写了一个。
简单说下步骤,
1. 归档函数
下面代码放到主题文件 functions.php 里面,另外注意代码里面有中文,所以要把 functions.php 文件编码改为 UTF8 无 BOM 格式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
/* 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">' ; //输出年份
|
PS: 因为查询度有点大,所以有加数据库缓存,只在文章发表/修改时才会更新缓存数据,所以测试时,可以特意去后台点“快速编辑”文章然后点更新就可以更新缓存数据。
2. 复制一份主题的 page.php 更名为 archives.php,然后在最顶端加入:
1
2
3
4
5
|
<?php
/*
Template Name: Archives
*/
?>
|
在 archives.php 找到类似 ,在其下面加入如下代码
1
|
<?php zww_archives_list(); ?>
|
然后新建页面(如叫:归档),选择模版为 Archives
3. 给主题加载 jQuery 库,没有加载的,把下面这句扔到 functions.php 里面就行了。
1
|
wp_enqueue_script( 'jquery' );
|
4. jQuery 代码:
这次玩了逐个下拉/收缩效果,想着很好,但我博客感觉效果一般,因为文章太多了…如果文章不多,可以把代码里面 2 个 (s-10<1)?0:s-10 改为 s ,效果会好看点。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
( 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 并找到 ,在其下面加上
1
|
<script type= "text/javascript" >上面那段 jQuery 代码</script>
|
因为是放在主题的 the_content() 下面,所以会默认使用主题写好的 h3 ul li 格式,如果要更加有特色,那么就要自己去修改 css 了
4. css根据需要写,不写也可以的。HTML结构:
1
2
3
4
5
6
7
8
9
10
11
|
<div id= "archives" >
<p>[<a id= "al_expand_collapse" href= "#" >全部展开/收缩</a>] <em>(注: 点击月份可以展开)</em></p>
<h3 class = "al_year" >'年份</h3>
<ul class = "al_mon_list" >
<li><span class = "al_mon" >月份<em> (本月文章数量)</em></span>
<ul class = "al_post_list" >
<li>号数: <a href= "文章链接" >文章标题</a> <em>(评论数量)</em></li>
</ul>
</li>
</ul>
</div>
|
上面是原文,现在我来说说我的总结补充和修改:
1.首先说说上面有些不详细的步骤:
(1):第二步:原文说的复制page.php更名为 archives.php意 思就是先进入cpanel面板里面把page.php这个页面先下载下来(路径一般是public_html/wp-content/themes/【你 主题的名字】这个目录中),然后重命名为archives.php,然后不要修改直接上传到cpanel面板和page.php页面相同的目录中,(之所 以说不要修改直接上传到cpanel面板中再修改是因为涉及到UTF-8的编码问题,为了避免出错就上传后再修改),然后按照原文所说的修改。
(2):第二步:原文说的新建页面(如叫:归档),选择模版为 Archives意 思就是在你上传了archives.php并修改好之后,在WordPress后台中去新建一个页面,然后在新建的时候在右边选项中选择模板为 Archives,然后内容不需要填写,可以修改一下固定链接让其好看一点,比如我的固定链接是http://www.shenjieblog.com /archives,如图:
(3):第四步:原文作者其实没有给出作者自己的CSS效果代码,但是我谷歌到了一篇文章中给出了原文作者的那种CSS效果,然后之后我直接把那些CSS 代码复制到了我的style.css文件最下面,但是出现了两个问题:一是归档页面最上面的“全部展开/收缩”按钮看不见了,想了好久,没想出原因,后来 打开审查元素,发现其实那个其实还在,只是因为和我的主题有一些冲突,其实说白了就是位置错位了,
于是我删除了两行代码就解决了;还有一个问题就是可能也是因为我主题的自带的ul标签效果和我现在设置的有冲突,导致我ul前面的小方块没有去掉,于是我 有手动添加了一行代码解决了。然后后来我发现字体太小了,颜色也不好看,我后来又在阳光盒子中看见他的归档页面就是我想要的效果,就是本文最上面的图片那 种效果,而且我和他使用的主题也都是一样的,所以我就想说看看他的CSS是什么样的,最开始的时候我不知道怎么查看他的那个CSS,我不可能通过审查元素 看,所以后来我想到了一个方法,直接把他的style.css文件下载下来,怎么下载呢?直接查看源代码,他的源代码很乱,
没关系。我把他的代码全部复制然后粘贴到Editplus中,你也可以用记事本,然后快捷键是ctrl+F,查找,输入css然后查找,直到找到下面这 种字样就代表这个是他使用的css样式(一般都在最上面,很好找的),注意有时候不止一个,然后知道这个的大体位置之后就在源代码中去查找,找到之后右 键,然后复制下载链接,复制到迅雷中去下载就可以把他的CSS文件下载下来,如果你像我一样使用Editplus的话可以直接在Editplus中右键, 然后复制下载链接,
这个就是我下载下来的文件,
可以用记事本打开然后根据我上面写的那个HTML结构查找相应的代码,快捷键是ctrl+F,也就是输入archives然后查找,
找到之后复制那些代码到自己后台的style.css文件的最后就可以了,然后可以根据自己的想法修改。
然后我现在我贴出我修改的代码,修改的部分会有注释,然后你们如果要用的话也可以自己修改一下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
#archives {
position: relative;
/*top: -60px;
left: 150px;*/ /*原文这两行代码就是影响我最上面“全部展开/收缩”效果的,我删除了这个*/
}
#archives h3 {
margin-bottom: 0;
padding: 0 15px;
border-bottom: 1px solid #ddd;
font-size: 20px; /*这个字体大小和下面的我都做了一些修改*/
font-weight: 400;
text-align: center;
letter-spacing: 5px
}
#archives ul {
list-style: none;
margin: 0 30px;
padding: 10px 0 20px 10px;
border-left: 1px solid #ddd;
font-size: 18px
}
#archives li {
list-style: none; /*这一行代码是我自己添加的,不加这个就会出现ul标签前面的黑色小方块,很难看*/
position: relative;
line-height: 30px
}
#archives ul ul {
margin: -15px 0 0 0;
padding: 15px 0 10px 0
}
#archives ul ul li {
padding: 0 0 0 15px
}
#archives ul ul li:before {
content: "" ;
position: absolute;
left: 0;
top: 10px;
border-top: 5px dashed transparent;
border-bottom: 5px dashed transparent;
border-left: 10px solid #ddd
}
#al_expand_collapse {
display: inline-block;
line-height: 24px;
padding: 0 10px;
color: #fff;
font-size: 12px;
text-decoration: none;
background: linear-gradient(to bottom, #4caf50 20%, #388e3c 80%) repeat scroll 0 0 transparent; /*这个颜色和下面的我都做了一些修改*/
background: -webkit-linear-gradient(to bottom, #4caf50 20%, #388e3c 80%) repeat scroll 0 0 transparent
}
#al_expand_collapse:hover {
background: linear-gradient(to bottom, #388e3c 20%, #4caf50 80%) repeat scroll 0 0 transparent;
background: -webkit-linear-gradient(to bottom, #388e3c 20%, #4caf50 80%) repeat scroll 0 0 transparent
}
#archives em {
padding-left: 5px;
font-size: 12px;
color: #777
}
#archives .al_mon {
padding-left: 5px;
font-size: 14px;
font-weight: 700
}
#archives .al_mon:after {
content: "" ;
position: absolute;
left: -10px;
top: 15px;
width: 10px;
height: 1px;
background: #ddd
}
#archives .al_mon em {
font-size: 12px;
font-weight: 400
}
|
把上面这些代码复制到自己WordPress外观——菜单——编辑——style.css文件的最底部即可。然后刷新一下就可以了。
PS:注意如果刷新之后没有效果的话可能是因为浏览器的缓存,关闭浏览器之后清除一下缓存再试就可以了,因为我遇到了这个问题,所以提醒一下大家。
原文网址:http://zww.me/wordpress-archive-page-template-wp-primary-function-2014-edition.z-turn
CSS代码参考网址:http://www.erro.cn/archives/3856.html
转载于:https://www.cnblogs.com/shenjieblog/p/5061237.html
怎么用代码制作WordPress的归档页面相关推荐
- Css打造伸缩时间轴样式的WordPress归档页面archive.php
archive.php文件 又称文章归档页面.在WordPress中,文章归档页面是一个非常重要的页面,特别是当你的wordpress网站文章很多的时候,它将文章以年月日的分类方式对文章进行归类,可以 ...
- 如何制作wordpress短代码
如何制作WordPress短代码 大家好,这是我的第一次在CSDN发布博客,我是个新手,今天我写的是如何制作wordpress短代码,第一次献丑,请多多指教. A. 短代码和普通 HTML的编写形 ...
- Wordpress在新建页面加入谷歌广告代码
原文链接:Wordpress在新建页面加入谷歌广告代码 这篇文章讲述的是如何在Wordpress的新建页面加入谷歌Adsence生成的代码,新建页面的可以通过小工具固定在导航栏,比如新建一个" ...
- 404 html代码,不懂代码,如何制作漂亮的404页面【新手简易教程】
404是用户在访问页面时,搜索引擎常返回的状态码,常见的还有200,301,302,500等.搜索引擎通过http状态码识别网页状态,404状态码,常指所访问的页面不存在或已被删除. 404页面,是用 ...
- ghost里html文件怎么打开,Ghost配置5——添加归档页面
用了一个来月,总体来讲Ghost是令人满意的.虽然界面可配置化程度不如WordPress,但一些小的功能定制起来也非常容易. 例如添加一个归档页面. 添加静态页面 在ghost博客中,每一个发表的文章 ...
- 无需代码使用WordPress在阿里云虚拟主机建站流程记录
前言 朋友自己开了个公司做农产品深加工,最近打算做一个企业官网,单纯的只是用作信息的展示,他问我大概需要花多少钱,之前花四千多做了一个微信公众号,之前一直在做移动端开发,对于建站也没怎么接触过,我说要 ...
- 如何制作基础认证钓鱼页面?
本文讲的是如何制作基础认证钓鱼页面?, 在之前的一篇文章中,我介绍了一款非常受欢迎的工具--Responder,它是一款强大并且简单易用的内网渗透神器.使用它的"基本身份验证"提示 ...
- 如何制作WordPress博客的图文操作指南
在2022年,制作博客要比以往任何时候都要容易,即使你是一个博客小白,对写代码或网页设计一窍不通. 只要稍加指导,再借助合适的工具,你就可以在30分钟之内创建并运行专属于自己的个人博客或专业博客. 但 ...
- 从零开始制作 WordPress 主题
从零开始制作 WordPress 主题其实不难,只要你从现在开始认真阅读这个教程,一步一步认真学习,你就会成为一个 WordPress 主题制作高手.至少你会修改现有主题. 网络上已经有很多关于制作 ...
最新文章
- 《Offer一箩筐》2W字总结面试套路14问——不给例子的教程都是耍流氓!!
- mybatis中(Oracle)关于insert时主键自动加1的使用方法
- java学习-http中get请求的非ascii参数如何编码解码探讨
- boost::hana::is_empty用法的测试程序
- VS2013找不到winres.h的解决办法
- c#中程序以管理员身份运行的三种办法
- springboot配置允许跨域访问
- 实现工具自由!开源的桌面工具箱
- P1616 疯狂的采药(python3实现)--80分
- 参加noip有必要先学python吗_参加 NOIP 需要学些什么,做哪些准备,用哪些书?...
- 插画在UI的应用体验,太美好了!这样的模板让你的用户更加喜欢!
- 【BZOJ-1097】旅游景点atr SPFA + 状压DP
- 【网络】路由器集成锐捷认证
- 路由器当交换机用的设置方法
- gcd函数(C/C++)
- 中国域名8大玩家传奇故事
- MindManager教你做一份完美的笔记
- 《二》STM32时钟使能及应用总结
- 《手把手教你移植InfoNES(到HANKER-LM4F232)》
- node 热更新代码,无需每次重启命令
热门文章
- SDWebImage的使用说明
- ActionBar之style出现Cannot resolve symbol 'Theme' 错误
- (转)MFC技巧学习五
- C语言计算分段函数pta,PTA浙大版《C语言程序设计(第3版)》题目集 练习2-11 计算分段函数[2] (10分)...
- mysql my.cnf在哪里_my.cnf配置文件在哪
- python中对象的概念是什么_简述Python中的面向对象编程的概念
- windows系统服务器添加ssl证书
- 使用React和Tailwind CSS搭建项目框架
- 产品认知:真正厉害的产品经理,都是“本质思维”的高手
- python如果选择不在列表里_Python-list.remove(x)x不在列表中