今回は『WordPressにHTMLサイトマップページを設置する方法』を2つご紹介します。
1つが『PS Auto Sitemap』というプラグインを使う方法。
もう一つが『Cocoon』というテーマに備わっている機能を使う方法です。

人間が見る用のHTMLサイトマップページをWordPressに設置すれば、ユーザビリティが上がりますので、ぜひ参考にしてみてください。
WordPressのHTMLサイトマップページ設置方法(プラグイン利用)
サイトマップ用の固定ページを下書きで作成
まず始めに、サイトマップ用の固定ページを下書きで作成します。
固定ページの『新規追加』を選択します。
本文は空欄で構いませんので、①記事タイトル、②記事URLを決めて、③『下書き保存』をクリックします。
下書き保存が完了したら、『固定ページ一覧』を開き、いま下書き保存した『サイトマップ』の上にマウスのカーソルを合わせます。
すると、画面左下にURLが表示されます。
この『post=◯』の記事ID(この場合は91)をあとで使いますので、メモなどに控えておきましょう。
『PS Auto Sitemap』のインストール・有効化
続いて、WordPressに『PS Auto Sitemap』をインストール・有効化します。
- 『プラグイン』をクリック
- 『新規追加』をクリック
- キーワード欄に『PS Auto Sitemap』と入力
- 『今すぐインストール』をクリック
インストールが完了したら、『有効化』をクリックします。
「プラグインを有効化しました」という文言が出れば、『PS Auto Sitemap』のインストール・有効化は完了となります。
『PS Auto Sitemap』の設定
『PS Auto Sitemap』の設定を行っていきます。
『設定』内に『PS Auto Sitemap』というメニューが追加されていますので、こちらをクリックします。
『サイトマップを表示する記事』に先ほどメモった記事IDを入力し、『変更を保存』をクリックします。
なお、他にも設定項目がありますが、他は特に変更する必要はありません。
ただし、『スタイルの変更』で、サイトマップのデザインを選択できますので、こちらはあとで設定してみてください。
また、この画面を下にスクロールすると、コードがありますので、こちらをコピーしておきましょう。
作成した固定ページにコードを入力
『PS Auto Sitemap』のコードを、最初に下書き保存したサイトマップページの本文内にテキストモードで貼り付けて、今度は『公開』をクリックします。
また、グーテンベルクエディタの場合は、クラシックブロック内にあるHTML挿入から入力してください。
公開したサイトマップページを見てみると、こんな感じになっています。
なお、『PS Auto Sitemap』の設定画面にあった『スタイルの変更』で設定すれば、このようなデザインも選択できますので、お好みで選んでみてください。
WordPressのHTMLサイトマップページ設置方法(Cocoonの場合)
WordPressテーマ『Cocoon』でHTMLサイトマップページを作成するには、sitemapのショートコードを入力するだけなので簡単です。(プラグイン不要)
実際に完成したページがこちら。
なお、こちらのショートコードの入力は、テキストモードでもビジュアルモードでも、どちらでもOKです。
まとめ
今回は『WordPressにHTMLサイトマップページを設置する方法』を2つご紹介してきました。
最後にそれぞれのメリット・デメリットをお伝えしておきます。
- 『PS Auto Sitemap』を使った場合
- メリット:デザインを選べる、他のテーマでも使える
- デメリット:設定が面倒
- 『Cocoon』のショートコードで作成した場合
- メリット:非常に簡単に設置できる、プラグイン不要
- デメリット:デザインが一つだけしかない、Cocoonでしか使えない
このブログでは『Cocoon』のショートコードで設置していますので、合わせて参考にしてみてください。