css - 如何根据特定的 wordpress 用户 Angular 色加载 CSS 类

Question

我的目标是为一个特定用户 Angular 色的类提供 css 样式。

基本上，我希望当批发买家登录时，我网站标题中的 Logo 会有所不同，因为我们通过批发商店中的一个品牌网站销售所有产品线。

在这种情况下，用户 Angular 色是批发客户，主题是 Avada 5.4.2

https://avada.theme-fusion.com/hosting/是使用相同主题的站点示例。我希望这样当用户登录到批发客户 Angular 色时，Avada Hosting Logo 将应用一个 CSS 类。

CSS 将是

img.fusion-standard-logo {
  box-sizing: border-box;
  background: url(http://notrealdomain2.com/newlogo.png) no-repeat;
  width: 165px; 
  height: 70px; 
  padding-left: 180px;
}

这基本上(以一种非常非诗意的方式)隐藏了现有的 Logo 并将其替换为背景图像，这将是我需要的 Logo 。

Answer 1

您可以使用 body_class 将当前用户的 Angular 色添加到正文中筛选。您可以将此代码放入主题的 functions.php 文件中。

Note: If you're not using a child theme, and your premium theme updates, you may lose the changes you made; in which case putting the code in a MU-Plugin file, or using a PHP insertion plugin would be a better bet. I've had a decent experience with the My Custom Functions in the past.

add_filter( 'body_class', 'add_role_to_body_class' );
function add_role_to_body_class( $classes ) {
    $current_user = wp_get_current_user();
    $current_role = (array) $current_user->roles;

    if( $current_role[0] ){
        $classes[] = 'user-role-'.$current_role[0];
    }

    return $classes;
}

这将允许您在您的 css 选择器中使用它:

.fusion-standard-logo {
    box-sizing: border-box;
    background: url(http://example.com/logo.png) no-repeat;
    width: 165px; 
    height: 70px; 
    padding-left: 180px;
}

.user-role-author .fusion-standard-logo {
    background: url(http://example.com/logo-for-authors.png) no-repeat;
}

.user-role-wholesale_customer .fusion-standard-logo {
    background: url(http://example.com/logo-for-wholesale_customers.png) no-repeat;
}

次要功能更新:

这里有一个更简洁的函数，它也适用于一个用户拥有多个 Angular 色的罕见情况:

add_filter( 'body_class', function( $classes ){
    foreach( (array) wp_get_current_user()->roles as $role ){
        $classes[] = "user-role-$role";
    }
    return $classes;
});