【サイトマップ作成ツール】HTML版のおすすめプラグインと設定方法【WordPress】

HTMLサイトマップの作り方
悩んでいる人

サイトマップを作りたい…

サイトの情報やブログの記事がどこにあるのか、サイトマップなら一覧表示されて、わかりやすいですよね。

サイトマップ作成用のツール(WordPressプラグイン)はいくつかありますが、広く普及していて有名なのが「PS Auto Sitemap」です。

今回は「PS Auto Sitemap」を用いたHTMLサイトマップの作成方法について、解説していきます。

本記事に沿って進めていきますと、当ブログのHTMLサイトマップと同じものが完成します。

ジュンペイ

簡単にできます!

この記事を書いた人

この記事を書いている僕は、2021年8月ブログ開始。最初の記事がA8コンテスト入賞。3ヶ月目に収益:単月5桁。シンプルなブログ作りを発信。地味にコツコツ、が得意です。

この記事でわかること
  • HTMLサイトマップを簡単に作る方法
目次

HTMLサイトマップとXMLサイトマップの違い

サイトマップには、HTMLサイトマップXMLサイトマップの2種類があります。

同じサイトマップという名称ですが、この2つは役割が異なります。

HTMLサイトマップとは

HTMLサイトマップは、サイトの情報やブログの記事がどこにあるのかを一覧で表示するページのことです。

本記事では、このHTMLサイトマップを作っていきます。

XMLサイトマップとは

XMLサイトマップは、ユーザーが閲覧するページではなく、サイトやブログの情報をGoogleの検索エンジンへ伝えるためのデータになります。

たとえば、ブログの記事を新たに追加したとき、その記事の情報をGoogleサーチコンソール(Google Search Console)へ送信しますが、送信する手段としてXMLサイトマップを使います。

PS Auto Sitemap のアップデートについて

PS Auto Sitemap は長い間アップデートされていません。

当ブログはWordPressの最新バージョンを使っていますが、HTMLサイトマップは正常に動いています。

ユーザー数も多く、今のところ、アップデートされなくても普通に使えるプラグインのようです。

ただ、アップデート状況が気になる方は、他のプラグインを選んだほうがいいかもしれません。

HTMLサイトマップの完成イメージ

HTMLサイトマップの完成イメージは、次のとおりです。

HTMLサイトマップ

HTMLサイトマップ

上の画像が当ブログのHTMLサイトマップになります。

HTMLサイトマップ

カテゴリー毎に記事が分類されています。

HTMLサイトマップの設置場所(リンク)

当ブログのフッター

当ブログでは、フッターにHTMLサイトマップのリンクを設置しています。

ジュンペイ

設置場所はどこでも大丈夫です

PS Auto Sitemap のインストール方法

「プラグインを追加」画面

WordPress管理画面の左側にある[プラグイン]⇒[新規追加]メニューをクリックしますと、「プラグインを追加」の画面が出てきます。

①右上の検索ボックスに「PS Auto Sitemap」と入力します。

②検索結果に出てきた PS Auto Sitemap の「今すぐインストール」をクリックします。

有効化の画面

インストールされると「有効化」ボタンが出てきます。

③「有効化」ボタンをクリックします。

WordPress管理画面の左側にある[設定]⇒[PS Auto Sitemap]というサブメニューが出てきましたら、有効化は完了です。

HTMLサイトマップの作り方

全体の流れ

次の手順に沿って、設定を進めていきます。

  1. PS Auto Sitemap のコードを取得する
  2. HTMLサイトマップの固定ページを作成する
  3. PS Auto Sitemap を設定する

1つずつ見ていきますね。

PS Auto Sitemap のコードを取得する

PS Auto Sitemap の設定画面

WordPress管理画面の左側にある[設定]⇒[PS Auto Sitemap]メニューをクリックします。「PS Auto Sitemap」の設定画面が出てきます。

画面を下にスクロールしますと、「ご利用方法」という項目が現れます。

ご利用方法

<!– SITEMAP CONTENT REPLACE POINT –>というコードをコピーします。

HTMLサイトマップの固定ページを作成する

固定ページ作成画面

WordPress管理画面の左側にある[固定ページ]⇒[新規作成]メニューをクリックして、固定ページの作成画面を開きます。

④タイトルを入力します。好きな名前で構いません。

※ 当ブログでは「記事一覧(サイトマップ)」にしています。

⑤ブロックエディターのカスタムHTMLブロックを呼び出して、さきほどコピーしたコードをペースト(貼り付け)します。

⑥画面の右側にある「パーマリンク」⇒「URLスラッグ」欄に、英語の文字列を入力します。

URLスラッグ欄に入力した文字列が、HTMLサイトマップのURLの最後の部分になります。
当ブログでは「sitemap」にしています。

固定ページ作成画面の右上にある「公開」ボタンを押してから、画面を閉じます。

固定ページの一覧画面

⑦固定ページの一覧画面で、「記事一覧(サイトマップ)」の上にマウスポインタを合わせます。

⑧すると、画面左下に「記事一覧(サイトマップ)」ページのIDが表示されます。

「記事一覧(サイトマップ)」ページのID

上の画像は、ページIDの部分を拡大したものになります。

サイトURLの後にある「post=●●●」の「●●●」がページIDです。

ページIDをメモして、「PS Auto Sitemap」の設定画面に戻ります。

固定ページの一覧画面

WordPressテーマによっては、固定ページの一覧画面の右側にIDが表示されていることもあります。

PS Auto Sitemap を設定する

WordPress管理画面の左側にある[設定]⇒[PS Auto Sitemap]メニューをクリックして、PS Auto Sitemapの設定画面を開きます。

インストールしたときの初期設定では、次のようになっています。

PS Auto Sitemap の初期設定

項目初期設定
ホームページの出力出力する
投稿リストの出力出力する
固定ページリストの出力出力する
サイトマップを表示する記事空欄
出力階層制限制限なし
先に出力するリスト投稿
カテゴリーと投稿の表示同一マップ内
除外カテゴリ空欄
除外記事空欄
スタイルの変更スタイルなし
キャッシュの使用使用する
PS Auto Sitemap の初期設定

この初期設定を以下のように変更します。

変更後の設定

PS Auto Sitemap の設定画面

⑨「ホームページの出力」「固定ページリストの出力」のチェックを外し、「投稿リストの出力」にだけチェックを入れる。

⑩「サイトマップを表示する記事」に、さきほどのページIDを入力します。

⑪「スタイルの変更」で、「ビジネス」を選択します。

⑫「キャッシュの使用」のチェックを外します。

⑬「変更を保存」をクリックします。

HTMLサイトマップに表示したくないカテゴリーや記事がある場合は、PS Auto Sitemap 設定画面の「除外カテゴリ」「除外記事」のところに、それぞれカテゴリーIDや記事ID(投稿ID)を入力します。

これで、HTMLサイトマップの作成は完了です。

ジュンペイ

おつかれさまでした!

HTMLサイトマップのURLにアクセスして、完成画面を確認しましょう。

HTMLサイトマップの表示順を変更する方法

HTMLサイトマップは、カテゴリー毎に記事が表示されます。

カテゴリーの順番を並び替えて表示する方法は、下記の記事にまとめました。

HTMLサイトマップのデザインを変更する方法

PS Auto Sitemapには13のデザインテンプレートが用意されています。

PS Auto Sitemap 設定画面の「スタイルの変更」から好きなテンプレートを選べます。

当ブログのHTMLサイトマップを例にして、13のデザインを挙げておきます。いろいろあって楽しいですよ。

シンプル

シンプル

シンプル2

シンプル2

チェックリスト

チェックリスト

蛍光ペン

蛍光ペン

ドキュメンタリー

ドキュメンタリー

付箋

付箋

音譜

音譜

矢印

矢印

ビジネス

ビジネス

索引

索引

アーバン

アーバン

アンダースコア

アンダースコア

キューブ

キューブ
よかったらシェアしてね!
目次