Wordpress 如何根据每个页面上的用户角色应用特定 CSS 属性

Question

我正在使用“Neve”主题。

我已将自定义函数添加到 my child's theme > functions.php

根据用户角色，如果用户是 X 角色，出现在 head/nav 菜单上方的顶部栏将改变颜色。

有人可以告诉我哪里出了问题/为什么这没有按预期改变颜色吗？

亲切的问候，

function topbar_switcher () {
    
    $current_user = wp_get_current_user();
    
    switch (true)  {
    case ( user_can( $current_user, "subscriber") ):
        ?>
            <style> 
                .header-top {
                background-color:black;
                }
            </style>
        <?php
    break;
 case ( user_can( $current_user, "customer") ):
        ?>
            <style> 
                .header-top {
                    background-color:#00337f;
                }
            </style>
        <?php
    break;
 case ( user_can( $current_user, "administrator") ):
    ?>
            <style> 
                .header-top {
                    background-color:yellow;
                }
            </style>
        <?php
 break;
            
    }   
}

顶部栏是您看到 phone 图标的红色条带：

Answer 1

"I need this to apply to all pages without having to use shortcode"

您可以使用 wp_head 操作挂钩运行每个页面的以下代码，而无需使用短代码。

add_action('wp_head', 'changing_color_of_top_navbar');

function changing_color_of_top_navbar()
{

    $current_user = wp_get_current_user();

    $user_roles = $current_user->roles;

    if (in_array("subscriber", $user_roles)) {
        ?>
        <style>
            .header-top {
                background-color: black;
            }
        </style>
    <?php
    } elseif (in_array("customer", $user_roles)) {
    ?>
        <style>
            .header-top {
                background-color: #00337f;
            }
        </style>
    <?php
    } elseif (in_array("administrator", $user_roles)) {
    ?>
        <style>
            .header-top {
                background-color: yellow;
            }
        </style>
    <?php
    }
}

代码进入您的活动主题或子主题的 functions.php 文件。

Wordpress 如何根据每个页面上的用户角色应用特定 CSS 属性

Wordpress how to apply specific CSS property based on user role on every page

php

css

wordpress

wordpress-theming

custom-wordpress-pages