首页 / 主题开发手册 / 经典主题 / 模板文件详细 / 局部和杂项模板文件

局部和杂项模板文件

简介

并非所有的模板文件都能生成将被浏览器渲染的全部内容。有些模板文件只是作为其他模板的局部被包含引入到页面,如comments.php、header.php、footer.php、sidebar.php和content-{$slug}.php。你将通过每个模板文件来了解其目的和如何建立它们。

 

Header.php

header.php文件的作用与你所期望的完全一样。 它包含了所有浏览器将渲染的头文件代码。这是一个局部模板文件,因为除非有不同的模板文件调用模板标签get_header(),否则浏览器不会渲染这个文件的内容。

通常情况下,无论你在哪个页面或文章上,网站的页眉都是一样的。 然而,有些网站有轻微的变化,如二级导航或不同的横幅图像,取决于页面。如果你使用条件标签,header.php文件可以处理所有这些变化。

几乎所有的主题都有一个header.php文件,因为这个文件的功能和可维护性几乎要求它是必须存在的。

下面是一个header.php例子,发现在twenty fifteen主题中。

<!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( 'Skip to content', '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( 'Menu and widgets', 'twentyfifteen' ); ?></button>
                </div><!-- .site-branding -->
            </header><!-- .site-header -->
            <?php get_sidebar(); ?>
        </div><!-- .sidebar -->
        <div id="content" class="site-content">

有些代码一开始可能看起来有点令人生畏,但如果我们把它分解开来,它就会变得足够简单。在正常开头之后,页眉被创建。模板标签wp_head()将我们所有的样式和任何脚引入头部,而不是我们在functions.php文件中预定的页脚。

接下来,正文被打开,出现了HTML和PHP的组合。你可以看到在网站品牌div中的一些条件标签,这些标签根据用户所处的页面调整了一些显示内容。然后,网站导航被拉入。最后,主要的网站内容div被打开,很可能会在footer.php文件中关闭。

需要注意的一个重要的模板标签是body_class(),它位于body标签的开头。这是一个超级方便的标签,它可以根据模板文件和其他设置,给你的body提供样式类,使主题造型更容易。

 

与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 /** * Fires before the Twenty Fifteen footer text for footer customization. * * @since Twenty Fifteen 1.0 */ do_action( 'twentyfifteen_credits' ); ?>
            <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyfifteen' ), 'WordPress' ); ?></a>
        </div>
 
 
<!-- .site-info -->
    </footer>
 
 
<!-- .site-footer -->
 
</div>
 
 
<!-- .site -->
 
<?php wp_footer(); ?>
 
</body>
</html>

 

404.php

当用户试图访问网站上一个不存在的页面时,他们会被引导到index.php页面,除非你创建了一个404.php模板。 这是一个好主意,要有某种信息来解释该页面的缺失或不再可用。 创建这个模板有助于保持主题在视觉方面的一致性,并为终端用户提供有用的信息。

下面是一个404.php模板文件的例子,来自twenty fifteen主题。

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( 'Oops! That page can’t be found.', 'twentyfifteen' ); ?></h1>
 
 
                </header>
 
 
<!-- .page-header -->
 
 
 
<div class="page-content">
 
 
<?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentyfifteen' ); ?>
 
 
                    <?php get_search_form(); ?>
                </div>
 
 
<!-- .page-content -->
            </section>
 
 
<!-- .error-404 -->
 
        </main><!-- .site-main -->
    </div>
 
 
<!-- .content-area -->
 
<?php get_footer(); ?>

 

Comments.php

comments.php文件处理的正是你所期望的评论。这是一个局部模板,被拉入其他模板文件,以显示用户在页面或文章上留下的评论。有多个不同的页面和文章显示评论,所以有一个文件可以在需要时被拉入是有意义的。

创建评论所涉及的代码在评论模板页面上有详细说明。

 

很多主题利用侧边栏来显示小工具。 为了让边栏在一个主题中工作,它必须被注册,然后必须为边栏创建一个模板文件。 你将在后面的章节中了解更多关于注册边栏的知识。侧边栏文件通常有条件语句和is_active_sidebar( 'sidebar-name') 函数,以确保侧边栏中的小工具正在使用,这样就不会在页面中不必要地添加空的HTML。

这里有一个例子,是twenty fifteen主题的侧边栏模板文件。注意在底部的侧边栏是用<?php dynamic_sidebar( 'sidebar-1' ); >拉进来的。现在,不管是什么小工具被放入该侧边栏,都会显示在使用该模板拉入的页面上。

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文件。可以调用get_template_part( 'content', 'page')来获取content-page.php文件。

这里是twenty fifteen的content-page.php模板文件的例子。

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php // Post thumbnail. twentyfifteen_post_thumbnail(); ?>
 
 
 
<header class="entry-header">
        <?php the_title( '
 
<h1 class="entry-title">', '</h1>
 
 
' ); ?>
    </header>
 
 
<!-- .entry-header -->
 
 
 
<div class="entry-content">
        <?php the_content(); ?>
        <?php wp_link_pages( array( 'before' => '
 
<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>',
                'after'       => '</div>
 
 
',
                'link_before' => '<span>',
                'link_after'  => '</span>',
                'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%',
                'separator'   => '<span class="screen-reader-text">, </span>',
            ) );
        ?>
    </div>
 
 
<!-- .entry-content -->
 
    <?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '
 
<footer class="entry-footer"><span class="edit-link">', '</span></footer>
 
 
<!-- .entry-footer -->' ); ?>
 
</article>
 
 
<!-- #post-## -->