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

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

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

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

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

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

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

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

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

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

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

• 方法1：WPCodeを使用して矢印キーのキーボードナビゲーションを追加する（推奨）
• 方法2：矢印キーナビゲーションプラグインを使用して矢印キーキーボードナビゲーションを追加する
• 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の使用をお勧めします。

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

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

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。