怎么用代码制作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

时间： 2024-10-27 05:39:20

怎么用代码制作WordPress的归档页面的相关文章

WordPress 主题教程：从零开始制作 WordPress 主题

看到一个WordPress蛮好的教程,挺适合初学者.分享一下: 创建 WordPress 主题其实不难,只要你从现在开始认真学习这个教程,从零一步一步开始,你就会成为一个 WordPress 主题制作高手,至少你会修改现有主题. 下面是一个从零开始制作 WordPress 主题的教程,它会一步一步教你如何制作 WordPress 主题. WordPress 主题教程:从零开始制作 WordPress 主题 WordPress 主题教程 #1:介绍 WordPress 主题教程 #2:模板文件和模

SharePoint 如何制作自动跳转页面

SharePoint 如何制作自动跳转页面 SharePoint制作自动跳转的页面非常简单,只要在页面上添加一个Web部件--内容编辑器,加入相应的js代码即可. 本文介绍如何制作自动跳转页面. 1. 新建ASPX页面,命名RedirectingPage. 2. 编辑页面,添加内容编辑器Web部件. 3. 编辑Web部件,选择编辑HTML源代码. 4. 输入js代码,点击确定,保存. 5. 在SharePoint站点首页编辑页面,输入"[["选择RedirectingPage,再输入&

使用 FineUI 制作简单的购物车页面（源代码免费下载，另附 24 张专业版截图）

起因 最初是一位 FineUI 网友对购物车功能的需求,需要根据产品单价和数量来计算所有选中商品的总价. 这个逻辑最好在前台使用JavaScript实现,如果把这个逻辑移动到后台C#实现,则会导致过多的AJAX请求而影响用户体验. 最终效果 准备数据 在生成页面之前,我们需要准备购物车的数据,这里只是简单的用表格来模拟数据: 1 protected DataTable GetCartDataTable() 2 { 3 DataTable table = new DataTable(); 4 ta

Wordpress 修改 Page 页面默认排序

默认 Wordpress 的 Page 页面是按照 Title 升序排序的,如果创建的页面很多,使用起来会很不方面,所以可以通过将以下代码添加到 functions.php 中,实现将 Page 页面按照 Date 倒序 // 将 Page 页面默认排序修改为按照 Date 倒序 function set_page_order_in_admin( $wp_query ) { global $pagenow; if ( is_admin() && 'edit.php' == $pagenow

silverlight visifire控件图表制作——silverlight 后台方法页面事件

1.返回事件 (1.返回silverlight页面,2.返回web页面) private void button_ClickBack(object sender, RoutedEventArgs e)        { 1.返回silverlight页面: this.Content = new BeginControlChart(sTNameClick, strReportDate, false);//增加个参数表名 2.返回web页面 HtmlWindow html = HtmlPage.Wi

利用SPServices制作纯静态sharepoint页面

SPServices非常强大,利用SPservices,一个纯静态的页面都可以呈现Sharepoint网站所有信息. 以下例子仅供参考: 1.取得某个网站某张列表下信息 //判断是否是新信息 function IsNew(created) { var today = new Date(); created = created.substring(0, 10).replace("-", "/"); var a = (Date.parse(today) - Date.p

python代码制作configure文件

在lua中,一直用lua作为config文件,或承载数据的文件 - 好处是lua本身就很好阅读,然后无需额外写解析的代码,还支持在configure文件中读环境变量,条件判断等. 在lua中通过loadfile, setfenv实现) python: cat config.py bar = 10 foo=100 cat python_as_config.py: ns = {} execfile('config.py', ns) print "\n".join(sorted(dir(ns

WordPress 标签Tags页面制作方法

Wordpress自带着wp_tag_cloud()函数,但只在页面侧边显示往往就不够了.需要一个单页来放所有的Tags p.s.在搜索引擎优化SEO上,百度似乎对关键词TAGS更为偏爱 其实就是撰写一个新页面,它要应用一个名为tags.php的自定义模板. tags.php的内容如下 复制代码 代码如下: <?php /* Template Name: Tags */ ?> <?php get_header(); ?> <?php get_sidebar(); ?>

大学生简单网页div+css网页纯手写代码制作html静态页面切图排版

了解下下+2425691680 原文地址:http://blog.51cto.com/13919851/2167944