Apr 27

DIY Wordpress Themes —— Built

分类：Wordpress研究, 与我有关 | 给我留言 | 点击量233次

在制作其它页面模板之前我们先了解一下这些页面和首页 index.php 的不同之处。
首页的 content 内容栏循环输出指定数量的日志，而独立日志页 single.php 只输出一篇日志和与其对应的评论部分，页面页 page.php 和独立日志页基本相同，存档页面 archive.php 和首页 index.php 基本相同，搜索结果页 search.php 和首页 index.php 也基本相同。所以制作这些页面模板是非常容易的。

先从 single.php 开始，还是打开 index.php 文件，在

<div class="entry">
    <?php the_content('Continue reading &raquo;'); ?>
</div><!--/entry -->

的后面添加评论部分的调用代码

<?php comments_template(); ?>

将该文件另存为 single.php ，并和 index.php 处于同一目录下。回到前台，点击一篇日志，进入单篇日志的页面，此时你就已经可以看到效果了。但是这个评论部分的样式和整个主题的样式并不搭调，所以我们需要给这部分重新写一个适合主题的样式。
关于如何制作 comments.php 后面会详细的介绍。

single.php 制作好之后 page.php 就是现成的了，直接将 single.php 文件另存为 page.php 即可 :cool:

存档页面 archive.php 用于显示某分类、某 TAG 和某个指定日期下的日志，所以一般我会在 content 内容栏的最前面加一个例如“XX分类下的文章”这样一个大的标题。
还是打开 index.php 文件，找到

<?php if (have_posts()) : ?>

在它的前面加上一句

<?php is_tag(); ?>

然后在

<?php if (have_posts()) : ?>
 
<?php while (have_posts()) : the_post(); ?>

的中间加上下面的代码

<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
                  <?php /* If this is a category archive */ if (is_category()) { ?>
                    <div class="pagetitle"><span class="front"><?php single_cat_title(); ?></span> 分类下的文章</div>
                  <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
                    <div class="pagetitle"><span class="front"><?php single_tag_title(); ?></span> 标签下的文章</div>
                  <?php /* If this is a daily archive */ } elseif (is_day()) { ?>
                    <div class="pagetitle"><span class="front"><?php the_time('Y年Fj日'); ?></span> 的日志归档</div>
                  <?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
                    <div class="pagetitle"><span class="front"><?php the_time('Y年F'); ?></span> 的日志归档</div>
                  <?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
                    <div class="pagetitle"><span class="front"><?php the_time('Y年'); ?></span> 的日志归档</div>
                  <?php /* If this is an author archive */ } elseif (is_author()) { ?>
                    <div class="pagetitle">作者归档</div>
                  <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
                    <div class="pagetitle">日志归档</div>
                  <?php } ?>

以上的代码均带有注释，还是比较容易理解的。这些就是对应分类、TAG 和日期归档的大标题，接下来我们要给这些标题写入对应的样式。打开 style.css 文件，添加以下样式代码

/* archive title */
.pagetitle {
    background-color:#67B602;
    color:#FFFFFF;
    font-size:16px;
    height:32px;
    line-height:36px;
    margin:10px 0;
    text-align:center;
    width:100%;
}
.pagetitle .front {
    color:#E7F8D0;
    font-weight:bold;
}

保存 style.css 并将修改后的 index.php 另存为 archive.php 文件。回到前台，点击某个分类，进入分类归档页面就能看到效果了（截图） :wink:

最后是搜索结果页 search.php ，顾名思义，这个页面模板用来显示搜索某些关键词后显示对应文章，基本和 index.php 相同，并且和 archive.php 一样也可以加上“XXX搜索结果下的文章”这种大标题。
还是打开 index.php 文件，在

<?php if (have_posts()) : ?>

的前面加上

<?php is_search(); ?>

然后在

<?php if (have_posts()) : ?>
 
<?php while (have_posts()) : the_post(); ?>

的中间加上下面的代码

<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
          <?php /* If this is a search archive */ if (is_search()) { ?>
            <div class="pagetitle"><span class="front"><?php wp_title(''); ?> <?php echo $s; ?></span> 搜索结果下的文章</div>
          <?php } ?>

大标题的样式无需再重复定义，将此修改后的 index.php 文件另存为 search.php 即可。

这样，几个基本的页面模板都制作完成了，下一篇日志里将介绍如何制作独立日志页和页面页的评论部分—— comments.php

zEUS.

DIY Wordpress Themes —— Separated 怎么选择
  • 收藏到 : Google书签 新浪ViVi 365Key网摘 天极网摘 我摘 POCO网摘 博采网摘 YouNote网摘 和讯网摘 博拉网 igooi网摘 I2Key网摘 天下图摘 百特门网摘 Del.icio.us Yahoo书签 奇贴 QQ娱乐摘 添加到Digg! 添加到Facebook!
  • 标签 :  ,
  • 原文链接 : http://zeuscn.net/archives/2008/04/27/diy-wordpress-themes-built/
  • 转载原创文章请注明 : zEUS.’Blog 網生@誌
  • 本周最灌水的人 :  motoe2 (5)  ,  willerce (5)  ,  Charles (4)  ,  东哥 (4)  ,  大话 (3)  ,   头两名将免费获得下周的“阿里妈妈广告位”
  • 相关日志 : 
    • 

     “DIY Wordpress Themes —— Built”才7条评论

    1. gravatar
      公元2008年04月28日的6:39 am，传说中的 了了僧 抢到了第1楼！ 

      我来学习了 :shock:

    2. gravatar
      公元2008年04月28日的7:27 am，传说中的 kok 抢到了第2楼！ 

      写点其他的内容吧。程序太枯燥了。哈哈

    3. gravatar
      公元2008年04月29日的10:21 pm，传说中的 Charles 抢到了第3楼！ 

      很赞啊，很详细啊~~
      我现在看多了，觉得做模板是个体力活，真的！

    4. gravatar
      公元2008年04月29日的10:23 pm，传说中的 Charles 抢到了第4楼！ 

      另外，很期待多语言支持的教程啊~~就是__()和_e()，还有怎样生成pot文件等等的教程，最好让中国产的模板最后都走向世界。

    5. gravatar
      公元2008年04月30日的1:21 pm，传说中的 zEUS. 抢到了第5楼！ 

      @Charles：语言支持我还不懂哦…
      是滴，做模板确实是体力活！ :cry:

    6. gravatar
      公元2008年05月6日的9:07 pm，传说中的 elsak 抢到了第6楼！ 

      程序写的真不错

    7. gravatar
      公元2008年05月7日的9:33 am，传说中的 ctoptravel 抢到了第7楼！ 

      学习来了

    发表留言