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

WordPressに矢印キーによるキーボードナビゲーションを追加したいですか？

キーボードナビゲーションは、訪問者が矢印キーを使って投稿から投稿へ移動できるようにすることで、サイトをよりユーザーフレンドリーにすることができます。しかし、WordPressは初期設定ではこれらのナビゲーション機能を提供していません。

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

なぜWordPressに矢印キーによるキーボードナビゲーションを追加するのか？

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

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

この機能は、ユーザーが簡単に投稿を順番に閲覧したい場合に便利です。例えば、ブログ投稿を本のチャプターやポートフォリオの項目、歴史的な出来事などに公開している場合などです。

また、矢印キーのキーボードナビゲーションを追加することで、ユーザーによりサイトを探検してもらうことができ、WordPressブログのユーザーエクスペリエンスを向上させることができます。

ということで、WordPressに矢印キーのキーボードナビゲーションを簡単に追加する方法を順を追って見ていきましょう：

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

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

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

しかし、WordPressのコアファイルにカスタマイザーのコードを 追加するのはリスクが高く、ちょっとしたミスでサイトが壊れてしまう可能性があることを覚えておいてください。

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

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

有効化したら、WordPressの管理ダッシュボードからCode Snippets ” + Add Snippetのページにアクセスします。

カスタムコードを追加する（新規スニペット）」設定の下にある「スニペットを使用する（Use Snippet）」ボタンをクリックします。

カスタムスニペットの作成」ページが表示されますので、コードタイプ名を入力してください。

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

次に、以下のコードをコピー＆ペーストして「コード・プレビュー」ボックスに入れてください：

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

その後、「インサーター」セクションまでスクロールダウンして、コード・スニペットの場所を選択する。

ここでは、「Location」オプションの隣にあるドロップダウンメニューから「Site Wide Footer」オプションを選択するだけです。

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

有効化したコードは、あなたのサイトで自動的に実行されます。

その後、ページを一番上までスクロールし、スイッチを「非活性化」から「有効化」に切り替える。

あとはすべて「スニペットを保存」ボタンをクリックするだけだ。

これで完了です！あなたのサイトに左右の矢印キーナビゲーションが追加されました。

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

あなたのサイトにコードを追加したくない場合は、矢印キーナビゲーションプラグインを使用することができます。

このプラグインを使用すると、キーボードの右矢印キーと左矢印キーを使用して、サイトの過去の投稿と次の投稿をナビゲートすることが有効化されます。

まず、Arrow Keys Navigationプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

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

このプラグインはサイト内の投稿を切り替えることしかできないので、矢印キーを使ってページを移動することはできない。

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

プラグインを有効化した後、投稿日にアラートバーやポップアップを追加し、ユーザーに矢印キーで次の投稿に移動できることを知らせることができます。

より詳しい説明は、WordPressでアラートバーを作成する方法のチュートリアルをご覧ください。

WordPressスライダーとイメージギャラリーの矢印キーナビゲーション

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

このような場合、WordPressギャラリープラグインや WordPressスライダープラグインを使用する必要があります。ほとんどの一般的なスライダーとギャラリーのプラグインには、矢印キーナビゲーション機能がビルトインされています。

Envira Galleryを使用することをお勧めします。EnviraGalleryは、ウォーターマーク、矢印キー、altテキストなど、あなたの好みに合わせて画像をカスタマイズできる最高のギャラリープラグインだからです。

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

この投稿が、WordPressで矢印キーのキーボードナビゲーションを追加する方法を学ぶのにお役に立てば幸いです。WordPressプラグインのトップピックや、WordPressで特殊文字を追加する方法のガイドもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.