View Categories

怎么让你开发的主题兼容 WooCommerce-在主题中声明 WooCommerce 支持

1 min read

大多数情况下,WooCommerce 可以很好的集成到大多数 WordPress 主题中。在有些定制开发的主题中,主题的样式可能会和 WooCommerce 的样式有一些冲突或不匹配的情况,这种情况下,WooCommerce 的商店页面、商品分类页面、商品页面的布局可能会出现错乱或显示不正常。我们就需要针对我们的主题做一些改造,使我们的主题很好的支持 WooCommerce。我们可以使用两个方法解决这个问题:
使用 hooks (针对高级用户和开发者)
在主题中使用 WooCommerce 的内容输出函数 woocommerce_content() 调用 WooCommerce 内容

方法一:使用 woocommerce_content() 函数 #

此方案可以让我们在主题中创建一个新模板中,这个模板负责所有 WooCommerce 分类法存档和商品显示,此方案使用所有默认的 WooCommerce 模板,并且没有办法修改默认的 WooCommerce 模板,对 WooCommerce 不熟悉的开发者或者不需要对 WooCommerce 进行深度定制的情况下,建议使用这种方法。这种方案实现起来非常简单,按照下面的方法操作就可以了。
第一步,复制 page.php 页面模板为 woocommerce.php 模板
复制主题的 page.php,重命名为 woocommerce.php,此文件的位置应该是在:wp-content/themes/你的主题/woocommerce.php.
第二步,编辑 woocommerce.php,替换 WordPress 循环为 WooCommerce 循环
使用你最喜欢的编辑器,打开 woocommerce.php,找到页面的文章循环代码,一般是以下面的代码开始:

<?php if ( have_posts() ) :

以下面代码结束:

删除以上两段代码中间的内容,粘贴下面的代码到上面的两段代码之间即可。

完成以上操作后,我们使用了 WooCommerce 的循环代码,代替了 WordPress 默认的文章循环代码。
注意:使用 woocommerce.php 文件的时候,我们将不能在主题中覆盖 WooCommerce 的默认模板文件。

方法二:使用 hooks #

hook 的方法比使用 woocommerce_content 的方法更复杂,同事也更灵活,这个方式和使用 hook 创建主题的方法类似,也是 WooCommerce 兼容 Twenty Ten 和 Eleven 的方法。在主题的 functions.php 文件中插入以下代码。
首先卸载 WooCommerce 默认封装 HTML 标记:

remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

然后挂载我们自己主题的 HTML 标记:

add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);
function my_theme_wrapper_start() {
  echo '<section id="main">';
}
function my_theme_wrapper_end() {
  echo '</section>';
}

确保上面的标记和你所用主题的标记相匹配,具体标记可以在 page.php 中响应的位置找到。

声明 WooCommerce 支持 #

一旦主题做好了 WooCommerce 支持,我们可以在代码中声明我们的主题是支持 WooCommerce 的,这样就可以隐藏后台中 “你的主题没有声明 WooCommerce 支持” 的消息,在主题的 functions.php 文件中加入以下代码来实现这个功能:

add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
    add_theme_support( 'woocommerce' );
}

做好了以上一些步骤,你的主题已经做好基本的 WooCommerce 支持了,至于实现更多的布局样式和功能,就需要根据实际情况进行一些二次开发工作了