我正在使用BuddyPress、woo-commerce和WC供应商的插件来构建我最新的WordPress项目。
对于我的每个供应商,我都希望他们的Buddypress个人资料图片显示在他们列出的每个待售产品上,所以我在functions.php文件中添加了以下代码:
function change_wcvendors_cart_sold_by_meta_template( $meta_html, $product_id, $vendor_id ) {
if( ! $vendor_id ) {
return $meta_html;
}
if( ! class_exists( 'WCV_Vendors' ) || ! function_exists( 'bbp_get_user_profile_url' ) ) {
return $meta_html;
}
$profile_url = bbp_get_user_profile_url( $vendor_id );
$profile_name = WCV_Vendors::is_vendor( $vendor_id ) ? WCV_Vendors::get_vendor_sold_by( $vendor_id ) : bp_core_get_user_displayname( $vendor_id );
$profile_image = bp_core_fetch_avatar( 'html=false&item_id=' . $vendor_id );
$meta_html = '%1$s %2$s <a href="' . $profile_url . '" class="no-lightbox vendor-bp-link">
<img src="' . $profile_image . '" class="avatar user-' . $vendor_id . '-avatar avatar-50 photo" alt="Profile picture" width="45" height="45">
' . $profile_name . '
</a>';
return $meta_html;
}
它成功了,现在在用户的用户名旁边,"卖家"文本旁边显示用户的BP个人资料图像,请参见此处:
https://prnt.sc/s9paz8
但我只是想知道是否也可以使用CSS使图像圆形?我尝试在自定义CSS部分使用以下代码来制作图像圆形,但它不起作用,所以我认为我使用了错误的选择器:
. $profile_image {
border-radius: 50px;
}
有人能告诉我选择BP配置文件图像的正确选择器是什么吗?这就是我使用谷歌chrome检查元素时的样子:
https://prnt.sc/s9pf8u
https://prnt.sc/s9pgat
提前谢谢你,
您可以使用CSS属性border-radius
使图像圆形。我找到这把js小提琴给你看看。
http://jsfiddle.net/2QyY3/2/
编辑:这是你的问题中的演示代码:
function change_wcvendors_cart_sold_by_meta_template( $meta_html, $product_id, $vendor_id ) {
if( ! $vendor_id ) {
return $meta_html;
}
if( ! class_exists( 'WCV_Vendors' ) || ! function_exists( 'bbp_get_user_profile_url' ) ) {
return $meta_html;
}
$profile_url = bbp_get_user_profile_url( $vendor_id );
$profile_name = WCV_Vendors::is_vendor( $vendor_id ) ? WCV_Vendors::get_vendor_sold_by( $vendor_id ) : bp_core_get_user_displayname( $vendor_id );
$profile_image = bp_core_fetch_avatar( 'html=false&item_id=' . $vendor_id );
$meta_html = '%1$s %2$s <a href="' . $profile_url . '" class="no-lightbox vendor-bp-link">
<img src="' . $profile_image . '" class="round-image avatar user-' . $vendor_id . '-avatar avatar-50 photo" alt="Profile picture" width="45" height="45">
' . $profile_name . '
</a>';
return $meta_html;
}
CSS:
.round-image{
border-radius: 50%;
}