前言

若您有一個需求是：想讓使用者未登入前隱藏A物件，顯示B物件；登入後顯示A物件，隱藏B物件。使用場景例如：頁首選單的切換&會員物件的顯示。
我們今天就來探討在不借助外掛的情況下來實作此功能吧！

實作

直接開始實作吧！本實作會用到兩個語言，php與jQuery。
WordPress本身的核心編碼中就包含了jQuery，其版本會隨著WordPress的更新而一同更新，因此您無需再重複嵌入jQuery的CDN。

我們透過建立一個sign_up_in_control()函數來判斷當前網站是否有使用者登入，這會用到WordPress內建的一個is_user_logged_in()函數，此函數會return一個布林值，若返回true是已登入，false則未登入。

有了判斷依據後我們就可以在判斷式下面插入<script>標籤，用jQuery獲取元素的class來控制HTML元素的顯示狀態。

物件A的CSS class = “testA”
物件B的CSS class = “testB”

程式碼如下：

function sign_up_in_control(){
  if ( is_user_logged_in() == FALSE ) {
    ?>
    <script>
      //將未登入狀態的程式碼寫在這裡面
      jQuery(function($){
        $(".testA").hide();//控制A隱藏
      })
    </script>
    <?php
  }
  if ( is_user_logged_in() == TRUE ) {
    ?>
    <script>
      //將已登入狀態的程式碼寫在這裡面
      jQuery(function($){
        $(".testB").hide();//控制B隱藏
      })
    </script>
    <?php
  }
}

上述的sign_up_in_control()函數就完成了，未來需要隱藏更多的物件，只需要複製$(“.”).remove();並填入物件的class名稱即可。

最後，把寫好的函數新增至WordPress的「佈景主題檔案編輯器」的function.php檔案最下方即可。

將函數插入到function.php

1. 進入WordPress後台，選取「外觀」的「佈景主題檔案編輯器」

2. 選取右側選單中的「function.php」檔案(請注意，若您當前使用子主題，請選擇子主題的function.php檔案)

3. 利用add_action()將上面寫好的程式碼放進來，請直接複製下方程式碼貼上即可

add_action('wp_head', 'sign_up_in_control');
function sign_up_in_control(){
  if ( is_user_logged_in() == FALSE ) {
    ?>
    <script>
      //將未登入狀態的程式碼寫在這裡面
      jQuery(function($){
        $(".testA").remove();//控制A隱藏
      })
    </script>
    <?php
  }
  if ( is_user_logged_in() == TRUE ) {
    ?>
    <script>
      //將已登入狀態的程式碼寫在這裡面
      jQuery(function($){
        $(".testB").remove();//控制B隱藏
      })
    </script>
    <?php
  }
}

結論

注意，佈景主題更新時有可能會重設function.php，因此建議您備份您插入的程式碼，若更新時function.php被重設，您才能立即插入您的程式碼。

以上就是簡單地透過jQuery與php實作讓您控制HTML物件在登入前後的狀態，若有任何問題請聯絡謙妍-客戶支援。