為什麼在 WordPress 中添加箭頭鍵鍵盤導航?
添加鍵盤導航允許用戶輕鬆瀏覽您 WordPress 網站上的博客文章。用戶可以通過按鍵盤上的左右箭頭鍵查看下一篇和上一篇博客文章。
當您希望用戶輕鬆以順序瀏覽文章時,此功能特別有用。例如,如果您使用博客文章發佈書籍的章節、作品集項目、歷史事件等。
添加箭頭鍵鍵盤導航還可以通過鼓勵用戶更多地探索您的網站,提高 WordPress 博客的用戶體驗。
方法 1:使用 WPCode 添加箭頭鍵鍵盤導航(推薦)
您可以通過向 WordPress 主題的 functions.php 文件添加代碼,輕鬆在您的 WordPress 網站上添加箭頭鍵導航。這樣,用戶將能夠使用鍵盤上的箭頭鍵在網站上的不同頁面和文章之間切換。
然而,請記住,向 WordPress 核心文件添加自定義代碼可能存在風險,一個小錯誤可能會損壞您的網站。因此,我們總是推薦使用 WPCode。它是市場上最好的 WordPress 代碼片段插件,使得向網站添加代碼變得安全且簡單。
步驟 1:安裝和激活 WPCode 插件
首先,您需要安裝和激活 WPCode 插件。詳情請參閱我們的初學者指南,了解如何安裝 WordPress 插件。
注意:WPCode 還有免費版,您可以用於本教程。然而,升級到付費計劃將解鎖更多功能,如代碼片段庫、條件邏輯、CSS 代碼片段選項等。
步驟 2:添加自定義代碼片段
啟動後,從 WordPress 管理儀表板進入 Code Snippets » + Add Snippet 頁面。到達後,您可以點擊 ‘Use Snippet’ 按鈕,選擇 ‘Add Your Custom Code (New Snippet)’ 選項。
這將帶您到 ‘Create Custom Snippet’ 頁面,您可以從這裡開始為您的代碼片段命名。然後,從屏幕右上角的下拉菜單中選擇 ‘Universal Snippet’ 作為 ‘Code Type’。
注意:請勿選擇 ‘JavaScript’ 作為代碼類型。雖然這是 JavaScript 代碼,只有選擇 ‘Universal Snippet’ 選項,代碼才會在您的網站上運行。
步驟 3:粘貼代碼
接下來,僅需將以下代碼複製並粘貼到 ‘Code Preview’ 框中:
<script type="text/javascript"> document.onkeydown = function (e) { var e = e || event, keycode = e.which || e.keyCode; if (keycode == 37 || keycode == 33) location = ""; if (keycode == 39 || keycode == 34) location = ""; } </script>
步驟 4:選擇插入位置
之後,向下滾動到 ‘Insertion’ 部分,選擇代碼片段的位置。這裡,從下拉菜單中選擇 ‘Site Wide Footer’ 選項在 ‘Location’ 邊。
步驟 5:激活代碼片段
接下來,選擇自動插入方法 ‘Auto Insert’。激活後,代碼將自動在您的網站上執行。然後,返回頁面頂部,將開關從 ‘Inactive’ 切換到 ‘Active’,然後點擊 ‘Save Snippet’ 按鈕。
方法 2:使用箭頭鍵導航插件添加箭頭鍵鍵盤導航
如果您不想向網站添加代碼,那麼您可以使用 Arrow Keys Navigation 插件。此插件允許您使用鍵盤上的左、右箭頭鍵瀏覽網站的上一篇和下一篇文章。
首先,您需要安裝和激活 Arrow Keys Navigation 插件。詳情請參閱我們的分步指南,了解如何安裝 WordPress 插件。
注意:此插件最近沒有更新。然而,我們測試了最新版本的 WordPress,插件依然有效。
由於這是一個非常簡單的插件,不需要額外配置。激活後,您現在可以使用箭頭鍵在網站上的不同文章之間切換。
請記住,此插件僅允許您在網站上的不同文章之間切換,無法使用箭頭鍵從一個頁面移動到另一個頁面。例如,您無法從‘首頁’切換到‘聯繫我們’頁面。
WordPress 幻燈片和圖片庫的箭頭鍵導航
以上兩種解決方案允許用戶使用箭頭鍵瀏覽博客文章。但是,有時您可能希望添加其他功能,例如允許用戶使用箭頭鍵移動圖片或幻燈片。
在這些情況下,您需要使用 WordPress 圖片庫插件和/或 WordPress 幻燈片插件。大多數受歡迎的幻燈片和圖片庫插件內建箭頭鍵導航功能。
我們推薦使用 Envira Gallery,因為它是最好的圖片庫插件,允許您根據需要自定義圖片,包括水印、箭頭鍵和替代文本。
詳情請參閱我們的教程,了解如何在 WordPress 中創建圖片庫。
我們希望這篇文章能幫助您學會如何在 WordPress 中添加箭頭鍵鍵盤導航。您可能還會對我們精選的最佳 WordPress 插件或我們的指南感興趣,了解如何在 WordPress 中添加特殊字符。如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。您也可以在 Twitter 和 Facebook 上找到我們。