網生@誌 | zEUS.'Blog

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

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

Tag: , , ,
字体大小:T | T

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

wordpress

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

  1. 定义首页的第一篇文章,showposts=1 则是只显示最新的一篇文章(使用 PHP 函数来进行定义)
    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. 第一篇文章的标题及内容(使用 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; ?>
  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.

« »

已经有115人发表了评论

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

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

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

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

文章反相链接 Pingback/Trackback

  1. Wordpress 较常用的首页文章 CMS 排版方法 - 大杂门
  2. 站内首页功能的小更新 | dogorgod.com
  3. 三款引用代码语法高亮插件 » 外事不决问GOOLE | Kalagxw’s Blog
  4. 三款引用代码语法高亮插件 | 網生@誌 | zEUS.'Blog

发表您的看法

TOP COMMENTS BOTTOM