jQuery代码实现WordPress日志归档页面展开收缩效果

  • 2
  • 9,427 ℃
  • A+
所属分类:前端技术
摘要

这个用代码的方式来实现文章归档是比较好的方法,比插件要好很多,因此在这里大力的推荐下,我也没改啥,从网络引用,修改了些小笔误,在网络上的一些文件存在一点小问题,就是直接复制后,几个引号是全角的,需要更改为半角的英文才有效,现在我已经更改好了,如果您在使用的过程中还是存在问题,您首先检查下标点符号是否使用正确,谢谢。

看到http://zww.me/archives网站的日志归档页面,做得很不错,有jQuery效果,很不漂亮,也很实用。于是也想做成这样。所以就到网站上找找有没有现成的。

不过找来找去,还是在http://zww.me找到了一篇《代码实现WordPress归档页面模板[速度很快]》这个文章,将如何实现进行了详细的说明。

有了别人的教程,就剩下简单的效仿了,我们就按照教程一步步的操作吧:

第一步:复制一份page.php,改名为archives.php,在最上面加上下面几行代码:

<?php

/* Template Name: 文章归档 */

?>

这个代码很重要。这样就做好日志归档的模板了。当然还要加一点东东在里面。

找到类似 <?php content(); ?>,我的page.php里面的是<?php the_content(); ?>这个代码,后面加上下面这一句:

<a id=”expand_collapse” href=”#”>全部展开/收缩</a> <div id=”archives”><?php archives_list_SHe(); ?></div>

主要是为了“全部展开/收缩”有个点击的地方。这样就模板就OK了。

第二步:建一个新的函数,archives_list_SHe,将这个函数的代码放到主题的 functions.php里面去。(谨记要保证代码在 ?>内,要不然会出大问题的。

function archives_list_SHe() {
 global $wpdb,$month;
 $lastpost = $wpdb->get_var(“SELECT ID FROM $wpdb->posts WHERE post_date <’” . current_time(‘mysql’) . “‘ AND post_status=’publish’ AND post_type=’post’ AND post_password=” ORDER BY post_date DESC LIMIT 1″);
 $output = get_option(‘SHe_archives_’.$lastpost);
 if(empty($output)){
 $output = ”;
 $wpdb->query(“DELETE FROM $wpdb->options WHERE option_name LIKE ‘SHe_archives_%’”);
 $q = “SELECT DISTINCT YEAR(post_date) AS year, MONTH(post_date) AS month, count(ID) as posts FROM $wpdb->posts p WHERE post_date <’” . current_time(‘mysql’) . “‘ AND post_status=’publish’ AND post_type=’post’ AND post_password=” GROUP BY YEAR(post_date), MONTH(post_date) ORDER BY post_date DESC”;
 $monthresults = $wpdb->get_results($q);
 if ($monthresults) {
 foreach ($monthresults as $monthresult) {
 $thismonth    = zeroise($monthresult->month, 2);
 $thisyear    = $monthresult->year;
 $q = “SELECT ID, post_date, post_title, comment_count FROM $wpdb->posts p WHERE post_date LIKE ‘$thisyear-$thismonth-%’ AND post_date AND post_status=’publish’ AND post_type=’post’ AND post_password=” ORDER BY post_date DESC”;
 $postresults = $wpdb->get_results($q);
 if ($postresults) {
 $text = sprintf(‘%s %d’, $month[zeroise($monthresult->month,2)], $monthresult->year);
 $postcount = count($postresults);
 $output .= ‘<ul><li><span>’ . $text . ‘ &nbsp;(‘ . count($postresults) . ‘&nbsp;篇文章)</span><ul>’ . “\n”;
 foreach ($postresults as $postresult) {
 if ($postresult->post_date != ’0000-00-00 00:00:00′) {
 $url = get_permalink($postresult->ID);
 $arc_title    = $postresult->post_title;
 if ($arc_title)
 $text = wptexturize(strip_tags($arc_title));
 else
 $text = $postresult->ID;
 $title_text = ‘View this post, &quot;’ . wp_specialchars($text, 1) . ‘&quot;’;
 $output .= ‘<li>’ . mysql2date(‘d日’, $postresult->post_date) . ‘:&nbsp;’ . “<a href=’$url’ title=’$title_text’>$text</a>”;
 $output .= ‘&nbsp;(‘ . $postresult->comment_count . ‘)’;
 $output .= ‘</li>’ . “\n”;
 }
 }
 }
 $output .= ‘</ul></li></ul>’ . “\n”;
 }
 update_option(‘SHe_archives_’.$lastpost,$output);
 }else{
 $output = ‘<div>Sorry, no posts matched your criteria.</div>’ . “\n”;
 }
 }
 echo $output;
 }

以上所有,拷到functions.php里面去,请再次看上面的红色注释,一定要在?>内。

第三步:现在再来动上面的那个模板。将那个模板用FTP或其他工具传到主题文件夹里面去。进入后台,“页面”-“添加新页面”,写一个标题,比如文章归档,在打开的页面的右侧栏,那有一个“页面属性”-“模板”,下拉选择“文章归档”,即可。

第四步:加入加载了 jQuery 库,如果您的主题加载了 jQuery 库,把下面的直接加进去就行了,加入到我们建好的archives.php就好了。

<script type="text/javascript">
 /* 存档页面 jQ伸缩 */

$(‘#expand_collapse,.archives-yearmonth’).css({cursor:”s-resize”});
 $(‘#archives ul li ul.archives-monthlisting’).hide();
 $(‘#archives ul li ul.archives-monthlisting:first’).show();
 $(‘#archives ul li span.archives-yearmonth’).click(function(){$(this).next().slideToggle(‘fast’);return false;});
 //以下下是全局的操作
 $(‘#expand_collapse’).toggle(
 function(){
 $(‘#archives ul li ul.archives-monthlisting’).slideDown(‘fast’);
 },
 function(){
 $(‘#archives ul li ul.archives-monthlisting’).slideUp(‘fast’);
 });
 </script>

如果您的主题没有加载的话,那就把这段代码加到archives.php里面去。

打开archives.php,找到<?php get_header(); ?>这句,把上面的jQuery代码直接复制到下面即可。

如果还是不行,那就在<?php get_header(); ?>这句上面再加一句代码。代码如下:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

上面的引用代码,在网络上的一些文件存在一点小问题,就是直接复制后,几个引号是全角的,需要更改为半角的英文才有效,现在我已经更改好了,如果您在使用的过程中还是存在问题,您首先检查下标点符号是否使用正确,谢谢。

这样肯定就没有什么问题了。点击查看  http://chenxuehu.com/guidang

本文完全参考:《代码实现WordPress归档页面模板[速度很快]》,并根据我的主题的实际情况作了修改。

  • 我的微信
  • 加我请备注缘由
  • weinxin
  • 我的微信公众号
  • 轻松随便关注
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

关闭震动

目前评论:2   其中:访客  2   博主  0

    • avatar 牧羊人 0

      大家都用的这种哈~

      • avatar 高高 0

        请教一下,如果实现在文章列表中点击文章标题显示文章内容,怎么实现呢?