如何使用任何 WordPress 主題創建單頁網站

我們收到很多關於如何製作一頁網站或我們是否出售一頁 WordPress 主題的問題。 讓我從一開始就回答這兩個問題。 每個 WordPress 主題都可以是一個單頁網站，我將向您展示它是多麼簡單。

什麼是單頁網站？

一頁網站只不過是一個在單個頁面上包含所有基本內容的網站，通常是主頁。

它主要用於希望以清晰直接的方式推廣單一產品或服務的企業。 一些示例包括向您的客戶展示投資組合、組織活動或開展新業務。

在單頁網站上，單擊導航鏈接不會將您發送到新頁面，但會在同一頁面上跳轉或向下滾動到與鏈接連接的內容部分。 這可以使用戶體驗更好，並提高用戶參與度。

網上有許多單頁 WordPress 主題，但就像我已經說過的那樣，我們可以將任何主題變成單頁瀏覽器，只需一點點工作。

如何使用 WordPress 創建單頁網站？

錨鏈接

對於一個基本的單頁網站，我們只需要一個菜單、內容和錨鏈接。 相信大家都知道menu和content是做什麼的，那麼我們就來說說anchor links吧。 錨鏈接由指向錨和錨本身的普通鏈接組成。 指向錨點的鏈接是普通鏈接，以#字符開頭。 並且錨點本身是您頁面上某處的特定位置。 讓我們看一個簡單的例子。

這是菜單中指向錨點的鏈接：

 <a href="#middle">Go to the middle</a>

這是我們與錨本身的內容：

 <h1>Learning about anchor links</h1> <p> Some lorem ipsum content ….</p> <h2>Middle of the page</h2> <p> Some lorem ipsum content ….</p>

在這種情況下， #middle是我們的錨鏈接， id=”middle”是我們的錨。 當我們點擊“Go to the middle”鏈接時，我們將跳轉到標題為“Middle of the page”的錨點。 而已！ 這就是我們如何製作最基本的一頁網站的方法。 您可以在網站上添加任意數量的錨點。 讓我們把我們新獲得的知識用在 WordPress 網站上。

使用 WordPress 菜單創建錨鏈接

出於這個目的，我已經用我們的 GrowthPress 主題製作了一個簡單的單頁網站，這將是我們的實際示例。 首先，我創建了一個新頁面並添加了一些內容。 內容僅包含一些段落和標題。 我們幾乎可以在任何 HTML 元素上添加錨點，但在我們的例子中，我們會將其添加到內容中的所有標題中。

您可以從屏幕截圖中看到，為了編輯內容的 HTML，我們需要將編輯器從 Visual 更改為 Text。 我們現在可以看到內容中的所有 HTML 標籤。 在我們的例子中，所有標題都使用<h2>標籤，我們將使用它們來添加錨點。 就像上面的屏幕截圖一樣，您需要在這些標籤上添加帶有錨點的 id。 例如： <h2 id=”our-anchor”>Some Title</h2> 。 請注意，錨點不帶# ，但所有錨鏈接都必須以#開頭。 一旦我們在內容中添加了所有錨點，我們就可以將它們與錨點鏈接連接起來。

如果您熟悉 WordPress，您就會知道我們可以在 wp-admin -> Appearance -> Menus 中更改菜單鏈接，這正是我們創建錨鏈接的地方。

從屏幕截圖中，您可以看到我選擇了自定義鏈接，而不是經典 URL，我添加了#about-us錨鏈接。 單擊該鏈接現在將跳轉到內容中的錨點id=”about-us” 。 一旦我們添加了所有的錨鏈接，我們簡單的一頁網站就完成了。 單擊新創建的鏈接並親自查看！

平滑滾動

是的，我完全同意，我們到目前為止所做的單頁網站很棒，但是那些即時跳轉不如平滑滾動那麼棒，對吧？ 為了實現平滑滾動，我們需要在我們的網站上添加一點 javascript 代碼。

大多數高級主題都有某種用於添加自定義代碼的字段。 例如，在我們的主題中，您可以轉到 wp-admin -> Customizer -> Theme Options -> Custom Code，您可以在其中找到可用於添加一些自定義代碼的字段，就像我們現在所做的那樣。

如果您的主題沒有自定義代碼的位置，您可以使用合適的插件。 我會推薦 WPBeginner 的插入頁眉和頁腳插件。 激活插件後，您將在 wp-admin -> 設置 -> 插入頁眉和頁腳中找到添加自定義代碼的字段。

將下面的代碼粘貼到其中一個字段中（我們建議在頁腳設置中使用腳本），現在您可以在錨鏈接上平滑滾動。 恭喜！ 您剛剛使用任何 WordPress 主題創建了一頁網站！

 <script> ( function( $ ) { $(document).on('click', 'a[href*="#"]:not([href="#"])', function(e) { if (location.pathname.replace(/^\//,'') === this.pathname.replace(/^\//,'') && location.hostname === this.hostname) { var hashStr = this.hash.slice(1); var target = $(this.hash); target = target.length ? target : $('[name=' + hashStr +']'); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 1000); window.location.hash = hashStr; return false; e.preventDefault(); } } }); }(jQuery)); </script>

當您單擊錨鏈接時，上面的代碼將動畫滾動效果，它還將更新當前瀏覽器 URL 以反映單擊的錨鏈接。 在完成的一頁網站上檢查我們的最終結果。

如何設置平滑滾動的偏移量？

如果您有固定的粘性菜單，我建議您也設置偏移量，因此內容的開頭從您的粘性菜單下方開始。 為此，您需要編輯這行代碼：

 $('html, body').animate({ scrollTop: target.offset().top}, 1000);

我們在這裡唯一需要做的就是添加我們的偏移值。 它應該至少與固定粘性菜單的高度一樣大。

 $('html, body').animate({ scrollTop: target.offset().top - 180 }, 1000);

這樣，我們將避免內容的開頭隱藏在菜單後面的問題。

一頁網站的優點

既然您知道如何創建單頁網站，那麼讓我們來看看使用單頁網站的優點。

一頁網站提供更好的移動用戶體驗

一頁網站由一個長滾動頁面組成，非常適合移動查看。 想想 Facebook 及其新聞提要。 您不禁繼續向下滾動兔子洞。 單頁網站就是為了做到這一點而設計的，連續滾動非常適合移動設備。

鑑於移動設備上的屏幕空間有限，保持向下滾動比找出菜單隱藏的位置然後單擊正確的鏈接進入網站的下一頁要容易得多。 換句話說，單頁網站將為在移動設備上訪問您網站的任何人提供出色的用戶體驗。

一頁網站需要更少的文字

一個傳統的、多頁的網站需要大量的文字，所以它看起來不會太空，或者更糟糕的是，未完成。 相比之下，如果您的內容太多，單頁網站會顯得雜亂無章。 因此，您需要盡量減少副本，並使用簡短的句子和段落來傳達最重要的信息。

這種方法的另一個好處是，編寫副本可能是與啟動網站相關的更艱鉅的任務之一。 如果您的網站副本沒有完全充實，單頁網站可能是一個不錯的選擇。

一頁網站適用於圖像

圖像可以為任何類型的網站創造奇蹟，包括一頁網站。 事實上，當您使用與視差效果配對的圖像時，您可以在您的網站上產生視覺上吸引人的效果。

即使您決定不使用視差效果，您仍然可以在單頁網站上有效地使用圖像。 您可以使用它們來區分不同的部分，更不用說共享照片庫或投資組合圖像了。

您還可以利用圖像來提升您的網站 SEO，因為圖像在正確優化後往往會出現在搜索引擎結果中。 因此，請務必使用描述性標題為您的圖片添加名稱，並為您添加到網站的每張圖片添加 alt 標籤。

一頁網站可以提高用戶參與度和轉化率

根據一項研究，與多頁網站相比，單頁網站可以帶來更高的轉化率。 這背後的原因很簡單：單頁網站通常非常專注，旨在讓訪問者採取行動。

它具有更集中的信息，並且當訪問者到達頁面末尾時，更容易理解您希望他們做什麼。

當您只有一個選擇時，很容易單擊該按鈕或號召性用語，而不是從一個頁面到另一個頁面想知道下一步應該做什麼。

一頁網站更易於瀏覽

還值得一提的是，一頁網站更易於瀏覽。 由於所有內容都在一個頁面上，因此很難迷失方向並回到起點，尤其是在移動設備上。

雖然您可以使用錨鏈接跳轉到頁面的不同部分（如本文所示），但向上或向下滾動並找到您想要的部分同樣容易。

除此之外，精心設計的單頁網站會引導訪問者踏上一段以合乎邏輯的方式講述您的業務或品牌故事的旅程。

一頁網站可以更輕鬆地定位特定受眾

如前所述，單頁網站旨在讓訪問者採取行動。 您可以利用它來發揮自己的優勢，並針對準備好採取下一步行動的非常具體的受眾。 通過引導他們瀏覽您網站的不同部分，您可以展示您的產品或服務，向他們展示它如何解決他們的問題，並以號召性用語的形式為他們提供解決方案。

當您定位一個非常具體的關鍵字或已經知道他們有特定問題並正在尋找解決方案的受眾時，這種方法非常有效。

使用單頁網站的缺點

讓我們看看使用單頁網站的一些缺點。

分析谷歌分析數據將更加困難

到目前為止，您可能已經知道 Google Analytics 可以為您提供有關網站訪問者的大量有用信息。 在您的網站上安裝後，您可以查看哪些頁面很受歡迎，哪些帖子帶來了新訪問者，以及哪些頁面需要優化以使人們在您的網站上停留更長時間。

使用單頁網站，您僅限於一頁。 您的訪問者登陸同一頁面並在同一頁面上下車，這使得您更難知道您網站的哪些部分需要改進。 如果您決定採用單頁網站路線，請務必註冊像 Hotjar 這樣的工具，以獲取人們如何使用您的網站的可視化熱圖。

在社交媒體上分享您的網站比較棘手

使用單頁網站，您只有一個 URL 可以在社交媒體上分享。 這很快就會變得重複，更不用說它沒有提供很多機會將人們發送到您網站的不同部分以找到他們問題的答案。 共享主 URL 後，您的整個網站將被共享，而不是像多頁網站那樣共享特定頁面或部分。

一個簡單的解決方法是在您的網站上加入一個博客，您可以在其中分享有用和有用的內容，從而吸引您的觀眾。這使得在社交媒體上分享您的網站更加容易，同時仍將大部分信息濃縮在一個頁面上.

一頁網站可能需要更長的時間才能加載

根據您的單頁網站的大小和您共享的內容類型，請注意您的網站可能需要更長的時間才能加載。

一般來說，單頁網站往往很輕，但是如果您有很多未針對網絡優化的圖像，您會遇到加載時間緩慢的情況。 如果您的網站上有很多視頻內容，這同樣適用。

因此，在將圖像添加到您的站點之前，以適當的格式保存圖像並壓縮它們的大小非常重要。 要考慮的另一件事是對圖像和視頻使用延遲加載，以便在用戶向下滾動到您網站的特定部分時加載它們，而不是立即加載它們。

您受限於關鍵字定位

單頁網站不會為您提供很多定位多個關鍵字的機會。 使用多頁網站，您可以為要定位的每個關鍵字創建一個單獨的頁面。 一頁網站的工作方式不同。

如專業部分所述，一頁網站的設計考慮了特定目的和受眾。 這通常轉化為定位特定關鍵字及其變體，這意味著如果您需要定位多個不同的關鍵字，最好創建一個多頁網站。

雖然沒有規定每頁不能包含多個不同的關鍵字，但您將無法充分優化您的頁面，特別是當您考慮到輕量級副本更適合單頁網站時。

您不能使用高級 SEO 策略

說到 SEO，單頁網站不允許您使用稱為孤島的高級 SEO 策略。 孤立是指將您的網站構建成主要興趣領域的做法，以便您可以在這些領域展示您的權威。 用外行的話來說，這是創建類別和子類別來組織您的內容的做法。

孤立的主要好處是它為眾多關鍵字和關鍵字詞組提供了排名的可能性，這些關鍵字和關鍵字短語幾乎涵蓋了感興趣的訪問者可能遇到的所有問題，以及所有可能的反對意見。

雖然多頁網站在這方面表現出色，但單頁網站很快就會變得過於擁擠和混亂，讓您的觀眾感到沮喪。

一頁網站可能缺乏提供詳細信息

最後，由於簡短而簡潔的副本和消息傳遞，單頁網站可能無法為您的訪問者提供所有必要的詳細信息。 這可能會導致要求澄清或讓訪問者感到困惑的電子郵件數量增加。

您可以通過將博客添加到您的單頁網站並為訪問者提供更深入的內容並在出現問題時回答他們來克服這個問題。

您應該使用單頁網站嗎？

如您所見，使用單頁網站肯定有優點和缺點。 那麼，您如何知道單頁網站是否適合您的業務呢？

如果您剛剛開始開展業務並通過口耳相傳產生大量業務，那麼單頁網站可以讓您將業務放到網上，而無需花費太多時間在設計和開發上。

另一方面，如果您想通過專注於 SEO 來專注於獲得更多的自然流量，並且如果您正在擴展您的業務運營，那麼多頁網站將更適合您。

最後，這取決於個人喜好和您的業務目標。 評估您的業務所處的位置，並記下您要完成的工作。 然後，在做出最終決定之前考慮上面提到的利弊。

結論

我們確實收到了很多問題，詢問我們是否有某種單頁主題，我相信其他主題作者的情況也是如此。 本文應該明確指出，所有 WordPress 主題也可以用作單頁網站，如果您願意，您可以立即將當前網站更改為單頁瀏覽器。 我們還介紹了單頁網站的優缺點，並分享瞭如何確定這是否是您網站的正確選擇。

讓我知道這篇文章是否有助於您更好地理解一頁網站，如果您有任何其他問題，請給我留言。