您的位置:首页»WordPress 教程, 主题开发, 进阶使用»  WordPress CMS 技巧:按照分类调用最新文章

WordPress CMS 技巧:按照分类调用最新文章

WordPress CMS 技巧:按照分类调用最新文章列表
我们知道,许多 WordPress Magazine/News/CMS 主题最吸引人的地方就是在首页按分类摘要显示或列标题显示最新文章。今天,站趣-分享建站的乐趣和大家一起学习这个 WordPress CMS 技巧:按照分类调用最新文章。我们可以将其用在博客首页、404页面、甚至任意存档页面。
下面,我们将以 WordPress 默认主题为例,详细介绍如何按照分类调用最新文章。

  1. 首先,建立一个简单的分类存档页面模板
  2. 我们希望代码能被多次利用,所以我们选择页面模板这种方式,使其不但可以用在首页,还可以用在404页面或其他任意存档页面。下面,我们就一起来为 WordPress 默认主题添加一个名为 Category Archive 的页面模板。使用你最习惯的文本编辑器,如 Notepad++、UltraEdite 等等,复制以下代码并保存为 category-archive.php 或其他你喜欢的名字:

    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
    
    <?php
    /*
    Template Name: Category Archive
    */
    ?>
     
    <?php get_header(); ?>
     
    <div id="content" class="narrowcolumn">
     
    	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    	<div class="post" id="post-<?php the_ID(); ?>">
    	<h2><?php the_title(); ?></h2>
    		<div class="entry">
    			<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>
     
    			<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
     
    		</div>
    	</div>
    	<?php endwhile; endif; ?>
     
    	<!-- Category Archive Start -->
    	<!-- Category Archive End -->
     
    </div>
     
    <?php get_sidebar(); ?>
     
    <?php get_footer(); ?>
  3. 第二步,增加按分类查询代码
  4. 复制以下代码到 之间:

    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
    
    	<ul class="catArchive">
    	<?php
    	$catQuery = $wpdb->get_results("SELECT * FROM $wpdb->terms AS wterms INNER JOIN $wpdb->term_taxonomy AS wtaxonomy ON ( wterms.term_id = wtaxonomy.term_id ) WHERE wtaxonomy.taxonomy = 'category' AND wtaxonomy.parent = 0 AND wtaxonomy.count > 0 AND wterms.term_id NOT IN (2,5,6)");
     
    	$catCounter = 0;
     
    	foreach ($catQuery as $category) {
     
    		$catCounter++;
     
    		$catStyle = '';
    		if (is_int($catCounter / 2)) $catStyle = ' class="catAlt"';
     
    		$catLink = get_category_link($category->term_id);
     
    		echo '<li'.$catStyle.'><h3><a href="'.$catLink.'" title="'.$category->name.'">'.$category->name.'</a></h3>';
    			echo '<ul>';
     
    			query_posts('cat='.$category->term_id.'&showposts=5');?>
     
    			<?php while (have_posts()) : the_post(); ?>
    				<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
    			<?php endwhile; ?>
     
    				<li><a href="<?php echo $catLink; ?>" title="<?php echo $category->name; ?>">More <strong><?php echo $category->name; ?></strong></a></li>
    			</ul>
    		</li>
    		<?php }	?>
    	</ul>

    代码解析:此段代码会从 WordPress 数据库中查询除分类 id 为2、5、6的所有分类,并列表显示其最新5篇文章。当然,我们稍微改动一下查询语句,使其只查询 id 为2、5、6的分类。

    1
    
    $catQuery = $wpdb->get_results("SELECT * FROM $wpdb->terms AS wterms INNER JOIN $wpdb->term_taxonomy AS wtaxonomy ON ( wterms.term_id = wtaxonomy.term_id ) WHERE wtaxonomy.taxonomy = 'category' AND wtaxonomy.parent = 0 AND wtaxonomy.count > 0 AND wterms.term_id IN (2,5,6)");

    分列显示最新文章

    1
    2
    3
    
    $catCounter++;
    $catStyle = '';
    if (is_int($catCounter / 2)) $catStyle = ' class="catAlt"';

    查询数据库

    1
    2
    3
    
    foreach ($catQuery as $category) {
    	/* Code used to retrieve and display the latest posts */
    }

    显示分类标题

    1
    
    echo '<li'.$catStyle.'><h3><a href="'.get_category_link($category->term_id).'" title="'.$category->name.'">'.$category->name.'</a></h3>';

    列表显示最新5篇文章

    1
    2
    3
    4
    5
    6
    
    query_posts('cat='.$category->term_id.'&showposts=5');?>
     
    <?php while (have_posts()) : the_post(); ?>
    	<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
    <?php endwhile; ?>
    	<li><a href="<?php echo $catLink; ?>" title="<?php echo $category->name; ?>">More <strong><?php echo $category->name; ?></strong></a></li>
  5. CSS 样式
  6. 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
    
    /* Latest posts by category styles */
     
    .catArchive {
    	width: 450px;
    	overflow: hidden;
    	margin: 20px 0 0 0;
    	padding: 0;
    	list-style-type: none;
    }
     
    .catArchive h3 {
    	font: normal bold 18px sans-serif;
    	border-bottom: 1px solid #666;
    	margin: 0;
    	padding: 0 0 3px 0;
    	display: block;
    }
     
    .catArchive li {
    	display: block;
    	float: left;
    	width: 210px;
    	margin: 0 30px 30px 0;
    }
     
    .catArchive ul {
    	margin: 0;
    	padding: 0;
    }
     
    .catArchive li li {
    	border-bottom: 1px solid #ddd;
    	margin: 0;
    	padding: 4px 0;
    }
     
    .catAlt {
    	margin-right: 0 !important;
    }

    请根据自身实际情况修改宽度、分类标题、文章列表样式

怎么样,按照本文一番修改,你的 WordPress 主题是不是也像一个 CMS 了呢?!
本文由辐射鱼翻译自:Latest Posts by Category Archive with WordPress
站趣译文:WordPress CMS 技巧:按照分类调用最新文章

23个评论

  • Reply 1 aunsen

    February 17th, 2009 at 12:38

    CMS都这么来的。。。

    • Reply 2 辐射鱼

      February 17th, 2009 at 12:51

      这个 loop 解决了 cms 主题数据库查询次数过多的问题,甚至还可以 cache 一下

  • Reply 3 yadandimao

    February 17th, 2009 at 20:40

    CMS 干脆改成dede算了

    • Reply 4 辐射鱼

      February 17th, 2009 at 22:08

      谁让WordPress是万能的呢

    • Reply 5 hi_hello

      February 17th, 2009 at 23:49

      什麽叫“dede”???

      • Reply 6 辐射鱼

        February 18th, 2009 at 13:57

        就是织梦,dedecms

  • Reply 7 maxsailor

    February 19th, 2009 at 02:22

    多谢分享啊!最近正找这方面的东西捏~~

  • Reply 9 6y270

    April 11th, 2009 at 21:18

    我想调用WP里面的文章到我的一个html网页,用FEED的话下面有个图标。怎么去掉这个图标啊。急。。

    • Reply 10 辐射鱼

      April 12th, 2009 at 09:42

      你可以将你的代码贴在站趣论坛,这样热心的同学才可以帮助你。不知道你用的啥代码,你再急我们也只能干看着

  • Reply 11 阿修

    September 6th, 2009 at 13:56

    那个查询语句在IE8下不兼容,样式会混乱。

    • Reply 12 辐射鱼

      September 6th, 2009 at 14:37

      样式错乱是因为你css没设置好,和查询语句无关吧

  • Reply 13 阿修

    September 6th, 2009 at 22:33

    echo ‘name.’”>’.$category->name.’‘;
    echo ”;
    为什么在IE8下面只能给第一个框框赋值,其他都没有样式。但是在兼容视图下正常,其他浏览器正常?觉得很奇怪啊……

  • Reply 14 阿修

    September 9th, 2009 at 09:02

    算了,我换了个办法。没问题了。谢谢你~~

  • Reply 15 SEVEN

    October 7th, 2009 at 18:39

    第二步复制以下代码到 、 之间:
    是复制到那裡呀?看不太懂!><

    • Reply 16 辐射鱼

      October 8th, 2009 at 12:09

      你想放的任何地方。

  • Reply 17 bokit

    October 22nd, 2009 at 17:02

    楼主,看了之后是我想要的东西。但还不大行。
    请看偶的皮:www.bokit.com.cn,似乎本身就是CMS
    偶想调用分类里的文章和友情连接。
    请指教一二?!拜谢先。

  • Reply 18 bokit

    October 22nd, 2009 at 17:10

    第二步在那加?

    • Reply 19 辐射鱼

      October 22nd, 2009 at 17:14

      我在16楼已经说了

  • Reply 20 imdeng

    August 17th, 2010 at 11:20

    请教一下,如何在此基础上在某个分类的第一篇文章增加图片缩略图呢?

    • Reply 21 辐射鱼

      August 21st, 2010 at 17:22

      要获取缩略图请参考http://eachsite.org/get-1st-images-in-wordpress/这篇文章,也可以用自定义字段

  • Reply 22 求索阁

    August 23rd, 2010 at 20:33

    呵呵,使用WordPress CMS主题的飘过···