css - Wordpress - 如何更改用户登录后显示的用户名的颜色？

Question

当用户登录时，WP-Members 会说：您以“用户名”登录。如何在 CSS 中引用此用户名以更改其颜色？

Answer 1

在您的主题文件中：

<?php

if (is_user_logged_in()) {
    ?>
    <p class="loggedin">You are logged in as "username".</p>
    <?php
} else {
    ?>
    <p class="loggedout">You are logged in as "username".</p>
    <?php
}

?>

CSS

p.loggedin {
    color: green;
}

p.loggedout {
    color: red;
}

Answer 2

这样做的方法是过滤它。登录状态的侧边栏有一个过滤器挂钩 - wpmem_sidebar_status。侧边栏状态的 HTML 字符串被传递给过滤器。那将是这样的：

<p>You are logged in as username<br />
<a href="http://logoutlink">click here to log out</a>

所以如果你想对用户名应用一些 CSS 来设置样式，你需要定义一些东西。您需要做的是将用户名包装在 span 标签中。但是你怎么能这样做呢？

str_replace将对特定字符串或字符串数​​组进行搜索和替换。所以我们可以用那个文本加上一个开放的跨度包装器替换用户名之前的文本。我们可以用结束<br />跨度标签加上<br />标签替换标签。

add_filter( 'wpmem_sidebar_status', 'my_sidebar_status' );

function my_sidebar_status( $string ) {

    /** The original pieces **/
    $old = array(
        'You are logged in as',
        '<br />',
    );

    /** The replacements **/
    $new = array(
        'You are logged in as <span class="my_class">',
        '</span><br />',
    );

    /** Do the search/replace **/
    $new_string = str_replace( $old, $new, $string );

    /** Return the filtered result **/
    return $new_string;
}

此过滤器进行所描述的替换将导致侧边栏状态输出如下：

<p>You are logged in as <span class="my_class">username</span><br />
<a href="http://logoutlink">click here to log out</a>

然后你可以将一些 CSS 应用到 .my_class 类

.my_class {
  font-weight: bold;
  color: red;
}