So laden Sie eine CSS-Klasse basierend auf einer bestimmten WordPress-Benutzerrolle

Mein Ziel ist es, einer Klasse CSS-Styling für nur eine bestimmte Benutzerrolle zu geben.

Im Wesentlichen möchte ich, dass das Logo in der Kopfzeile meiner Website anders ist, wenn sich ein Großhandelskäufer anmeldet, da wir alle unsere Produktlinien über eine unserer Markenseiten in einem Großhandelsgeschäft verkaufen.

In diesem Fall wäre die Benutzerrolle Großhandelskunde und das Thema ist Avada 5.4.2

https://avada.theme-fusion.com/hosting/ ist ein Beispiel für eine Website, die dasselbe Thema verwendet. Ich möchte, dass, wenn ein Benutzer bei der Rolle „Wholesale Customer“ angemeldet ist, auf das Avada Hosting-Logo eine CSS-Klasse angewendet wird.

Das CSS wäre

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

Dies verbirgt im Wesentlichen (auf sehr unpoetische Weise) das vorhandene Logo und ersetzt es durch ein Hintergrundbild, das das Logo wäre, das ich brauche.

Sie können die Rolle des aktuellen Benutzers mit dem Textkörper hinzufügen body_class Filter. Sie können diesen Code in Ihr Thema einfügen functions.php Datei.

Hinweis: Wenn Sie kein untergeordnetes Design verwenden und Ihr Premium-Design aktualisiert wird, gehen möglicherweise die von Ihnen vorgenommenen Änderungen verloren. In diesem Fall fügen Sie den Code in a ein MU-Plugin Datei, oder die Verwendung eines PHP-Einfügungs-Plugins wäre eine bessere Wahl. Ich habe damit gute Erfahrungen gemacht Meine benutzerdefinierten Funktionen in der Vergangenheit.

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

Dies würde es Ihnen ermöglichen, das in Ihrem CSS-Selektor zu verwenden:

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

Kleinere Funktionsaktualisierung:

Hier ist eine prägnantere Funktion für Sie, die auch den seltenen Fall mehrerer Rollen für einen Benutzer berücksichtigt:

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

Meine erste Antwort bietet eine Methode zum Hinzufügen einer Body-Klasse und deren Verwendung als CSS-Selektor, von dem ich immer noch denke, dass er einen Wert hat (und wohl ein besserer Weg ist, darüber zu gehen), also halte ich ihn auf dem Laufenden, wie auch immer ich würde gerne eine andere Methode vorschlagen:

Du könntest a zwingen <style> -Tag in die Kopfzeile ein und überschreibe so das aktuelle Logo, wenn der aktuelle Benutzer deine gewünschte Rolle hat (in diesem Fall eine benutzerdefinierte Rolle 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>';
    }
}

Ich würde sagen, Sie können sich in die Aktion wp_enqueue_scripts einklinken.

Dort können Sie überprüfen, ob der Benutzer angemeldet ist und ob er eine bestimmte Rolle hat, und wp_enqueue_style() für die entsprechende CSS-Datei verwenden.

Beachten Sie, dass für ein untergeordnetes Thema anstelle von get_template_directory_uri() du solltest benutzen get_stylesheet_directory_uri() um auf den Stamm des untergeordneten Themas zu verweisen.

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' );