網生@誌 | zEUS.'Blog

首页 » Wordpress研究 , 与我有关 » 2008-04-27 »

DIY WordPress Themes —— Built

字体大小:T | T

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

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

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

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

1
<?php comments_template(); ?>

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

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

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

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

在它的前面加上一句

<?php is_tag(); ?>

然后在

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

的中间加上下面的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?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 文件,添加以下样式代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 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 文件。回到前台,点击某个分类,进入分类归档页面就能看到效果了(截图) 😉

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

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

的前面加上

<?php is_search(); ?>

然后在

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

的中间加上下面的代码

1
2
3
4
<?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.

« »

已经有10人发表了评论

  1. 后面的呢,comments,还有function什么时候写啊

  2. 后面呢,comments,还有function什么时候写啊

  3. @Charles:语言支持我还不懂哦…
    是滴,做模板确实是体力活! 😥

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

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

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

发表您的看法

TOP COMMENTS BOTTOM