WordPressに矢印キーによるキーボードナビゲーションを追加する方法

ウェブサイトのナビゲーションを改善することで、ユーザーエクスペリエンスが向上し、訪問者がコンテンツを効率的に閲覧しやすくなります。

WordPressに矢印キーによるキーボードナビゲーションを追加すると、ユーザーは矢印キーのみを使用してサイトの投稿間を移動できるようになります。しかし、WordPressはデフォルトではこれらのナビゲーション機能を提供していません。

WPBeginnerでは、スムーズで楽しいユーザーエクスペリエンスの作成に重点を置いています。長年にわたり、矢印キーでのナビゲーションを含む、サイトの使いやすさを向上させるためのさまざまな方法をテストしてきました。この機能は私たちのブログには重要ではありませんが、電子書籍の著者や読者のエクスペリエンスを向上させたいと考えている小規模なブログにとって、どのように有益であるかを理解しています。

この記事では、WordPressに矢印キーのキーボードナビゲーションを簡単に追加する方法を紹介します。 

WordPressに矢印キーキーボードナビゲーションを追加する理由

キーボードナビゲーションを追加すると、ユーザーはWordPressサイトのWordPressウェブサイトのブログ投稿を簡単に閲覧できるようになります。

ユーザーは、キーボードの右矢印キーと左矢印キーをクリックすることで、次のブログ投稿と前のブログ投稿を表示できます。

この機能は、ユーザーに投稿を順番に簡単に閲覧させたい場合に役立ちます。たとえば、ブログ投稿を使用して書籍の章、ポートフォリオアイテム、歴史的出来事などを公開している場合です。

矢印キーのキーボードナビゲーションを追加することは、ユーザーがサイトをさらに探索することを奨励することにより、WordPressブログでのユーザーエクスペリエンスを向上させるための優れた方法でもあります。

それでは、WordPressに矢印キーキーボードナビゲーションを簡単に追加する方法を、ステップバイステップで見ていきましょう。

方法1：WPCodeを使用して矢印キーのキーボードナビゲーションを追加する（推奨）

WordPressテーマのfunctions.phpファイルにコードを追加することで、WordPressサイトに矢印キーナビゲーションを簡単に追加できます。

これを行うことで、ユーザーはキーボードの矢印キーを使用してサイト上のさまざまなページや投稿を切り替えることができるようになります。

ただし、WordPressコアファイルにカスタムコードを追加することは危険である可能性があり、わずかな間違いでもサイトが破損する可能性があることに注意してください。

そのため、常にWPCodeの使用をお勧めします。これは、市場で最高のWordPressコードスニペットプラグインであり、ウェブサイトに安全かつ簡単にコードを追加できます。

まず、WPCodeプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。

有効化したら、WordPress管理ダッシュボードからコードスニペット » + スニペットを追加 ページに移動してください。

次に、「カスタムコードの追加（新規スニペット）」オプションの下にある「スニペットを使用」ボタンをクリックできます。

これにより、「カスタムスニペットの作成」ページに移動し、コードスニペットの名前を入力することから始めることができます。

ここでは、画面右隅のドロップダウンメニューから「コードタイプ」として「ユニバーサルスニペット」を選択するだけです。

次に、次のコードを「コードプレビュー」ボックスにコピーして貼り付けます。

<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>

その後、「挿入」セクションまでスクロールして、コードスニペットの場所を選択します。

ここで、「場所」オプションの横にあるドロップダウンメニューから「サイト全体フッター」オプションを選択します。

次に、カスタムコードの挿入方法として「自動挿入」を選択します。

コードは、有効化されるとウェブサイトで自動的に実行されます。

その後、ページの上部に戻り、スイッチを「非アクティブ」から「アクティブ」に切り替えます。

次に、「スニペットを保存」ボタンをクリックするだけです。

これで、ウェブサイトに左右の矢印キーナビゲーションが正常に追加されました。

方法2：矢印キーナビゲーションプラグインを使用して矢印キーキーボードナビゲーションを追加する

ウェブサイトにコードを追加したくない場合は、Arrow Keys Navigationプラグインを使用できます。

このプラグインを使用すると、キーボードの右矢印キーと左矢印キーを使用して、サイトの前の投稿と次の投稿をナビゲートできます。

まず、Arrow Keys Navigationプラグインをインストールしてアクティブ化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

これは非常にシンプルなプラグインなので、追加の設定は必要ありません。プラグインを有効化すると、矢印キーを使用してサイト上の異なる投稿に切り替えることができるようになります。

このプラグインでは、ウェブサイト上の異なる投稿間を切り替えることしかできないため、矢印キーを使用してページ間を移動することはできないことに注意してください。

例えば、矢印キーを使用して「ホーム」ページから「お問い合わせ」ページに切り替えることはできません。

プラグインをアクティブ化した後、ウェブサイトにアラートバーまたはポップアップを追加して、矢印キーを使用して次の投稿に移動するだけでさまざまなブログ投稿をナビゲートできることをユーザーに通知できます。

詳細については、WordPressでアラートバーを作成する方法に関するチュートリアルを参照してください。

WordPressスライダーおよび画像ギャラリーの矢印キーナビゲーション

上記の2つのソリューションにより、ユーザーは矢印キーでブログ投稿をナビゲートできるようになります。ただし、画像に矢印キーで移動できるようにしたり、スライダーを矢印キーで移動できるようにしたりするなど、他の機能を追加したい場合もあります。

これらの場合、WordPressギャラリープラグインおよび/またはWordPressスライダープラグインを使用する必要があります。最も人気のあるスライダーおよびギャラリープラグインには、矢印キーナビゲーション機能が組み込まれています。

Envira Galleryは、透かし、矢印キー、代替テキストなど、画像を好みに合わせてカスタマイズできる最高のギャラリープラグインであるため、Envira Galleryをお勧めします。

詳細については、WordPressで画像ギャラリーを作成する方法に関するチュートリアルを参照してください。

この記事がWordPressで矢印キーのキーボードナビゲーションを追加する方法を学ぶのに役立ったことを願っています。また、美しいウェブサイトをデザインするための最高のWordPressテーマビルダーや、WordPressで最も便利なショートカットキーのトップピックも参照してください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。