WordPress中文文档：WordPress主题开发(2)

学习笔记 2017/07/14 WordPress

大部分Action Hooks存在于wp的php核心中，所以你的主题不需要任何多余的特殊标签来让它可以正常运转。但是少数的Action Hooks需要在你的主题中做特殊处理，以使插件能够将头，尾，侧边栏等信息输出到页面中。如下是你需要包含到主题 中的Action Hooks列表：

  • wp_head()

  • 放在<head>标签之内，在 header.php文件中. 大部分插件常在这里导入javascript文件。

  • wp_footer()

  • 在footer.php，在</body>标签之前 . 使用举例：一些插件会在这里插入要在文档最后执行的PHP代码。更常见的用法是插入网页静态代码，比如Google Analytics。

  • wp_meta()

  • 通常用在主题菜单或侧边栏 sidebar.php 模板文件的 <li>Meta</li> 中。使用举例：包括一个旋转的广告或标签云。

  • comment_form()

  • 放在 comments.php ，在文件的结束标签(</div>)之前。 使用举例：显示评论预览。

主题定制API

在 WordPress 3.4开始，添加了一个新的主题自定义功能，几乎适用于所有WordPress主题。通过在主题中提供一个支持声明 add_theme_support() 或者使用 设置API ，就可以自动填充一些选项到主题的定制管理页面中，同时允许管理员在线实时预览主题的效果。

主题和插件开发者，如果有兴趣添加一些新的选项到主题定制页面中，可以查看 主题定制API 文档 和 Ottopress.com 网站的教程。

不可信的数据

你应该避免在你的主题中动态生成内容，尤其是在HTML属性中输出的内容。正如 WordPress标准编码文档 所提及的，在属性中加载的本文应该使用 esc_attr() 包括，以避免单引号或双引号结束属性值和产生无效的XHTML，从而导致安全问题。

常见的安全输出情况下，需要有一些特殊的模板标签。在这种情况下，输出一个标题属性，应该使用the_title_attribute() 而不是 the_title() ，这样才能避免安全问题。下面来看一个例子，正确转义一篇文章标题链接的标题属性：

<a href="<?php the_permalink(); ?>" 
title="<?php sprintf( __( \'Permanent Link to %s\', \'theme-name\' ), 
the_title_attribute( \'echo=0\' ) ); ?>"><?php the_title(); ?></a>

使用正确的响应函数替换已经弃用的应该避免的函数：使用 esc_html() 替换 wp_specialchars() 和htmlspecialchars()，使用 esc_url() 替换 clean_url()，使用 esc_attr() 替换attribute_escape()。查看 Data_Validation 了解更多。

翻译支持/ I18N

为了确保本地语言的平稳过渡，请在主题文件中，使用基于 WordPress  gettext-based i18n 的功能来包装所有需要翻译的文本。这样更有利于将语言包的翻译挂载到当前网站中。请阅读 WordPress 本地化 和 I18n for WordPress Developers 了解更多信息。

主题类（Theme Classes）

使用下面的模板标签来添加WordPress的 body、post、和 comment 的元素属性。其中 post 类，只适用于在循环（Loop）中的元素。

模板文件清单

开发你的主题时，请按照下面的标准检查你的主题模板文件：

头部文档（header.php）

下面是一个格式正确的HTML5兼容的头部区域的例子：

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( \'charset\' ); ?>" />
<title><?php wp_title(); ?></title>
<meta name="description" content="<?php bloginfo( \'description\' ); ?>">
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" 
media="screen" />
<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() 的自定义菜单功能：

  • 菜单应该支持长链接的标题和大量的列表项。不应该打破这些项目的设计或布局。

  • 应该正确支持子菜单的显示。可以的话，建议通过下来菜单来显示子菜单，并且支持多级子菜单。

Widgets小工具（sidebar.php）

  • 主题应该支持小工具（Widgets），允许一些布局区域（比如侧边栏）挂载小工具（比如标签云、友情链接、分类类表 等）。

  • 小工具的应该是可以从 外观 – 小工具 中进行设置，并且当添加小工具时，原来硬性写定到小工具区域的默认内容应该被替换。

页脚（footer.php）

  • 在 </body>结束标签的前面添加 wp_footer() ：

  • <?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 头像（如果适用）

  • 支持嵌套评论

  • 显示 引用通告（trackbacks/pingbacks）

  • 该文件不应该包含函数的定义，除非使用  function_exist() 来检查，以避免再次声明中指定的错误。理想情况下，所有的函数应该在 functions.php 文件中。

搜索结果（search.php）

  • 通过摘要或全文输出的方式显示文章列表。可以根据自己的需要选择适合的方式。

  • 搜索结果页面显示的搜索字词产生的结果。这是一个简单而有效的方式来提醒别人，他们只是在搜索——特别是在结果为零的情况下。使用  the_search_query() 或 get_search_query() （显示或返回值，分别）。例如：

  • <h2>
<?php 
printf( __( \'Search Results for: %s\' ), \'<span>\' . get_search_query() . \'</span>\'); 
?>
</h2>

  • 这是一个好的做法，在搜索结果页面中再次包含搜索表单，可以使用 get_search_form()

JavaScript

  • JavaScript代码应该尽可能放在外部文件中。

  • 使用 wp_enqueue_script() 加载你的脚本。

  • Javascript的直接加载到HTML文件（模板文件）应该是CDATA编码，以防止旧版本的浏览器出现错误。


  • <script type="text/javascript">
/* <![CDATA[ */// content of your Javascript goes here/* ]]> */
</script>

截图

为你的主题添加一个截图。截图应该命名为 screenshot.png ，并且放在你的主题的根目录下。截图应该能直接展示你的主题设计和保存为 PNG 格式。推荐的图像大小为600×450，截图将显示为300×225，但双尺寸的图像，用来给HIDPI显示器上更好的显示效果。

主题选项

主题可以有选择地支持 主题选项屏幕 。举个简单的代码例子，查看 A Sample WordPress Theme Options Page。

如果要给用户使用 主题选项屏幕 的权限，应该使用“edit_theme_options”来设置用户的权限，而不是使用 “switch_themes”，除非这个用户角色可以直接切换主题。需要了解更多，你可以阅读 Roles and Capabilities 和  Adding Administration Menus。

如果你正在主题中使用 “edit_themes”能力来为管理员添加访问 主题选项屏幕 （或其他自定义屏幕）的权限，要知道，自 3.0 版以来，这个能力默认并没有分配给WordPress多站点的管理员。查看 说明。 在这种情况下，如果你希望管理员访问“主题选项”菜单，请使用 “edit_theme_options”能力。查看WordPress多站点的管理员的附加能力。

主题测试过程

  1. 修复PHP和WordPress错误。添加下面的调试设置到你的wp-config.php，以便看到废弃的函数调用和其他WordPress相关的错误：define(‘WP_DEBUG’, true); 。查看 Deprecated Functions Hook 了解更多。

  2. 对照上面提到的 模板文件清单 检查模板文件。

  3. 使用 Theme Unit Test 做一个运行测试。

  4. 验证HTML和CSS。请参阅验证一个网站。

  5. 检查 JavaScript 错误。

  6. 测试在所有目标浏览器。例如，IE7，IE8，IE9，Safari，Chrome，Opera，和 Firefox。

  7. 清理任何多余的意见，调试设置，或待办项目。

  8. 请查阅 Theme Review 如果你希望将主题公开发布到WordPress官方主题库。


本文地址：https://www.stayed.cn/item/4

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案