Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

大きくて複雑なサイトを訪問したとき、必要なものを探すのに迷ったことはありませんか?たとえすでに便利なナビゲーションメニューがあったとしてもです。

ビジュアルサイトマップは、サイト訪問者がサイト構造をナビゲートするためのユーザーフレンドリーなガイドです。ビジュアルサイトマップとは、サイトの構造をユーザーフレンドリーなガイドでナビゲートするものです。

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

How to Create a Visual Sitemap in WordPress

サイトにビジュアルサイトマップは本当に必要か?

サイトマップはサイトのロードマップのようなもので、重要なページをすべて示し、それらがどのようにつながっているかを示すものです。

WordPressのSEO原則に詳しい方なら、XMLサイトマップというキーワードはすでにご存知でしょう。これは検索エンジンのために設計されたもので、検索エンジンがあなたのコンテンツを見つけ、理解するのに役立ちます。

XML sitemaps

一方、HTMLサイトマップもある。

この投稿では、ビジュアルサイトマップに焦点を当てます。ビジュアルサイトマップはHTMLサイトマップのタイプで、XMLサイトマップよりも視覚的に魅力的でわかりやすいフォーマットでサイトの構造を表示します。

さまざまなタイプのユーザーを対象としたサイトを運営している場合、ビジュアルサイトマップを使えば、各訪問者を自分の興味に最も関連するページや投稿に導くことができます。誰もがどこに行けばいいのかわかる親切なガイドがあるようなものだ。

New York Times' sitemap example

ビジュアルサイトマップは、教育サイトやオンラインコースにも最適です。学習の道筋を示し、異なるトピックがどのようにつながっているかを理解するのに役立ちます。

多くの商品カテゴリーを持つオンラインショップでは、ビジュアルサイトマップを使うことで、買い物客が一目で商品ラインナップを理解し、興味のあるカテゴリーを見つけやすくなります。これは、The Good Guysのサイトで見つけた素晴らしい例です:

The Good Guys' sitemap example

それを念頭に置いて、WordPressでビジュアルサイトマップを作成する方法を見てみましょう。

WordPressでコードを使わずにビジュアルサイトマップを作成する方法(初心者向け)

以前はビジュアルサイトマップの作成にSlick Sitemapプラグインをお勧めしていましたが、長い間更新されていませんでした。最近テストしたところ、以前ほどうまく動作しないことがわかりました。

また、Gutenbergと カスタマイザーCSSを使ってサイトマップを作成してみました。最初はうまくいっていたのですが、サイトにページが増えるにつれ、CSSが変化に追いつけず、サイトマップの見た目がおかしくなってきました。

WPBeginnerでは、あなたの時間を節約し、物事を複雑にしない簡単な解決策を見つけるのが好きです。そしてありがたいことに、Simple Sitemapという素晴らしいプラグインを見つけました。

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

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

ブロックエディターを開いた状態で、ページの任意の場所で「+」ボタンをクリックし、「シンプルサイトマップ」ブロックを選択します。

Adding a Simple Sitemap block in the Gutenberg block editor

初期設定では、プラグインはページとそのサブページのサイトマップを作成しますが、投稿は作成しません。

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

Choosing a post type to display in the sitemap in block editor

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

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

Changing the order in which the pages and posts are displayed by the Simple Sitemap plugin

下にスクロールすると、以下の選択ができる:

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

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

Configuring the Simple Sitemap plugin's general settings

そのセクションの下に「投稿タイプラベル」があります。ここでは、投稿タイプの初期設定のラベルを別のテキストに置き換えることができます。

この例では、行動喚起として「ページ」というラベルを「ページを見る」に置き換えることにしました。

Changing the post type label of the Simple Sitemap plugin

最後に「タブ設定」を開きます。

ここでは、サイトマップリンクを表示するタブを有効化できます。初期設定では、サイトマップリンクは投稿タイプに基づいて区切られます。サイトマップページをあまり長くしたくない場合は、この設定はとても便利です。

Enabling tabs in the Simple Sitemap plugin

サイトマップページの見た目に満足したら、次はページを自分好みにカスタマイズしていきましょう。ヘルプが必要な場合は、以下のガイドを参考にしてください:

準備ができたら、「保存」、「更新」、または「公開する」をクリックしてください。

Saving changes after creating sitemap with the Simple Sitemap plugin

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

ビジュアルサイトマップはこんな感じです:

Example of a visual sitemap made with the Simple Sitemap plugin

サイトナビゲーションを改善するボーナスのヒント

あなたのサイトをもっとユーザーフレンドリーにしたいですか?以下のガイドをご覧ください:

この投稿が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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

12件のコメント返信を残す

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Clay Ravin

    The Slick Sitemap plugin hasn’t been updated for 4 years. Is there an alternative we could use?

    • WPBeginner Support

      While we don’t have a specific alternative to recommend at the moment, we will certainly keep an eye out :)

      管理者

  3. Trapti

    I read both articles; xml sitemap & HTML sitemap. I already created xml sitemap in Google webmaster. Xml sitemap for crawling & HTML sitemap for users according to the article. So which sitemap should I put in my WordPress footer? I saw lot of websites put sitemap in WordPress footer.

    • WPBeginner Support

      That would be a question of personal preference for which you would want

      管理者

  4. Mohd Amir

    Why visual sitemap is not working with current version of word press.

  5. amit

    have other plugin? the slick have problem in rtl lang

  6. Hemang Rindani

    Nice article. Sitemap is still important for a website and can help to boost the search results. WordPress, a powerful enterprise web content management service, allows users to create sitemap easily by implementing plugins like Simple Sitemap, as mentioned in the article. This can be implemented by implementing a shortcode on a post, page, custom post type or text widget. There are various attributes in this plugin that allows to set values for type of page, label, links etc..
    It is important to ensure that sitemap is updated each time any page or link in added or removed from a site. For this purpose I feel Google XML sitemap is a better plugin for WordPress sites.

  7. Matija

    While it can look nice I dont see much benefits of this feature.

    Also you are recommending using plugin which is last updated 8 months ago.

  8. mahmood

    Hi…
    Thank you so much.

  9. Bobby

    Neat article. Just a couple of quick questions.

    Is there any really good reason to do an html sitemap on a page for your site? I don’t recall really seeing those anymore like I used to years ago.

    Is it better for larger websites? I only have approximately 20 pages total on my main navigation menu.

    Or would it simply be a personal choice for website layout?

  10. Adrienne

    Very nice feature. I will try this out! Cheers,

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。