Question

我的目标是只为一个特定用户角色的类提供CSS样式。

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

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

https://avada.theme-fusion.com/hosting/是使用相同主题的网站示例。我希望这样当用户登录批发客户角色时，Avada Hosting徽标将应用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;
}

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

Answer 1

您可以使用body_class过滤器将当前用户的角色添加到正文中。您可以将此代码放在主题的functions.php文件中。

注意：如果您没有使用子主题，并且您的高级主题更新，则可能会丢失您所做的更改;在这种情况下，将代码放在MU-Plugin文件中，或使用PHP插入插件将是一个更好的选择。我过去对 My Custom Functions 有过不错的体验。

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

次要功能更新：

这里有一个更简洁的功能，它还可以适应用户多种角色的罕见情况：

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

Answer 2

我想说你可以挂钩动作wp_enqueue_scripts。

在那里，您可以检查用户是否已登录以及他是否具有某个角色，并使用wp_enqueue_style（）作为相应的css文件。

请注意，对于子主题，您应使用get_template_directory_uri()代替get_stylesheet_directory_uri()来引用子主题根。

function css_role_based(){
    if(is_user_logged_in()){
      $user = wp_get_current_user();
      if ( in_array( 'wholesale_customer', (array) $user->roles ) ) {
            //The user has the "wholesale_customer" role
            wp_enqueue_style('style_1', get_template_directory_uri() . '/css/my_custom_css_1.js');
      }else{
            wp_enqueue_style('style_2', get_template_directory_uri() . '/css/my_custom_css_2.js');
      }
    }else{
        wp_enqueue_style('style_other', get_template_directory_uri() . '/css/my_custom_css_other.js');
    }
}

add_action( 'wp_enqueue_scripts', 'css_role_based' );

Answer 3

我的第一个答案提供了一种添加一个body类的方法，并将其用作一个CSS选择器，我仍然认为它具有优点（并且可能是一个更好的方法来取消它），所以我保持发布，但是我想提出另一种方法：

如果当前用户具有您想要的角色（在这种情况下，自定义角色<style>？）wholesale_customer标记进入标题并以此方式覆盖当前徽标>

add_action( 'wp_enqueue_scripts', 'wholesale_customer_logo' );
function wholesale_customer_logo(){
    if( in_array( 'wholesale_customer', (array) wp_get_current_user()->roles ) ){
        echo '<style>
            img.fusion-standard-logo {
                background: url(http://example.com/logo-for-wholesale-customers.png) no-repeat;
            }
        </style>';
    }
}

如何基于特定的wordpress用户角色加载CSS类

3 个答案: