[WordPress]HTMLサイトマップを自動で作成する方法

ブログやサイトで記事数が増えてくると、昔にアップしたものがどんどん下層に下がっていき、訪問してくれた方の目に留まりにくくなりますよね。そんなとき、サイトの目次のようなものがあれば便利だと思いませんか？

今回はごぶろぐのサイトマップのように「HTMLサイトマップ」を簡単に作成する方法をご紹介します。

[box03 title=”この記事を読んで欲しい人”]

• 「HTMLサイトマップ」「XMLサイトマップ」の違いを知りたい
• WordPressで簡単に「HTMLサイトマップ」を作りたい
• ブログ記事の一覧ページを作りたい
• 埋もれている記事を訪問者に読んで欲しい[/box03]
  
  目次

  「HTMLサイトマップ」「XMLサイトマップ」の違い

  「HTMLサイトマップ」って？

  「HTMLサイトマップ」とは、下の図のように、カテゴリー別にリンク付きの記事一覧を表示するページのことです。

  [jin-img-kadomaru][/jin-img-kadomaru]

  「HTMLサイトマップ」は訪問者の為のサイトマップです

  「XMLサイトマップ」って？

  「XMLサイトマップ」は検索エンジンのクローラーに向けて作成されたもので、サイト内に存在するURLのリストを作り、情報を検索エンジンへ送ります。まだ設定していない人はこの機会にぜひ設定しましょう。SEOを気にしたブログの書き方の記事で詳しい方法を説明しています。

  ごぶろぐ

  

  SEOを気にしたブログの書き方。最初に設定したい初心者ブロガー6のチェック項目 | ごぶろぐ 自分のブログで体験した「可能な限り早めに設定したほうがいい」SEO対策。失敗談も含めておすすめの方法や参考サイトをご紹介。

  「XMLサイトマップ」は検索エンジのクローラーの為のマップです

  「HTMLサイトマップ」「XMLサイトマップ」の比較

  種類	誰のため？	目に見える？	役割は？
  HTML サイトマップ	訪問者	◎	目次
  XML サイトマップ	クローラー	×	SEO対策

  WordPressプラグイン『PS Auto Sitemap』を使って自動でHTMLサイトマップを作成

  [chat face=”nekoniko.png” name=”” align=”left” border=”gray” bg=”none” style=”none”]それではここからはプラグインを使って、自動でHTMLサイトマップ（目次）を作成する方法を説明するよ。自動で作成されるので、設定さえしておけば、記事が増えるごとに目次を修正する…なんて必要はないよ[/chat]

  『PS Auto Sitemap』の設定方法と使い方

  1. 「プラグイン」→「新規追加」で『PS Auto Sitemap』を検索し、インストール後有効化します
  2. 「固定ページ」を選択し「新規追加」します
  3. サイトマップや目次など分かりやすいような名前をつけます
  4. 固定ページのHTMLモード（テキストモード）で以下のコードを入力します。<!– SITEMAP CONTENT REPLACE POINT –>
  5. 「公開」を押し「プレビュー」を押すと、URLが表示される欄に

     自分のサイトURL/固定ページ名？preview_id●●●&preview

     

     と表示されるので、preview_idの後ろの数字をメモしておきます。
     ↓の場合なら　3150　です。
     

  6. 「設定」→「PS AutoSitemap」を選択し、下の図のように設定します。・サイトマップを表示する記事：⑤でメモした固定ページのID・出力階層制限：こちらに制限を設けると、カテゴリー名のみの表示にもできます。制限なしの場合は記事名も表示されます。・スタイルの変更：スタイルについては次の項でサンプルをご紹介します。
  7. 「変更を保存」を押して終了です。

  『PS Auto Sitemap』のスタイルサンプル一覧

  スタイルが沢山あるので、サンプルをご紹介します。こちらは全て同じ大きさでの画像となっています。文字の大きさが違うのはそれぞれのスタイルに依存しています。

  [chat face=”nekoniko.png” name=”” align=”left” border=”gray” bg=”none” style=”none”]私はWordPressのテーマjinを利用していますが、テーマによっては『PS Auto Sitemap』で作成したサイトマップに干渉してしまう場合があります。jinを利用している方は、サイトマップの項目の前に「・コンマ」がつきます。こちらを修正するのはテーマを修正する必要があるそうなので、私はこのまま利用しています[/chat]

  [chat face=”nekohutuu.png” name=”” align=”right” border=”gray” bg=”none” style=”none”]前に下手にさわってひどい目にあったもんな[/chat]

  スタイルの変更で好きなスタイルを選んでください

  

  [su_tabs][su_tab title=”シンプル” disabled=”no” anchor=”” url=”” target=”blank” class=””][/su_tab]
  [su_tab title=”シンプル２” disabled=”no” anchor=”” url=”” target=”blank” class=””][/su_tab]
  [su_tab title=”チェックリスト” disabled=”no” anchor=”” url=”” target=”blank” class=””][/su_tab]
  [su_tab title=”蛍光ペン” disabled=”no” anchor=”” url=”” target=”blank” class=””][/su_tab]
  [su_tab title=”ドキュメントツリー” disabled=”no” anchor=”” url=”” target=”blank” class=””][/su_tab]
  [su_tab title=”付箋” disabled=”no” anchor=”” url=”” target=”blank” class=””][/su_tab]
  [su_tab title=”音譜” disabled=”no” anchor=”” url=”” target=”blank” class=””][/su_tab]
  [su_tab title=”矢印” disabled=”no” anchor=”” url=”” target=”blank” class=””][/su_tab]
  [su_tab title=”ビジネス” disabled=”no” anchor=”” url=”” target=”blank” class=””][/su_tab]
  [su_tab title=”索引” disabled=”no” anchor=”” url=”” target=”blank” class=””][/su_tab]
  [su_tab title=”アーバン” disabled=”no” anchor=”” url=”” target=”blank” class=””][/su_tab]
  [su_tab title=”アンダースコア” disabled=”no” anchor=”” url=”” target=”blank” class=””][/su_tab]
  [su_tab title=”キューブ” disabled=”no” anchor=”” url=”” target=”blank” class=””][/su_tab]
  [su_tab title=”チェックリスト” disabled=”no” anchor=”” url=”” target=”blank” class=””][/su_tab][/su_tabs]

  [chat face=”nekoniko.png” name=”” align=”left” border=”gray” bg=”none” style=”none”]ごぶろぐのサイトマップで使っているスタイルは『索引』だよ！これなら・コンマがそこまで邪魔にならないね！[/chat]

  

  いちばんやさしいWordPressの教本第4版

  posted with ヨメレバ

  石川栄和/大串肇 インプレス 2019年08月

  楽天ブックス

  Amazon

  Kindle

  7net

  

  WordPressプラグイン＆WebAPI活用ガイドブック

  posted with ヨメレバ

  星野邦敏/西川伸一 翔泳社 2013年01月

  楽天ブックス

  Amazon

  Kindle

  7net