如何隱藏或顯示WordPress區塊內容

對於任何 WordPress 開發人員或設計人員來說，控制在什麼情況下可以看到什麼內容都是非常有價值的工具。

幸運的是，WordPress 生態系統中有許多外掛可以提供幫助。在這裡，我們將討論四款外掛，它們可以讓你實現以下功能：

• 在即時頁面上隱藏草稿內容。
• 為組、頁首和頁尾應用顯示條件。
• 根據日期和時間顯示內容。
• 根據裝置型別顯示不同的設計。

我們所評測的外掛之間的主要區別在於執行這些操作的難易程度。

我們選擇的外掛側重於在區塊內顯示或隱藏內容。我們不涉及限制頁面訪問的會員外掛等更廣泛的解決方案，也不討論如何鎖定、解鎖或隱藏區塊本身。關於這一點，請參閱我們的文章：如何停用和鎖定古騰堡區塊。

所有這四款外掛均可與區塊、混合或經典主題配合使用。它們還支援樣板、部分同步樣板以及使用區塊製作的完全同步模式。

雖然自定義程式碼不一定是顯示或隱藏區塊的最佳方式，但我們提供了一些程式碼片段作為示例。

顯示或隱藏區塊內容的WordPress外掛

我們研究的這些外掛具有類似的功能，但實現方式各不相同。除了在“其他外掛”部分提到的最後兩個外掛沒有這些選項外，大多數外掛都在 “WP 管理”>“設定 ”中進行了全域性設定。

不過，所有這些外掛都在編輯器的檢查面板（右側邊欄）中提供了每個區塊的可見性控制，無論你是在處理頁面、文章、自定義文章型別還是網站編輯器。

Block Visibility

Block Visibility 外掛

Block Visibility 是該領域最著名的外掛之一。早在區塊編輯器誕生之初，該外掛就已面世。它提供最全面的功能集和直觀的使用者介面（UI），而且完全免費，沒有高階版本。

你可以根據不同的條件，單獨或組合設定任何區塊的可見性控制：

• 瀏覽器和裝置 – 根據訪客的瀏覽器（Chrome、Firefox、Safari 等）或裝置型別（桌上型電腦、平板電腦、手機）顯示或隱藏區塊。
• Cookie – 根據使用者瀏覽器中是否存在特定 cookie 來控制可見性，這對個性化非常有用。
• 日期和時間 – 將內容安排在特定時間或特定日期可見，例如只在營業時間顯示資訊。
• 隱藏區塊 – 直接覆蓋，完全隱藏區塊，不考慮任何其他條件。
• 位置 – 根據訪問者的地理位置（國家、地區或城市）顯示或隱藏內容。
• 後設資料 – 使用自定義後設資料值控制可見性，通常適用於自定義帖子型別中的動態內容。
• 查詢字串 – 根據 URL 引數顯示或隱藏區塊（例如，僅當 URL 中有 ?promo=true 時才顯示區塊）。
• 推薦來源 – 根據訪客的來源更改可見性（例如，如果使用者來自 Google，則隱藏特價產品）。
• 螢幕尺寸 – 根據螢幕寬度調整可見性，允許手機、平板電腦或桌上型電腦使用者使用不同的內容。
• URL 路徑 – 根據頁面的 URL 顯示或隱藏區塊，這對於僅在網站的特定頁面或部分顯示內容非常有用。
• 使用者角色 – 根據登入使用者的角色限制可見性，例如向管理員或會員顯示專屬內容。

該外掛還包括管理區塊可見性的其他功能：

• 可見性預設 – 將預定義的可見性設定儲存並應用於多個區塊。
• 複製和匯入設定 – 在不同區塊間輕鬆複製可見性設定。

此外，在區塊工具欄中還可以直接切換“Hide block from everyone”，為完全隱藏任何區塊提供了快捷方式。

讓我們看看如何使用該外掛的兩個常見示例。

日期和時間

Block Visibility 外掛可根據日期和時間條件對內容排程進行全面控制。您可以設定特定的時間範圍、日期或兩者的組合。

例如，我們想在商店營業時顯示一個標題，在商店關門時顯示另一個標題：

• Our Shop Is Open Now 應在上午 8 點至下午 5 點之間顯示。
• 其他時間則顯示 We Are Closed Now。

如果您是第一次使用，請單擊加號 (+) 圖示或三點選項選單，顯示外掛的控制選項，然後選擇日期和時間。對兩個標題塊都這樣做。

所有可用條件的截圖，包括日期和時間。

將上午 8 時至下午 5 時條件應用到“Our Shop Is Open Now”標題。

將時間表應用於 WordPress 區塊。

標題“We Are Closed Now”需要兩組資料來銜接午夜的日期變更。

為 WordPress 區塊應用多個時間間隔。

這樣設定後，標題將按照可見性條件中的設定顯示。

上午 8 時至下午 5 時營業，其他時間不營業。

推薦來源

在本示例中，如果推薦來源包含規定 URL 的任何部分，我們將隱藏按鈕。或者，如果推薦包含規定 URL 的任何部分，我們也可以選擇顯示按鈕。

由於推薦 URL 包含“www.wbolt.com”，因此該按鈕在前端被隱藏。

Tips：每個區塊都有一個“Hide the block from everyone”切換選項，這是一個覆蓋選項。在設定可見性條件時，請不要切換它。您還可以根據所使用的可見性條件看到不同的切換。

最後，在 “設定”>“Block Visibility”中，你會看到三個主要部分：

• 常規設定
• 可見性控制
• 區塊管理器

為獲得最佳體驗，建議在常規設定中啟用 Full Control Mode。這樣可以確保每個區塊都有可見性設定。

有些區塊（如按鈕區塊）需要進行此設定，因為外掛的可見性控制預設未在檢查器面板中啟用。

Content Control

Content control 外掛

不要與“Restrict Content”外掛混淆，“Content Control”外掛提供了兩種隱藏或顯示內容的條件。

• 裝置規則– 根據裝置型別（桌上型電腦、平板電腦或手機）控制塊的可見性。
• 使用者規則– 根據使用者角色顯示區塊，可針對登入使用者、登出使用者、所有角色、特定角色或排除角色進行設定。

這些規則可以單獨使用，也可以組合使用，以建立靈活的可見性條件。例如，我們使用 “裝置規則”來顯示針對不同螢幕尺寸最佳化的影像。較大的圖片設定為只在桌上型電腦上顯示。

• A：在頁面編輯器中，“移動段”和“平板電腦”檢視被切換為關閉。
• B：在前端，影像的大小適合桌上型電腦。

在影像區塊中新增裝置規則。

此外，移動最佳化影像已設定為僅在平板電腦和移動裝置上顯示。

• A：在頁面編輯器中，關閉桌面檢視。
• B：在前端，影像顯示在平板電腦和移動裝置上。

移動裝置規則

這種設定可確保使用者看到最適合其裝置的圖片大小，從而提高效能和使用者體驗。

此外，每個區塊還包括四個可選設定，可透過三點式選項選單訪問：

• 複製 – 複製區塊設定。
• 貼上 – 將複製的設定應用到另一個區塊。
• 恢復預設值 – 重置區塊的所有可見性條件。
• 停用裝置規則/停用使用者規則 – 暫時關閉可見性條件而不刪除它們。

四種可選的裝置規則設定

我們強烈建議在測試外掛時使用停用裝置規則或停用使用者規則選項。這樣可以更方便地根據需要重置和調整可見性設定。

在“WP 管理”>“設定 ”中，您可以找到外掛的幾個全域性設定，例如定義 breakpoint。以下是三種裝置的預設設定。

顯示可調整 Breakpoint 的區塊設定檢視。

您還可以在這些設定中為任何區塊切換關閉外掛。該外掛的高階版本包括這些功能和許多其他功能：

• 區塊排程– 設定基於時間的可見性條件。
• WooCommerce 規則 – 根據 WooCommerce 設定控制區塊可見性。
• Easy Digital Downloads -限制數字產品客戶的內容。
• 布林規則 – 對區塊可見性使用邏輯條件。
• 區塊規則引擎 – 更靈活地建立自定義可見性條件。

其他外掛

除了較受歡迎的選項外，還有兩個不太知名的外掛也提供區塊可見性控制功能，但它們的活躍安裝量較少：

Conditional Blocks – 高階內容可見性

Conditional Blocks 外掛

Conditional Blocks 外掛允許您使用高階邏輯控制 WordPress 區塊的可見性，所有操作都在一個簡單的模式介面中完成。您可以設定條件，決定何時何地顯示區塊。

免費版的 Conditional Blocks 包括基本的可見性控制，例如

• 對所有人封鎖區塊 – 完全隱藏區塊。
• 響應式可見性 – 根據裝置型別（手機、平板電腦或桌上型電腦）顯示或隱藏區塊。
• 使用者狀態條件 -“使用者已登入”選項只顯示已登入使用者的區塊，而“使用者已登出”選項只顯示已登出使用者的區塊。
• AND/OR 條件邏輯 – 結合多個規則建立複雜的可見性條件。

專業版透過其他功能擴充套件了功能，包括

• 預設管理器 -儲存規則組並將其應用於網站的多個區塊，以實現高效管理。
• 高階Breakpoints – 為不同裝置定義自定義螢幕尺寸。
• 地理位置控制 – 根據使用者的位置顯示或隱藏區塊（需要 API 金鑰）。
• 工具欄設定 – 直接從區塊工具欄管理可見性條件。
• 基於使用者角色的可見性 – 根據使用者角色（如管理員、訂閱者、客戶）限制區塊。
• 排程選項 – 設定區塊僅在特定日期範圍或時間內出現。
• WooCommerce和會員整合 – 根據購物車內容、使用者會員資格等控制可見性。

對於需要更大靈活性和高階條件邏輯的使用者，專業版提供了一個完整的工具包，用於大規模管理內容可見性。

Wicked Blocks Condition

Wicked Blocks Condition 外掛

Wicked Blocks Condition 外掛是一款免費外掛，可根據各種條件隱藏或顯示區塊：

• 使用者登入狀態 – 根據使用者是否登入來顯示或隱藏區塊。
• 使用者角色 – 根據使用者角色限制可見性。
• 日期和時間 – 安排內容在特定時間出現或消失。
• 文章類別或標籤 – 根據指定的類別或標籤顯示內容。
• 文章狀態 – 根據文章是否已釋出、草稿、待定等來控制可見性。
• 查詢字串引數 – 根據 URL 中的值調整可見性。
• 自定義 PHP 函式 – 為高階可見性控制執行自定義邏輯。

使用自定義 PHP 函式的功能使該外掛特別適用於希望直接在使用者介面中新增自己的邏輯的開發人員。

顯示或隱藏區塊內容的自定義程式碼

如果您的使用情況比較簡單，只想載入必要的內容，您可以使用自定義程式碼而不是外掛。這可以透過編寫自己的外掛或直接在functions.php檔案中新增函式來實現。

Tips：一如既往，在修改核心主題檔案時，最好使用子主題，以免更新時丟失更改。

下面是三個基於 PHP 的示例，但如果效能是首要考慮因素，JavaScript 可能是更好的選擇。

根據使用者登入狀態隱藏內容

下面的示例會在使用者登入時隱藏所有段落（<p>）元素：

add_action( 'wp_head', 'wbolt_toggle_paragraphs_visibility' );
function wbolt_toggle_paragraphs_visibility() {
if (is_user_logged_in() ) {
echo 'p { display: none !important; }';
}
}

該函式使用 is_user_logged_in() 檢查使用者是否已登入。如果條件為真，它就會向 <head> 部分注入 CSS，使用 display: none 隱藏所有 <p> 元素。雖然標記仍保留在頁面原始碼中，但使用者看不到。

您可以將 is_user_logged_in() 替換為

• !is_user_logged_in()– 當使用者登出時隱藏內容。
• is_user_logged_out()– 用於檢測已登出使用者的替代函式。
• is_user_logged_out()– 檢查使用者是否已登入的另一種方法。

根據地理位置隱藏內容

假設您希望隱藏來自指定位置的使用者的內容。您可以顯示或隱藏的內容沒有限制，但在這裡，我們採用了一種通用方法，隱藏了來自美國使用者的所有圖片。

add_action('wp_head', 'wbolt_hide_images_for_us_visitors');
function wbolt_hide_images_for_us_visitors() {
// Get visitor's IP address
$user_ip = $_SERVER['REMOTE_ADDR'];
$geo_api_url = "https://ipapi.co/{$user_ip}/json/";
// Fetch geolocation data
$response = wp_remote_get($geo_api_url);
if ( is_wp_error($response) ) {
return; // Exit if API request fails
}
$data = json_decode( wp_remote_retrieve_body($response) );
// Check if the user is from the U.S.
if ( isset($data->country_code) && $data->country_code === 'US' ) {
echo 'h1, h2, h3, h4, h5, h6 { display: none !important; }';
}
}

注意：

• $_SERVER['REMOTE_ADDR'] 並不總是可靠的，可能會返回錯誤的 IP 地址。
• 在每次頁面載入時呼叫 API 可能會影響效能。更好的方法是使用 WordPress 暫存器快取響應，臨時儲存資料。

按類別隱藏特色圖片

我們檢視過的所有外掛都無法顯示或隱藏頁面標題或特色圖片，因為它們不是塊。在這裡，我們要隱藏類別為書籍的所有文章的特寫圖片。

add_filter('post_thumbnail_html', 'wbolt_hide_featured_image_for_books_category', 10, 2);
function wbolt_hide_featured_image_for_books_category($html, $post_id) {
// Check if the post belongs to the "Books" category
if (has_category('books', $post_id)) {
return ''; // Hide the featured image by returning an empty string
}
return $html; // Show the featured image if the category is not "Books"
}

該過濾器使用 has_category() 檢查文章是否屬於圖書類別。如果條件為 true，則返回空字串，刪除特寫圖片。否則，它會保持特寫圖片不變。

測試實現

在部署您選擇的外掛或自定義程式碼之前，我們建議進行全面測試，以防止出現意想不到的問題，例如限制預期受眾的內容。以下是一些關鍵的測試步驟：

• 確保相容性– 驗證外掛或自定義程式碼是否能無縫執行，尤其是與第三方塊外掛。
• 審查原始碼輸出 – 有些方法使用 CSS 隱藏內容，而有些方法則將其從標記中完全刪除。在做出決定之前，請考慮每種方法對搜尋引擎最佳化的影響。
• 使用暫存環境– 允許您在將更改應用到即時網站之前對其進行安全測試。

小結

控制內容可見性是 WordPress 網站管理的重要工具。您選擇的方法–是現成的外掛還是自定義程式碼–取決於您的具體需求和技術專長。