如何在 WordPress 中添加方向键键盘导航

已发表: 2022-12-01

您想在您的网站上添加箭头键键盘导航吗？

键盘导航可以使您的网站更加人性化。它将允许您的访问者使用这些箭头键从一个帖子移动到另一个帖子。但是，WordPress 默认不提供这些导航功能。

在本文中，我们将向您展示如何在 WordPress 中添加箭头键键盘导航。

为什么要在 WordPress 中添加箭头键键盘导航

将键盘导航添加到您的 WordPress 网站可以让用户轻松浏览您网站上的博客文章。用户可以通过单击键盘上的向右和向左箭头键来查看下一篇和上一篇博文。

当您希望用户按顺序轻松浏览帖子时，此功能会派上用场，例如，如果您使用博客帖子来发布书籍的章节、投资组合项目、历史事件等。

添加箭头键键盘导航是改善 WordPress 博客用户体验的好方法，因为它会鼓励用户更多地探索您的网站。

话虽如此，让我们看看如何使用插件在 WordPress 中添加箭头键键盘导航。

方法 1. 使用代码片段添加箭头键键盘导航（推荐）
方法 2. 使用箭头键导航插件添加箭头键键盘导航
WordPress 滑块和图片库的箭头键导航

方法 1. 使用代码片段添加箭头键键盘导航（推荐）

您可以通过将代码添加到您的 WordPress 主题的 functions.php 文件来在您的 WordPress 博客上添加箭头键导航。但是，将自定义代码添加到 WordPress 核心文件可能会有风险，因为一个小错误可能会破坏您的网站。

这就是为什么我们总是推荐使用 WPCode。它是可用的最简单和最安全的代码片段插件。

通过将此代码添加到您的网站，您的用户将能够使用键盘上的箭头键在您网站上的不同页面和帖子之间切换。

首先，您需要安装并激活免费的 WPCode 插件。有关详细信息，请参阅我们关于如何安装 WordPress 插件的指南。

激活后，前往Code Snippets » Add Snippet在您的 WordPress 管理仪表板中。单击“添加新”按钮转到“添加代码段”页面。

在那里，找到“添加您的自定义代码（新代码段）”选项。

只需将鼠标悬停在它上面，然后单击“使用代码段”按钮。

进入“创建自定义代码段”页面后，首先为您的代码段键入一个名称。

然后，只需从右上角的下拉菜单中选择“通用代码段”作为“代码类型”。

注意：请不要选择“JavaScript”作为您的代码类型。尽管它是 JavaScript 代码，但如果您选择“通用代码段”选项，该代码仅适用于您的网站。

接下来，只需将以下代码复制并粘贴到“代码预览”中。

<script type="text/javascript">
        document.onkeydown = function (e) {
            var e = e || event, 
            keycode = e.which || e.keyCode; 
            if (keycode == 37 || keycode == 33)
                location = "<?php echo get_permalink(get_previous_post()); ?>";
            if (keycode == 39 || keycode == 34)
                location = "<?php echo get_permalink(get_next_post()); ?>";
        }
    </script>

此代码段将在您的网站上启用箭头键导航。