WordPress技术实现：个人资料页隐藏或禁用头部按钮

当用户处于个人资料页（profile页面）时，需实现以下任一效果：

• 移除头部的「View Profile」按钮
• 将该按钮标记为当前菜单项，同时设置为不可点击

当前代码如下：

<!DOCTYPE html>
<html <?php  language_attributes(); ?>>
    <head>
      <meta charset="<?php bloginfo('charset'); ?>">
      <meta name="viewport" content="width=device-width, initial-scale=1">
        <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="site-header">
      <div class="container">
      <h1 class="school-logo-text float-left"><a href="<?php echo site_url() ?>"><strong>Direct</strong> Connection</a></h1>
       <?php if(is_user_logged_in()) {
        ?>
        <a href="<?php echo esc_url(site_url('/search')); ?>" class="js-search-trigger site-header__search-trigger"><i class="fa fa-search" aria-hidden="true"></i></a>
        <i class="site-header__menu-trigger fa fa-bars" aria-hidden="true"></i>
        <div class="site-header__menu group">
          <nav class="main-navigation">
            <ul>
              <li <?php if (get_post_type() == 'event' OR is_page('past-events')) echo 'class="current-menu-item"';
              ?>><a href="<?php echo get_post_type_archive_link('event');?>">Events</a></li>
              <li <?php if (get_post_type() == 'post') echo "class='current-menu-item'" 
              ?>><a href="<?php echo site_url('/blog'); ?>">Blogs</a></li>
            </ul>
          </nav>
       <?php } ?>
          <div class="site-header__util">
            <?php if(is_user_logged_in()) { ?>

              <a href="<?php if (is_page() == 'profile') //Needs a function here ?>" class="btn 
              btn--small btn--dark-orange float-left push-right">View Profile</a>
              <a href="<?php echo wp_logout_url(); ?>" class="btn
              btn--small btn--orange float-left push-right btn--with-photo">
              <span class="site-header__avatar"><?php 
              echo get_avatar(get_current_user_id(), 60); ?></span>
              <span class="btn__text">Log Out</span>
            </a>
            <?php } else{ ?>
              <a href="<?php echo site_url('/login') ?>" class="btn btn--small btn--orange float-left push-right">Login</a>
           <?php }?>
           <?php if(is_user_logged_in()) {
            ?>
            <span href="<?php echo esc_url(site_url('/search')); ?>" class="search-trigger js-search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
           <?php } ?>
          </div>
        </div>
      </div>
    </header>

方案一：移除「View Profile」按钮 #

在输出按钮的逻辑中增加判断，当当前页面是profile页时，不输出该按钮：

<?php if(is_user_logged_in()) { ?>
  <?php // 仅非profile页面时显示按钮 ?>
  <?php if(!is_page('profile')) { ?>
    <a href="<?php echo esc_url(site_url('/profile')); ?>" class="btn 
    btn--small btn--dark-orange float-left push-right">View Profile</a>
  <?php } ?>
  <a href="<?php echo wp_logout_url(); ?>" class="btn
  btn--small btn--orange float-left push-right btn--with-photo">
  <span class="site-header__avatar"><?php 
  echo get_avatar(get_current_user_id(), 60); ?></span>
  <span class="btn__text">Log Out</span>
</a>
<?php } else{ ?>
  <a href="<?php echo site_url('/login') ?>" class="btn btn--small btn--orange float-left push-right">Login</a>
<?php }?>

方案二：显示为不可点击的当前状态 #

保留按钮，在profile页面时移除跳转链接，添加当前菜单项样式和禁用状态，同时阻止点击事件：

<?php if(is_user_logged_in()) { ?>
  <?php $is_profile_page = is_page('profile'); ?>
  <<?php echo $is_profile_page ? 'span' : 'a'; ?> 
    <?php if(!$is_profile_page) echo 'href="' . esc_url(site_url('/profile')) . '"'; ?>
    class="btn btn--small btn--dark-orange float-left push-right <?php echo $is_profile_page ? 'current-menu-item btn--disabled' : ''; ?>"
    <?php if($is_profile_page) echo 'onclick="return false;"'; ?>>
    View Profile
  </<?php echo $is_profile_page ? 'span' : 'a'; ?>>
  <a href="<?php echo wp_logout_url(); ?>" class="btn
  btn--small btn--orange float-left push-right btn--with-photo">
  <span class="site-header__avatar"><?php 
  echo get_avatar(get_current_user_id(), 60); ?></span>
  <span class="btn__text">Log Out</span>
</a>
<?php } else{ ?>
  <a href="<?php echo site_url('/login') ?>" class="btn btn--small btn--orange float-left push-right">Login</a>
<?php }?>

可添加对应的CSS样式，让禁用状态更直观：

.btn--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

内容的提问来源于stack exchange，提问作者cube901