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

大多数情况下，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() ) :

以下面代码结束：

<?php endif; ?>

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

<?php woocommerce_content(); ?>

完成以上操作后，我们使用了WooCommerce的循环代码，代替了 WordPress 默认的文章循环代码。

[wprs_c-alert type=”warning” content=”注意：使用 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支持了，至于实现更多的布局样式和功能，就需要根据实际情况进行一些二次开发工作了，如果你在WooCommerce二次开发中遇到了问题，欢迎在评论中提出讨论。如果你需要开发一个基于WooCommerce的网络商店，我们提供专业的 服务，欢迎咨询。