简介

并非所有的模板文件都会生成浏览器最终显示的全部内容。有些模板文件会被其他模板文件调用,比如 comments.php、header.php、footer.php、sidebar.php 以及 content-{$slug}.php。你需要逐一了解这些模板文件,才能明白它们的作用以及如何创建它们。

Header.php

header.php 文件的功能完全符合人们的预期——它包含了浏览器将为页头渲染的所有代码。由于除非有其他模板文件调用 模板标签 get_header(),否则浏览器不会渲染该文件的内容,因此它属于部分模板文件。

通常情况下,无论用户处于哪个页面或文章,网站的页头都是相同的。不过也有一些网站会根据页面的不同而有所差异,比如添加额外的导航栏或不同的横幅图片。如果你使用 条件标签,那么 header.php 文件就可以处理所有这些变化。

几乎所有的主题都包含 header.php 文件,因为从功能性和可维护性角度来看,创建这个文件是很有必要的。

下面是 Twenty Fifteen 主题中 header.php 文件的一个示例。

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <!--[if lt IE 9]>
    <script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
    <![endif]-->
    <?php wp_head(); ?>
</head>
 
<body <?php body_class(); ?>>
    <div id="page" class="hfeed site">
        <a class="skip-link screen-reader-text" href="#content"><?php _e( '跳至内容', 'twentyfifteen' ); ?></a>
        <div id="sidebar" class="sidebar">
            <header id="masthead" class="site-header" role="banner">
                <div class="site-branding">
                    <?php if ( is_front_page() && is_home() ) : ?>
                    <h1 class="site-title">
                        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
                    </h1>
                    <?php else : ?>
                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
                    <?php endif;
                    $description = get_bloginfo( 'description', 'display' );
                    if ( $description || is_customize_preview() ) :
                        echo $description;
                    endif; ?>
                    <button class="secondary-toggle"><?php _e( '菜单与小部件', 'twentyfifteen' ); ?></button>
                </div><!-- .site-branding -->
            </header><!-- .site-header -->
            <?php get_sidebar(); ?>
        </div><!-- .sidebar -->
        <div id="content" class="site-content">

初看这些代码可能会有点复杂,但只要拆解开来,其实就相当简单了。在开头的注释之后,首先创建的是 head 部分。模板标签 wp_head() 会加载所有的样式以及那些应该出现在页头而非 functions.php 文件中脚部区域的脚本。

接着是 body 部分的开启,其中包含了 HTML 代码和 PHP 代码。在网站品牌展示区域中可以看到一些条件标签,它们会根据用户所处的页面来稍作调整显示内容。之后会加载网站导航栏,最后则是主要的网站内容区域,该区域很可能会在 footer.php 文件中关闭。

需要特别注意的一个模板标签是位于 body 标签开头的 body_class()。这是一个非常实用的标签,它能够根据所使用的模板文件及其他设置来为页面添加相应的类名,从而大大简化主题的样式设置工作。

Footer.php

与 header.php 类似,footer.php 也是绝大多数主题都会使用的常见模板文件。除非有其他模板文件使用 模板标签 get_footer() 调用 footer.php,否则其中的代码是不会被渲染的。与页头一样,你也可以通过 条件标签 来创建不同版本的页脚。

通常开发者会在页脚中设置小部件区域,这样最终用户就可以轻松地拖放不同的内容类型到页脚中。

下面是 Twenty Fifteen 主题中 footer.php 文件的一个示例。

</div><!-- .site-content -->

<footer id="colophon" class="site-footer" role="contentinfo">

	<div class="site-info">

		<?php
		/**
		 * 在显示 Twenty Fifteen 页脚文本之前执行,用于自定义页脚内容。
		 *
		 * @since Twenty Fifteen 1.0
		 */
		do_action( 'twentyfifteen_credits' );
		?>
		<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ); ?>"><?php printf( __( '本网站由 %s 提供支持', 'twentyfifteen' ), 'WordPress' ); ?></a>

	</div><!-- .site-info -->

</footer><!-- .site-footer -->

</div><!-- .site -->

<?php wp_footer(); ?>

</body>
</html>

404.php

当用户试图访问你网站上不存在的页面时,除非你创建了 404.php 模板,否则他们会被引导至 index.php 页面。最好能设置一些消息,向用户说明该页面已丢失或不再可用。创建这个模板有助于保持主题的视觉一致性,同时也能为最终用户提供有用的信息。

下面是 Twenty Fifteen 主题中 404.php 模板文件的一个示例。

<?php get_header(); ?>

<div id="primary" class="content-area">

	<main id="main" class="site-main" role="main">

		<section class="error-404 not-found">

			<header class="page-header">
				<h1 class="page-title"><?php _e( '哎呀!找不到该页面。', 'twentyfifteen' ); ?></h1>
			</header&gt<!-- .page-header -->

			<div class="page-content">
				<?php _e( '看起来此位置没有找到任何内容。或许可以尝试搜索一下?', 'twentyfifteen' ); ?>
				<?php get_search_form(); ?>
			</div><!-- .page-content -->

		</section><!-- .error-404 -->

	</main><!-- .site-main -->

</div><!-- .content-area -->

<?php get_footer(); ?>

Comments.php

comments.php 文件的功能正是处理评论内容,这与人们的预期完全一致。这是一个部分模板,会被其他模板文件调用,用来显示用户在页面或文章下留下的评论。由于有多个页面和文章会显示评论,因此有一个可以在需要时被调用的文件是非常合理的。

关于创建评论的代码细节,可以在 评论模板页面中找到更详细的说明。

Sidebar.php

很多主题都会使用侧边栏来展示小部件。要让侧边栏在主题中正常使用,首先必须对其进行注册,然后还要创建一个用于侧边栏的模板文件。关于注册侧边栏的更多内容,你将在后面的章节中学习。侧边栏模板文件中通常会包含条件语句以及 is_active_sidebar( 'sidebar-name' ) 函数,这样就能确保侧边栏中确实使用了小部件,避免不必要的空 HTML 内容被添加到页面中。

下面是 Twenty Fifteen 主题中一个侧边栏模板文件的示例。注意在文件底部,侧边栏是通过 <?php dynamic_sidebar( 'sidebar-1' ); > 被调用的。这样一来,放入该侧边栏中的任何小部件都会显示在使用了这个模板文件的页面上。

<?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) || is_active_sidebar( 'sidebar-1' ) ) : ?>

	<div id="secondary" class="secondary">

		<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
			<div id="widget-area" class="widget-area" role="complementary">
				<?php dynamic_sidebar( 'sidebar-1' ); ?>
			</div><!-- .widget-area -->
		<?php endif; ?>

	</div><!-- .secondary -->

<?php endif; ?>

Content-{$slug}.php

许多主题开发者会将模板文件拆分成较小的部分。他们通常会在 page.php、home.php、comments.php 等模板文件中放置页面结构相关的代码,而将显示这些页面内容的代码放在另一个模板文件中。这就是 content-{$slug}.php 的作用——常见的文件名有 content-page.php、content-post.php、content-portfolio.php、content-none.php。这些并不是 WordPress 会以特定方式识别的文件名,而只是一种用于显示特定类型内容的常见方法。

例如,在博客文章中,你通常需要显示作者姓名、文章发布日期,以及可能的文章分类。此外还可能需要链接到上一篇文章和下一篇文章。这些信息并不适合显示在普通页面上。同样,在作品集页面上,你可能希望以不同于博客文章或普通页面中特色图片的方式展示特色图片或图库。

你可以使用 get_template_part() 模板标签 来调用 content-{$slug}.php 文件。如果要调用 content-page.php 文件,就可以使用 get_template_part( 'content', 'page' );。

下面是 Twenty Fifteen 主题中 content-page.php 模板文件的一个示例。

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

	<header class="entry-header">
		<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
	</header&gt<!-- .entry-header -->

	<div class="entry-content">
		<?php the_content(); ?>
		<?php
		wp_link_pages( array(
			'before'      => '<div class="page-links"><span class="page-links-title">' . __( '页面:', 'twentyfifteen' ) . '</span>',
			'after'       => '</div>',
			'link_before' => '<span>',
			'link_after'  => '</span>',
			'pagelink'    => '<span class="screen-reader-text">' . __( '页码', 'twentyfifteen' ) . ' %</span>%',
			'separator'   => '<span class="screen-reader-text">, </span>',
		) );
		?>
	</div><!-- .entry-content -->

	<?php edit_post_link( __( '编辑', 'twentyfifteen' ), '<footer class="entry-footer"><span class="edit-link">', '</span></footer><!-- .entry-footer -->' ); ?>

</article><!-- #post-## -->