切换注册

登录

忘记密码 ?

切换登录

注册

| 2015-06-14

wordpress整合WooCommerce后设置产品特色图像方法

字数 4899 · 预计阅读时间 17分钟
阅读 3,294 ·   2 张图片

Wordpress 钩子

我们都知道,wordpress 可以由我们自己根据设计需求在文章列表循环内设定特色图像,包括尺寸,class,alt,title等。如果你已经了解了wordpress特色图像的调用原理,那么请直接看第二段。

一.wordpress调用特色图像

用index.php文件举例,当然也可以是archive.php或category.php,这个根据自己模版设定情况来。

找到文章输出循环体:

<?php while ( have_posts() ) : the_post() ?>//循环体... <?php endwhile; ?>

循环体内我们放置一些wordpress内置函数来调用文章标题,时间,作者,链接等等,以及缩略图。

补充一下,使用特色图像功能需要我们提前启用它,我们需要在functions.php文件中写入启用函数。

add_theme_support('post-thumbnails', array( 'post','page') );add_image_size( 'default-thumb', 400, 400, true );

第一段函数,我们使用add_theme_support()来启用模版对特色图像的支持。它包括两个参数,第一个参数post-thumbnails是对文章特色图像的支持,第二个参数array( ‘post’,’page’)是一个数组,里面囊括了我们需要支持的文章类型,比如让post,和page支持特色图像功能,那我们就要把这两个类型写进去,有的开发者会根据需要自定义一些其他的文章类型,比如建立音乐网站,专门创建了一个文章类型命名为music,这样的话,我们如果要让名称为music的文章类型也支持特色图像,就要写成array( ‘post’,’page’,’music’)

第二段函数,add_image_size(),因为系统默认的特色图像就四类:thumbnail,medium,large,full。分别是默认特色图,中等尺寸,大尺寸和完整尺寸。这几个尺寸我们可以通过网站后台来设定数值。但是如果我们需要另一种规格来满足设计需求,就需要增加它。这个函数也有参数需要设定add_image_size( ‘default-thumb’, 400, 400, true ),其中’default-thumb’可以理解为新增特色图像规格的命名,可以任意命名,因为你要区别开系统默认的’post-thumbnails’命名,后面的两个数字分别是该款特色图像的宽高值。

只有完成了上述对特色图像功能的支持,才可以根据自身实际需要灵活调用他们。

我们下面就举例,使用我们新增的特色图像规格,来完成一次调用。

<!--循环体开始--><?php while ( have_posts() ) : the_post() ?><!--调用特色图像开始--><?php if ( has_post_thumbnail() ) {?><?php the_post_thumbnail( 'default-thumb', array('class' => '...')); ?><?php } else { ?> <?php $thumbnailsrc=get_bloginfo('template_url').'/images/default.jpg'; ?> <img src="<?php echo $thumbnailsrc; ?>" alt="..." /><?php } ?><!--循环体结束-->

未标题-2

简单介绍一下,第一句if语句执行has_post_thumbnail(),判断本文是否设定了特色图像,如果没设定我们在else之后给出了一幅默认图像。

如果有特色图像,那么执行the_post_thumbnail()函数完成特色图像的调用。这个函数几个参数需要设定,第一个参数’default-thumb’,就是我们在上文add_image_size( ‘default-thumb’, 400, 400, true )中增加的特色图规格命名,告诉程序我要调用这个尺寸的特色图像,后面我跟了一个数组array(‘class’ => ‘…’),里面省略掉的部分就是我想给这张特色图设定的class,这样方便我们通过css样式文件对图片进行设定。

好了,这样wordpress就完成了一次特色图调用,系统默认调用出来的特色图属性里面是包含宽width和高height的,比如现在我们会流行将网站制作成手机自适应的版本,如果有一个固定的宽高时比较让人恼火的,我使用Bootstrap前端框架来完成wordpress的时候就遇到这种问题,我刚才已经说,我们可以根据需要设定img的class,但是width和height如何剔除?有能力的同学可能会自己写一个自定义函数来过滤掉这两个属性,但是由于涉及到正则表达式,这种方式并不适合大多数初级选手。

这里为大家提供了一种解决方式,采用wordpress内置函数直接完成img内容的输出且不包含宽和高属性。

我们将代码:

the_post_thumbnail( 'default-thumb', array('class' => '...')); 

进行修改:

$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );<img src="<?php echo $large_image_url[0]; ?>" />

其他内容不做改变。我们使用了另外两个函数来完成,即我们通过函数wp_get_attachment_image_src来获得特色图的src链接,由于变量$large_image_url 这时候被赋予的是一个数组,而该数组的第一个键值就是我们需要的img地址,所以我们要写成 $large_image_url[0]。

然后直接写一个

<img src="<?php echo $large_image_url[0]; ?>" />

将其输出。这样html格式是完全按照我们想要的样子输出的。

二.WooCommerce调用特色图像

上文我们讲了wordpress如何调用特色图像,而WooCommerce作为wordpress的一个强大电商插件如果调用特色图时改如何解决?

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

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

我在之前发布的文章《初识Wordpress 钩子机制:do_action(),add_action()》中讲过,钩子机制是wordpress开发中一项常用功能,他方便插件开发者更方便的完成所需功能定制。那么这个WooCommerce电商插件也是利用这个机制完成对wordpress的功能支持。

我们进入到WooCommerce(本文以版本2.3.11举例)插件目录下可以看到一个模版文件夹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,不熟悉的朋友可以去看这一篇文章:《初识Wordpress 钩子机制:do_action(),add_action()》

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

function sugarsoho_woocommerce_thumbnail(){//函数体:我们就把上文我们调用特色图的代码放进来}完整函数如下:function sugarsoho_woocommerce_thumbnail(){ if ( has_post_thumbnail() ) {?> <?php $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' ); ?> <img src="<?php echo $large_image_url[0]; ?>" /> <?php } else { $thumbnailsrc=get_bloginfo('template_url').'/images/default.jpg'; ?> <img src="<?php echo $thumbnailsrc; ?>" /> <?php }}

该函数函数名为sugarsoho_woocommerce_thumbnail。

现在我们开始讲这个函数挂载到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', 'sugarsoho_woocommerce_thumbnail', 10 );

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

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

发表您的高见