当前位置: 首页 > 设计 > 正文
avatar

新的方式来实现Wordpress的文章归档页面,效果跟前一篇文章类似,都用到了Jquery来实现滑动伸缩效果。

今天换一种方式来实现Wordpress的文章归档页面,效果跟前一篇文章类似,都用到了Jquery来实现滑动伸缩效果。

下面我就说下简单的操作方法。

1、把下面的 archives_list_SHe 函数代码添加到主题的 functions.php 里面;

//日志归档
	class hacklog_archives
{
	function GetPosts()
	{
		global  $wpdb;
		if ( $posts = wp_cache_get( 'posts', 'ihacklog-clean-archives' ) )
			return $posts;
		$query="SELECT DISTINCT ID,post_date,post_date_gmt,comment_count,comment_status,post_password FROM $wpdb->posts WHERE post_type='post' AND post_status = 'publish' AND comment_status = 'open'";
		$rawposts =$wpdb->get_results( $query, OBJECT );
		foreach( $rawposts as $key => $post ) {
			$posts[ mysql2date( 'Y.m', $post->post_date ) ][] = $post;
			$rawposts[$key] = null;
		}
		$rawposts = null;
		wp_cache_set( 'posts', $posts, 'ihacklog-clean-archives' );;
		return $posts;
	}
	function PostList( $atts = array() )
	{
		global $wp_locale;
		global $hacklog_clean_archives_config;
		$atts = shortcode_atts(array(
			'usejs'        => $hacklog_clean_archives_config['usejs'],
			'monthorder'   => $hacklog_clean_archives_config['monthorder'],
			'postorder'    => $hacklog_clean_archives_config['postorder'],
			'postcount'    => '1',
			'commentcount' => '1',
		), $atts);
		$atts=array_merge(array('usejs'=>1,'monthorder'   =>'new','postorder'    =>'new'),$atts);
		$posts = $this->GetPosts();
		( 'new' == $atts['monthorder'] ) ? krsort( $posts ) : ksort( $posts );
		foreach( $posts as $key => $month ) {
			$sorter = array();
			foreach ( $month as $post )
				$sorter[] = $post->post_date_gmt;
			$sortorder = ( 'new' == $atts['postorder'] ) ? SORT_DESC : SORT_ASC;
			array_multisort( $sorter, $sortorder, $month );
			$posts[$key] = $month;
			unset($month);
		}
		$html = '<div class="car-container';
		if ( 1 == $atts['usejs'] ) $html .= ' car-collapse';
		$html .= '">'. "\n";
		if ( 1 == $atts['usejs'] ) $html .= '<a href="#" class="car-toggler">展开所有月份'."</a>\n\n";
		$html .= '<ul class="car-list">' . "\n";
		$firstmonth = TRUE;
		foreach( $posts as $yearmonth => $posts ) {
			list( $year, $month ) = explode( '.', $yearmonth );
			$firstpost = TRUE;
			foreach( $posts as $post ) {
				if ( TRUE == $firstpost ) {
					$html .= '	<li><span class="car-yearmonth">+ ' . sprintf( __('%1$s %2$d'), $wp_locale->get_month($month), $year );
					if ( '0' != $atts['postcount'] )
					{
						$html .= ' <span title="文章数量">(共' . count($posts) . '篇文章)</span>';
					}
					$html .= "</span>\n		<ul class='car-monthlisting'>\n";
					$firstpost = FALSE;
				}
				$html .= '			<li>' .  mysql2date( 'd', $post->post_date ) . '日: <a target="_blank" href="' . get_permalink( $post->ID ) . '">' . get_the_title( $post->ID ) . '</a>';
				if ( '0' != $atts['commentcount'] && ( 0 != $post->comment_count || 'closed' != $post->comment_status ) && empty($post->post_password) )
					$html .= ' <span title="评论数量">(' . $post->comment_count . '条评论)</span>';
				$html .= "</li>\n";
			}
			$html .= "		</ul>\n	</li>\n";
		}
		$html .= "</ul>\n</div>\n";
		return $html;
	}
	function PostCount()
	{
		$num_posts = wp_count_posts( 'post' );
		return number_format_i18n( $num_posts->publish );
	}
}
if(!empty($post->post_content))
{
	$all_config=explode(';',$post->post_content);
	foreach($all_config as $item)
	{
		$temp=explode('=',$item);
		$hacklog_clean_archives_config[trim($temp[0])]=htmlspecialchars(strip_tags(trim($temp[1])));
	}
}
else
{
	$hacklog_clean_archives_config=array('usejs'=>1,'monthorder'   =>'new','postorder'    =>'new');
}
$hacklog_archives=new hacklog_archives();

2、复制一份主题的 page.php 更名为 archives.php,然后在最顶端加入:

<?php
/*
Template Name: archives
*/
?>

3、再然后找到类似 ,在其下面加入如下代码

<h2>文章归档</h2>
		<p class="date"><strong><?php bloginfo('name'); ?></strong>目前共有文章:  <?php echo $hacklog_archives->PostCount();?>篇	</p>
	<?php echo $hacklog_archives->PostList();?>

进wp后台添加一新页面,在右侧栏模板选择 archives。

4、如果你的主题本身加载了 jQuery 库,那么继续把下面的 jQ 代码加上去,就会有滑动伸缩效果了。

<script type="text/javascript">
			jQuery(document).ready(function() {
				jQuery('.car-collapse').find('.car-monthlisting').hide();
				jQuery('.car-collapse').find('.car-monthlisting:first').show();
				jQuery('.car-collapse').find('.car-yearmonth').click(function() {
					jQuery(this).next('ul').slideToggle('fast');
				});
				jQuery('.car-collapse').find('.car-toggler').click(function() {
					if ( '展开所有月份' == jQuery(this).text() ) {
						jQuery(this).parent('.car-container').find('.car-monthlisting').show();
						jQuery(this).text('折叠所有月份');
					}
					else {
						jQuery(this).parent('.car-container').find('.car-monthlisting').hide();
						jQuery(this).text('展开所有月份');
					}
					return false;
				});
			});
</script>

css 样式如下,当然你也可以自定义,ok,搞定。

.car-collapse .car-yearmonth { cursor: s-resize; }
.car-container{ width:666 px; }
a.car-toggler{line-height:30px; font-size:14px; color:#c30}
.car-list li{list-style:none; line-height:24px}
.car-list li ul{padding-left:30px}
本文固定链接: http://www.weisay.com/blog/wordpress-archives-codes.html | 威言威语

代码生成WordPress文章存档页面:目前有13 条评论

  1. avatar
    4楼
    Captain Mozilla Firefox Windows

    如果要修改CSS是新建一个 .css 的文件自己添加代码还是在 function.php 里添加就行呢?

    2013-12-03 22:05 [回复]
    • avatar
      William Mozilla Firefox Windows

      修改css正常情况是修改style.css就行,不用改function.php

      2013-12-04 16:09 [回复]
      • avatar
        Captain Mozilla Firefox Windows

        代码盲完全一窍不通啊… 能不能提示一下 style.css 应该怎么写?比如想让月份的字体变大一点…

        2013-12-04 16:34 [回复]
  2. avatar
    地板
    不能吧 Opera Windows

    貌似这个实现方法是zww.me首先提出来的吧…

    2012-03-27 10:33 [回复]
    • avatar
      William Google Chrome Windows

      这个有点老了,你可以去看我主题1.4版里面的文章归档,优化了不少地方了,好用么才是硬道理。

      2012-03-27 10:48 [回复]
      • 还有更巧妙的办法? 果断下载学习 :lol:

        2012-03-27 11:02 [回复]
        • avatar
          William Google Chrome Windows

          方法或许类似,但显示效果不一样,原来那个一打开先全部展开,然后才会收缩为只显示最近一个月的日志。看着就不舒服,你目前也是这样,对吧。你看我的就不是。

          2012-03-27 11:12 [回复]
          • Z大的那个的确是有这个问题。
            不过看你主题代码时,发现你是把js和页面模板放在一起,然后在模版函数里又有定义,那个定义的代码太多了,看着晕,现在这个还是我好不容易看明白折腾好的,有机会再整了,呵呵 :cool:

            2012-03-27 12:13 [回复]
            • avatar
              William Google Chrome Windows

              函数里面主要加了分离工作,将+ – 独立出来,所以代码看着有点多。

              2012-03-27 18:26 [回复]
  3. avatar
    板凳
    奔跑 Mozilla Firefox Windows

    我想在文章归档页面 x条评论 后面显示 xViews,我在function PostList( $atts = array() ) 函数中修改为以下:
    $html .= ‘ (‘ . $post->comment_count . ‘条评论 | ‘ ;
    if(function_exists(‘the_views’)) { the_views(); }
    $html .= ‘)’;
    但是,生成了Views,不过地方不对,不是在评论后面,而是在所有文章列表的上面。
    有空帮我看下。歇息 :cool:

    2011-08-28 12:52 [回复]
  4. avatar
    沙发
    奔跑 Mozilla Firefox Windows

    呵呵,想把你 的黑白主题的归档效果移植到我用的zBench皮肤里,折腾了半天,看到这篇文章,呵呵,现在日志显示了,但是没有特效。查看了主题的介绍,说是有加载 jQuery 库 的。有空能帮我看下嘛?

    2011-08-22 18:27 [回复]
    • avatar
      奔跑 Mozilla Firefox Windows

      已经实现了,呵呵,在网上找了怎么载入jQuery。http://www.elecbench.com/?page_id=420

      2011-08-22 23:19 [回复]
      • avatar
        William Google Chrome Windows

        我文章中不是写了Jquery代码了,放上去就OK了啊~

        2011-08-23 09:52 [回复]

发表评论

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter