如何在 WordPress 中製作粘性標題

在過去十年左右的時間裡，人們越來越重視網站導航。 這與智能手機的廣泛使用相吻合，與傳統的桌面界面相比，智能手機的導航選項有限。 如果您比較一下 2011 年的網站和現在製作的網站，網站設計的差異就非常明顯了。

用於重新配置站點佈局的主要方法之一是粘性元素。 恰當地命名，當您在頁面周圍移動時，這些元素會粘在頁面的邊框上，即，它們保持其原始位置（想想 Excel 中的凍結窗格，您會很好地了解它是如何工作的）。

上、下、左、右

粘性元素通常保留給菜單、標題和/或狀態欄； 這些為訪問者帶來了極大的靈活性，因為他可以立即從一個頁面切換到下一個頁面，而無需回溯。 此外，所有這些都位於頁面頂部和底部的邊框上，這與整個前提很好地配合。 圍繞位於頁面中心的粘性元素構建頁面將非常困難。

很少能在左右邊框上找到它們，功能相同，只是佈局不同。 在這些情況下，它們將被隱藏，直到您將光標懸停在它們上方或在屏幕上觸摸它們。

節省空間

粘性元素的有趣之處在於，它們可以節省頁面和整個網站的空間——它們實際上可以用來替換整個頁面。 這是因為它們保留了網站的主體，並使邊框成為多功能工具，這些工具本身就承擔了很多頁​​面的功能。 想一想您的平均網站佈局。

頂部保留用於需要通過指定類別和搜索欄排序的頁面的菜單。 它們在滾動時都隱藏在欄後面，並在需要時展開。 如果不是這種情況，只有菜單樹會佔據頁面的整個上部，並且在向下滾動時不會“跟隨”，因此您的訪問者將需​​要不斷上下移動才能瀏覽頁面.

另一方面，粘性底部元素可以很容易地替換整個支持頁面 - 只需添加電子郵件和/或號碼以及聊天按鈕，就可以了。 您正在為您的訪問者提供一種與您聯繫的持續存在的方式。 再一次，實際應用非常棒 - 客戶正在滾動瀏覽您的產品頁面，有問題，並且可以通過單擊聊天按鈕立即找到他/她的需求。

創建粘性元素

當我們談論 WordPress 時，總是有很多方法可以解決您能想到的任何事情，這裡也是如此。 您可以在默認編輯器中手動創建粘性元素，也可以使用一個插件，將編碼需求替換為對初學者友好的界面。 最終結果之間的反差很小，但你到達那裡的方式會產生很大的不同。 對於我們的示例，我們將使用粘性標題，因為它們是迄今為止最常見的粘性元素。

手動創建粘性標題

在 WordPress 中手動創建粘性標題需要使用 CSS 代碼。 無需太技術化，我們可以將 CSS 代碼添加到頁面上的幾乎任何元素中以更改其屬性。 手動編碼時，這是我們定制的主要方法。 使用 CSS 首先需要頁眉出現在頁面上，所以首先要確保有一些東西需要自定義。 WordPress 簡化了這個過程，因為即使是默認編輯器也提供了通過單擊添加它的選項。

一旦你有了一個可以使用的標題，你就需要訪問控制台。 只需轉到儀表板左側的外觀部分，選擇“自定義”，然後單擊“附加 CSS”。 現在控制台打開了，您需要輸入使標題變粘的代碼：

 #website-navigation { background:#fff; height:60px; z-index:170; margin:0 auto; border-bottom:1px solid #dadada; width:100%; position:fixed; top:0; left:0; right:0; text-align: center; }

上面的代碼只是它的一般外觀示例，而不是一個萬能的最終命令。 請記住，第一行始終特定於每個站點——在返回頁面編輯器之前，將#website-navigation 替換為導航標題的 CSS 類或 ID。

在您檢查了頁面/帖子預覽窗口中的功能後，只需發布，您就會得到一個粘性標題。 我們必須指出，您可能希望擴展 CSS 代碼，使其不僅僅包含像這樣的標題的“粘性”屬性——建議添加可以在視覺上強調標題的內容，例如顏色字體、大小、縮進等。因為它是頁面上的永久固定裝置，很容易被忽視，所以你應該嘗試讓它脫穎而出。

使用插件創建粘性標題

那些需要為其業務或博客建立網站的人與那些根本不具備構建外觀和感覺專業的東西的知識的人之間存在巨大的重疊。 幸運的是，有了 WordPress，有很多插件可以讓每個人的生活更輕鬆； 幾乎不需要擁有比基本軟件知識更多的東西來實現您的目標。 WP Sticky 是一個很好的插件示例，它用任何人都可以快速掌握的用戶友好界面替換了我們上面介紹的所有編碼。 同時，它提供了與手動創建粘性標題相同數量的功能。 讓我們分解一下。

創建元素

就像您在使用 CSS 時需要有一個標題一樣，您需要創建一個元素，然後向該元素添加粘性屬性。

有兩種不同的方式來挑選元素——您可以在必填字段中輸入名稱，或者您可以通過單擊它通過預覽窗口選擇元素（如果您在找出名稱時遇到問題，這很有效） . 在預覽窗口中選擇元素時，您會在屏幕頂部看到不斷變化的名稱。

我們發現，在使用該插件一段時間後，您會對它感到非常自在，幾乎不會使用視覺選擇器。 這些名稱將變得熟悉，從而可以簡單地手動輸入它們，從而節省您的時間。 在您熟悉該範圍之前，視覺選擇器將是您最好的朋友。 最終，任何一種方法都會讓你到達同一個地方——前端的一個粘性標題。

讓它看起來不錯

並非所有粘性元素都是平等的，你的也不應該是一個普通的例子。 視覺設置部分將為您提供大量自定義選項，您可以使用這些選項使您的粘性標題在各個方面都獨一無二。

您需要考慮的第一件事是元素的定位。 由於我們正在製作頁眉，這將是一個簡單的決定——我們將它貼在頁面頂部。 定位是一個好的標題的關鍵，所以如果你不想讓它緊貼頁面的頂部，你可以將它向下移動幾個像素以獲得更好的適合度。 此外，如果您的網站為註冊用戶使用管理工具欄，您可以讓插件自動檢查它並相應地調整標題。

我們已經談到了網站完全響應的必要性，因為潛在訪問者必須通過多種方式瀏覽網絡。 為了使您的網站完全自適應，您可以選擇在哪些屏幕上粘貼標題。

通常，較小的屏幕從粘性標題中受益最多，而在具有更多導航選項的傳統桌面上使用的較大屏幕在沒有它們的情況下也可以。 這些尺寸分為四組，涵蓋所有主要的屏幕尺寸。

Z-index 是一個可選設置，乍一看可能會讓很多人感到困惑。 由於這一點以及它是一個可選功能的事實，許多人可能會揮舞它並忽略它。 如果一切正常，您可能永遠不會回頭； 但是，如果顯示出現問題，Z-index 可能是一個快速修復的解決方案。 從本質上講，將頁面視為堆棧的集合，其中頂部的堆棧數高於底部的堆棧數。 因此，如果有什麼東西遮住了您的粘性標題，請嘗試提升 Z-index（建議使用 99999 作為有效值）

使用“堆棧頂部”的粘性標題，是時候在向下滾動時通過添加效果來獲得更多創意。 當這兩個選項都被禁用時，頁眉將保持其位置在頂部，就像原始頁面的剪切塊一樣。 您可以使用淡入或向下滑動等效果添加更多耀斑。 在選擇這些類型的效果之前，請考慮您網站的整體視覺設計； 然而——通常，少即是多。

視覺效果不僅限於與運動相關的效果。 您還可以自定義標題本身（除了您在創建標題時所做的移動）。 如果您不希望頁眉遮擋頁面上的任何其他內容，則不透明度很有用。 將其設置為 50% 左右將使標題和下面的內容相對可見。

比不透明度更有用的功能是調整滾動範圍。 如果你的頁面很長，就像博客通常有的那樣，那麼在向下導航時，有一個粘性標題就不再有意義了。 在這些時候，在您的訪問者向下滾動足夠遠之後讓標題不粘是個好主意。

最後，還有一個選項可以在標題變粘時更改標題的背景顏色，使其更加突出，但當標題不再粘滯時，將其反轉為原始值。

可視化編輯的最後一部分讓我們回到通過 CSS 手動編輯粘性標題的整個過程。

即使您確實不需要任何以前的編碼知識即可成功使用 WP Sticky，但如果您確實使用它，它可以提升您的工作。 該功能是可選的，因此完全取決於您是否要使用它以及在何種程度上使用它。

高級選項

高級選項部分幾乎都是關於排除的，即在什麼情況下粘性標題將不再粘性並恢復為“原始編程”。

手動設置標題不粘滯的屏幕尺寸是視覺設置部分中顯示的四種默認尺寸的一個步驟。 在這裡，您可以根據需要進行具體化，因此如果將來出現不適合任何預定尺寸的狂野屏幕，您可以製定適用於它的規則。

使標題不粘人不僅與屏幕大小有關，還與您網站上的內容有關，更具體地說是分類。 您可以使您的標題不粘在指定的頁面、帖子和帖子類型、特定類別或帶有特定標籤的內容上。 所有這些條件都可以混合和匹配，以在使用和不使用粘性標題時製作完美的綱要。

與您在開始時選擇粘性元素（在我們的示例中為頁眉）的方式類似，您也可以在頁面下方選擇一個上推元素，您希望在該頁上將頁眉向上推送。 這實質上將使您的標題移動到該元素的最邊界，並且它們之間沒有填充或任何類型的空間。

總而言之，當您厭倦並且不再想要您的粘性元素時，總有最終的選擇可以完全刪除它。 請注意，這是一個永久性操作，您對元素（在本例中為標題）所做的所有自定義都將丟失。

概括

很難說哪種做事方式更好。 使用 CSS，您肯定有更多的選擇，但總體而言，這對極少數人來說是一個解決方案。 另一方面，像 WP Sticky 這樣的插件結合了易用性和仍然強大的功能，使其成為初學者或仍然不確定從頭開始編碼的人的完美選擇。 製作一個粘性的、有效的標題可能最好的方法是從後者開始，然後自己努力達到前者。

作者： Matej Milohnoja

過去通常寫關於遊戲和遊戲的文章，但後來轉向測試和寫關於 Web 開發軟件的文章。 還是會玩很多遊戲，只是為了好玩。