外贸独立站的底层设计密码WordPress 成品站模板

部分和其他模板文件

  1. 主页
  2. 文档
  3. WordPress主题开发手册
  4. 模板文件
  5. 部分和其他模板文件

并不是所有的模板文件都会生成将由浏览器呈现的整个内容。 一些模板文件被其他模板文件拉入,如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( '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() ) : ?>
 
<?php echo $description; ?>
 
                    <?php 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">

一些代码首先可能看起来有点令人生畏,但如果我们把它打破了,那就变得简单了。开始之后,head标签就被创建。 通过模板标签 wp_head()引入了我们在 functions.php 文件中排队引入的所有CSS文件和一些必须在页眉加载的js文件。

接下来,就到了body标签,HTML和PHP混合在一起使用了。 您可以在 site-branding 这个div中看到一些条件标签,用来判断用户当前在哪些页面,来显示不同的内容。 然后是添加导航菜单。最后,site-content内容div被打开,然后它应该最终在footer.php文件中进行闭合。

要注意的一个重要的模板标签是在开头body标签中找到的body_class()。 这是一个超级方便的标签,通过根据模板文件和其他正在使用的设置来添加body标签的类名,使您的主题更容易设计。

header.php文件一样,footer.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模板。 这是一个好主意,有一些消息,说明页面丢失或不再可用。 创建此模板有助于保持主题的视觉方面一致,并向最终用户提供有用的信息。

这是 twenty fifteen主题的一个404.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( '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文件。要引入您的content-page.php文件,您可以使用代码get_template_part( 'content', 'page' );

以下是 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-## -->
这篇文章对您有用吗?
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索