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でも私たちを見つけることができます。