我正在使用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">
&
nbsp;
' . $profile_name . '
<
/a>
';
return $meta_html;
}
… 并且它起作用了, 并且现在在用户名旁边, ” sold by” 文本旁边显示用户的BP个人资料图片, 请在此处查看:
https://prnt.sc/s9paz8
但是我只是想知道是否有可能使用CSS使图像变圆?我尝试在自定义CSS部分中使用以下代码来制作图像圆圈, 但是它没有用, 所以我认为我使用了错误的选择器:
. $profile_image {
border-radius: 50px;
}
任何人都可以建议使用什么正确的选择器来选择BP资料图像, 这就是我使用google chrome检查元素时的外观:
https://prnt.sc/s9pf8u
【我将在CSS中使用哪个选择器来使Buddypress用户个人资料图像变成圆形()】https://prnt.sc/s9pgat
先感谢你,
#1你可以使用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">
&
nbsp;
' . $profile_name . '
<
/a>
';
return $meta_html;
}
CSS:
.round-image{
border-radius: 50%;
}
推荐阅读
- 更改WordPress主题中的”加载更多”按钮的最佳方法是哪种()
- 从get_template_directory_uri到get_theme_file_uri VS哪个更好,为什么()
- 我页面右侧的空间是哪里来的()
- 性能工具之Jmeter压测WebSocket接口
- vSAN永久磁盘故障的处理过程
- 单master集群
- 赵成的运维体系管理课--开篇词
- shell脚本中接收用户参数和判断用户参数
- kubeadm安装高可用集群