我将在 CSS 中使用哪个选择器来制作 Buddypress 用户个人资料图片？

Question

我正在使用 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;
}

...它起作用了，现在在用户名旁边显示用户的 BP 个人资料图片，在 "sold by" 文本旁边，请看这里：

https://prnt.sc/s9paz8

但我只是想知道是否可以使用 CSS 使图像变圆？我曾尝试在自定义 CSS 部分中使用以下代码制作图像圆圈，但它不起作用，所以我认为我使用了错误的选择器：

. $profile_image {
    border-radius: 50px;
}

任何人都可以建议使用什么正确的选择器来选择 BP 配置文件图像，这就是我使用 google chrome:

检查元素时的样子

https://prnt.sc/s9pf8u

https://prnt.sc/s9pgat

提前谢谢你，

Answer 1

您可以使用 CSS 属性 border-radius 让您的图片变圆。我找到了这个js fiddle 给你看看。

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%;
}

我将在 CSS 中使用哪个选择器来制作 Buddypress 用户个人资料图片？

Which selector would I use in CSS to make a Buddypress users profile image round?

css

wordpress

wordpress-theming

buddypress