網生@誌 | zEUS.'Blog

首页 » Wordpress研究 » 2008-09-11 »

WordPress 较常用的首页文章 CMS 排版方法

Tag: , , ,

D&Z Theme 首页一直在改版进行中,为的是推出 Pro 版本。在第一次改版时我在文章栏的上部添加了一个额外的内容模块——一个 Flash 展示窗和最新的一篇日志,下面的文章栏就依次显示除了第一篇日志外的其他日志,首页显示的总日志数还是可以在 后台设置-阅读里进行设置。这种类 的排版的方法网上有不少介绍,我也是从 Sofish 的一篇日志里学来的,虽然他介绍了方法,但我却还是尝试了很久才成功,原因是他的介绍过于简单,在这里我就做一些代码的补充。

wordpress

结合现在的 D&Z Theme 首页效果,代码和注释依次参考下文:

  1. 定义首页的第一篇文章,showposts=1 则是只显示最新的一篇文章(使用 函数来进行定义)
    1
    2
    3
    
    <?php $my_query = new WP_Query('showposts=1');
    while ($my_query->have_posts()) : $my_query->the_post();
    $do_not_duplicate = $post->ID; ?>
  2. 第一篇文章的标题及内容(使用 和默认的 WordPress 标签来输出文章)
    1
    2
    3
    4
    5
    6
    
    <div class="title">
    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(''); ?></a></h2>
    <div class="postinfo">分类: <?php the_category(' , ') ?> | <?php comments_popup_link('无人沙发', '1 条评论', '% 条评论'); ?> </div>
    </div>
    <div class="entry"><?php the_content('继续阅读 &raquo;'); ?></div>
    <?php endwhile; ?>
  3. 调用第一篇文章结束,接下来可以放 AD 或者其它一些内容
  4. 然后首页调用后续文章部分(依然是使用 PHP 函数来进行定义)

    1
    2
    
    <?php if (have_posts()) : while (have_posts()) : the_post();
    if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>
  5. 后续文章的标题及内容(还是使用 CSS 和默认的 WordPress 标签来输出文章)
    1
    2
    3
    4
    5
    6
    
    <div class="title">
    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(''); ?></a></h2>
    <div class="postinfo">分类: <?php the_category(' , ') ?> | <?php comments_popup_link('无人沙发', '1 条评论', '% 条评论'); ?></div>
    </div>
    <div class="entry"><?php the_content('继续阅读 &raquo;'); ?></div>
    <?php endwhile; endif; ?>

    如果你在后台设置了首页显示5篇文章,那么以上将显示除第一篇外的其余4篇

按照上述代码就能实现这种类CMS的排版方式,此时你可以向上图一样在第一篇文章的旁边放上一段 Flash 或者图片,你还可以修改后续文章的输出方式,使用

<?php the_excerpt(); ?>

代替

<?php the_content('继续阅读 &raquo;'); ?>

而让后续文章输出摘要而非全文,甚至你可以把它们都去掉只输出 H2 标签内的文章标题,再运用一些 CSS 手段让其显示得更加美观,等等等等,就要看大家的 CSS 技巧和想象力了。

这也算是一个 WordPress 的进阶使用方法,还是需要有一定 PHP HTML/CSS 基础,新手请慎用…

zEUS.

« »

已经有105人发表了评论

  1. zEUS!首页Flash代码怎么调用的?下了代码却不知道用! :roll:

  2. 我已在自己的博客添加你的链接了,
    请检查:www.simpleseo.cn
    希望可以与你交换链接 :mrgreen:

  3. 正想找这么一篇教程呢,你真是太好了 :razz:

  4. 首页右上可以通过tag显示缩略图就好了。 :???:
    目前的版本漂亮多了,标题下面的tag等还需要重新考虑布局,有的tag过多,会引起换行。

文章反相链接 Pingback/Trackback

  1. Cary Leung Sun Life
  2. Book cheap car hire in the UK
  3. Pharmas
  4. pozyczki chwilowki
  5. auto accessories
  6. Porn forum
  7. Exclusiv Shop
  8. Dentist
  9. bodybuilding supplement
  10. Warp Drives

发表您的看法