CSS可能非常复杂. 也可以难以置信的简单。 学习css之初我获得了很多帮助，同样我也非常愿意帮助别人通过我的例子获得收获。

下面我们将为你布局一个wordpress主题开发的兵工厂：

• 一个为所有浏览器重置css的样式表和一个我们开始开启工作的健全标准。
• 另一个通过巧妙方式重建我们排版基础的样式表
• 一个仅适用于wordpress的样式表（保持前两个独立，是为了本例可以用于非wordpress系统）
• 6个你想要的适于所有博客和网站的流式样式表，每一个都可以调整宽的。

我们这里用到的所有代码都是开源的，符合 GPL 协议，并且都可以在Your Theme Project Page页面看到。您可以随便阅读、复制和粘帖其中任何的文件。

要事先行，先在您的主题根目录下新建一个 “styles”文件夹，那 6 个样式表都会放在这个新文件夹里面，准备好制作那些 CSS 文件了吗？

重置 CSS

我们的重置css知识从著名的Eric Meyer’s famous Reset CSS拿来做了微小的改变。它的用途是是你的主题适用于任何浏览器。

它的使用非常简单，在你的style.css顶部加入以下代码：

在各种浏览器下重新加载你的页面，很神奇吧。

重建 CSS

这个 Rebuild CSS 是我根据早期的 BluePrint CSS 样式表发明的，并且在 Thematic 主题里面加以完善了。这个 Rebuild CSS 的作用在于使页面的垂直边距有规律，方便调整。

我这个 Rebuild CSS 的特色是把两种不同的网页样式结合起来，即字体大小用 px，并采用相对行高，而其他的垂直边距（例如段落和列表）则使用 em。

这是什么意思呢？这方便您以后修改字体的大小——不需要做任何计算——其他的排版因素（例如段落和清单）就会自动调整垂直边距。

rebuild.css 的使用也很简单，在 reset.css 导入后添加以下代码：

基本wordpress样式

WordPress 里面有我们每次都需要用到的格式，我所做的就是通过一个叫做 wp.css 的文件调用它们。

现在我们需要设定所有图片的排列方式——包括标题和画廊，同时设定引用的格式。您所需要做的只是为 blockquote 标签添加一个左对齐或者右对齐的 Class 属性。

您能猜测我们将如何使用 wp.css?

你所需要的所有外观

对您的新主题，我已经采取了坚如磐石的布局，这个布局建立在 Sandbox 主题的基础上并且适合您的新 HTML 结构。一共有 6 种布局，其中每一种布局都是流动的（即宽度可以伸缩到符合您的浏览器窗口大小），并且可以简单地固定布局的宽度。这些布局的使用都很简单。在导入基本的布局注释语下面直接导入其中一个布局就好了，下面就是导入正文在中间的三栏布局的代码：

最简单的固定布局宽度的方法是在 wrapper div 标签里面添加 width 和 margin 属性：

额外的收获:菜单样式化

作为一种奖励，如果您从未创建一个无序的列表（由 wp_page_menu 自动生成的）并且想让这个列表好看一点，可以参考下面我创建 WordPress 主题时所用的代码：

简单，但已经领你入门，祝你好运

• 十一步创建一个完美wordpress主题【十二】如何使用css定义你的外观重建你的主题
• 十一步创建一个完美wordpress主题【十一】侧边栏模板
• 十一步创建一个完美wordpress主题【十】归档，作者，分类和标签模板
• 十一步创建一个完美wordpress主题【九】搜索模板和页面模板
• 十一步创建一个完美wordpress主题【八】评论模板
• 十一步创建一个完美wordpress主题【七】Single Post, Post Attachment,404 Templates
• 十一步创建一个完美wordpress主题【六】index模板
• 十一步创建一个完美wordpress主题【五】header模板
• 十一步创建一个完美wordpress主题【四】模板和目录结构
• 十一步创建一个完美wordpress主题【三】创建html基本结构
• 十一步创建一个完美wordpress主题【二】
• 十一步创建一个完美wordpress主题【一】

Posted on July 7, 2009 by Ian Stewart

我知道你一直在耐心的等待这个。每个人都喜欢侧边栏模板。但是我们将做的和别人不同，我们的会更好一些。

自定义侧边栏模板功能

先说重点，对于侧边栏模板，我们需要它支持小工具。我们的侧边栏将拥有两个小工具区域。这样我们就可以把代码复用在两栏或三栏的主题上。

非常直观，我们在function.php中使用以下代码:

// Register widgetized areas
function theme_widgets_init() {
	// Area 1
	register_sidebar( array (
	'name' => 'Primary Widget Area',
	'id' => 'primary_widget_area',
	'before_widget' => '<li id="%1$s">',
	'after_widget' => "</li>",
	'before_title' => '<h3>',
	'after_title' => '</h3>',
  ) );

	// Area 2
	register_sidebar( array (
	'name' => 'Secondary Widget Area',
	'id' => 'secondary_widget_area',
	'before_widget' => '<li id="%1$s">',
	'after_widget' => "</li>",
	'before_title' => '<h3>',
	'after_title' => '</h3>',
  ) );
} // end theme_widgets_init

add_action( 'init', 'theme_widgets_init' );

现在我们获得了两个小工具区，主工具区和次工具区。当然你也可以取其它名字。现在在function.php中我们再加入超酷的自定义代码片段。

首先，我们将预设默认小工具：搜索框、静态页面、分类目录、日志存档、链接和元。我们不需要把这些默认小工具的代码写在 sidebar.php 里，我们将令 WordPress 自动把它们添加到小工具区域（这里要感谢  Ptah Dunbar ）

$preset_widgets = array (
	'primary_widget_area'  => array( 'search', 'pages', 'categories', 'archives' ),
	'secondary_widget_area'  => array( 'links', 'meta' )
);
if ( isset( $_GET['activated'] ) ) {
	update_option( 'sidebars_widgets', $preset_widgets );
}
// update_option( 'sidebars_widgets', NULL );

现在，在我们的 Primary Widget 区域 (primary_widget_area)，会自动显示搜索、静态页面、分类目录以及日志存档这四个小工具。而在 Secondary Widget 区域 (secondary_widget_area) 将会显示链接和元这两个小工具。只要激活 WordPress 主题，这些小工具就会自动显示。

看见最后一行 “ // update_option( ‘sidebars_widgets’, NULL ); ” 了吗？如果您想重启小工具的话，就把前面的两斜杠去掉（并替代前面那一行？）。我想您能猜到 “NULL” 表示没有小工具。

其次，我们将创建一个新的条件以便检测已有的小工具区域是否有小工具，这对我们以后写侧边栏代码很有帮助（谢谢Chaos Kaizer)。

// Check for static widgets in widget-ready areas
function is_sidebar_active( $index ){
  global $wp_registered_sidebars;

  $widgetcolums = wp_get_sidebars_widgets();

  if ($widgetcolums[$index]) return true;

	return false;
} // end is_sidebar_active

现在我们让这些代码片段发生作用。

编写侧边栏模板代码

在已有的动态小工具区域和预设小工具的基础上，我们创建的侧边栏模板将是您见过的最简单的模板之一。但是要记住，我们同时也通过 is_sidebar_active() 的 IF 语句把侧边栏固定。

下面就是侧边栏模板的代码：

<?php if ( is_sidebar_active('primary_widget_area') ) : ?>
		<div id="primary">
			<ul>
				<?php dynamic_sidebar('primary_widget_area'); ?>
			</ul>
		</div><!-- #primary .widget-area -->
<?php endif; ?>		

<?php if ( is_sidebar_active('secondary_widget_area') ) : ?>
		<div id="secondary">
			<ul>
				<?php dynamic_sidebar('secondary_widget_area'); ?>
			</ul>
		</div><!-- #secondary .widget-area -->
<?php endif; ?>

现在如果您进入 WordPress 后台的小工具页面，把任一小工具区域的小工具全部移除，那么这个条件语句就失效，侧边栏那个小工具区域就没有小工具了。

• 十一步创建一个完美wordpress主题【十二】如何使用css定义你的外观重建你的主题
• 十一步创建一个完美wordpress主题【十一】侧边栏模板
• 十一步创建一个完美wordpress主题【十】归档，作者，分类和标签模板
• 十一步创建一个完美wordpress主题【九】搜索模板和页面模板
• 十一步创建一个完美wordpress主题【八】评论模板
• 十一步创建一个完美wordpress主题【七】Single Post, Post Attachment,404 Templates
• 十一步创建一个完美wordpress主题【六】index模板
• 十一步创建一个完美wordpress主题【五】header模板
• 十一步创建一个完美wordpress主题【四】模板和目录结构
• 十一步创建一个完美wordpress主题【三】创建html基本结构
• 十一步创建一个完美wordpress主题【二】
• 十一步创建一个完美wordpress主题【一】

Posted on July 6, 2009 by Ian Stewart

正如我们在主页模板里做的 , 我们将创建一个主要模板，然后依据它创建其它模板，我们的主要模板是归档模板

归档模板的作用就是显示特定条件的博文，按日期、作者、分类、标签等。所以，基本上他很像主页模板，你只需读懂这些模板的字面意思，你就明白他们是干什么的。

开始我们的代码：

<?php get_header(); ?>
         <div id="container">
             <div id="content">
                 <div id="nav-above" class="navigation">
                 </div><!-- #nav-above -->
                 <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                 </div><!-- #post-<?php the_ID(); ?> -->          
                 <div id="nav-below" class="navigation">
                 </div><!-- #nav-below -->                  
             </div><!-- #content -->
         </div><!-- #container -->
 <?php get_sidebar(); ?>
 <?php get_footer(); ?> 

归档模板

以下是归档模板的作用:

1. 调用the_post()
2. 检查这是什么模板
3. 产生一个适当的模板
4. 使用哪个 rewind_posts()函数倒序排列博文
5. 执行wordpress循环

这是你archive.php的#content部分。注意顶部的Conditional Tags  检查我们在哪个模板里面。

<?php the_post(); ?>           
 <?php if ( is_day() ) : ?>
                 <h1 class="page-title"><?php printf( __( 'Daily Archives: <span>%s</span>', 'your-theme' ), get_the_time(get_option('date_format')) ) ?></h1>
 <?php elseif ( is_month() ) : ?>
                 <h1 class="page-title"><?php printf( __( 'Monthly Archives: <span>%s</span>', 'your-theme' ), get_the_time('F Y') ) ?></h1>
 <?php elseif ( is_year() ) : ?>
                 <h1 class="page-title"><?php printf( __( 'Yearly Archives: <span>%s</span>', 'your-theme' ), get_the_time('Y') ) ?></h1>
 <?php elseif ( isset($_GET['paged']) && !empty($_GET['paged']) ) : ?>
                 <h1 class="page-title"><?php _e( 'Blog Archives', 'your-theme' ) ?></h1>
 <?php endif; ?> 
 <?php rewind_posts(); ?> 
 <?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
                 <div id="nav-above">
                     <div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">&laquo;</span> Older posts', 'your-theme' )) ?></div>
                     <div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span>&raquo;</span>', 'your-theme' )) ?></div>
                 </div><!-- #nav-above -->
 <?php } ?>             
 <?php while ( have_posts() ) : the_post(); ?> 
                 <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                     <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( __('Permalink to %s', 'your-theme'), the_title_attribute('echo=0') ); ?>" rel="bookmark"><?php the_title(); ?></a></h2> 
                     <div class="entry-meta">
                         <span class="meta-prep meta-prep-author"><?php _e('By ', 'your-theme'); ?></span>
                         <span class="author vcard"><a href="<?php echo get_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __( 'View all posts by %s', 'your-theme' ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span>
                         <span class="meta-sep"> | </span>
                         <span class="meta-prep meta-prep-entry-date"><?php _e('Published ', 'your-theme'); ?></span>
                         <span class="entry-date"><abbr title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time( get_option( 'date_format' ) ); ?></abbr></span>
                         <?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t" ) ?>
                     </div><!-- .entry-meta --> 
                     <div class="entry-summary">
 <?php the_excerpt( __( 'Continue reading <span class="meta-nav">&raquo;</span>', 'your-theme' )  ); ?>
                     </div><!-- .entry-summary --> 
                     <div class="entry-utility">
                         <span class="cat-links"><span><?php _e( 'Posted in ', 'your-theme' ); ?></span><?php echo get_the_category_list(', '); ?></span>
                         <span class="meta-sep"> | </span>
                         <?php the_tags( '<span><span class="entry-utility-prep entry-utility-prep-tag-links">' . __('Tagged ', 'your-theme' ) . '</span>', ", ", "</span>\n\t\t\t\t\t\t<span class=\"meta-sep\">|</span>\n" ) ?>
                         <span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'your-theme' ), __( '1 Comment', 'your-theme' ), __( '% Comments', 'your-theme' ) ) ?></span>
                         <?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t\n" ) ?>
                     </div><!-- #entry-utility -->
                 </div><!-- #post-<?php the_ID(); ?> --> 
 <?php endwhile; ?>           

 <?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
                 <div id="nav-below">
                     <div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">&laquo;</span> Older posts', 'your-theme' )) ?></div>
                     <div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span>&raquo;</span>', 'your-theme' )) ?></div>
                 </div><!-- #nav-below -->
 <?php } ?>

作者模板

作者模板你不需要修改太多，你会喜欢它。从archive.php复制过来，你只需要修改标题段。

<h1 class=”page-title author”><?php printf( __( ‘Author Archives: <span>%s</span>’, ‘your-theme’ ), “<a class=’url fn n’ href=’$authordata->user_url’ title=’$authordata->display_name’ rel=’me’>$authordata->display_name</a>” ) ?></h1>
<?php $authordesc = $authordata->user_description; if ( !empty($authordesc) ) echo apply_filters( ‘archive_meta’, ‘<div class=”archive-meta”>’ . $authordesc . ‘</div>’ ); ?>

很简单是吗？

分类模板

复制archive.php 重命名为 category.php.

打开function.php，给分类模板加点功能。

// For category lists on category archives: Returns other categories except the current one (redundant)
 function cats_meow($glue) {
     $current_cat = single_cat_title( '', false );
     $separator = "\n";
     $cats = explode( $separator, get_the_category_list($separator) );
     foreach ( $cats as $i => $str ) {
         if ( strstr( $str, ">$current_cat<" ) ) {
             unset($cats[$i]);
             break;
         }
     }
     if ( empty($cats) )
         return false;
     return trim(join( $glue, $cats ));
 } // end cats_meow
 
 

我们自定义的程序cats_meow() 会将当前分类从分类页面中清除。

现在回到category.php, 用以下代码替换页面标题段:

<h1 class="page-title"><?php _e( 'Category Archives:', 'your-theme' ) ?> <span><?php single_cat_title() ?></span></span></h1>
 <?php $categorydesc = category_description(); if ( !empty($categorydesc) ) echo apply_filters( 'archive_meta', '<div>' . $categorydesc . '</div>' ); ?>

在 .entry-utility div找到 …

<span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links"><?php _e( 'Posted in ', 'your-theme' ); ?></span><?php echo get_the_category_list(', '); ?></span>

替换为…

<?php if ( $cats_meow = cats_meow(', ') ) : // Returns categories other than the one queried ?>
                         <span class="cat-links"><?php printf( __( 'Also posted in %s', 'your-theme' ), $cats_meow ) ?></span>
                         <span class="meta-sep"> | </span>
 <?php endif ?>

标签模板

标签模板和分类模板几乎一样，你知道的: 复制archive.php a重命名为 tag.php.

打开function.php加点功能：

// For tag lists on tag archives: Returns other tags except the current one (redundant)
 function tag_ur_it($glue) {
     $current_tag = single_tag_title( '', '',  false );
     $separator = "\n";
     $tags = explode( $separator, get_the_tag_list( "", "$separator", "" ) );
     foreach ( $tags as $i => $str ) {
         if ( strstr( $str, ">$current_tag<" ) ) {
             unset($tags[$i]);
             break;
         }
     }
     if ( empty($tags) )
         return false;
     return trim(join( $glue, $tags ));
 } // end tag_ur_it

替换页面标题：

<h1 class="page-title"><?php _e( 'Tag Archives:', 'your-theme' ) ?> <span><?php single_tag_title() ?></span></h1>

在 .entry-utility, 找到 …

<?php the_tags( '<span><span>' . __('Tagged ', 'your-theme' ) . '</span>', ", ", "</span>\n\t\t\t\t\t\t<span class=\"meta-sep\">|</span>\n" ) ?>

替换为…

<?php if ( $tag_ur_it = tag_ur_it(', ') ) : // Returns tags other than the one queried ?>                    <span class="tag-links"><?php printf( __( 'Also tagged %s', 'your-theme' ), $tag_ur_it ) ?></span> <?php endif; ?>  

好了！

• 十一步创建一个完美wordpress主题【十二】如何使用css定义你的外观重建你的主题
• 十一步创建一个完美wordpress主题【十一】侧边栏模板
• 十一步创建一个完美wordpress主题【十】归档，作者，分类和标签模板
• 十一步创建一个完美wordpress主题【九】搜索模板和页面模板
• 十一步创建一个完美wordpress主题【八】评论模板
• 十一步创建一个完美wordpress主题【七】Single Post, Post Attachment,404 Templates
• 十一步创建一个完美wordpress主题【六】index模板
• 十一步创建一个完美wordpress主题【五】header模板
• 十一步创建一个完美wordpress主题【四】模板和目录结构
• 十一步创建一个完美wordpress主题【三】创建html基本结构
• 十一步创建一个完美wordpress主题【二】
• 十一步创建一个完美wordpress主题【一】

Posted on July 3, 2009 by Ian Stewart

搜索模板和页面模板 对任何主题来讲都异常重要. 同时他们有非常容易编码，对于这两个模板，我们仍然使用模板的模板创建。

<?php get_header(); ?>
         <div id="container">
             <div id="content">
                 <div id="nav-above">
                 </div><!-- #nav-above -->
                 <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                 </div><!-- #post-<?php the_ID(); ?> -->        
                 <div id="nav-below">
                 </div><!-- #nav-below -->                  
             </div><!-- #content -->
         </div><!-- #container -->
 <?php get_sidebar(); ?>
 <?php get_footer(); ?>

当然了，每个模板也各有不同。

搜索模板

在search.php中我们重新引入loop循环，这一次我们使用if语句以防我们没有文章输出。

详情参照代码：

<?php get_header(); ?>
         <div id="container">
             <div id="content">
 <?php if ( have_posts() ) : ?>             
 <?php while ( have_posts() ) : the_post() ?>
 <!-- this is our loop -->
 <?php endwhile; ?>
 <?php else : ?>
 <!-- here's where we'll put a search form if there're no posts -->
 <?php endif; ?>        
             </div><!-- #content -->
         </div><!-- #container -->
 <?php get_sidebar(); ?>
 <?php get_footer(); ?>

非常简洁是吗？

我会保持所有类似index模板的结构类似：博客标题、meta信息、内容或摘要，实用链接。但wordpress在搜索的时候同时会搜索页面页，页面页中我们不想显示实用链接。所以我们需要使用if语句来判断是博文还是页面页。

<?php if ( $post->post_type == 'post' ) { ?>
<?php } ?>

页面判断，代码如下:

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

				<h1><?php _e( 'Search Results for: ', 'your-theme' ); ?><span><?php the_search_query(); ?></span></h1>

<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
				<div id="nav-above">
					<div><?php next_posts_link(__( '<span>&laquo;</span> Older posts', 'your-theme' )) ?></div>
					<div><?php previous_posts_link(__( 'Newer posts <span>&raquo;</span>', 'your-theme' )) ?></div>
				</div><!-- #nav-above -->
<?php } ?>							

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

				<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					<h2><a href="<?php the_permalink(); ?>" title="<?php printf( __('Permalink to %s', 'your-theme'), the_title_attribute('echo=0') ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

<?php if ( $post->post_type == 'post' ) { ?>
					<div>
						<span><?php _e('By ', 'your-theme'); ?></span>
						<span><a href="<?php echo get_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __( 'View all posts by %s', 'your-theme' ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span>
						<span> | </span>
						<span><?php _e('Published ', 'your-theme'); ?></span>
						<span><abbr title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time( get_option( 'date_format' ) ); ?></abbr></span>
						<?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t" ) ?>
					</div><!-- .entry-meta -->
<?php } ?>

					<div>
<?php the_excerpt( __( 'Continue reading <span>&raquo;</span>', 'your-theme' )  ); ?>
<?php wp_link_pages('before=<div>' . __( 'Pages:', 'your-theme' ) . '&after=</div>') ?>
					</div><!-- .entry-summary -->

<?php if ( $post->post_type == 'post' ) { ?>
					<div>
						<span><span><?php _e( 'Posted in ', 'your-theme' ); ?></span><?php echo get_the_category_list(', '); ?></span>
						<span> | </span>
						<?php the_tags( '<span><span>' . __('Tagged ', 'your-theme' ) . '</span>', ", ", "</span>\n\t\t\t\t\t\t<span class=\"meta-sep\">|</span>\n" ) ?>
						<span><?php comments_popup_link( __( 'Leave a comment', 'your-theme' ), __( '1 Comment', 'your-theme' ), __( '% Comments', 'your-theme' ) ) ?></span>
						<?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t\n" ) ?>
					</div><!-- #entry-utility -->
<?php } ?>
				</div><!-- #post-<?php the_ID(); ?> -->

<?php endwhile; ?>

<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
				<div id="nav-below">
					<div><?php next_posts_link(__( '<span>&laquo;</span> Older posts', 'your-theme' )) ?></div>
					<div><?php previous_posts_link(__( 'Newer posts <span>&raquo;</span>', 'your-theme' )) ?></div>
				</div><!-- #nav-below -->
<?php } ?>			

<?php else : ?>

				<div id="post-0">
					<h2><?php _e( 'Nothing Found', 'your-theme' ) ?></h2>
					<div>
						<p><?php _e( 'Sorry, but nothing matched your search criteria. Please try again with some different keywords.', 'your-theme' ); ?></p>
	<?php get_search_form(); ?>
					</div><!-- .entry-content -->
				</div>

<?php endif; ?>

页面模板

以下是一个完美的wordpress页面模板:

<?php get_header(); ?>

		<div id="container">
			<div id="content">

<?php the_post(); ?>

				<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					<h1><?php the_title(); ?></h1>
					<div>
<?php the_content(); ?>
<?php wp_link_pages('before=<div>' . __( 'Pages:', 'your-theme' ) . '&after=</div>') ?>
<?php edit_post_link( __( 'Edit', 'your-theme' ), '<span>', '</span>' ) ?>
					</div><!-- .entry-content -->
				</div><!-- #post-<?php the_ID(); ?> -->			

<?php if ( get_post_custom_values('comments') ) comments_template() // Add a custom field with Name and Value of "comments" to enable comments on this page ?>			

			</div><!-- #content -->
		</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

• 十一步创建一个完美wordpress主题【十二】如何使用css定义你的外观重建你的主题
• 十一步创建一个完美wordpress主题【十一】侧边栏模板
• 十一步创建一个完美wordpress主题【十】归档，作者，分类和标签模板
• 十一步创建一个完美wordpress主题【九】搜索模板和页面模板
• 十一步创建一个完美wordpress主题【八】评论模板
• 十一步创建一个完美wordpress主题【七】Single Post, Post Attachment,404 Templates
• 十一步创建一个完美wordpress主题【六】index模板
• 十一步创建一个完美wordpress主题【五】header模板
• 十一步创建一个完美wordpress主题【四】模板和目录结构
• 十一步创建一个完美wordpress主题【三】创建html基本结构
• 十一步创建一个完美wordpress主题【二】
• 十一步创建一个完美wordpress主题【一】

Posted on July 2, 2009 by Ian Stewart

我讨厌评论模板. 他可能会相当困扰。在2.7版本中，wordpress引入了一个简单的评论模板，但是不能把留言和引用通告分开，或者自定义评论标记。它仍然令人困惑.很幸运，我已经为你整理好了，虽然还是有些困惑，但是毕竟整理出来了。在这个例子中，我将向你展示发生了什么，一些自定义的代码片段，你可以把这些代码片段放在function.php中。希望它能起到作用，至少是一个顽皮的评论模板。

让我们看看我们要做的事情.

1.  阻止搜索爬虫加载评论和受保护文章。
2. 检查是否有评论
3. 检测评论数量和引用通告（或ping）。
4. 如果有评论，展示评论并附上导航和页码。
5. 如果有引用通告，展示之。
6. 如果评论是开启的，展示回复表单。

这个模板有很多代码，但总结起来也就这么些。

自定义留言回调和引用通告

WordPress 2.7 允许通过 wp_list_comments() 函数方便有序地调用单独日志的留言和引用。如果您喜欢那样，那就很方便。但是我们不喜欢，我想要把评论里面的留言和引用分开。为了实现这种结果，您需要对留言和引用进行自定义回调，把下面代码插入到 functions.php 文件：

// Custom callback to list comments in the your-theme style
 function custom_comments($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment;
     $GLOBALS['comment_depth'] = $depth;
   ?>
     <li id="comment-<?php comment_ID() ?>" <?php comment_class() ?>>
         <div class="comment-author vcard"><?php commenter_link() ?></div>
         <div class="comment-meta"><?php printf(__('Posted %1$s at %2$s <span>|</span> <a href="%3$s" title="Permalink to this comment">Permalink</a>', 'your-theme'),
                     get_comment_date(),
                     get_comment_time(),
                     '#comment-' . get_comment_ID() );
                     edit_comment_link(__('Edit', 'your-theme'), ' <span class="meta-sep">|</span> <span class="edit-link">', '</span>'); ?></div>
   <?php if ($comment->comment_approved == '0') _e("\t\t\t\t\t<span class='unapproved'>Your comment is awaiting moderation.</span>\n", 'your-theme') ?>
           <div class="comment-content">
             <?php comment_text() ?>
         </div>
         <?php // echo the comment reply link
             if($args['type'] == 'all' || get_comment_type() == 'comment') :
                 comment_reply_link(array_merge($args, array(
                     'reply_text' => __('Reply','your-theme'),
                     'login_text' => __('Log in to reply.','your-theme'),
                     'depth' => $depth,
                     'before' => '<div>',
                     'after' => '</div>'
                 )));
             endif;
         ?>
 <?php } // end custom_comments

// Produces an avatar image with the hCard-compliant photo class
 function commenter_link() {
     $commenter = get_comment_author_link();
     if ( ereg( '<a[^>]* class=[^>]+>', $commenter ) ) {
         $commenter = ereg_replace( '(<a[^>]* class=[\'"]?)', '\\1url ' , $commenter );
     } else {
         $commenter = ereg_replace( '(<a )/', '\\1class="url "' , $commenter );
     }
     $avatar_email = get_comment_author_email();
     $avatar = str_replace( "class='avatar", "class='photo avatar", get_avatar( $avatar_email, 80 ) );
     echo $avatar . ' <span>' . $commenter . '</span>';
 } // end commenter_link

评论模板

没有把您吓跑吧？诚然，并不是很可怕。下面是整个评论模板代码，上面有些 PHP 注释，以便您的理解。

<?php /* The Comments Template — with, er, comments! */ ?>
            <div id="comments">
<?php /* Run some checks for bots and password protected posts */ ?>
<?php
    $req = get_option('require_name_email'); // Checks if fields are required.
    if ( 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']) )
        die ( 'Please do not load this page directly. Thanks!' );
    if ( ! empty($post->post_password) ) :
        if ( $_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password ) :
?>
                <div><?php _e('This post is password protected. Enter the password to view any comments.', 'your-theme') ?></div>
            </div><!-- .comments -->
<?php
        return;
    endif;
endif;
?>   
<?php /* See IF there are comments and do the comments stuff! */ ?>
<?php if ( have_comments() ) : ?>   
<?php /* Count the number of comments and trackbacks (or pings) */
$ping_count = $comment_count = 0;
foreach ( $comments as $comment )
    get_comment_type() == "comment" ? ++$comment_count : ++$ping_count;
?>   
<?php /* IF there are comments, show the comments */ ?>
<?php if ( ! empty($comments_by_type['comment']) ) : ?>   
                <div id="comments-list">
                    <h3><?php printf($comment_count > 1 ? __('<span>%d</span> Comments', 'your-theme') : __('<span>One</span> Comment', 'your-theme'), $comment_count) ?></h3>   
<?php /* If there are enough comments, build the comment navigation  */ ?>
<?php $total_pages = get_comment_pages_count(); if ( $total_pages > 1 ) : ?>
                    <div id="comments-nav-above">
                                <div><?php paginate_comments_links(); ?></div>
                    </div><!-- #comments-nav-above -->
<?php endif; ?>                   
  
<?php /* An ordered list of our custom comments callback, custom_comments(), in functions.php   */ ?>
                    <ol>
<?php wp_list_comments('type=comment&callback=custom_comments'); ?>
                    </ol>   
<?php /* If there are enough comments, build the comment navigation */ ?>
<?php $total_pages = get_comment_pages_count(); if ( $total_pages > 1 ) : ?>
                <div id="comments-nav-below">
                        <div><?php paginate_comments_links(); ?></div>
            </div><!-- #comments-nav-below -->
<?php endif; ?>                      
                </div><!-- #comments-list .comments -->   
<?php endif; /* if ( $comment_count ) */ ?>   
<?php /* If there are trackbacks(pings), show the trackbacks  */ ?>
<?php if ( ! empty($comments_by_type['pings']) ) : ?>   
                <div id="trackbacks-list">
                    <h3><?php printf($ping_count > 1 ? __('<span>%d</span> Trackbacks', 'your-theme') : __('<span>One</span> Trackback', 'your-theme'), $ping_count) ?></h3>   
<?php /* An ordered list of our custom trackbacks callback, custom_pings(), in functions.php   */ ?>
                    <ol>
<?php wp_list_comments('type=pings&callback=custom_pings'); ?>
                    </ol>                
                </div><!-- #trackbacks-list .comments -->              
<?php endif /* if ( $ping_count ) */ ?>
<?php endif /* if ( $comments ) */ ?>  
<?php /* If comments are open, build the respond form */ ?>
<?php if ( 'open' == $post->comment_status ) : ?>
                <div id="respond">
                    <h3><?php comment_form_title( __('Post a Comment', 'your-theme'), __('Post a Reply to %s', 'your-theme') ); ?></h3>   
                    <div id="cancel-comment-reply"><?php cancel_comment_reply_link() ?></div>   
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
                    <p id="login-req"><?php printf(__('You must be <a href="%s" title="Log in">logged in</a> to post a comment.', 'your-theme'),
                    get_option('siteurl') . '/wp-login.php?redirect_to=' . get_permalink() ) ?></p>   
<?php else : ?>
                    <div>      
                        <form id="commentform" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post">   
<?php if ( $user_ID ) : ?>
                            <p id="login"><?php printf(__('<span>Logged in as <a href="%1$s" title="Logged in as %2$s">%2$s</a>.</span> <span><a href="%3$s" title="Log out of this account">Log out?</a></span>', 'your-theme'),
                                get_option('siteurl') . '/wp-admin/profile.php',
                                wp_specialchars($user_identity, true),
                                wp_logout_url(get_permalink()) ) ?></p>   
<?php else : ?>   
                            <p id="comment-notes"><?php _e('Your email is <em>never</em> published nor shared.', 'your-theme') ?> <?php if ($req) _e('Required fields are marked <span>*</span>', 'your-theme') ?></p>   
              <div id="form-section-author">
                                <div><label for="author"><?php _e('Name', 'your-theme') ?></label> <?php if ($req) _e('<span>*</span>', 'your-theme') ?></div>
                                <div><input id="author" name="author" type="text" value="<?php echo $comment_author ?>" size="30" maxlength="20" tabindex="3" /></div>
              </div><!-- #form-section-author .form-section -->   
              <div id="form-section-email">
                                <div><label for="email"><?php _e('Email', 'your-theme') ?></label> <?php if ($req) _e('<span>*</span>', 'your-theme') ?></div>
                                <div><input id="email" name="email" type="text" value="<?php echo $comment_author_email ?>" size="30" maxlength="50" tabindex="4" /></div>
              </div><!-- #form-section-email .form-section -->   
              <div id="form-section-url">
                                <div><label for="url"><?php _e('Website', 'your-theme') ?></label></div>
                                <div><input id="url" name="url" type="text" value="<?php echo $comment_author_url ?>" size="30" maxlength="50" tabindex="5" /></div>
              </div><!-- #form-section-url .form-section -->   
<?php endif /* if ( $user_ID ) */ ?>   
              <div id="form-section-comment">
                                <div><label for="comment"><?php _e('Comment', 'your-theme') ?></label></div>
                                <div><textarea id="comment" name="comment" cols="45" rows="8" tabindex="6"></textarea></div>
              </div><!-- #form-section-comment .form-section -->   
              <div id="form-allowed-tags">
                  <p><span><?php _e('You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes:', 'your-theme') ?></span> <code><?php echo allowed_tags(); ?></code></p>
              </div>   
<?php do_action('comment_form', $post->ID); ?>   
                            <div><input id="submit" name="submit" type="submit" value="<?php _e('Post Comment', 'your-theme') ?>" tabindex="7" /><input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></div>   
<?php comment_id_fields(); ?>     
<?php /* Just … end everything. We're done here. Close it up. */ ?>     
                        </form><!-- #commentform -->
                    </div><!-- .formcontainer -->
<?php endif /* if ( get_option('comment_registration') && !$user_ID ) */ ?>                 </div><!-- #respond -->
<?php endif /* if ( 'open' == $post->comment_status ) */ ?>

你已经创建了index.php文件，现在开始创建其它模板文件。

模板的模板

single.php 以及其它的模板的结构很多都是和 index.php 一样的，事实上，您可以把它看成模板的模板。结构如下

<?php get_header(); ?>
		<div id="container">
			<div id="content">
				<div id="nav-above">
				</div><!-- #nav-above -->
				<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
				</div><!-- #post-<?php the_ID(); ?> -->
				<div id="nav-below">
				</div><!-- #nav-below -->
                          </div><!-- #content -->
		</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

但是也会有些不同，先从 the_post() 和 comments_template() 开始吧。

我们将要在页面顶部在content的div开始后调用the_post()。我们只显示一篇博文，亏了有the_permalink()，我们不需使用loop循环。

然这是一篇单独日志，我们需要调用 comments_template() 函数。因为我们要把留言和引用分开，所以代码该是这样：

<?php comments_template('', true); ?>

上面的代码需要放在 </div><!– #content –> 之前，</div><!– #nav-below –> 之后。

单独页导航

这里，我们将会用 next_post_link() 替代 previous_posts_link(), 用 previous_post_link() 替代 next_posts_link()，他们的作用就和他们的名称一样。

				<div id="nav-above">
					<div><?php previous_post_link( '%link', '<span>&laquo;</span> %title' ) ?></div>
					<div><?php next_post_link( '%link', '%title <span>&raquo;</span>' ) ?></div>
				</div><!-- #nav-above -->
				<div id="nav-below">
					<div><?php previous_post_link( '%link', '<span>&laquo;</span> %title' ) ?></div>
					<div><?php next_post_link( '%link', '%title <span>&raquo;</span>' ) ?></div>
				</div><!-- #nav-below -->

单独日志标题

如果您还记得 header.php 那一课，就会发现我们用一个动态的 IF 语句方便屏幕浏览器识别单独日志标题。在这里以及后面的主题模板，我们将用 H1 标签获取文章标题。我想你会知道下面的代码该放到那里去。

					<h1><?php the_title(); ?></h1>

单独日志实用链接

文章的实用性非常复杂。我想你会发现站在别人肩上和一次性找到正确答案的好处。

在我们查看这段代码前想一想为什么这么复杂。因为评论会在wordpress中用在很多不同的场景中：打开评论和引用通告；只打开引用通告；只打开评论；都关闭。这就意味着大量的if语句。

这会非常令人沮丧，好在代码已经添加了注释并且你可以仔细寻找if 和elseif表达式来解决问题。们还想添加一个页面永久链接以及 RSS 链接，这对跟踪开发对话有用。

					<div>
					<?php printf( __( 'This entry was posted in %1$s%2$s. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>. Follow any comments here with the <a href="%5$s" title="Comments RSS to %4$s" rel="alternate" type="application/rss+xml">RSS feed for this post</a>.', 'your-theme' ),
						get_the_category_list(', '),
						get_the_tag_list( __( ' and tagged ', 'your-theme' ), ', ', '' ),
						get_permalink(),
						the_title_attribute('echo=0'),
						comments_rss() ) ?>
<?php if ( ('open' == $post->comment_status) && ('open' == $post->ping_status) ) : // Comments and trackbacks open ?>
						<?php printf( __( '<a href="#respond" title="Post a comment">Post a comment</a> or leave a trackback: <a href="%s" title="Trackback URL for your post" rel="trackback">Trackback URL</a>.', 'your-theme' ), get_trackback_url() ) ?>
<?php elseif ( !('open' == $post->comment_status) && ('open' == $post->ping_status) ) : // Only trackbacks open ?>
						<?php printf( __( 'Comments are closed, but you can leave a trackback: <a href="%s" title="Trackback URL for your post" rel="trackback">Trackback URL</a>.', 'your-theme' ), get_trackback_url() ) ?>
<?php elseif ( ('open' == $post->comment_status) && !('open' == $post->ping_status) ) : // Only comments open ?>
						<?php _e( 'Trackbacks are closed, but you can <a href="#respond" title="Post a comment">post a comment</a>.', 'your-theme' ) ?>
<?php elseif ( !('open' == $post->comment_status) && !('open' == $post->ping_status) ) : // Comments and trackbacks closed ?>
						<?php _e( 'Both comments and trackbacks are currently closed.', 'your-theme' ) ?>
<?php endif; ?>
<?php edit_post_link( __( 'Edit', 'your-theme' ), "\n\t\t\t\t\t<span class=\"edit-link\">", "</span>" ) ?>
					</div><!-- .entry-utility -->

并不是太糟对吗？

单独日志内容输出

在 wp_link_pages() 之后加上如下代码即可。译者注：此时别忘了在container这个div后面加上the_post()。

<?php the_content(); ?>
<?php wp_link_pages('before=<div>' . __( 'Pages:', 'your-theme' ) . '&after=</div>') ?>

单独日志附档

并不是很多人会用到单独日志附档，但是它还是有点意思。当你为你的日志附加一个照片时，你就用到了它。实际上不仅仅是照片，你可以创建视频、音频、应用程序模板，分别给他们命名成video.php、audio.php、application.php等。单独附档确实可以让你的wordpress充满创意。

简易的方法是将所有的single.php内容拷贝到attachment.php，并作如下改变。

首先，删除顶部导航，此时我们不使用它。替代为链接到父页面的页面标题。

<h1><a href="<?php echo get_permalink($post->post_parent) ?>" title="<?php printf( __( 'Return to %s', 'your-theme' ), wp_specialchars( get_the_title($post->post_parent), 1 ) ) ?>" rev="attachment"><span>&laquo; </span><?php echo get_the_title($post->post_parent) ?></a></h1>

因为页面标题已经被h1包装，所以文章标题需要使用h2页面包装起来。

					<h2><?php the_title(); ?></h2>

现在，因为我们的附档模板需要实际显示附档，我们的内容需要反映这一点。因为主要附档是图片，所以我们使用if语句来表现出来。

					<div>
						<div>
<?php if ( wp_attachment_is_image( $post->id ) ) : $att_image = wp_get_attachment_image_src( $post->id, "medium"); ?>
						<p><a href="<?php echo wp_get_attachment_url($post->id); ?>" title="<?php the_title(); ?>" rel="attachment"><img src="<?php echo $att_image[0];?>" width="<?php echo $att_image[1];?>" height="<?php echo $att_image[2];?>"  alt="<?php $post->post_excerpt; ?>" /></a>
						</p>
<?php else : ?>
						<a href="<?php echo wp_get_attachment_url($post->ID) ?>" title="<?php echo wp_specialchars( get_the_title($post->ID), 1 ) ?>" rel="attachment"><?php echo basename($post->guid) ?></a>
<?php endif; ?>
						</div>
						<div><?php if ( !empty($post->post_excerpt) ) the_excerpt() ?></div>
<?php the_content( __( 'Continue reading <span>&raquo;</span>', 'your-theme' )  ); ?>
<?php wp_link_pages('before=<div>' . __( 'Pages:', 'your-theme' ) . '&after=</div>') ?>
					</div><!-- .entry-content -->

再删除底部链接导航。

 404 模板

进入错误页面模板，输入以下内容：

				<div id="post-0">
					<h1><?php _e( 'Not Found', 'your-theme' ); ?></h1>
					<div>
						<p><?php _e( 'Apologies, but we were unable to find what you were looking for. Perhaps searching will help.', 'your-theme' ); ?></p>
	<?php get_search_form(); ?>
					</div><!-- .entry-content -->
				</div><!-- #post-0 -->

• 十一步创建一个完美wordpress主题【十二】如何使用css定义你的外观重建你的主题
• 十一步创建一个完美wordpress主题【十一】侧边栏模板
• 十一步创建一个完美wordpress主题【十】归档，作者，分类和标签模板
• 十一步创建一个完美wordpress主题【九】搜索模板和页面模板
• 十一步创建一个完美wordpress主题【八】评论模板
• 十一步创建一个完美wordpress主题【七】Single Post, Post Attachment,404 Templates
• 十一步创建一个完美wordpress主题【六】index模板
• 十一步创建一个完美wordpress主题【五】header模板
• 十一步创建一个完美wordpress主题【四】模板和目录结构
• 十一步创建一个完美wordpress主题【三】创建html基本结构
• 十一步创建一个完美wordpress主题【二】
• 十一步创建一个完美wordpress主题【一】

Posted on June 30, 2009 by Ian Stewart

loop循环

如下：

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

键入以上代码试一试：再键入以下加粗部分试一试：

<?php while ( have_posts() ) : the_post() ?> <?php the_content(); ?>
<?php endwhile; ?>

<ul>
<?php while ( have_posts() ) : the_post() ?>
<li><?php the_excerpt(); ?>
</li>
<?php endwhile; ?>
</ul>

通过以上实验，我相信你很快理解了 the_content()和 the_excerpt() 的不同。

while和 endwhile是循环的主体，你在里面可以防止一些模板标签来循环输出。

好的，让我们制作一个更酷的循环。你需要了解More Tag 和Next Page Tag 。

<div class="entry-content"> <?php the_content( __( 'Continue reading <span>&raquo;</span>', 'your-theme' )  ); ?> <?php wp_link_pages('before=<div>' . __( 'Pages:', 'your-theme' ) . '&after=</div>') ?> </div><!-- .entry-content -->

以下是加上链接的文章标题：

<h2 class="entry-title"> <a href="<?php the_permalink(); ?>" title="<?php printf( __('Permalink to %s', 'your-theme'), the_title_attribute('echo=0') ); ?>" rel="bookmark"><?php the_title(); ?> </a></h2>

添加上叫做postmeta的信息，这些数据描述了每篇post的具体细节。

我们看看我们现在的循环体，以下代码都放置在id为content的div内

<?php /* The Loop — with comments! */ ?> <?php while ( have_posts() ) : the_post() ?> <?php /* Create a div with a unique ID thanks to the_ID() and semantic classes with post_class() */ ?>                 <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php /* an h2 title */ ?>                     <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( __('Permalink to %s', 'your-theme'), the_title_attribute('echo=0') ); ?>" rel="bookmark"><?php the_title(); ?></a></h2> <?php /* Microformatted, translatable post meta */ ?>                     <div class="entry-meta">                         <span class="meta-prep meta-prep-author"><?php _e('By ', 'your-theme'); ?></span>                         <span class="author vcard"> <a class="url fn n" href="<?php echo get_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __( 'View all posts by %s', 'your-theme' ), $authordata->display_name ); ?>"> <?php the_author(); ?></a></span>                         <span class="meta-sep"> | </span>                         <span class="meta-prep meta-prep-entry-date"><?php _e('Published ', 'your-theme'); ?></span>                         <span class="entry-date"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time( get_option( 'date_format' ) ); ?></abbr></span>                       <?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t" ) ?>                     </div><!-- .entry-meta --> <?php /* The entry content */ ?>                     <div class="entry-content"> <?php the_content( __( 'Continue reading <span>&raquo;</span>', 'your-theme' )  ); ?> <?php wp_link_pages('before=<div>' . __( 'Pages:', 'your-theme' ) . '&after=</div>') ?> </div><!-- .entry-content --> <?php /* Microformatted category and tag links along with a comments link */ ?>                     <div class="entry-utility">                         <span class="cat-links"> <span class="entry-utility-prep entry-utility-prep-cat-links"><?php _e( 'Posted in ', 'your-theme' ); ?></span><?php echo get_the_category_list(', '); ?></span>                         <span class="meta-sep"> | </span>                         <?php the_tags( '<span><span>' . __('Tagged ', 'your-theme' ) . '</span>', ", ", "</span>\n\t\t\t\t\t\t<span class=\"meta-sep\">|</span>\n" ) ?>                         <span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'your-theme' ), __( '1 Comment', 'your-theme' ), __( '% Comments', 'your-theme' ) ) ?></span>                         <?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t\n" ) ?>                     </div><!-- #entry-utility -->                 </div><!-- #post-<?php the_ID(); ?> --> 
<?php /* Close up the post div and then end the loop with endwhile */ ?> <?php endwhile; ?>

导航

制作导航需要模板标签： next_posts_link() 和 previous_posts_link().  WordPress codex 上做了如下解释.

next posts link

This creates a link to the previous posts. Yes, it says “next posts,” but it’s named that just to confuse you.

previous posts link

This creates a link to the next posts. Yes, it says “previous posts,” but it’s named that just to confuse you.

正如index.php中的其他事情一样，博客导航在你初次创建的时候需要加倍注意，因为我们几乎在博客的每一个页面中使用。

我喜欢将博客导航放置在内容的上面或下面。这看你怎么用，当然你也可以不用，如下：

这个 CSS 代码将会隐藏单独日志内容上面的文章导航功能

如果没有导航网页，我们也想隐藏文章导航功能。比如，如果没有较旧的文章，我们就不想输出任何的导航代码。这点可以通过以下代码实现：

这个代码表示如果循环页面里最大的页码大于1，那么就输出导航代码，执行导航功能。

下面就是我们需要的代码，其中顶部导航代码在循环开始之前，底部导航代码在循环结束之后：

<?php /* Top post navigation */ ?> <?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>                 <div id="nav-above" class="navigation">                     <div class="nav-previous"><?php next_posts_link(__( '<span>&laquo;</span> Older posts', 'your-theme' )) ?></div>                     <div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span>&raquo;</span>', 'your-theme' )) ?></div>                 </div><!-- #nav-above --> <?php } ?>

<?php /* Bottom post navigation */ ?> <?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>                 <div id="nav-below" class="navigation">                     <div class="nav-previous"><?php next_posts_link(__( '<span>&laquo;</span> Older posts', 'your-theme' )) ?></div>                     <div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span>&raquo;</span>', 'your-theme' )) ?></div>                 </div><!-- #nav-below --> <?php } ?>

最后一步，在 get_footer()之前写下如下代码：

• 十一步创建一个完美wordpress主题【十二】如何使用css定义你的外观重建你的主题
• 十一步创建一个完美wordpress主题【十一】侧边栏模板
• 十一步创建一个完美wordpress主题【十】归档，作者，分类和标签模板
• 十一步创建一个完美wordpress主题【九】搜索模板和页面模板
• 十一步创建一个完美wordpress主题【八】评论模板
• 十一步创建一个完美wordpress主题【七】Single Post, Post Attachment,404 Templates
• 十一步创建一个完美wordpress主题【六】index模板
• 十一步创建一个完美wordpress主题【五】header模板
• 十一步创建一个完美wordpress主题【四】模板和目录结构
• 十一步创建一个完美wordpress主题【三】创建html基本结构
• 十一步创建一个完美wordpress主题【二】
• 十一步创建一个完美wordpress主题【一】

Posted on June 29, 2009 by Ian Stewart

head部分

现在你的空白wordpress主题在技术上还是不可行的。因为没有doctype来声明浏览器如何解析html。我们打算使用xhtml transitional doctype。当然你可以使用别的，但是xhtml transitional 对wordpress来说是最好的。

在header.php的开头输入以下内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

我们也想为html添加一些其它属性。在header.php中的html标记上添加如下内容：

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

现在我们进入head标记部分，head部分包含了网页的meta信息。比如文档标题，css链接rss 订阅等。但是我们想给它加上一点功能，我们给标题加上页码。在function.php中写入

<?php

// 使主题可以被翻译
// 翻译文件可以被放置在 /languages/ 文件夹内
load_theme_textdomain( 'your-theme', TEMPLATEPATH . '/languages' );
$locale = get_locale();
$locale_file = TEMPLATEPATH . "/languages/$locale.php";
if ( is_readable($locale_file) )
        require_once($locale_file);
// 获取页码
function get_page_number() {
    if (get_query_var('paged')) {
        print ' | ' . __( 'Page ' , 'your-theme') . get_query_var('paged');
    }

}
// 获取页码结束

第一段程序意在是主题可以被翻译。

在第二段程序中，你可以看到一些可以被翻译的文本。如__( 'Page ' , 'your-theme')

你能猜到get_page_number()在干什么吗？如果你看看程序内部的话，你就会知道，它是在检查我们是不是在一个分页页面上，如果是，本程序将会打印一个分割线和当前页码。

//在解析的时候会被作为注释省略，你会看到很多。

用下面的代码替代这对标记<head></head> :

<head profile="http://gmpg.org/xfn/11">
    <title><?php
        if ( is_single() ) { single_post_title(); }      
        elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' | '; bloginfo('description'); get_page_number(); }
        elseif ( is_page() ) { single_post_title(''); }
        elseif ( is_search() ) { bloginfo('name'); print ' | Search results for ' . wp_specialchars($s); get_page_number(); }
        elseif ( is_404() ) { bloginfo('name'); print ' | Not Found'; }
        else { bloginfo('name'); wp_title('|'); get_page_number(); }
    ?></title>       
        <meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />       
        <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />       
        <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>       
        <?php wp_head(); ?>       
        <link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>" title="<?php printf( __( '%s latest posts', 'your-theme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
        <link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" title="<?php printf( __( '%s latest comments', 'your-theme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
        <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />      
</head>

如果你觉得这些代码像教条一样，不要紧，我会给你慢慢解释.

一个SEO的标题标签只包含单独日志或页面的标题。当然，还要通过 get_page_number() 函数显示 “较旧文章”页面的页码。

<title><?php
    if ( is_single() ) { single_post_title(); }
    elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' | '; bloginfo('description'); get_page_number(); }
    elseif ( is_page() ) { single_post_title(''); }
    elseif ( is_search() ) { bloginfo('name'); print ' | Search results for ' . wp_specialchars($s); get_page_number(); }
    elseif ( is_404() ) { bloginfo('name'); print ' | Not Found'; }
    else { bloginfo('name'); wp_title('|'); get_page_number(); }
?></title>

我们页面内容的一些meta信息：

<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

一个css链接：

一个使用嵌套评论的脚本调用：

一个插件和其它功能的钩子：

RSS和pingback链接：

<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>" title="<?php printf( __( '%s latest posts', 'your-theme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />

<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" title="<?php printf( __( '%s latest comments', 'your-theme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

header部分

现在我们想加入博客标题，来链接到我们的首页，博客描述，以及菜单。在header.php中移动到#branding 这个div。我们将在此处添加博客标题和描述。但是我们将做一些和其它主题不同的事情。

你会发现大部分wordpress标题告诉搜索引擎在每个页面当中最重要的是你的博客标题。他们实现这个目标的方法是使用h1标记来包装起标题部分；这个标记说明“这是本页围绕的中心”。我和其它一些主题开发者认为这是一个坏主意。举例来说，本页的最重要的东西是并不是“themeShaper”，而是“wordpress header模板”，这才是这个页面的核心内容所在。当然在首页，的确，最重要的事情是博客的描述。但从字面上它却成了本页支配一切的内容。

还好，这个很容易就能注意。我们将使用wordpress的条件标签和一些简单的旧html标记来编写我们的标题和博客描述：

            <div id="branding">
                <div id="blog-title"><span><a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><?php bloginfo( 'name' ) ?></a></span></div>
<?php if ( is_home() || is_front_page() ) { ?>
                    <h1 id="blog-description"><?php bloginfo( 'description' ) ?></h1>
<?php } else { ?>
                    <div id="blog-description"><?php bloginfo( 'description' ) ?></div>
<?php } ?>
            </div><!-- #branding -->

所以，我们的链接标题被非正式的放置在一个普通的div标记里面了。我们的博客描述被放置在了一个php 的if条件标记里面，在首页他是h1，在其他页面他只是一个普通div里面的相对标题。呵呵，这样这个SEO的问题就解决了。

对于新手来讲，这个一个需要仔细研读的好地方，你需要好好研究代码才能知道到底发生了什么。在上面的代码中我们使用的wordpress的模板标签 bloginfo().你可以看到我们使用它来获得博客链接、博客名字以及博客描述。它可以 展示超过20种博客信息。明白这一点，你就明白了wordpress主题制作。我们架设一个html结构，然后向里面添加wordpress模板标签和一些php，的确是一些简单的东西。你只需要熟悉模板标签，和php if表达式，以及一些简单的php循环。

移动到#access div标记。我们将添加一个跳转链接来让那些不想看菜单想直接跳转到内容的用户得到满足。

<div class="skip-link"><a href="#content" title="<?php _e( 'Skip to content', 'your-theme' ) ?>"><?php _e( 'Skip to content', 'your-theme' ) ?></a></div>

我们添加页面菜单：

简单，是吧？你的 #access div 应该是这个样子:

就是如此，你的header.php模板就经过seo了.

• 十一步创建一个完美wordpress主题【十二】如何使用css定义你的外观重建你的主题
• 十一步创建一个完美wordpress主题【十一】侧边栏模板
• 十一步创建一个完美wordpress主题【十】归档，作者，分类和标签模板
• 十一步创建一个完美wordpress主题【九】搜索模板和页面模板
• 十一步创建一个完美wordpress主题【八】评论模板
• 十一步创建一个完美wordpress主题【七】Single Post, Post Attachment,404 Templates
• 十一步创建一个完美wordpress主题【六】index模板
• 十一步创建一个完美wordpress主题【五】header模板
• 十一步创建一个完美wordpress主题【四】模板和目录结构
• 十一步创建一个完美wordpress主题【三】创建html基本结构
• 十一步创建一个完美wordpress主题【二】
• 十一步创建一个完美wordpress主题【一】

Posted on June 26, 2009 by Ian Stewart

最小化的wordpress主题仅需要一个index.php模板和一个style.css文件，当然，大部分主题还需要一些其他文件来使他更加立体化。

我们的最小化主题将包含六个文件。请在你的主题文件夹下建立如下六个文件。

• index.php
• header.php
• sidebar.php
• footer.php
• functions.php
• style.css

首先我们在style.css内输入以下内容，来告诉wordpress我们的主题的基本信息。

/*
Theme Name: Your Theme
Theme URI: http://example.com/example/
Description: A search engine optimized website framework for WordPress.
Author: You
Author URI: http://example.com/
Version: 1.0
Tags: Comma-separated tags that describe your theme.
Your theme can be your copyrighted work.
Like WordPress, this work is released under GNU General Public License, version 2 (GPL).
http://www.gnu.org/licenses/old-licenses/gpl-2.0.html.
*/

一些需要注意的事情:其实以上内容是可选项，你可以仅仅输入你的主题名字，但是如果您想发布您的主题，那你最好认真填写以下上述内容。

废话少说，开始我们的主题制作之旅吧。

构建你的html主题结构：

让我们想一下，网页就像是讲故事，有开头，中间和结尾。当我们写index.php（当然还有之后的single.php，category.php等）的时候，我们需要把注意精力集中在中间点上，我们需要经常的重构我们的中间点，开头和结尾只需一次创建即可。

Header.php 和 Footer.php

复制以下内容到header.php：

<html>
<head>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <div id="masthead">
            <div id="branding">
            </div><!-- #branding -->
            <div id="access">
            </div><!-- #access -->
        </div><!-- #masthead -->
    </div><!-- #header -->
    <div id="main">

复制以下内容到footer.php：

</div><!-- #main -->
    <div id="footer">
        <div id="colophon">
            <div id="site-info">
            </div><!-- #site-info -->
        </div><!-- #colophon -->
    </div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>

Index.php

剩下的复制到index.php：

<div id="container">
    <div id="content">
    </div><!-- #content -->
</div><!-- #container -->
<div id="primary">
</div><!-- #primary .widget-area -->
<div id="secondary">
</div><!-- #secondary -->

在index.php上部添加以下内容：

在index.php底部输入以下内容：

现在你可以在firefox中查看一下你的网页源代码了。

• 十一步创建一个完美wordpress主题【十二】如何使用css定义你的外观重建你的主题
• 十一步创建一个完美wordpress主题【十一】侧边栏模板
• 十一步创建一个完美wordpress主题【十】归档，作者，分类和标签模板
• 十一步创建一个完美wordpress主题【九】搜索模板和页面模板
• 十一步创建一个完美wordpress主题【八】评论模板
• 十一步创建一个完美wordpress主题【七】Single Post, Post Attachment,404 Templates
• 十一步创建一个完美wordpress主题【六】index模板
• 十一步创建一个完美wordpress主题【五】header模板
• 十一步创建一个完美wordpress主题【四】模板和目录结构
• 十一步创建一个完美wordpress主题【三】创建html基本结构
• 十一步创建一个完美wordpress主题【二】
• 十一步创建一个完美wordpress主题【一】

Posted on June 25, 2009 by Ian Stewart

2.本地测试服务器环境: XAMP or MAMP

你最好是在你的家用电脑上搭建一个具有apache、php和mysql的环境。

搭建这些软件具有一定的挑战性，幸好我们有一些集成的环境。如果你的电脑是windows，你可以试一试 XAMP. 如果你的电脑是Mac，你可以下载 MAMP 我就是采用的这个环境。

3.WordPress

安装wordpress到你的测试服务器（比如你的家用电脑）。

如果你使用xamp，请参照 instruction for installing WordPress

如果你使用 MAMP 请参照 instructions for installing WordPress

4.测试内容

你我的wordpress需要一些简单的例子文章，你可以在后台点击工具->导入，导入一些文章，如下

这里有些选项:

• The Theme Unit Test data
• WPCandy Sample Content

每种测试内容都有加有减，我的方法是导入所有的这些测试内容。这样就不会丢失任何东西。当你认为你已经完成了你的主题，使用文章导航浏览每篇文章。分别按照月、年、分类来查阅你的归档文章（archives）。拥有了这些强健的测试内容，你将会很容易的发现你丢失了什么。

5.文本编辑器

你不需要什么复杂的视窗编辑环境，仅仅是一个文本编辑器足矣.windows用户可以考虑 Notepad++. Mac用户我推荐 Text Wrangler.

6.Firefox

当然你可以使用任何浏览器测试，不过我还是推荐Firefox. 尤其是使用如下两个插件，对你开发wordpress来说更是如虎添翼。Web Developer Add-on for Firefox 为你添加了一个工具栏，通过禁用css来验证本地html，检查和调试你的代码。Firebug Add-on for Firefox 是不可缺少的. 使用firebug 你可以轻易知道当你点击网页某处时，源代码是如何编写的，以及css如何发挥作用。

7.HTML 和 CSS

我不会欺骗你，精通基本的html和css将会给你巨大的帮助。我推荐阅读html dog 的 HTML Beginner Tutorial和CSS Beginner Tutorial。阅读这两篇文章不是必修科目，但是它会帮助你掌握一些基本的概念。

8.PHP

在创建一个wordpress主题的时候，你需要了解php吗？是的，的确需要。但是在整个过程中，我会教会你足够小心的去开发wordpress主题。但是如果你总是想获得更多的推荐，你可以开始阅读PHP 101: PHP for the Absolute Beginner，同样不是必修课，但你会拾取些重要的概念。

• 十一步创建一个完美wordpress主题【十二】如何使用css定义你的外观重建你的主题
• 十一步创建一个完美wordpress主题【十一】侧边栏模板
• 十一步创建一个完美wordpress主题【十】归档，作者，分类和标签模板
• 十一步创建一个完美wordpress主题【九】搜索模板和页面模板
• 十一步创建一个完美wordpress主题【八】评论模板
• 十一步创建一个完美wordpress主题【七】Single Post, Post Attachment,404 Templates
• 十一步创建一个完美wordpress主题【六】index模板
• 十一步创建一个完美wordpress主题【五】header模板
• 十一步创建一个完美wordpress主题【四】模板和目录结构
• 十一步创建一个完美wordpress主题【三】创建html基本结构
• 十一步创建一个完美wordpress主题【二】
• 十一步创建一个完美wordpress主题【一】