WordPressでビジュアルサイトマップを作成する方法（簡単な方法）

大規模で複雑なウェブサイトを訪れた際に、必要なものを見つけられずに迷った経験はありませんか？ 便利なナビゲーションメニューがあるにもかかわらず、ニュース出版物やオンラインストアのようないくつかの主要なサイトでこの問題に気づきました 😅

幸いなことに、この問題に対する簡単な解決策を発見しました。それがビジュアルサイトマップです。これは、訪問者がサイトの構造をナビゲートするのに役立つ、ユーザーフレンドリーなガイドです。

この投稿では、使いやすいプラグインを使用して WordPress でビジュアルサイトマップを作成する方法を紹介します。

私のウェブサイトは本当にビジュアルサイトマップを必要としていますか？

サイトマップはウェブサイトのロードマップのようなもので、すべての重要なページとその接続方法を示します。

WordPress SEO の原則に慣れているなら、おそらく XML サイトマップという用語をすでに知っているでしょう。これらは検索エンジン向けに設計されており、コンテンツを見つけて理解するのに役立ちます。

一方で、HTMLサイトマップもあります。

この投稿では、XMLサイトマップよりも視覚的に魅力的で理解しやすい形式でサイトの構造を表示するHTMLサイトマップの一種であるビジュアルサイトマップに焦点を当てます。

さまざまな種類のユーザーに対応するウェブサイトをお持ちの場合、ビジュアルサイトマップは、各訪問者を、最も関連性の高いページまたは投稿に誘導するのに役立ちます。それは、どこへ行くべきかを示すフレンドリーなガイドを持っているようなものです。

ビジュアルサイトマップは、教育用ウェブサイトやオンラインコースにも最適です。学習パスを示し、学生がさまざまなトピックがどのように関連しているかを理解するのに役立ちます。

オンラインストアで多くの商品カテゴリがある場合、ビジュアルサイトマップは、買い物客が一目で商品範囲を理解し、興味のあるカテゴリを簡単に見つけるのに役立ちます。以下は、The Good Guysのウェブサイトで見つけた素晴らしい例です。

これを踏まえて、WordPress でビジュアルサイトマップを作成する方法を見ていきましょう。

コードなしでWordPressにビジュアルサイトマップを作成する方法（初心者向け）🗺️

以前は視覚的なサイトマップを作成するためにSlick Sitemapプラグインを推奨していましたが、長らく更新されていません。最近テストしたところ、以前ほど機能しないことがわかりました。

Gutenberg や カスタムCSS を使用してサイトマップを作成しようとしました。最初はうまくいきましたが、サイトにページを追加していくにつれて、CSS が変更に追いつけなくなり、サイトマップが奇妙に見え始めました。

WPBeginnerでは、時間を節約でき、複雑にならない簡単なソリューションを見つけることを好みます。幸いなことに、Simple Sitemapという、うまく機能する素晴らしいプラグインの代替品を見つけました。

開始するには、ウェブサイトにWordPressプラグインをインストールして有効化する必要があります。それが完了したら、サイトマップ用の新しい投稿またはページを作成できます。または、Gutenbergブロックエディターを使用して既存のものを開くこともできます。

私たちの場合は、「サイトマップ」という新しいページを作成することにしました。

ブロックエディターが開いたら、ページ上の「+」ボタンをクリックし、「Simple Sitemap」ブロックを選択します。

デフォルトでは、プラグインはページとそのサブページ（投稿は除く）のサイトマップを作成します。

サイトマップに投稿を追加したい場合は、「ブロック」タブの「一般設定」に移動します。ここで、「表示する投稿タイプを選択」フィールドに「投稿」と入力します。

そうすると、すべての投稿がサイトマップのページセクションの下に表示されます。

次に、ページや投稿の表示順序をカスタマイズしましょう。タイトル、日付、ID、著者、名前、更新日、メニュー順、ランダム順、またはコメント数から選択できます。「昇順」または「降順」も選択できます。

下にスクロールすると、次のオプションを選択できます。

• サイトマップでページと投稿を明確に区別するために、投稿タイプラベルを表示します。
• 投稿とページの抜粋を表示します。サイトマップが長くなる可能性があるため、このオプションは無効にしました。
• サイトマップリンクを有効にします。このオプションを無効にすると、ユーザーはサイトマップ内のリンクをクリックできなくなります。
• ユーザーがサイトマップページから離れないように、すべてのリンクをクリック時に新しいタブで開くようにします。

どの設定を選択するかは、あなたの好みとウェブサイトのニーズによって異なりますので、これらのオプションを慎重に検討してください。また、気が変わったらいつでもこれらの設定を有効または無効にすることができます。

そのセクションの下に「Post Types Labels」があります。ここで、投稿タイプのデフォルトラベルを別のテキストに置き換えることができます。

この例では、コールトゥアクションとして「Pages」というラベルを「Explore Our Pages」に置き換えることにしました。

最後に、「タブ設定」を開くことができます。

ここで、サイトマップリンクを表示するためのタブを有効にできます。デフォルトでは、サイトマップリンクは投稿タイプに基づいて分割されます。サイトマップページが長くなりすぎるのを避けたい場合に便利なオプションです。

サイトマップページの見た目に満足したら、お好みに合わせてページをさらにカスタマイズできます。ヘルプが必要な場合は、こちらに開始するためのガイドがあります。

• WordPressウェブサイトの編集方法（究極ガイド）
• WordPressにカスタムフォントを追加する方法
• WordPressのあらゆる要素にカスタムスクロールバーを追加する方法 (サイトマップブロックが少し長すぎる場合)

準備ができたら、保存、更新、または公開をクリックするだけです。

すべてのデバイスで見た目が良いかどうかを確認するために、新しいページをモバイル、デスクトップ、タブレットで表示してください。

こちらが私たちの視覚的なサイトマップです。

ウェブサイトのナビゲーションを改善するためのボーナスヒント

ウェブサイトをさらに使いやすくしたいですか？以下のガイドをご覧ください。

• WordPressでフルスクリーンレスポンシブメニューを追加する方法 – あらゆるデバイスで見栄えの良いメニューを作成する方法を学びましょう。
• WordPressでパンくずリストナビゲーションリンクを表示する方法 – 訪問者がサイトのどこにいるかを理解するのに役立ちます。
• WordPressに矢印キーのキーボードナビゲーションを追加する方法 – キーボードユーザーにとってサイトをよりアクセスしやすくします。
• WordPressでスタッフディレクトリを作成する方法（従業員プロフィール付き） – チーム情報を効果的に整理しましょう。
• WordPressサイドバーのトリックで最大限の結果を得る – ナビゲーションとエンゲージメントを向上させるためにサイドバーを最適化します。

この記事で、WordPressでビジュアルサイトマップを作成する方法を学べたことを願っています。また、WordPressのベストドラッグ＆ドロップページビルダーの専門家によるピックと、最も効果的なWordPressデザイン要素に関する究極の記事もチェックすることをお勧めします。

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