先从 WordPress 主题模板的构成谈起。
WordPress 主题必须包含2个文件:index.php 和 style.css ,index.php 即我们的“首页”,style.css 是主题的样式文件。你可能会想,一个 普通 WordPress 主题包里可不止这2个文件,是的,关于这个问题稍后解释。这里我们先来了解下 index.php 的构造。
一个规范的网页文件必然包括2个部分?? head 和 body,注意这里的 head 不是页眉 header !在 WordPress 主题里 head 里包含一些必要的“申明”,body 才是网页构成的主体。
一般 WordPress 主题的 head 都是这么写的(我通常都是这么写):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
?? ?<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
?? ?<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
?? ?<title><?php wp_title(''); if (is_search()) { ?> Search for <?php echo $s; } if ( !(is_404()) and (is_search()) or (is_single()) or (is_page()) or (function_exists('is_tag') and is_tag()) or (is_archive()) ) { ?> at <?php } ?> <?php bloginfo('name'); ?></title>? ?
?? ? ? ?<link href="<?php bloginfo('stylesheet_directory'); ?>/style.css" rel="stylesheet" type="text/css" />
?? ?<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
?? ?<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
?? ?<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
?? ?<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
?
?? ?<?php wp_get_archives('type=monthly&format=link'); ?>
?? ?<?php //comments_popup_script(); // off by default ?>
?? ? <?php wp_head(); ?>? ?
?? ?<META name="keywords" content="" />
</head>
新建一个 php 文件并命名为 index 后,可以直接将以上部分复制进去。(对于新手而言,极力推荐使用 Dreamwearver )
接下来是 body 部分,一般一个普通2栏的 WordPress 主题,除开 PHP 调用语句,我会这么写它的 body :
<body>
? <div id="header"><!-- 页眉部分 -->
?? ?<h1>博客标题</h1>
?? ?<div id="description">博客的描述</div>
?? ?<div id="nav">
?? ? ? ?<ul>
?? ? ? ? ? ? <li>导航1</li><li>导航2</li><li>导航3</li>
?? ? ? ?</ul>
?? ?</div>
? </div><!-- /header -->
? <div id="wrapper">
?? ?<div id="content"><!-- 内容栏 -->
?? ? ? ?<div><!-- 日志部分 -->
?? ? ? ? ? ?<div><!-- 文章标题部分 -->
?? ? ? ? ? ?<h2>文章标题</h2>
?? ? ? ? ? ? ? ?<div>文章信息</div>
?? ? ? ? ? ?</div><!--/title -->
?? ? ? ?<div>文章主体</div><!--/entry -->
?? ? ? ?</div><!--/post -->
?? ?</div><!--/content -->? ? ?
?
?? ?<div id="sidebar"><!-- 侧边栏 -->?
?? ?</div><!--/sidebar -->
? </div><!--/wrapper -->
? <div id="footer"><!-- 页尾部分 -->
?? ?版权声明等内容
? </div><!--/footer -->
</body>
</html>
我们可以把以上部分想象成下面这张图(有样式的支持):
每一对 DIV 标签构成了一个容器,也可以看作是一个层,页面的内容都是层层相套,其中每个 id 和 class 定义的特定样式都是写在 style.css 文件里的。
最后我们可以直接把 body 的代码复制在 index.php 文件中的 head 部分之后。
从结构上来讲,index.php 已经搭好了架子,在下一篇日志里我将介绍如何为 index.php 编写样式。