模板文件

模板术语

在处理WordPress主题时,术语“模板”以不同的方式使用:

  • 模板文件存在于主题中,并表示网站的显示方式。
  • 页面模板仅 用来改变页面外观的模板。页面模板可以应用于单个页面、页面部分或一类页面。
  • 模板标签是WordPress的内置功能,您可以在模板文件中使用它来检索和显示数据(例如the_title()the_content())。
  • 模板层次结构是WordPress根据所请求的内容来决定使用哪个主题模板文件的逻辑。

模板文件

WordPress主题由模板文件组成。它们是一些PHP文件,包含HTML、模板标签和PHP代码。

构建主题时,将使用模板文件来影响网站不同部分的布局和设计。例如,您将使用header.php模板创建页眉,或使用comments.php模板引入评论。

当有人访问您网站上的页面时,WordPress会根据请求来加载模板。模板文件显示的内容类型由模板文件关联的文章类型确定。模板层次描述了WordPress 将根据请求的类型加载哪个模板文件,以及模板是否存在于主题中。 然后,服务器解析模板中的PHP,并将HTML返回给访问者。

最关键的模板文件是index.php,如果在模板层次结构中找不到更具体的模板,那么所有请求最终都会被发送到这个模板上 。尽管主题仅需要一个  index.php模板,但通常主题包含许多模板,以便在不同的上下文中环境中显示不同的内容 。

模板片段

模板片段是用来包含在其他模版中的一种模板。模板片段可以嵌入多个模板中,从而简化主题创建。常见的模板部分包括:

  • header.php 用于生成网站的页眉
  • footer.php 用于生成页脚
  • sidebar.php 用于生成侧边栏

尽管以上模板文件仅适用于页面的一部分,但是您可以创建任意数量的模板片段,并将其包括在其他模板文件中。

常用WordPress模板文件

以下是WordPress可以识别的一些主题模板和文件列表。

  • index.php:主模板文件,所有主题都需要这个文件。
  • style.css:主样式文件,包含主题的信息,所有主题都需要这个文件。
  • rtl.css:从右向左阅读的样式文件,如果站点语言是从右向左阅读的,主题会自动包含此文件。
  • comments.php:主题评论模板文件。
  • front-page.php:首页模板文件,无论阅读设置中的首页设置为什么总是,优先选择此文件模板作为首页模板文件。
  • home.php:如果阅读设置中设置为静态页面,选择此文件作为首页模板文件。
  • header.php:网站页头模板文件,通常包含您网站的文档类型、元信息、样式表、脚本链接以及其他数据。
  • singular.php:单页面模板,未找到 single.php 或 page.php 时,使用此文件作为这些文章类型的单页面模板文件。
  • single.php:「文章」的详情页模板文件。
  • single-{post-type}.php:「post-type」文章类型的详情页模板文件。
  • archive-{post-type}.php:「post-type」文章类型的存档页模板文件。
  • page.php:「页面」文章类型的详情页模板文件。
  • page-{slug}.php:别名为「slug」的页面详情页模板文件。
  • category.php:分类目录存档模板文件。
  • tag.php:标签存档模板文件。
  • taxonomy.php:自定义分类法存档模板文件。
  • author.php:作者存档页模板文件。
  • date.php:日期存档页模板文件。
  • archive.php:默认存档页默模板文件。
  • search.php:搜索结果页模板文件。
  • attachment.php:单个附件页面模板文件。
  • image.php:图像页面模板文件。
  • 404.php:页面找不到时,显示的 404 错误页面模板文件。

使用模板文件

在WordPress模板中,您可以使用模板标签动态显示信息,包括其他模板文件或以其他方式自定义您的网站。

例如,您可以在 index.php 中包含其他文件:

这是一个WordPress模板标签示例,可将特定模板包含到您的页面中:

<?php get_sidebar(); ?>
<?php get_template_part( 'featured-content' ); ?>
<?php get_footer(); ?>

您可以在“ 模板标签”上找到所有内容,以了解所有相关信息。

有关模板包含的更多信息,请参考主题文件和目录部分。

主要样式表(style.css)

style.css是每个WordPress主题所需的样式表文件。它控制网站页面的呈现(视觉设计和布局)。

位置

为了使WordPress将主题模板文件集识别为有效主题,style.css文件必须位于主题的根目录中,而不是子目录中。

有关如何在主题中包含style.css文件的更多详细说明,请参见“ 使脚本和样式入队”中的“样式表”部分。

基本结构

WordPress使用style.css的头部注释部分在外观(主题)仪表板面板中显示有关主题的信息。

示例

这是style.css头部的示例。

/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with immersive featured images and subtle animations. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

WordPress主题库使用此文件中“Version”之后的数字来确定主题是否有可用的新版本。

  • Theme Name (*): 主体名称
  • Theme URI: 主题介绍信息所在的网址, 用户可以在其中找到有关主题的更多信息
  • Author (*): 制作主题的个人或组织的名称。建议使用主题作者在wordpress.org注册的用户名
  • Author URI: 制作者的网址
  • Description (*): 主题简介
  • Version (*): 主题版本,格式为 X.X 或 X.X.X
  • License (*): 主题授权许可
  • License URI (*): 主题授权许可的网址
  • Text Domain (*): 用于翻译的 文本域 字符串
  • Tags: 允许用户使用标签过滤器查找主题的单词或短语。标签的完整列表在“ 主题审查手册” 中。
  • Domain Path: 用于启用主题后,WordPress可以在哪里找到翻译。默认为  /languages

其中,带星号(*)的项目是WordPress主题库中要求的。

在所需的头部之后,style.css可以包含常规CSS样式代码。

子主题的 Style.css

如果你的主题是个子主题,则style.css头部必须包含 Template 行 。

/*
Theme Name: My Child Theme
Template: Twenty Seventeen
*/

有关创建子主题的更多信息,请访问“子主题”页面。

该文章对您有帮助吗?

需要什么帮助?