先从 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>
<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 class="post"><!-- 日志部分 -->
<div class="title"><!-- 文章标题部分 -->
<h2>文章标题</h2>
<div class="postdata">文章信息</div>
</div><!--/title -->
<div class="entry">文章主体</div><!--/entry -->
</div><!--/post -->
</div><!--/content -->
<div id="sidebar"><!-- 侧边栏 -->
</div><!--/sidebar -->
</div><!--/wrapper -->
<div id="footer"><!-- 页尾部分 -->
版权声明等内容
</div><!--/footer -->
</body>
</html>
<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 class="post"><!-- 日志部分 -->
<div class="title"><!-- 文章标题部分 -->
<h2>文章标题</h2>
<div class="postdata">文章信息</div>
</div><!--/title -->
<div class="entry">文章主体</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 编写样式。
zEUS.
.text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://my.poco.cn/fav/storeIt.php?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t)+'&img=http://www.h-strong.com/blog/logo.gif','keyit','scrollbars=no,width=475,height=575,status=no,resizable=yes'));keyit.focus();){kind=logo}
|
想看细节处理的教程。
呵呵，完成之后大家多捧场啊～