WPCMS程序如何支持WooCommerce主题

WPCMS程序如何支持WooCommerce主题

本文以Wordpress自带的2013（twentythirteen）主题简单聊聊如何让主题支持WooCommerce插件，某些初步接触WooCommerce主题制作的朋友可能用得上。

推荐使用的编辑软件：Notepad+或者SublimeText之类；
1、创建woocommerce.php文件

复制2013主题下的page.php到同一位置（主题根目录下），将它重命名为woocommerce.php；

 
2、修改woocommerce.php文件

用上述编辑软件打开woocommerce.php，将：

   

 
      
                         
      
   

 

 

之间的PHP和HTML混合的代码全部删除；然后在删除的位置添加上如下内容：

 

       
         /*Add the follow function. */  
    woocommerce_content();   
      
    endif; ?>  

 

之后你会看到：

 

   

   
           
                 /*Add the follow function. */  
        woocommerce_content();   
        endif; ?>   
   

 

 

这个文件的修改先这样了；
3.修改functions.php文件

用上述编辑软件打开柱塞计量泵主题根目录下的functions.php，在其末尾处添加：

    ///////////////////////////////////////////////////////   
      
    //Add support   
    add_theme_support( ’woocommerce’ );   
      
    // Unhook the WooCommerce wrappers;   
    remove_action( ’woocommerce_before_main_content’, ’woocommerce_output_content_wrapper’, 10);   
    remove_action( ’woocommerce_after_main_content’, ’woocommerce_output_content_wrapper_end’, 10);   
      
    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 ’

’;   
    }   
      
    function my_theme_wrapper_end() {   
      echo ’

’;   
    }  

 
4.测试主题对WooCommerce的支持

下载并安装上WooCommerce插件，然后到Products下发布一个商品，然后到前台看下效果（如果不怕慢，请点击小图看大图）：

 

Wordpress主题如何支持WooCommerce

在上图中，我简单粗暴的调整了下页面布局：在主题根目录下用上述编辑软件打开style.css，在末尾处添加：

    /*  
    For WooCommerce support TEST by Suifengtec  
    */  
    .type-product{   
        width:90%;   
        margin:0 5%;   
        padding:16px;   
        padding:1.6rem;   
    }  

 

当然，你可以参考Woothemes的具体文档进行美化，免费码字到此结束，如果觉得对您有帮助，请支持一下我们，如何支持呢？这个页面上貌似有你可以点的东西啊！