大多數情況下,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 支持了,至於實現更多的布局樣式和功能,就需要根據實際情況進行一些二次開發工作了。
在functions.php添加如下代碼:
// Load WooCommerce compatibility file.
if ( class_exists( 'WooCommerce' ) ) {
require get_template_directory() . '/inc/woocommerce.php';
}
添加相關文件:
woocommerce.php
添加如下文件
woocommerce.css