プラグインPS Auto Sitemap設置方法！ページ一覧表示するHTMLサイトマップは、カテゴリごとに自動出力

ブログを訪問したユーザーにとって利便性として、カテゴリ分けした投稿ページ一覧のサイトマップを簡単に固定ページに設置するWordPressプラグインの設置方法。

設置後にCSSでスタイルを変更して、スマホでタップしやすく・PCでも見やすいように文字サイズなど最後に見出しを置いてます。

HTMLサイトマップとXMLサイトマップの違いから、設置方法・スタイルの変更と順番にチェックしてくださいね＾＾

サイトマッププラグイン※プチカスタマイズ済み

WordPressバージョンが4.2.23の頃から更新されてないので、アンインストールしてます。

既に使ってません。
このサイトの更新もないので、PS Auto SitemapのHTMLをコピペしたものをサイトマップに使用中

ユーザー用のHTMLサイトマップ？XMLサイトマップとの違いは何！？
1. カテゴリごとに分けた投稿ページをユーザーに伝える
HTMLサイトマップのプラグイン「PS Auto Sitemap」設置
サイトマップのスタイルをCSSで変更
さいごに

ユーザー用のHTMLサイトマップ？XMLサイトマップとの違いは何！？

XMLサイトマップはクローラー用、検索エンジン用に更新を伝えるに伝える為のリンクです。HTMLサイトマップはユーザーがどんなページがあるか一覧で見るものだから、パッと見て解るものでなければいけません。

LINKGoogle XML SitemapsでXMLサイトマップ送信！検索エンジンに情報を伝える為にプラグインで登録

下記画像がユーザー用サイトマップの画像です。どのカテゴリに何があるか？っと、すぐに見てわかりますね。

ポイント

XMLサイトマップ
- クローラー・検索ロボットが巡回しやすいサイトマップ
HTMLサイトマップ
- ユーザーのための用サイトマップ

カテゴリごとに分けた投稿ページをユーザーに伝える

ページを更新するときカテゴリに分けることで、ユーザーが欲しい情報を見つけやすくなります。欲しい内容を大きなカテゴリに分けて、更に子カテゴリに分け探しやすくするのがベストです。

食べ物のカテゴリの中に、WordPressのことを入れてると、どうでしょう？

ユーザーさんの期待に添えない情報が入ってると、どんなに良い内容を書いていてもキチンと届ける事ができません。

欲しい情報を解りやすく、探しやすくする為のサイトマップですから、カテゴリ分けは当然必要です。検索エンジンに伝えるのは、ユーザーが欲しい興味のある情報をキーワードに合わせて書いたり表示すること為ですから。

LINK初心者が解るSEO！検索エンジンの仕組みから説明しよう！

ユーザーにページ一覧を見てもらうのがサイトマップ、さらにテーマの設定によっては、カテゴリがSEOで重要な役割も持つので、プラグインを使ってサクッと設置していきましょう。

HTMLサイトマップのプラグイン「PS Auto Sitemap」設置

サイトマップのスタイル変更が簡単にでき、14種類のテンプレートがあります。プラグインなのでテーマを変えても表示されるし、スタイルの変更もチェックを入れて更新するだけでできちゃいます。

インストール方法は、ダッシュボードのプラグインから新規追加を選択します。

プラグインの検索窓より
「PS Auto Sitemap」と入力
「今すぐインストール」をクリック。
「有効化」

WordPressの固定ページにサイトマップを作成

インストール後に、設定が必要になりますので一緒にやっていきましょう。

ダッシュボード内『固定ページ』から『新規追加」を選択しサイトマップ専用ページを作成。
【ビジュアル】【テキスト】と右側にあるタブ。【テキスト】をクリックしてHTML下記コードを、白い画面にコピペします。

<!-- SITEMAP CONTENT REPLACE POINT -->

タイトルには「サイトマップ」
パーマリンクは「sitemap」

以上で、【公開】をクリック！

サイトマップ用、固定ページの記事IDを入力

サイトマップを表示する記事を作った、固定ページの記事IDである数字を調べ記入します。

ダッシュボードより『固定ページ』を開くと『サイトマップ』の下に『編集』という項目にマウスポインタを合わせてください。▼下記画像の通りです。

画面左下に、数字が出てきます。それが、あなたの作ったサイトマップのIDで私の場合308がID。

admin/post.php?post=数字&action=edit

その数字をメモして覚えたら【PS Auto Sitemap】へ戻ります。

ダッシュボードの設定より
PS Auto Sitemapをクリック

『サイトマップを表示する記事』に「さっきの数字」を入れたら、サイトマップとして記事を出力します。

サイトマップを表示する記事欄に数字を入れる

PS Auto Sitemapのその他の設定

PS Auto Sitemap設定

上から順番に説明すると下記。

【ホームページの出力】
- 【ブログ名】が不要なら、「レ点」をチェックを解除。
- 個人的にヘッダーにブログ名が書いてるのでチェックは外してます。
【投稿リスト】
- 普段投稿している記事。必要なので出力！
- 【出力】は、【表示】と置き換えると一気にわかりやすい。
【固定ページ】
- Aboutブログについて、Cntact formお問い合わせページなど
- ダッシュボードの固定ページから作成したページを出力するかどうか。
【出力階層制限】
- カテゴリの階層を制限するか
【先に出力するリスト】
- 投稿ページを先にするなら、投稿にチェック！
【カテゴリーと投稿の表示】
- 同一のほうは1度にすべてのページが表示されるので、同一マップ内にしてます。

【除外記事】
- 表示させたくない記事のIDなど。サイトマップがクロールされた時、noindexの記事をクロールされたくない場合IDを入れる
- 記事IDはさっきの方法と同じ
【スタイルの変更】
- 14種類、好みでどうぞ
【キャッシュの使用】
- キャッシュは一度読み込んだページを保存しておく、読み込みの時短です。個人的に切ってます＾＾

設定が終われば、【変更を保存】をお忘れなく。

サイトマップのスタイルをCSSで変更

せっかく設置したサイトマップですが、字が小さくスマホではタップしにくいのが現状なので、CSSでスタイルを変更して見やすくします。

サイトマップのHTMLは番号なしのリストulタグで作られてます。テーマの番号なしulタグの装飾によって間隔などは変わるけど、基本的に見やすく装飾してたのでコピペでWordPressダッシュボード内、外観よりテーマの編集でスタイルシートに追記してくださいね＾＾

/*** サイトマップのカスタマイズ ***/
/*#sitemap_list li::before {
	content: none;
	background: none;
}*/

/** フォントサイズとか **/
#sitemap_list li .cat-item ,#sitemap_list .cat-item {
	font-size:20px;/*文字を大きく*/
	font-weight: bold;/*文字を太く*/
	background: none;/*子カテゴリ左背景なし*/
}

/*記事タイトルの文字と余白*/
#sitemap_list li .post-item {
	font-size: 16px;/*タップしやすいサイズに*/
	padding-bottom: 1em;/*タイトル下にスペース*/
}

/*カテゴリ毎のリストに余白*/
#sitemap_list li[class^="cat-item"] {
	margin-top: 1em;/*カテゴリ上にスペース*/
}

説明はスタイル横に/*コメント*/している通りです。

2～5行目はコメントアウトしています。ul番号なしリストの装飾を追加するひとはコメントアウト/**/を削除してください。