最常见的 WordPress 主题开发错误(以及如何修复它们)

已发表: 2019-05-14

将主题提交到 WordPress.org 主题目录是分享您的工作并为 WordPress 社区做出贡献的好方法。 目前,该目录中有超过 7000 个主题,其中最受欢迎的主题超过 300,000 个活跃安装。 (不包括与 WordPress 一起打包并安装数以百万计的 20____ 主题。)

在将您的主题提交到目录之前,首先了解审核过程很重要,因为如果您的主题不符合这些要求,它可能会被当场拒绝。

具有 3 个或更多不同问题的主题可能会因未获批准而关闭。 但是,主题作者可以在纠正问题后重新提交主题。

https://make.wordpress.org/themes/handbook/review/required/

审阅者站在您这边,希望看到您的主题上线,只要它符合要求的标准。 如果您的主题只有小问题阻止它被包含在目录中,您的审阅者将与您一起修复这些问题。

不幸的是,如果您的主题有太多问题,它将被视为未获批准而关闭。 如果您决定解决问题,您可以再次上传主题 - 但它将加入队列的后面。

根据我审查 100 多个主题的经验,我已经能够确定阻止主题获得批准的最常见问题。 通过在本文中与您分享这些内容,我希望可以帮助您避免陷入队列或被拒绝。

上传您的主题

当您上传主题时,它会加入要审核的队列。 平均而言,您的主题需要两个月的时间才能排到队列的最前面并获得第一次审核。 所有审稿人都是志愿者,可用于完成审稿的时间有限。 多种因素会影响等待时间。 当更多人自愿审查主题时,队列会迅速移动。 相反,当提交有很多问题的主题时,它会减慢队列。

通过提交满足所有要求的主题,它会使审核过程更加顺畅,最终您的主题将更快上线。 在本指南中,我们将探讨最常见的问题,这些问题会使您的主题排在队列中并阻止其获得批准。

注意:具有提交无问题主题记录的主题作者可以申请成为“受信任的作者”。

命名问题

当您上传主题时,执行的第一个检查是查看名称是否已被占用。 即使您在目录中看不到具有该名称的主题,您经常会被告知您选择的名称已被占用。

怎么可能? 原因是测试不只是检查目录,而是检查整个 WordPress 生态系统。 如果某个主题已在任何地方(Github、ThemeForest 等)发布并且有超过 50 个活动安装,则该名称将无法使用。

注意:如果您在其他地方发布了您的主题并累积了 50 次以上的安装,您仍然可以在目录中使用该名称。

未转义的输出

主题审阅者非常重视安全性,甚至还有专门的资源。 可以写一篇关于编写安全主题的整篇文章,但在本节中,我们将探讨一个方面:转义输出。

未转义的输出会使您主题的用户面临风险。 下面是一个非转义值 ($title) 的示例:

 $title = get_option('my_custom_title');
回声'<h2>'。 $标题。 '</h2>';

上面的问题是,虽然我们知道 $title应该是什么类型的值,一个字符串,但我们没有检查是否是这种情况。

如果黑客设法更改了数据库中“my_custom_title”的值,您的主题将输出该值。 这带来了巨大的风险,因为他们可以用内联 Javascript 替换预期的输出:

 alert('这很危险'); 

解决方案是转义所有输出以确保它只包含我们期望的数据类型。

我们的示例可以这样修复:

 $title = get_option('my_custom_title');
回声'<h2>'。 esc_html($title)。 '</h2>';

使用 esc_html 的缺点是它会去除所有 HTML 标签。 如果 $title 包含粗体或斜体,例如:

 $title = '这篇文章<strong>非常</strong>有用';
回声 esc_html( $title );

“very”这个词在前端不会加粗; 相反,它会输出代码<strong>very</strong>。

这说明了为什么对上下文使用正确的转义函数很重要。 如果我们期望输出中有一些 HTML,我们最好使用 wp_kses_post() 或 wp_kses() 并设置 $allowed_html 参数。

输出的函数也需要转义:

 <a href="<?php echo esc_url(get_permalink()); ?>">

例外是名称中包含“the_”的 WordPress 核心函数,这些函数通常已经被转义。

 函数 the_permalink( $post = 0 ) {
    /**
     * 过滤当前帖子的永久链接的显示。
     *
     * @since 1.5.0
     * @since 4.4.0 添加了 `$post` 参数。
     *
     * @param string $permalink 当前帖子的永久链接。
     * @param int|WP_Post $post 帖子 ID、WP_Post 对象或 0。默认为 0。
     */
    echo esc_url(apply_filters('the_permalink', get_permalink($post), $post));
}

无法翻译的文本

要被目录接受,所有主题都必须 100%“准备好翻译”。 这意味着您的主题输出的每个文本字符串都必须是可翻译的。

WordPress 已经拥有处理翻译过程的系统和功能,您只需要确保您的字符串使用正确的功能。

虽然实现起来很简单,但由于它与人们编写 HTML 的方式背道而驰,因此经常被忽视。

通常,您可能会执行以下操作:

 <h1>404 - 未找到</h1>

为了使其可翻译,您需要添加一些 PHP:

 // __ 函数是本地化的基础。
<h1><?php echo __( '404', 'text-domain' ); ?>

// _e 函数回显该值。
<h1><?php _e('404', '文本域'); ?>

// 转义并回显字符串。
<h1><?php esc_html_e('404', 'text-domain'); ?>

// 本地化和变量。
<h1><?php _n('一个帖子', '%s 个帖子', $count, 'text-domain' ); ?>

函数输出的字符串也必须准备好翻译:

 // 未准备好翻译 :-(
<?php next_posts_link('旧条目'); ?>

// 翻译就绪 :-)
<?php next_posts_link( esc_html__( '旧条目', '文本域' ) ); ?>

提示:codex.wordpress.org 中的很多代码示例不使用翻译功能,因此在复制和粘贴时要小心。

不正确地排队资源

您的主题使用的 .css 和 .js 文件必须使用正确的函数进行排队:wp_enqueue_style() 用于 CSS 和 wp_enqueue_script() 用于 Javascript。

一个常见的错误是将脚本和样式直接硬编码到 <head> 或 </body> 之前。 这种方法有两个问题:

1. 无法删除

如果插件需要删除您已加载的资源,这是不可能的。 如果您使用了正确的入队函数,则可以这样做:

 /**
 * 将主题 javascript 出列。
 *
 * 与 wp_enqueue_scripts 动作挂钩,具有后期优先级 (100),
 * 所以它是在脚本入队之后。
 */
函数 wptavern_dequeue_script() {
   wp_dequeue_script('主题脚本');
}
add_action('wp_enqueue_scripts','wptavern_dequeue_script',100);

2.重复加载

如果您将资源(例如 jQuery)加入队列,并且插件也将其加入队列,则 WordPress 足够智能,只需加载一次。

 /**
 * 排队 jQuery
 *
 * jQuery 只会加载一次,尽管有两个入队。
 * jQuery 与 WordPress 打包在一起,因此我们不需要指定 src。 
 */
函数 wptavern_enqueue_script() {
   wp_enqueue_script('jquery');
   wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts','wptavern_enqueue_script');

相反,如果您将 jQuery 硬编码到您的 <head> 中,那么 WordPress 将无法知道,它会被加载两次。

插件区域功能

主题的范围应仅处理网站的设计和美学,所有其他功能应由 WordPress 本身或插件处理。

为了给他们的主题增加更多价值,主题作者经常尝试加入额外的功能,例如 SEO 控件或自定义帖子类型。

将功能捆绑到主题中的问题是数据不可移植。 以 SEO 控件为例,如果用户更改了主题,他们将失去他们为优化页面所做的所有工作。 相比之下,通过使用 SEO 插件,数据和功能独立于主题,并且在更改主题时将保留。

插件区域功能的一些示例:

  • 分析/跟踪
  • 搜索引擎优化控制
  • 联系表格
  • 简码
  • 古腾堡街区

提示:如果您的代码写入数据库,则很可能是插件领域。 与设计相关的设置(侧边栏位置、颜色等)除外。

不加前缀

前缀是一种确保您的代码不会与插件代码冲突的方法。 PHP 中的命名空间是实现相同效果的更好方法。 但是,一些用户仍在使用不支持该功能的旧版本 PHP (5.2)。

Justin Tadlock 分享了一个应该加上前缀的常见事物列表:

  • PHP 函数名称。
  • PHP 类名。
  • PHP 全局变量。
  • 动作/过滤器钩子。
  • 脚本句柄。
  • 风格手柄。
  • 图像尺寸名称。

来源:https://themereview.co/prefix-all-the-things/

 // 函数示例。
my_prefix_example();

// 类示例。
类 My_Prefix_Example { … }

// 动作和过滤器示例。
do_action('my_prefix_action');
apply_filters('my_prefix_filter', $values );

// 将示例排入队列。
wp_enqueue_script('my_prefix_script', get_template_directory_uri() . '/js/custom-script.js' );
wp_enqueue_style('my_prefix_style', get_template_directory_uri() . '/css/styles.css' );

// 图像大小示例。
add_image_size('my_prefix_image_size', 220, 180); // 220 像素宽 x 180 像素高。

例外:在对第三方资源进行排队时,不要添加前缀:

 // 将第三方脚本 (chosen.js) 加入队列。
 wp_enqueue_script('选择',get_template_directory_uri()。'/js/chosen.js');

许可问题

您的主题及其所有文件必须 100% 兼容 GPL。 这包括图像、库、脚本和字体。

所有第三方资源都必须列出其来源和许可信息。

这个要求可能特别棘手,因为并非所有许可证都对 GPL 友好。 Unsplash 许可证只有一个限制:

“此许可不包括从 Unsplash 编译照片以复制类似或竞争服务的权利。”

然而,这一限制足以使其与 GPL 不兼容,因此,您不会在 wordpress.org 主题中看到 Unsplash 图像。

此处提供了与 GPL 兼容的许可证列表 – https://www.gnu.org/licenses/license-list.html#GPLCompatibleLicenses

最近, stocknap.io 一直是该目录中最常见的图像来源,因为它们列出的所有图像都被许可为 CC0(与​​ GPL 兼容)。

截图错误

要求规定您的屏幕截图应该是您的主题的未经编辑的表示,看起来不像广告。 这意味着没有 Photoshop 工作、叠加层、边框或花哨的效果。

图像还必须遵循我们上面探讨的相同许可要求。

图中主题:Blocksy

奖励:使用编码标准

对你来说似乎很容易阅读和理解的代码,对于只有 10 到 15 分钟来检查你的代码的审阅者来说可能是完全相反的。

虽然对编码标准没有要求,但遵循一个确实使您的代码更易于阅读、理解和维护。 我个人使用并推荐“WordPress 编码标准”,尽管还有其他标准。

在代码编辑器中使用 PHP_CodeSniffer 和 WordPress 规则集可以更轻松地遵守标准 – https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards

结论

主题要求是在考虑最终用户的情况下创建的。 避免犯我上面列出的常见错误,您的主题将立即获得批准。 如果您想从另一边体验审稿过程,您甚至可以成为审稿人。