幾年前，大多數(shù)平臺都使用固定布局設(shè)計，您需要為較小的設(shè)備提供單獨(dú)的移動網(wǎng)站。隨著響應(yīng)式網(wǎng)頁設(shè)計的流行，這種情況已經(jīng)改變，因為單一布局可以在所有尺寸的設(shè)備上工作。wordpress世界的最新趨勢是少了側(cè)邊欄的布局。事實上，默認(rèn)的wordpress主題二〇二二甚至沒有側(cè)邊欄。這與完整的站點(diǎn)編輯一致，您可以在其中自行構(gòu)建模板或頁面布局。

然而，許多用戶仍然希望在桌面上有一個側(cè)邊欄，但又希望消除移動設(shè)備上不必要的雜亂。如果您正在尋找在手機(jī)上隱藏特定區(qū)塊或小工具，那么您可以在WordPress中做到這一點(diǎn)。

隱藏特定的區(qū)塊和小工具

假設(shè)您的側(cè)邊欄上有三個小工具。這些小工具可能會在較小的移動設(shè)備中占用較長的空間并干擾用戶體驗。最好的解決方案是將所有小工具保留在桌面上并將它們隱藏在移動視口中。同樣，您可能在內(nèi)容區(qū)域中具有全寬區(qū)塊，例如社交分享。這是多余的，因為移動瀏覽器有自己的分享選項。您可以在這里做的是簡單地隱藏移動設(shè)備上的社交分享區(qū)塊并將其保留在桌面上。

這種情況也可能是您希望在較大的桌面設(shè)備上隱藏元素并在移動設(shè)備中顯示的其他方式。我們可以提供大量示例和用例來隱藏特定設(shè)備上的特定區(qū)塊。

小工具控件和可見性

有很多方法可以控制WordPress中小工具和區(qū)塊的可見性。我們將解釋以下選項，您可以使用適合您需要的選項。

• 使用Gutenberg附加插件
• 使用另一個插件控制小工具的可見性
• CSS最大寬度屬性

1. Spectra – WordPress Gutenberg區(qū)塊插件

Gutenberg區(qū)塊編輯器具有許多用戶不知道的隱藏功能。此外，還有一些插件可以為區(qū)塊編輯器添加功能。古騰堡的終極附加組件就是Brainstorm Force的一個插件，它是最受歡迎的Astra主題的幕后推手。該插件最近重命名為“Spectra – WordPress Gutenberg Blocks”。因此，使用這些關(guān)鍵字搜索并在您的網(wǎng)站上安裝插件。此插件將在文章和小工具編輯器中添加額外的元框，以有條件地顯示區(qū)塊。

• 激活插件后，編輯您想要隱藏區(qū)塊的任何現(xiàn)有文章。在這個例子中，我們將在移動設(shè)備上隱藏一個綠色背景的段落。
• 選擇區(qū)塊并單擊三個點(diǎn)“選項”圖標(biāo)。如果顯示“顯示更多設(shè)置”，請單擊該選項。如果菜單顯示“隱藏更多設(shè)置”，那么它已經(jīng)在側(cè)邊欄上顯示了設(shè)置。

使用UAG插件顯示條件

• 在右側(cè)邊欄上，選擇“區(qū)塊”并滾動到顯示“高級”的底部。
• 展開“高級”部分以查看那里有一個新的“顯示條件”元框。
• 單擊其下拉菜單以查看多個選項。該插件提供隱藏或顯示任何基于區(qū)塊的多個條件，如用戶狀態(tài)（已登錄或注銷）、用戶角色、瀏覽器和操作系統(tǒng)。
• 要在手機(jī)中隱藏選定的區(qū)塊，請選擇“響應(yīng)可見性”選項。

選擇響應(yīng)式可見性

• 您將看到顯示其他選項并打開“在移動設(shè)備上隱藏”選項。

在移動設(shè)備上隱藏區(qū)塊

現(xiàn)在，發(fā)布您的文章并在桌面設(shè)備中檢查以查看彩色段落區(qū)塊是否可用。但是，當(dāng)您在手機(jī)上看到該頁面時，該段落將自動消失。

隱藏在移動設(shè)備上的區(qū)塊

注意：該插件將向每個區(qū)塊添加“顯示條件”元框，即使您在“設(shè)置 > UAG”部分停用其所有模塊。如果您停用插件，這些區(qū)塊將在所有設(shè)備上可見。

同樣，要隱藏區(qū)塊小工具，請導(dǎo)航到“外觀 > 小工具”部分。選擇任何小工具并從“顯示條件”中設(shè)置“在移動設(shè)備上隱藏”以隱藏該區(qū)塊。

在側(cè)邊欄和頁腳中隱藏小工具

2. 小工具選項 – 插件

盡管Spectra插件是隱藏任何區(qū)塊或小工具的好選擇，但它僅在您使用Gutenberg編輯器時才有效。因此，如果您仍在使用舊的經(jīng)典編輯器或使用不支持Gutenberg的自定義文章類型，這不是一個選項。在這種情況下，您有其他插件僅適用于隱藏側(cè)邊欄和頁腳小工具。

• 安裝并激活“?Widget Options – Add Context To WordPress Widgets?”插件。

小工具選項插件

• 轉(zhuǎn)到“設(shè)置 > 小工具選項”菜單并確?！敖?jīng)典小工具屏幕”顯示為已啟用（顯示“禁用按鈕表示該選項已啟用）。
• 這將禁用Gutenberg小工具區(qū)塊并啟用經(jīng)典小工具界面。您在頁面上確實很少有其他設(shè)置來控制頁面可見性、添加自定義CSS類等，您可以根據(jù)需要進(jìn)行配置。

禁用區(qū)塊編輯器并啟用經(jīng)典小工具

• 現(xiàn)在，轉(zhuǎn)到“外觀 > 小工具”部分并展開您想在手機(jī)上隱藏的小工具。您會發(fā)現(xiàn)該插件為小工具添加了許多選項。

其他小工具設(shè)置

• 單擊“設(shè)備”圖標(biāo)，然后從“隱藏/顯示”下拉菜單中選擇“在選中的設(shè)備上隱藏”選項。然后選擇“移動”復(fù)選框并單擊“保存”按鈕。

隱藏在設(shè)備上

在移動設(shè)備上檢查您的網(wǎng)站，您將找不到此小工具。請記住，此時該插件僅適用于經(jīng)典小工具界面，您也無法隱藏內(nèi)容區(qū)域中的元素。

3.自定義CSS

最后，這是一個手動選項，不需要任何插件。您可以使用 CSS 最大寬度屬性來隱藏移動設(shè)備上的任何區(qū)塊或小工具。

• 當(dāng)您在古騰堡文章編輯器中時，選擇區(qū)塊并從右側(cè)邊欄中展開“高級”設(shè)置。
• 在“其他CSS類”文本框中輸入自定義CSS類名稱。例如，我們在文本框中添加一個名為hideonmobile的新類。

將自定義CSS類添加到區(qū)塊

• 發(fā)布您的文章并導(dǎo)航到“外觀 > 自定義 > 附加CSS”部分。
• 添加以下CSS代碼并發(fā)布您的更改。

@media (max-width: 767px){
.hideonmobile{
display: none;
}
}

• 它應(yīng)該在定制器屏幕中如下所示。

在定制器中添加區(qū)塊CSS

現(xiàn)在，該區(qū)塊將隱藏在寬度小于767像素的任何設(shè)備上。同樣，您也可以通過在小工具區(qū)塊編輯器中添加自定義CSS來隱藏小工具。您可以利用對多個區(qū)塊和小工具使用相同的CSS類（在我們的示例中為hideonmobile）來使用相同的CSS在移動設(shè)備上隱藏所有它們。

小結(jié)

如您所見，WordPress中有多個選項可用于在移動設(shè)備中顯示或隱藏區(qū)塊。如果您使用的是Gutenberg，最好使用最后一種手動方法，因為它不需要任何第三方插件。否則，當(dāng)您停用插件時，這些區(qū)塊將變得可見。但是，要獲得附加功能，例如在特定瀏覽器或操作系統(tǒng)上隱藏區(qū)塊，您可以使用Spectra插件。如果您仍在使用經(jīng)典小工具，那么Widget Options是您應(yīng)該使用的插件。