WordPressにHTMLサイトマップページを設置する2つの方法

WordPressにHTMLサイトマップページを設置する2つの方法WordPressの使い方

今回は『WordPressにHTMLサイトマップページを設置する方法』を2つご紹介します。

1つが『PS Auto Sitemap』というプラグインを使う方法。

もう一つが『Cocoon』というテーマに備わっている機能を使う方法です。

人間が見る用のHTMLサイトマップページをWordPressに設置すれば、ユーザビリティが上がりますので、ぜひ参考にしてみてください。

スポンサーリンク

WordPressのHTMLサイトマップページ設置方法(プラグイン利用)

サイトマップ用の固定ページを下書きで作成

まず始めに、サイトマップ用の固定ページを下書きで作成します。

固定ページの『新規追加』を選択します。

固定ページの『新規追加』を選択する画面の画像

 

本文は空欄で構いませんので、①記事タイトル、②記事URLを決めて、③『下書き保存』をクリックします。

サイトマップ用の固定ページを下書き保存する画像

 

下書き保存が完了したら、『固定ページ一覧』を開き、いま下書き保存した『サイトマップ』の上にマウスのカーソルを合わせます。

『固定ページ一覧』の画面の画像

 

すると、画面左下にURLが表示されます。

画面左下のURLの画像

この『post=◯』の記事ID(この場合は91)をあとで使いますので、メモなどに控えておきましょう。

『PS Auto Sitemap』のインストール・有効化

続いて、WordPressに『PS Auto Sitemap』をインストール・有効化します。

『PS Auto Sitemap』をインストールする画面の画像

  1. 『プラグイン』をクリック
  2. 『新規追加』をクリック
  3. キーワード欄に『PS Auto Sitemap』と入力
  4. 『今すぐインストール』をクリック

 

インストールが完了したら、『有効化』をクリックします。

『PS Auto Sitemap』を有効化する画面の画像

 

「プラグインを有効化しました」という文言が出れば、『PS Auto Sitemap』のインストール・有効化は完了となります。

『PS Auto Sitemap』の有効化が完了した画面の画像

『PS Auto Sitemap』の設定

『PS Auto Sitemap』の設定を行っていきます。

『設定』内に『PS Auto Sitemap』というメニューが追加されていますので、こちらをクリックします。

『設定』内に『PS Auto Sitemap』をクリックする画面の画像

 

『サイトマップを表示する記事』に先ほどメモった記事IDを入力し、『変更を保存』をクリックします。

『PS Auto Sitemap』の設定画面の画像

なお、他にも設定項目がありますが、他は特に変更する必要はありません。

ただし、『スタイルの変更』で、サイトマップのデザインを選択できますので、こちらはあとで設定してみてください。

 

また、この画面を下にスクロールすると、コードがありますので、こちらをコピーしておきましょう。

『PS Auto Sitemap』のコードをコピーする画面の画像

作成した固定ページにコードを入力

『PS Auto Sitemap』のコードを、最初に下書き保存したサイトマップページの本文内にテキストモードで貼り付けて、今度は『公開』をクリックします。

『PS Auto Sitemap』のコードを貼り付ける画面の画像

 

また、グーテンベルクエディタの場合は、クラシックブロック内にあるHTML挿入から入力してください。

グーテンベルクエディタで『PS Auto Sitemap』のコードを貼り付ける画面の画像

 

公開したサイトマップページを見てみると、こんな感じになっています。

公開したサイトマップページの画像

 

なお、『PS Auto Sitemap』の設定画面にあった『スタイルの変更』で設定すれば、このようなデザインも選択できますので、お好みで選んでみてください。

デザインを変更したサイトマップページの画像

スポンサーリンク

WordPressのHTMLサイトマップページ設置方法(Cocoonの場合)

WordPressテーマ『Cocoon』でHTMLサイトマップページを作成するには、sitemapのショートコードを入力するだけなので簡単です。(プラグイン不要)

『Cocoon』のサイトマップ用ショートコードを入力した画面

 

実際に完成したページがこちら。

『Cocoon』のショートコードで作成したサイトマップページの画面

 

なお、こちらのショートコードの入力は、テキストモードでもビジュアルモードでも、どちらでもOKです。

まとめ

今回は『WordPressにHTMLサイトマップページを設置する方法』を2つご紹介してきました。

最後にそれぞれのメリット・デメリットをお伝えしておきます。

  1. 『PS Auto Sitemap』を使った場合
    • メリット:デザインを選べる、他のテーマでも使える
    • デメリット:設定が面倒
  2. 『Cocoon』のショートコードで作成した場合
    • メリット:非常に簡単に設置できる、プラグイン不要
    • デメリット:デザインが一つだけしかない、Cocoonでしか使えない

このブログでは『Cocoon』のショートコードで設置していますので、合わせて参考にしてみてください。

タイトルとURLをコピーしました