代码实现WordPress归档页面模板[WP原生函数篇]

  • 时间:
  • 浏览:2
  • 来源:5分快3官网平台_5分快3网投平台_5分快3投注平台_5分快3娱乐平台
作者:匿名 hihi 来源: 浏览: 2012-3-16 17:59:02 字号:大 中 小

[摘要]用WordPress 原生函数来实现归档页面的内容调用,可不需用使用WordPress 推荐的 WP_Query() 函数来调用所有文章,除了每月的文章数量无法直接调用到外,其它数据都可不需用实现。

  今天在制作另另另另一个 主题时,经常就想尝试下用 WordPress 原生函数来实现归档页面的内容调用。

  经过测试,我使用了 WordPress 推荐的 WP_Query() 函数来调用所有文章,除了每月的文章数量无法直接调用到外,其它数据都可不需用实现,确实可不需用借助另外的 WP 原生函数实现每月文章数量,但会 比较繁琐。统统有我另外想了个土最好的办法:我博客的存档页是用了 jQuery 来实现每月文章列表的伸缩效果,于是“每月文章数量显示”你会用 jQuery 来实现了。

  下面是过程和土最好的办法,有兴趣的许多人可不需用试试。

折腾功能:代码实现WordPress归档页面模板[WP原生函数篇]

原创作者:zwwooooo

特点:

1. 按照年份、月份显示文章列表

2. 显示每月的文章数量(需用配合及Query)

3. 显示每篇文章的评论数

4. 使用 WordPress 原生函数实现数据调用

5. 你这名 存档函数会在数据库生成另另另另一个 表 zww_archives_list 来做缓存,只在发表/修改文章时才更新,减少数据库查询。

6. 即使不使用第5点的数据库缓存功能也比完后 的直接 SQL 说说省资源。

在线演示效果:见博客存档页

效果图:

步骤:

1. 把下面的函数扔到所用主题的 functions.php 文件里边:(注意:导致 有中文,统统有要把 functions.php 文件转换为 UTF8 无 BOM 格式,不然中文会乱码)

/* Archives list by zwwooooo | http://zww.me */

function zww_archives_list() {

if( !$output = get_option('zww_archives_list') ){

$output = '<div id="archives"><p>[<a id="al_expand_collapse" href="#">完整展开/收缩</a>] <em>(注: 点击月份可不需用展开)</em></p>';

$the_query = new WP_Query( 'posts_per_page=-1' );

$year=0; $mon=0; $i=0; $j=0;

while ( $the_query->have_posts() ) : $the_query->the_post();

$year_tmp = get_the_time('Y');

$mon_tmp = get_the_time('m');

$y=$year; $m=$mon;

if ($mon != $mon_tmp && $mon > 0) $output .= '</ul></li>';

if ($year != $year_tmp && $year > 0) $output .= '</ul>';

if ($year != $year_tmp) {

$year = $year_tmp;

$output .= '<h3 class="al_year">'. $year .' 年</h3><ul class="al_mon_list">'; //输出年份

}

if ($mon != $mon_tmp) {

$mon = $mon_tmp;

$output .= '<li><span class="al_mon">'. $mon .' 月</span><ul class="al_post_list">'; //输出月份

}

$output .= '<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();

$output .= '</ul></li></ul></div>';

update_option('zww_archives_list', $output);

}

echo $output;

}

function clear_zal_cache() {

update_option('zww_archives_list', ''); // 清空 zww_archives_list

}

add_action('save_post', 'clear_zal_cache'); // 新发表文章/修改文章时

2. 克隆好友一份主题的 page.php 更名为 archives.php,但会 在最里边加入:

<?php

/*

Template Name: archives

*/

?>

但会 找到例如于 ,在其下面加入如下代码

<?php zww_archives_list(); ?>

进wp后台加带一新页面,在右侧栏模板选取 archives

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

wp_enqueue_script('jquery');

4. jQuery 效果代码

jQuery(document).ready(function($){

//===================================存档页面 jQ伸缩

(function(){

$('#al_expand_collapse,#archives span.al_mon').css({cursor:"s-resize"});

$('#archives span.al_mon').each(function(){

var num=$(this).next().children('li').size();

var text=$(this).text();

$(this).html(text+'<em> ( '+num+' 篇文章 )</em>');

});

var $al_post_list=$('#archives ul.al_post_list'),

$al_post_list_f=$('#archives ul.al_post_list:first');

$al_post_list.hide(1,function(){

$al_post_list_f.show();

});

$('#archives span.al_mon').click(function(){

$(this).next().slideToggle(400);

return false;

});

$('#al_expand_collapse').toggle(function(){

$al_post_list.show();

},function(){

$al_post_list.hide();

});

})();

});

PS:他不知道缘何写js文件调用的就直接打开 header.php 并找到 <?php wp_head(); ?>,在其下面加带<script type="text/javascript">里边那段jQuery代码</script>

4. css根据需用写,不写也可不需用的。HTML价值形式:

<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>

  折腾完,收工!

Wordpress下载:

本文转自:http://zww.me/archives/25589

sssss
Tags: wordpress模板   wordpress教程   wordpress原生函数  
责任编辑:cc120