如何在您的 WordPress 網站上添加返回頂部按鈕
已發表: 2022-09-14向您的WordPress 網站添加返回頂部按鈕可能是改善網站用戶體驗的好方法。 此按鈕允許訪問者快速滾動回頁面頂部,而無需使用滾動條或瀏覽器返回按鈕。 您可以通過幾種不同的方式向 WordPress 網站添加返回頂部按鈕。 您可以使用 WordPress 插件,也可以自己添加代碼。 如果您想自己添加按鈕,則需要將以下代碼添加到 WordPress 主題的 functions.php 文件中: function my_back_to_top_button() { echo '↑'; } add_action('wp_footer', 'my_back_to_top_button'); 此代碼將為您的 WordPress 網站添加一個簡單的返回頂部按鈕。 如果要設置按鈕樣式,可以將以下 CSS 添加到主題的 style.css 文件中:#back-to-top { position: fixed; 底部:20px; 右:20px; 顯示:無; 文字裝飾:無; 背景:#333; 顏色:#fff; 填充:10px; -webkit-border-radius:3px; -moz-邊界半徑:3px; 邊框半徑:3px; } #back-to-top:hover { 背景:#222; 如果您使用 WordPress 插件添加返回頂部按鈕,則需要按照插件作者提供的說明進行操作。
如果您的內容很長,您可能希望包含一個“返回頂部”按鈕。 只需按頁面右側的箭頭按鈕即可滾動到頂部。 大多數最受歡迎的 WordPress 主題都包含一個從前到上的按鈕。 WPFront Scroll Top 是向您的 WordPress 網站添加返回頂部按鈕的絕佳方式。 您可以訪問插件中的各種自定義選項,因此您可以做任何您想做的事情。 如果要自動隱藏按鈕,請勾選“自動隱藏”按鈕,然後設置計時器。 此外,您可以使用它來排除特定頁面,因此請選擇最適合您的選項。
沒有插件的返回頂部按鈕 WordPress

有幾種方法可以在不使用插件的情況下為您的 WordPress 網站創建“返回頂部”按鈕。 一種方法是簡單地在您的內容中創建一個指向頁面頂部的鏈接。 例如,您可以在每個帖子的末尾添加一個鏈接,上面寫著“回到頂部”。
創建“返回頂部”按鈕的另一種方法是使用一些代碼。 您可以將以下代碼添加到 WordPress 主題的 functions.php 文件中:
功能 my_back_to_top_button() {
echo '回到頂部';
}
add_action('wp_footer', 'my_back_to_top_button');
此代碼將向您網站的頁腳添加一個鏈接,單擊該鏈接後,用戶將返回頁面頂部。
在設計網站時,用戶體驗經常被忽視。 許多網站都有一個小按鈕,可讓您返回頂部。 該功能的優勢在於它可以讓用戶在查看內容頁面後快速返回頁面頂部。 設置按鈕很簡單,但您必須編輯主題文件才能這樣做。 如果你的 js 沒有文件夾,如果你的 js 沒有文件夾,你可以創建一個。 您可以通過輸入 var speed = top speed 旁邊的數字來更改按鈕的滾動速度。 較大的數字將導致較慢的自動滾動。
如果您不喜歡將圖像添加到您的網站並想要添加文本,您也可以這樣做。 你必須改變風格。 打開主題的 CSS 樣式表後,您可以在任何您認為合適的地方添加以下代碼,只要它不在現有標籤和代碼之間。 安裝像Simple Custom CSS這樣的插件後,您可以將代碼直接添加到提供的區域中。 必須將指向您網站的返回首頁的鏈接直接添加到該頁面。 如果您不想,您也可以避免編輯主題的文件。 當您單擊 Scroll Back to Top 時,它會向您的站點添加一個返回頂部按鈕,從而無需編碼。 管理儀表板允許您更改按鈕的大小、顏色、位置和其他選項。
返回頂部按鈕 WordPress Elementor

WordPress Elementor 中的返回頂部按鈕是快速跳回頁面頂部的好方法。 可以自定義此按鈕以匹配您網站的設計,並且可以放置在頁面上的任何位置。

因為在閱讀時按鈕會被按下回到頁面頂部,所以一些用戶對此表示讚賞。 Elementor 使添加返回頂部按鈕變得簡單。 應該添加按鈕小部件(或任何可以選擇添加鏈接的小部件,例如文本、圖標甚至圖像)。 您網站上的返回頂部按鈕是一個簡單但有用的功能。 選擇 Button 小部件後,轉到左側面板中的 Advanced 選項卡並查找 Positioning 選項。 通過將按鈕拖動到任意位置,您可以輕鬆設置按鈕的位置。
返回頂部按鈕 Codepen
“返回頂部”按鈕是長網頁上的常見功能,它允許用戶通過單擊滾動回到頁面頂部。 許多網站使用固定的“返回頂部”按鈕,該按鈕始終在屏幕上可見,而其他網站使用浮動的“返回頂部”按鈕,該按鈕僅在用戶向下滾動頁面時出現。
編寫“返回頂部”按鈕的方法有很多,但最簡單和最有效的方法之一是使用“滾動到頂部”插件。 有許多不同的滾動到頂部插件可用,但最受歡迎的插件之一是 WPBeginner 的“滾動到頂部”插件。
安裝並激活插件後,只需轉到設置»滾動到首頁以配置插件。 在此頁面上,您可以選擇按鈕的位置、滾動速度和按鈕的顏色。 您還可以選擇在首頁、所有頁面或特定頁面上顯示按鈕。
配置插件後,只需單擊“保存更改”按鈕即可保存更改。 您的“返回頂部”按鈕現在將出現在您的網站上,並且功能齊全。
刪除滾動到頂部按鈕 WordPress
以下步驟將指導您完成禁用 WordPress 儀表板上的滾動到頂部按鈕的過程: 要禁用滾動到頂部按鈕,請轉到外觀。 要禁用滾動到頂部按鈕,請將 Check 標記為複選標記。 您可以通過單擊發布按鈕來發布您的作品。
如何刪除 WordPress 中的按鈕?
如果您想刪除這些部分,您必須首先在您的站點上啟動定制器。 選擇主題選項,然後單擊我的站點旁邊的自定義按鈕。 通過單擊主題選項 -> 主頁模板,您可以訪問該模板。 只刪除第一個框的最後一個字符——這是唯一需要刪除的字符。
如何將滾動條放回頂部按鈕 Elementor?
您可以通過打開 elementor 頁面或在 elementor 頁面上發布然後單擊滾動返回頂部按鈕來返回頂部。 通過單擊“Elementor 面板”左側的齒輪或設置圖標,您可以訪問“頁面設置”部分。 只需向下滾動即可找到“EA 滾動到頂部”選項,然後將其打開。
如何阻止 WordPress 滾動?
您可以通過在“我的網站”>“設置寫作”>“滾動”中選擇“無限滾動”選項來禁用無限滾動。 此外,如果您添加頁腳小部件,您將無法使用無限滾動選項。
如何在 WordPress 中跳轉到頁面頂部?
當用戶向下滾動您網站上的頁面時,“滾動到頂部”按鈕會出現在右下角。 當訪問者向下滾動頁面時,會出現一個菜單。 換句話說,如果您的網站訪問者單擊一鍵式按鈕,他們將能夠在幾秒鐘內返回頁面頂部。
WordPress後退按鈕到上一頁
如果您打算在單擊鏈接時顯示帶有頁面轉換的WordPress 頁面,請在鏈接中添加一個名為“pushing-page”的類。 結果,頁面將被提示輸入 URL。 該類允許您通過單獨保留後退按鈕來從鏈接中刪除一堆按鈕。 根頁面是網站的根目錄。
無需使用頁面上的後退按鈕。 用戶可以選擇在哪裡打開鏈接,您不必為他們管理鏈接。 我沒有創建地圖頁面,並且創建地圖的人說不可能包括使用簡單的後退瀏覽器按鈕返回到您離開的地方的選項。 當您導航到地圖時,該頁面完全在 WordPress 中構建,並且僅在您通過 WordPress 導航到該站點時才可見。 因此,將頁面打開為帶有關閉或 X 按鈕的彈出窗口可能是一個好主意。 因為這是通過 Javascript 代碼創建的WPBakery Page Builder 按鈕,所以我將在 URL 字段中輸入它。