WooCommerce调用特色图像方式改为调用外链图片
     2018-3-17    +0°    249  

wordpress如何调用特色图像,我想大家都知道了,最常见的就是可以用外链的图片作为特色图片(需要自己建立一个函数)。而WooCommerce作为wordpress的一个强大电商插件如果调用特色图时改如何解决?

WooCommerce调用特色图像方式改为调用外链图片

原本WooCommerce插件安装时候是能直接看到已经可以显示特色图像了。但问题在于我们如果想设置img的class或者其他信息时就会比较麻烦,也不能用外链的图片来作为特色图像,WooCommerce的模版是内置到插件内部的,我们不可能直接去修改插件内模版信息,这样的话,如果下次WooCommerce版本升级,我们之前的修改就会被覆盖。

这里我们暂时不研究如何制作WooCommerce模版,我们只考虑如何更改WooCommerce默认模版的特色图信息,这样理解起来会很简单。

Wordpress钩子机制是wordpress开发中一项常用功能,他方便插件开发者更方便的完成所需功能定制。那么这个WooCommerce电商插件也是利用这个机制完成对wordpress的功能支持。

我们进入到WooCommerce(本文以版本3.3.3举例)插件目录下可以看到一个模版文件夹templates,这里就是WooCommerce自带的默认模版。当我们想修改WooCommerce的产品特色图像时,打开文件content-product.php,在里面我们能够看到好几个do_action()函数,

比如:

do_action( ‘woocommerce_before_shop_loop_item’ ),
do_action( ‘woocommerce_before_shop_loop_item_title’ ),
do_action( ‘woocommerce_after_shop_loop_item_title’ ),
do_action( ‘woocommerce_after_shop_loop_item’ )

我们找到

do_action( ‘woocommerce_before_shop_loop_item_title’ )

这一行,我们可以看到这段函数旁有一段介绍:

@hooked woocommerce_template_loop_product_thumbnail – 10

意思是这个钩子可以控制商品展示列表的图片显示,woocommerce_template_loop_product_thumbnail是WooCommerce的内置函数,用来调用我们后台发布产品的特色图。既然是内置函数,那我们就知道自己是不可能随便去修改这段函数的。

但是别忘了这里是hooks,是do_action,我们打开自己网站模版主题的functions.php文件,我们写一段自己的特色图调用函数,目的是想用这段函数替换掉WooCommerce的特色图调用内置函数。

//调用文章第一张缩略图
if (function_exists('add_theme_support')) add_theme_support('post-thumbnails');
function catch_first_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i',
    $post->post_content, $matches);
    $first_img = $matches [1] [0];
    if(empty($first_img)){ 
        $random = mt_rand(1, 20);
        echo get_bloginfo('stylesheet_directory');
        echo '/images/random/'.$random.'.jpg';
    }
    return $first_img;
}

该函数函数名为catch_first_image

现在我们开始讲这个函数挂载到WooCommerce中去。

我们继续在functions.php中增加如下代码:

remove_action( 'woocommerce_before_shop_loop_item_title','woocommerce_template_loop_product_thumbnail', 10 );
add_action( 'woocommerce_before_shop_loop_item_title', 'catch_first_image', 10 );

我们可以看到,woocommerce_before_shop_loop_item_title就是我们刚才在WooCommerce默认模版中看到的do_action参数,我们使用了一个remove_action()函数,这个函数根据字面意思理解就是移除掉某项功能,在这里我们需要挂载自己写的特色图像函数到WooCommerce模版中去,所以就需要先移除之前的特色图函数woocommerce_template_loop_product_thumbnail,移除之后,我们再使用add_action函数,挂载我们编写的catch_first_image函数,后面的数字10是权重级别,数字越小越优先,因为一个挂在点可以挂载若干个操作,所以需要有个先来后到轻重缓急的区分。

到这里我们就完成了为WooCommerce默认模版更换特色图像函数的操作。在WooCommerce主题开发中,我们首先要考虑的就是通过钩子机制来完成自己所需,至于修改模版,那是不得已而为之。