主题发展-WordPress主题开发官方文档

本文是关于开发WordPress主题。如果您想了解有关如何安装和使用主题的更多信息,请查看使用主题。本主题与使用主题不同,因为它讨论了编写代码以构建自己的主题的技术方面,而不是如何激活主题或在何处获取新主题。

https://codex.wordpress.org/Theme_Development

本文是关于开发WordPress主题。如果您想了解有关如何安装和使用主题的更多信息,请查看使用主题。本主题与使用主题不同,因为它讨论了编写代码以构建自己的主题的技术方面,而不是如何激活主题或在何处获取新主题。

为什么WordPress主题

WordPress主题是一起工作以创建WordPress网站的设计和功能的文件。每个主题可能不同,为网站所有者提供了许多选择,可以立即更改其网站外观。

您可能希望开发WordPress主题供您自己使用,用于客户端项目或提交到WordPress主题目录。为什么还要构建一个WordPress主题?

WordPress主题也有很多好处。

  • 它将表示样式和模板文件与系统文件分开,因此站点将升级而不会对站点的可视化表示进行大幅更改。
  • 它允许自定义该主题独有的站点功能。
  • 它允许快速更改WordPress网站的视觉设计和布局。
  • 它消除了典型的WordPress网站所有者必须学习CSS,HTML和PHP才能拥有一个漂亮的网站的需要。

你为什么要建立自己的WordPress主题?这是真正的问题。

  • 这是一个了解CSS,HTML和PHP的更多信息的机会。
  • 这是一个将您的CSS,HTML和PHP专业知识用于工作的机会。
  • 它很有创意。
  • 这很有趣(大部分时间)。
  • 如果你把它发布给公众,你可以感觉很好,你分享并回馈给WordPress社区(好吧,吹牛的权利)

主题发展标准

应使用以下标准对WordPress主题进行编码:

主题剖析

WordPress主题存在于WordPress主题目录(默认为wp-content / themes /)的子目录中,无法使用wp-config.php文件直接移动。Theme的子目录包含Theme的所有样式表文件,模板文件和可选函数文件(functions.php),JavaScript文件和图像。例如,名为“test”的主题将驻留在目录wp-content / themes / test /中。避免使用主题名称的数字,因为这会阻止它显示在可用的主题列表中。

WordPress在每个新安装中都包含一个默认主题。仔细检查默认主题中的文件,以便更好地了解如何构建自己的主题文件。

有关视觉指南,请参阅WordPress主题剖析中的信息图

除图像和JavaScript文件外,WordPress主题通常包含三种主要类型的文件。

  1. 样式表名为style.css,它控制网站页面的显示(可视化设计和布局)。
  2. WordPress模板文件控制网站页面生成WordPress数据库中信息的方式,以显示在网站上。
  3. 可选函数文件(functions.php)作为WordPress主题文件的一部分。

我们来看看这些。

儿童主题

最简单的主题是一个子主题,它只包含一个style.css文件,以及任何图像。这是可能的,因为它是另一个主题的孩子,作为其父母。

有关儿童主题的详细指南,请参阅儿童主题

主题样式表

除了主题的CSS样式信息外,style.css还以注释的形式提供有关主题的详细信息。样式表必须以注释的形式提供有关主题的详细信息。不允许两个主题在其注释标题中列出相同的详细信息,因为这会导致主题选择对话框中出现问题。如果您通过复制现有主题来制作自己的主题,请确保先更改此信息。

以下是样式表的前几行示例,称为样式表标题,主题为“二十三”:

/ *
主题名称:二十三
主题URI:http://wordpress.org/themes/twentythirteen
作者:WordPress团队
作者URI:http://wordpress.org/
描述:WordPress的2013年主题将我们带回博客,其中包含各种帖子格式,每种格式都以自己独特的方式精美呈现。设计细节比​​比皆是,从鲜艳的配色方案和匹配的标题图像,漂亮的排版和图标开始,以及灵活的布局,无论大小,都可以在任何设备上看起来都很棒。
版本:1.0
许可证:GNU通用公共许可证v2或更高版本
许可证URI:http://www.gnu.org/licenses/gpl-2.0.html
标签:黑色,棕色,橙色,棕褐色,白色,黄色,浅色,单列,双列,右侧边栏,灵活宽度,自定义标题,自定义菜单,编辑风格,特色图像,微格式,后格式,rtl语言支持,粘贴帖子,翻译就绪
文字域名:二十三

像WordPress这样的主题是根据GPL许可的。
用它来制作一些很酷的东西,玩得开心,并与他人分享你学到的东西。
* /

注意:建议用于作者的名称与主题作者的wordpress.org用户名相同,尽管它也可以是作者的真实姓名。选择是主题作者。

请注意用于描述主题的标记列表。这些允许用户使用标记过滤器查找主题。您可以在主题评论手册中找到完整列表。

style.css中的注释标题行是WordPress能够识别主题并在“ 设计” >“ 主题”下的“ 管理面板”中将其显示为可用主题选项以及任何其他已安装主题所必需的

样式表指南

  • 在编写CSS时遵循CSS编码标准
  • 尽可能使用有效的CSS。作为例外,使用特定于供应商的前缀来利用CSS3功能。
  • 最小化CSS黑客攻击。明显的例外是浏览器特定的支持,通常是IE的版本。如果可能,将单独的CSS分成单独的部分或单独的文件。
  • 所有可能的HTML元素都应该由您的主题设置样式(除非它是子主题),包括帖子/页面内容和评论内容。
  • 表格,标题,图像,列表,块引号等。
  • 强烈建议添加打印友好样式。
  • 您可以包含带有media =“print”的打印样式表,也可以在主样式表中添加打印介质块。

功能文件

主题可以选择使用函数文件,该文件位于theme子目录中,名为functions.php。此文件基本上就像一个插件,如果它存在于您正在使用的主题中,它将在WordPress初始化期间自动加载(包括管理页面和外部页面)。建议用于此文件:

默认的WordPress主题包含一个定义了许多这些功能的functions.php文件,因此您可能希望将其用作模型。由于functions.php基本上用作插件,因此Function_Reference列表是获取有关使用此文件可以执行的操作的更多信息的最佳位置。

请注意决定何时向functions.php或特定插件添加函数: 您可能会发现需要相同的函数才能使用多个父主题。如果是这种情况,则应在插件中创建该函数,而不是针对特定主题的functions.php。这可以包括模板标签和其他特定功能。所有主题都可以看到插件中包含的功能。

模板文件

模板是用于生成访问者请求的页面的PHP源文件,并以HTML格式输出。模板文件由HTML,PHP和WordPress模板标签组成

让我们看一下可以定义为主题一部分的各种模板。

WordPress允许您为站点的各个方面定义单独的模板。但是,让您的站点的所有这些不同模板文件完全正常运行并不是必需的。根据模板层次结构选择和生成模板,具体取决于特定主题中可用的模板。

作为主题开发人员,您可以使用模板选择要实现的自定义量。例如,作为一种极端情况,您只能使用一个名为index.php的模板文件作为网站生成和显示的所有页面的模板。更常见的用途是让不同的模板文件生成不同的结果,以允许最大程度的自定义。

模板文件列表

这是WordPress识别的主题文件列表。当然,您的主题可以包含任何其他样式表,图像或文件。请记住,以下内容对WordPress有特殊意义 - 有关详细信息,请参阅模板层次结构

style.css文件

主要样式表。这必须包含在您的主题中,并且必须包含主题的信息标题。

rtl.css

rtl样式表。如果网站的文字方向是从右到左,这将自动包含在内。这可以使用RTLer插件生成。

的index.php

主要模板。如果您的主题提供了自己的模板,则必须存在index.php

的comments.php

评论模板。

前page.php文件

首页模板。

home.php

主页模板,默认为首页。如果您使用静态首页,则这是包含最新帖子的页面的模板。

single.php中

单个帖子模板。查询单个帖子时使用。对于此模板和所有其他查询模板,如果查询模板不存在,则使用index.php

单{型交} .PHP

查询自定义帖子类型中的单个帖子时使用的单个帖子模板。例如,single-book.php将用于显示名为“book”的自定义帖子类型的单个帖子。如果自定义帖子类型的查询模板不存在,则使用index.php

page.php文件

页面模板。在查询单个页面时使用。

category.php

类别的模板。查询类别时使用。

tag.php

标签模板。查询标记时使用。

taxonomy.php

术语的模板。在查询自定义分类中的术语时使用。

author.php

笔者的模板。在查询作者时使用。

date.php

日期/时间模板。在查询日期或时间时使用。年,月,日,小时,分钟,秒。

archive.php

存档模板。在查询类别,作者或日期时使用。请注意,category.phpauthor.phpdate.php将为其各自的查询类型覆盖此模板。

search.php中

搜索结果模板。在执行搜索时使用。

attachment.php

附件模板。查看单个附件时使用。

image.php

图像附件模板。查看单个图像附件时使用。如果不存在,将使用attachment.php。

404.php

404未找到模板。当WordPress找不到与查询匹配的帖子或页面时使用。

这些文件对于WordPress具有特殊含义,因为根据模板层次结构,当相应的条件标记返回true 时,它们可用作index.php的替代品(如果可用)。例如,如果只显示一个帖子,则is_single()函数返回“true”,如果活动主题中有single.php文件,则该模板用于生成页面。

基本模板

至少,WordPress主题包含两个文件:

  • style.css文件
  • 的index.php

这两个文件都进入Theme目录。该的index.php 模板文件非常灵活。它可用于包括对标题,侧边栏,页脚,内容,类别,存档,搜索,错误以及在WordPress中创建的任何其他页面的所有引用。

或者,它可以分为模块化模板文件,每个文件都承担部分工作量。如果您不提供其他模板文件,WordPress可能具有默认文件或函数来执行其作业。例如,如果您不提供searchform.php模板文件,则WordPress具有显示搜索表单的默认功能。

典型的模板文件包括:

  • 的comments.php
  • 评论-popup.php
  • footer.php
  • header.php文件
  • 的sidebar.php

使用这些模板文件,您可以将模板标记放在index.php主文件中,以将这些其他文件包含在您希望它们出现在最终生成的页面中。

以下是包含用法的示例:

<?php get_sidebar(); ?>

<?php get_footer(); ?>

某些模板函数的默认文件可能已弃用或不存在,您应在主题中提供这些文件。从3.0版开始,不推荐使用的默认文件位于wp-includes/theme-compat。例如,您应该提供header.php文件的函数get_header()安全工作,并comments.php文件的功能comments_template() 

有关这些各种模板如何工作以及如何在其中生成不同信息的更多信息,请阅读模板文档。

自定义页面模板

定义每个页面模板的文件位于主题目录中。要为页面创建新的自定义页面模板,您必须创建一个文件。让我们为我们的页面snarfer.php调用我们的第一个页面模板。在snarfer.php文件的顶部,输入以下内容:

<?PHP
/ *
模板名称:Snarfer
* /
?>

上面的代码将此snarfer.php文件定义为“Snarfer”模板。当然,“Snarfer”可以替换为大多数文本以更改页面模板的名称。此模板名称将显示在主题编辑器中,作为编辑此文件的链接。

该文件可能被命名几乎与任何东西.PHP扩展(见预留主题文件名你要的文件名不能使用;这些是用于特定目的的专用文件名WordPress的储备)。

以上五行代码取决于您。您编写的其余代码将控制使用Snarfer页面模板的页面的显示方式。有关可用于此目的的各种WordPress模板函数的说明,请参阅模板标记。您可能会发现将其他模板(可能是page.phpindex.php)复制到snarfer.php然后将上面五行代码添加到文件的开头会更方便。这样,您只需要更改 HTML和PHP代码,而不是从头开始创建它们。示例如下所示。创建页面模板并将其放在主题目录中后,在创建或编辑页面时,它将作为选项提供。(注意:创建或编辑页面时,除非以上述方式定义至少一个模板,否则不会显示“页面模板”选项。)

基于查询的模板文件

WordPress可以为不同的查询类型加载不同的模板。有两种方法可以做到这一点:作为一部分内置模板层次结构,并通过使用条件标签的循环模板文件。

要使用模板层次结构,您基本上需要提供专用模板文件,这些文件将自动用于覆盖index.php。例如,如果您的Theme提供了一个名为category.php的模板并且正在查询某个类别,那么将加载category.php而不是index.php。如果category.php不存在,则像往常一样使用index.php

通过提供名为category-6.php的文件,您可以在模板层次结构中获得更具体的信息 - 在为ID编号为6的类别生成页面时,将使用此文件而不是category.php。如果您在WordPress版本2.3及更低版本中以站点管理员身​​份登录,则可以在管理 > 类别中找到类别ID号。在WordPress 2.5中,ID列已从管理面板中删除。您可以通过单击“编辑类别”找到类别ID '并在URL地址栏上查找cat_ID值。它将显示'... categories.php?action = edit&cat_ID = 3'其中'3'是类别ID)。有关此过程如何工作的更详细信息,请参阅类别模板

如果您的主题需要更多地控制使用哪些模板文件而不是模板层次结构中提供的模板文件,则可以使用条件标记。条件标记基本上在WordPress循环中检查是否某些特定条件为真,然后您可以根据该条件加载特定模板,或在屏幕上放置一些特定文本。

例如,要在仅在特定类别中找到的帖子中生成独特的样式表,代码可能如下所示:

<?PHP
if(is_category('9')){
    get_template_part('single2'); //在ID为“9”的类别中查找帖子
} else {
    get_template_part('single1'); //把它放在每个其他类别的帖子上
}
?>

或者,使用查询,它可能如下所示:

<?PHP
$ post = $ wp_query-> post;
if(in_category('9')){
    get_template_part('single2');
} else {
    get_template_part('single1');
}
?>

在任何一种情况下,此示例代码将导致使用不同的模板,具体取决于所显示的特定帖子的类别。查询条件不限于类别,但请参阅条件标签文章以查看所有选项。

定义自定义模板

可以使用WordPress插件系统来定义根据您自己的自定义条件显示的其他模板。可以使用“template_include” 操作挂钩完成此高级功能。有关创建插件的更多信息,请参阅Plugin API参考。

包括模板文件

要将另一个模板(除了标题,侧边栏,页脚,其中包含预定义的包含命令,如get_header()加载到模板中,您可以使用get_template_part()。这使主题可以轻松地重用代码段。

从模板引用文件

在同一主题中引用其他文件时,请避免使用硬编码的URI和文件路径。而是使用bloginfo()引用URI和文件路径:请参阅从模板引用文件

请注意,样式表中使用的URI是相对于样式表的,而不是引用样式表的页面。例如,如果在主题中包含images /目录,则只需在CSS中指定此相对目录,如下所示:

h1 {
    background-image:url(images / my-background.jpg);
}

插件API挂钩

在开发主题时,最好记住应该设置主题,以便它可以与用户可能决定安装的任何WordPress插件一起使用。插件通过“Action Hooks”为WordPress添加功能(有关更多信息,请参阅插件API)。

大多数Action Hook都在WordPress的核心PHP代码中,因此您的主题不必具有任何特殊标记即可使用。但是,您的主题中需要存在一些Action Hook,以便插件可以直接在页眉,页脚,侧边栏或页面正文中显示信息。以下是您需要包含的特殊Action Hook模板标签的列表:

wp_enqueue_scripts

用于主题函数文件。用于加载外部脚本和样式表。

wp_head()

header.php中进入主题的<head>元素。示例插件使用:添加JavaScript代码。

wp_footer()

在结束</ body>标记之前进入footer.php。示例插件使用:在页脚底部插入需要在其他所有内容后运行的PHP代码。通常用于插入网络统计信息代码,例如Google Analytics。

wp_meta()

通常位于主题菜单或侧边栏的<li> Meta </ li>部分; sidebar.php模板。示例插件使用:包括旋转广告或标签云。

comment_form()

在文件的结束标记(</ div>)之前直接进入comments.php。示例插件使用:显示评论预览。

对于真实世界的用法示例,您将在默认主题模板中找到这些插件挂钩。

主题定制API

从WordPress 3.4开始,默认情况下几乎所有WordPress主题都提供了一个新的主题自定义功能。主题自定义管理页面使用add_theme_support()或使用Settings API 自动填充主题声明支持的选项,并允许管理员查看他们实时更改的非永久预览。

有兴趣为主题的主题自定义页面添加新选项的主题和插件开发人员应该看到主题自定义API的文档。有关Theme Customization API的其他教程,请访问Ottopress.com网站

不受信任的数据

您应该在主题中转义动态生成的内容,尤其是输出到HTML属性的内容。如WordPress编码标准中所述,进入属性的文本应该通过esc_attr()运行,以便单引号或双引号不会结束属性值并使XHTML无效并导致安全问题。要检查的常用位置是title,alt和value属性。

对于需要安全输出的常见情况,几乎没有特殊的模板标签。一个这样的情况涉及使用_title_attribute()而不是the_title()将标题属性输出到title属性以避免安全漏洞。以下是使用可翻译文本时正确转义帖子标题链接的title属性的示例:

<a href="<?php the_permalink();?>“title =”<?php sprintf(__('永久链接到%s','主题名'),the_title_attribute('echo = 0')); ?>“> <?php the_title(); ?> </A>

替换为正确的电话已过时逃生电话:()wp_specialchars用htmlspecialchars()esc_html() )clean_url(esc_url(),attribute_escape()esc_attr() 。有关更多信息,请参阅Data_Validation

翻译支持/ I18n

为确保语言本地化的平滑过渡,请使用基于WordPress gettext的i18n函数将所有可翻译文本包装在模板文件中。这使翻译文件更容易挂钩并将标签,标题和其他模板文本翻译成网站的当前语言。有关WordPress开发人员的更多信息,请参阅WordPress本地化I18n

主题类

实现以下模板标记以将WordPress生成的类属性添加到body,post和comment元素。对于帖子类,仅适用于The Loop中的元素。

模板文件清单

在开发主题时,请根据以下模板文件标准检查模板文件。

文件头(header.php)

以下是正确格式化的HTML5兼容头区域的示例:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <HEAD>
        <meta charset =“<?php bloginfo('charset');?>”/>
        <title> <?php wp_title(); ?> </ TITLE>
        <link rel =“profile”href =“http://gmpg.org/xfn/11”/>
        <link rel =“pingback”href =“<?php bloginfo('pingback_url');?>”/>
        <?php if(is_singular()&& get_option('thread_comments'))wp_enqueue_script('comment-reply'); ?>
        <?php wp_head(); ?>
    </ HEAD>

导航菜单(header.php

  • 主题的主导航应该支持带有wp_nav_menu()的自定义菜单。
  • 菜单应支持长链接标题和大量列表项。这些项目不应破坏设计或布局。
  • 子菜单项应正确显示。如果可能,请支持子菜单项的下拉菜单样式。下拉菜单允许显示菜单深度而不是仅显示顶级。

小部件(sidebar.php

  • 主题应该尽可能完整。布局中的任何区域都像窗口小部件(标签云,blogroll,类别列表)或可以接受窗口小部件(侧边栏)那样应该允许窗口小部件。
  • 默认情况下显示在窗口小部件区域中的内容(例如,硬编码到侧边栏中)应在从外观>窗口小部件启用窗口小部件时消失。

页脚(footer.php

<?php wp_footer(); ?>
</ BODY>
</ HTML>

索引(index.php

  • 以摘录或完整形式显示帖子列表。根据需要选择其中一个。
  • 包括wp_link_pages()以支持帖子中的导航链接。

存档(archive.php

  • 显示存档标题(标记,类别,基于日期或作者存档)。
  • 以摘录或完整形式显示帖子列表。根据需要选择其中一个。
  • 包括wp_link_pages()以支持帖子中的导航链接。

页数(page.php

  • 显示页面标题和页面内容。
  • 显示评论列表和评论表单(除非评论已关闭)。
  • 包含wp_link_pages()以支持页面中的导航链接。
  • 不应显示标签,类别,日期和作者等元数据。
  • 显示具有编辑权限的登录用户的“编辑”链接。

单帖(single.php

  • 包含wp_link_pages()以支持帖子中的导航链接。
  • 显示帖子标题和帖子内容。
  • 标题应该是纯文本而不是指向自身的链接。
  • 显示发布日期。
  • 除非对设计很重要,否则请遵守日期和时间格式设置。(日期和时间格式的用户设置位于“ 管理面板” > “设置” >“ 常规”中)。
  • 对于基于用户设置的输出,请使用the_time(get_option('date_format'))。
  • 显示作者姓名(如果适用)。
  • 显示帖子类别和帖子标签。
  • 显示具有编辑权限的登录用户的“编辑”链接。
  • 显示评论列表和评论表。
  • 使用previous_post_link()next_post_link()显示下一个和上一个帖子的导航链接。

评论(comments.php

  • 作者评论应以不同方式突出显示
  • 如果合适,显示gravatars(用户头像)。
  • 支持线程评论。
  • 显示引用/ pingbacks。
  • 除非在function_exist()中检查以避免重新声明错误,否则此文件不应包含函数定义。理想情况下,所有函数都应该在functions.php中

搜索结果(search.php

  • 以摘录或完整形式显示帖子列表。根据需要选择其中一个。
  • 搜索结果页面显示生成结果的搜索词。这是一种简单但有用的方法来提醒某人他们刚搜索的内容 - 尤其是在结果为零的情况下。使用_search_query ()get_search_query()(分别显示或返回值)。例如:
<h2> <?php printf(__('搜索结果:%s'),'<span>'。get_search_query()。'</ span>'); ?> </ H2>
  • 在搜索结果页面上再次包含搜索表单是一种很好的做法。包含它:get_search_form()

JavaScript的

  • 应尽可能将JavaScript代码放在外部文件中。
  • 使用wp_enqueue_script()加载脚本。
  • 直接加载到HTML文档(模板文件)中的JavaScript应该进行CDATA编码,以防止旧版浏览器出错。
<script type =“text / javascript”>
/ * <![CDATA [* /
//你的Javascript的内容就在这里
/ *]]> * /
</ SCRIPT>

截图

为您的主题创建屏幕截图。屏幕截图应该命名为screenshot.png,并且应该放在顶级目录中。屏幕截图应准确显示主题设计并以PNG格式保存。虽然.jpg,.jpeg和.gif也是屏幕截图的有效扩展名和文件格式,但不建议使用它们。

推荐的图像尺寸为1200px宽,900px高。屏幕截图通常显示较小,但超大图像允许在HiDPI显示屏上进行高分辨率查看。请注意,由于“管理主题”屏幕具有响应性,因此屏幕截图图像的顶部和底部可能无法查看,因此请将图形保持在中心附近。

主题选项

主题可以选择支持主题自定义屏幕。有关示例代码,请参阅示例WordPress主题选项页面

为用户角色启用主题自定义屏幕的可用性时,请使用“edit_theme_options”用户功能而不是“switch_themes”功能,除非用户角色实际上也应该能够切换主题。有关角色和功能以及添加管理菜单的更多信息,请参阅。

如果您在主题中的任何位置使用“edit_themes”功能来获得主题自定义屏幕(或某些自定义屏幕)的管理员角色访问权限,请注意,自3.0版本以来,此功能尚未分配给管理员角色在WordPress多站点安装的情况下默认。请参阅说明。在这种情况下,如果您希望管理员看到“主题选项”菜单,请使用“edit_theme_options”功能。使用WordPress多站点时,请参阅管理员角色的其他功能

主题测试过程

  1. 修复PHP和WordPress错误。将以下调试设置添加到wp-config.php文件中,以查看已弃用的函数调用和其他与WordPress相关的错误:define('WP_DEBUG',true); 。有关详细信息,请参阅不推荐使用的函数挂钩
  2. 根据模板文件清单检查模板文件(参见上文)。
  3. 使用主题单元测试进行贯穿。
  4. 验证HTML和CSS。请参阅验证网站
  5. 检查JavaScript错误。
  6. 在所有目标浏览器中测试。例如,IE9,Safari,Chrome,Opera,Firefox和Microsoft Edge。
  7. 清除任何无关的注释,调试设置或TODO项目。
  8. 如果您通过将主题提交到主题目录公开发布主题,请参阅主题审阅

资源和参考

代码标准

主题设计

CSS

模板

功能列表

测试和质量保证

发布和推广

外部资源和教程

分类

HTML Meta 标签搜集,部分标签已加中文说明。

2019-8-30 8:30:42

Typecho

Puma - 简洁的Typecho主题

2019-5-19 16:06:30

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索