怎么用代码制作WordPress的归档页面

先看看效果,这个是我网站的归档页面:http://www.shenjieblog.com/archives

其实WordPress自带了一个归档的功能,但是只能显示在网页中的某一个部分,但是我想单独制作一个归档页面,因为看见很多网站都有这个,制作一个单 独的归档页面可以让访问者清晰的看到我的网站内容,可以让访问者轻松地找到自己想要的内容,我最开始在阳光盒子的网站看见了他网站的归档页面,感觉效果很 不错,于是想制作一个和他一样的效果,百度了一下,加上自己的修改和美化,弄了一下午终于做成了上图的效果,不多说,方法如下:

原文:
折腾功能:代码实现WordPress归档页面模板[WP原生函数篇]
原创作者: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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/375255.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【web必知必会】—— 使用DOM完成属性填充

本文介绍了使用DOM的简单方法实现动态加载图片的功能。 前文介绍了&#xff1a; 1 DOM四个常用的方法 首先看一下效果&#xff0c;初始时是一个相册&#xff0c;可以点击导航&#xff0c;切换图片&#xff0c;并切换下方显示内容&#xff1a; 点击house&#xff0c;可以动态的切…

使用 WordPress 主题制作的20个精美网页

WordPress 是一款个人博客系统&#xff0c;并逐步演化成一款内容管理系统软件&#xff0c;它是使用 PHP 语言和 MySQL 数据库开发的。用户可以在支持 PHP 和 MySQL 数据库的服务器上使用自己的博客。这里给大家分享使用 WordPress 主题制作的20个精美网页。 您可能感兴趣的相关…

关于监听与控制设备旋转全解析(UIDeviceOrientationDidChangeNotification)

一类情况&#xff1a; 初始化app的方向&#xff0c;比如只支持横屏或者竖屏。下面举例只支持竖屏的案例 在app的属性里面手动设置 上面标注了该app支持的方向种类&#xff0c;要是在app里支持Portrait方向&#xff0c;还需要添加以下代码 二类情况&#xff1a; 上面的代码表明a…

标志寄存器FLAG

FLAG标志寄存器按位操作&#xff0c;FLAG是16位寄存器&#xff0c;第0位为CF标志第2位为PF标志... 如图(FLAG各标志位以及在DEBUG中对应的显示)&#xff1a;

powerdesigner低版本打开高版本方式为只读导致无法保存PD只读read-only-mode

由于版本号不一致 打开PD文件后提示&#xff1a; 点击【确定】后打开&#xff0c;点击【取消】后打不开 但打开后修改完毕保存提示&#xff1a; 解决办法&#xff1a; pdm文件实际上是个xml文件&#xff0c;直接用文本编辑器打开该文件修改版本号即可 把根节点最后的版本号改成…

数制学习笔记

数制的基本概念 一.数码 数制中表示基本数值大小的不同数字符号。例如&#xff0c;十进制有10个数码&#xff1a;0、1、2、3、4、5、6、7、8、9。二.基数 数制所使用数码的个数。例如&#xff0c;二进制的基数为2&#xff1b;十进制的基数为10。三.位权 数制中某一位上的1所表示…

invoke伪指令

通过反汇编helloworld对话框来看invoke伪指令 invoke是调用WinAPI的伪指令 把上一个helloworld对话框编译并连接成hello.exe然后用OD打开得到下图 前文说过ML.EXE编译invoke时会把invoke的参数PUSH入栈和一个CALL,在代码段中只有两个invoke指令 invoke MessageBox,NULL,offset …

百度地图API的第一次接触——自定义控件

1.定义一个控件类&#xff0c;即function function ZoomControl(){ // 设置默认停靠位置和偏移量 this.defaultAnchor BMAP_ANCHOR_TOP_LEFT; this.defaultOffset new BMap.Size(10, 10); } 2.通过JavaScript的prototype属性继承于BMap.Control ZoomControl.pr…

从代码里提取的测试需求

服务器端的测试&#xff0c;软件需求基本等于产品说明书&#xff0c;只有大概&#xff0c;没有详尽。再需求不充分的情况下&#xff0c;我们可以从哪些方面来挖掘测试需求呢&#xff1f; 现已知需求&#xff1a;服务器支持对客户端的版本升级&#xff0c;存在两种升级规则&…

Android Ant 和 Gradle 打包流程和效率对照

一、Ant 打包&#xff1a;&#xff08;下载ant、配置环境变量就不说了&#xff09; 1、进入命令行模式&#xff0c;并切换到项目文件夹。运行例如以下命令为ADT创建的项目加入ant build支持&#xff1a; android update project -p . -t "android-17" 2、build脚本默…

[bzoj1012](JSOI2008)最大数maxnumber(Fenwick Tree)

Description 现在请求你维护一个数列&#xff0c;要求提供以下两种操作&#xff1a; 1、 查询操作。语法&#xff1a;Q L 功能&#xff1a;查询当前数列中末尾L个数中的最大的数&#xff0c;并输出这个数的值。限制&#xff1a;L不超过当前数列的长度。 2、 插入操作。语法&…

javaScript转换日期合格式

javascript如何将时间日期转换为Date对象:有时候需要讲一个字符串型的时间日期转换为Date时间对象&#xff0c;下面就通过一个简单的实例提供一种解决方案&#xff0c;当然也是一种思路&#xff0c;可以进行一定的变通&#xff0c;以达到举一反三的效果。例如这里有一个时间日期…

奇怪吸引子---Dadras

奇怪吸引子是混沌学的重要组成理论&#xff0c;用于演化过程的终极状态&#xff0c;具有如下特征&#xff1a;终极性、稳定性、吸引性。吸引子是一个数学概念&#xff0c;描写运动的收敛类型。它是指这样的一个集合&#xff0c;当时间趋于无穷大时&#xff0c;在任何一个有界集…

Hibernate 基础配置及常用功能(二)

本章主要是描述几种经典映射关系&#xff0c;顺带比较Hibernate4.x和Hibernate5.x之间的区别。 一、建立测试工程目录 有关实体类之间的相互映射关系&#xff0c;Hibernate官方文档其实描述的非常详细&#xff0c;这里只提供几种常见映射。&#xff08;推荐4.3.11版本的 hibern…

YTU 2903: A--A Repeating Characters

2903: A--A Repeating Characters 时间限制: 1 Sec 内存限制: 128 MB提交: 50 解决: 30题目描述 For this problem,you will write a program that takes a string of characters,S,and creates a new string of characters,T,with each character repeated R times.That is,…

ADO连接ACCESS数据库

首先在StdAfx.h中加入 建立连接&#xff1a;(在xxApp文件中) 1 声明变量 2 建立连接 (1) AfxOleInit 初始化 OLE 为应用程序的支持。 BOOL AFXAPI AfxOleInit( ); 返回值 非零&#xff0c;如果成功;0&#xff0c;如果初始化失败&#xff0c;可能&#xff0c;因为安装该 OLE 系…

使用搜索栏过滤collectionView(按照首字母)

1.解析json数据NSDictionary *citiesDic [CoreJSONSerialization coreJSONSerialization:"cities"];NSDictionary *infor [citiesDic objectForKey:"infor"];NSArray *listItems [infor objectForKey:"listItems"]; 2.存储数据 for (NSDicti…

R软件中 文本分析安装包 Rjava 和 Rwordseg 傻瓜式安装方法四部曲

这两天&#xff0c;由于要做一个文本分析的内容&#xff0c;所以搜索了一天R语言中的可以做文本分析的加载包&#xff0c;但是在安装包的过程&#xff0c;真是被虐千百遍&#xff0c;总是安装不成功。特此专门写一篇博文&#xff0c;把整个心塞史畅快的释放一下。 ------------…

Windows下安装Python数据库模块--MySQLdb

## 1、下载MySQLdb [去官网](http://pypi.python.org/pypi/MySQL-python/) 下载对应的编译好的版本&#xff08;现在官网最新版本为1.2.5&#xff09;&#xff1a; MySQL-python-1.2.5.win32-py2.7.exe 得到1MB的安装文件 MySQL-python-1.2.5.win32-py2.7.exe ## 2、安装 以…

Java 理解CPU缓存(CPU Cache)

从Java视角理解系统结构连载, 关注我的微博(链接)了解最新动态 众所周知, CPU是计算机的大脑, 它负责执行程序的指令; 内存负责存数据, 包括程序自身数据. 同样大家都知道, 内存比CPU慢很多. 其实在30年前, CPU的频率和内存总线的频率在同一个级别, 访问内存只比访问CPU寄存器慢…