如何在WordPress中創建一個返回頂部按鈕

[ad_1]

您是否計劃讓訪問者更方便地訪問您的網站?為WordPress博客添加一個返回頂部按鈕可以解決問題。如果您的博客在查看內容時需要大量滾動,則尤其如此。

在本教程中,我們將向您展示如何使用兩個不同的插件(WPFront Scroll Top和GP Back To Top插件)在您的博客上安裝返回頂部按鈕。第一個包含大量完整插件自定義選項,而另一個更易於使用。

什麼是「返回首頁」按鈕?

本質上,當用戶向下滾動頁面時,返回頂部按鈕最常出現在文本底部的箭頭或文本形式。單擊此按鈕可將用戶帶回頁面的開頭。對於那些喜歡在手機上瀏覽網站的人來說,它尤其有用。許多人使用粘性菜單來簡化網站導航,但是回到頂部按鈕可以是一個額外的功能,可以在瀏覽頁面時進一步幫助讀者。

在風格方面,這個按鈕應該足夠醒目以吸引訪客的注意力。不過,它也不應該太大或過分強調,以免過多地分散用戶的注意力。在Dalia WordPress模板上可以看到這個按鈕在網站上應該是什麼樣子的一個很好的例子。

返回頂部示例 使用WPFront Scroll Top插件安裝返回頂部按鈕

WPFront Scroll Top插件具有此任務所需的所有自定義選項。

返回頂部插件

安裝後,您將能夠在名稱Scroll Top上的儀錶板的「設置」選項卡中找到該插件。

滾動頂部

要激活它,請確保在執行任何其他操作之前先檢查「啟用」框。之後,您可以設置Scroll Offset,即按鈕出現之前的像素數。您也可以調整按鈕所需的尺寸。

按鈕不透明度也是一個很好的選項,它允許您在按鈕不活動時使其顯得更亮。這給它一個很好的動畫效果。

當您選中「自動隱藏」選項並在「自動隱藏後」框中鍵入秒數時,按鈕將在您指定的不活動時間後消失,並在您再次移動滑鼠游標時重新出現。

WPFront Scroll Top插件還允許用戶調整按鈕位置,甚至包含小型設備的選項。

插件選項

如果您願意,可以將「返回頂部」按鈕設置為僅顯示在您指定的頁面上。要執行此操作,只需選擇包括在以下頁面中,並標記要顯示按鈕的頁面的所有複選框。

包括在以下頁面中

WPFront Scroll Top插件還附帶大量圖片,您可以選擇調整按鈕樣式以匹配您的網站主題。如果此列表中的所有圖片都不適合您,您也可以選擇自己的圖片。為此,您需要先將圖片添加到媒體庫,以使其顯示在可用圖像按鈕列表中。另一種選擇是通過插入自定義URL來添加圖片。

圖像按鈕

設置所有插件選項並選擇圖像按鈕時,請確保單擊「保存更改」。

使用GP Back To Top插件

如果您不是擁有無數設置的插件的粉絲,而您更喜歡簡單但直截了當的方法,那麼GB Back To Top插件適合您。

GP返回頂部插件

安裝後,您可以通過轉到控制板中的設置> GP Back To Top來訪問它。

使用GP Back To Top插件

正如我們已經強調的那樣,GP插件的設置很容易使用。但最重要的是,插件本身效果很好。只有設置允許您調整選項,如按鈕的大小,字體大小和背景顏色。

設置

使用此插件在頁面中實現返回頂部按鈕後,它的外觀如下所示:

返回頂部按鈕

我們希望這篇文章有所幫助。如果您喜歡它,請隨時查看其中的一些文章!

  • 學習如何添加視差效果
  • 在WordPress邊欄中包含的內容
  • 如何在WordPress中嵌入YouTube視頻 – Classic Editor和Gutenberg
相關文章