Javascript 如何用纯文本替换span中的标题，并用PHP替换用户名（或diplay名称）

这是我的情况

我在woocommerce中使用flatsome主题。在它的主题定制器中，我可以选中选项框，使帐户头在登录前显示“登录/注册”，并在登录后显示显示名称（在图片中测试）

这些选项在桌面上正常工作，但在移动网站上则完全不正常。这些选项不适用。我想我唯一的选择是JavaScript。但我对HTML和JavaScript几乎一无所知

我的问题是

如何在登录手机之前将登录更改为登录/注册

登录手机后，如何使其显示显示名称而不是我的帐户

我真的很想节省成本，所以插件对我来说不是可行的选择。我也喜欢这个默认标题，因为创建自定义菜单时我不能使用弹出式登录/注册屏幕。我已经在网上搜索过了，到目前为止还没有找到解决方案

这些是我提到的帐户标题的元素

在登录之前

<a href="https://www.mywebsite.com/my-account/" class="nav-top-link nav-top-not-logged-in " data-open="#login-form-popup">
<span>
Login / Register </span>
</a>

<a href="https://www.mywebsite.com/my-account/" class="account-link account-login
  " title="My account">

            <span class="header-account-title">
        test        </span>
</a>

登录后

<a href="https://www.mywebsite.com/my-account/" class="nav-top-link nav-top-not-logged-in " data-open="#login-form-popup">
<span>
Login / Register </span>
</a>

<a href="https://www.mywebsite.com/my-account/" class="account-link account-login
  " title="My account">

            <span class="header-account-title">
        test        </span>
</a>

---

@MihaiT是对的。到处挖掘

很难在细节上提供帮助，因为您使用的是构建器，在设置过程中有很多变量。但是所有主题都使用header.php来显示所有标题中一致的内容，尤其是登录/注销详细信息。您可以查看header.php，并尝试以下内容：

<?php global $current_user; wp_get_current_user(); ?>

<?php if ( is_user_logged_in() ) { ?>

<div class="account-details">
    <p class="username">Welcome back <?php echo $current_user->display_name; ?></p>
    <a href="<?php echo wp_logout_url( get_permalink() ); ?>">&nbsp;|&nbsp;Logout</a>
</div>


 <?php } else { ?>

 <div class="account-details">
    <a href="/login/">Login&nbsp;|</a>
    <a href="/register/">&nbsp;Register</a> 
</div>

 <?php } ?>

欢迎回来

您需要在上进行任何更改，以避免使用主题更新覆盖所做的任何更改。如果您不打算创建自定义主题，那么这种方法可能不适合您，最好向主题开发人员寻求支持。主题和构建器的一个大问题是，当您需要未包含的内容时，您就陷入了困境

---

上面的代码使用一个基本的if/else和一个检测用户是否登录的wordpress函数。因为您在后端运行此程序，所以您可以访问有用的数据，例如用户名。您需要找出登录/注销的链接，但这是一般理论。

现在，我找到了第一个问题的临时解决方案。我使用额外的CSS来替换文本

.nav-top-link.nav-top-not-logged-in  span {
  display: none;
}
.nav-top-link.nav-top-not-logged-in:after {
  content: 'Login / Register';
}

其中nav top link nav top not logged in是登录前标题的类别

<a href="https://www.mywebsite.com/my-account/" class="nav-top-link nav-top-not-logged-in " data-open="#login-form-popup">
<span>
Login / Register </span>
</a>

<a href="https://www.mywebsite.com/my-account/" class="account-link account-login
  " title="My account">

            <span class="header-account-title">
        test        </span>
</a>

另外，我做了一些挖掘，找到了文件。这有两个文件。似乎该主题对桌面和移动设备使用了两种不同的代码。（/wp content/themes/flatsome/template parts/header/partials）

有一个名为element-account.php的文件

<?php $icon_style = get_theme_mod('account_icon_style'); ?>
<?php if(is_woocommerce_activated()){ ?>
<li class="account-item has-icon
  <?php if(is_account_page()) echo ' active'; ?>
  <?php if ( is_user_logged_in() ) { ?> has-dropdown<?php } ?>"
>
<?php if($icon_style && $icon_style !== 'image' && $icon_style !== 'plain') echo '<div class="header-button">'; ?>

<?php if ( is_user_logged_in() ) { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="account-link account-login
  <?php if($icon_style && $icon_style !== 'image') echo get_flatsome_icon_class($icon_style, 'small'); ?>"
  title="<?php _e('My account', 'woocommerce'); ?>">

    <?php if ( get_theme_mod( 'header_account_title', 1 ) ) { ?>
        <span class="header-account-title">
        <?php
        if ( get_theme_mod( 'header_account_username' ) ) {
            $current_user = wp_get_current_user();
            echo esc_html( $current_user->display_name );
        } else {
            esc_html_e( 'My account', 'woocommerce' );
        }
        ?>
        </span>
    <?php } ?>

  <?php if($icon_style == 'image'){
    echo '<i class="image-icon circle">'.get_avatar(get_current_user_id()).'</i>';
   } else  if($icon_style){
    echo get_flatsome_icon('icon-user');
   } ?>

</a><!-- .account-link -->

<?php } else { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>"
    class="nav-top-link nav-top-not-logged-in <?php if($icon_style && $icon_style !== 'image') echo get_flatsome_icon_class($icon_style, 'small'); ?>"
    <?php if( get_theme_mod('account_login_style','lightbox') == 'lightbox' && !is_checkout() && !is_account_page() ) echo 'data-open="#login-form-popup"'; ?>
  >
  <?php if(get_theme_mod('header_account_title', 1)) { ?>
  <span>
    <?php _e('Login', 'woocommerce'); ?>
    <?php if(get_theme_mod('header_account_register')){
        echo ' / '.__('Register', 'woocommerce');
      } ?>
  </span>
  <?php } else {
        echo get_flatsome_icon('icon-user');
    } ?>

</a><!-- .account-login-link -->
<?php } ?>

<?php if($icon_style && $icon_style !== 'image' && $icon_style !== 'plain') echo '</div>'; ?>

<?php
// Show Dropdown for logged in users
if ( is_user_logged_in() ) { ?>
<ul class="nav-dropdown  <?php flatsome_dropdown_classes(); ?>">
    <?php wc_get_template('myaccount/account-links.php'); ?>
</ul>
<?php } ?>

</li>
<?php } else {
    fl_header_element_error( 'woocommerce' );
}
?>

检查将用户名添加到标头的php代码。我想在那里；有一个条件显示
span
，账户标题取决于屏幕大小或类似的内容。Myabe在
header.php
中。您可以使用javaScript附加任何内容。但是您不“知道”用户名，因此您不知道要将什么附加到头中。因此，解决方案是深入研究php代码