欢迎光临
我们一直在努力

怎么让你开发的主题兼容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的网络商店,我们提供专业的 服务,欢迎咨询。

赞(0)
未经允许不得转载:玄武新动力 » 怎么让你开发的主题兼容WooCommerce— 在主题中声明WooCommerce支持
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址