こんにちは、ヨシオカ(@yoshigadge)です。
WordPressテーマ「SWELL」をインストールした後にすることの一つとして、HTMLサイトマップの作成とサイトへの設置方法を画像つきで紹介します。
今回紹介する手順は、「PS Auto Sitemap」というプラグイン使用し、ブログ初心者でも簡単にHTMLサイトマップ作成できます。
HTMLサイトマップにはサイトへの訪問者の案内図ような役割があり、Googleアドセンスの審査にも影響していると言われています。
ブログ初心者でも本記事の手順どおりに進めればHTMLサイトマップを作成でき、サイト内に設置できますよ!
やること①:HTMLサイトマップ用のプラグインのインストール
![](https://yoshigadge.com/wp-content/uploads/2021/02/stephen-phillips-hostreviews-co-uk-sSPzmL7fpWc-unsplash-2-1024x576.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/01/62c22a75f746d7ad529100235083a16b.png)
まずはHTMLサイトマップを作成するためのプラグインをインストールしましょう。
今回紹介する「PS Site Automap」というプラグインを使えば、ブログ初心者でも簡単にHTMLサイトマップを作成できるのでオススメです。
WordPressのダッシュボードにある「プラグイン」から「新規追加」を選択。
![](https://yoshigadge.com/wp-content/uploads/2021/03/02d26c71790c555140e99735caccdab2-3.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/02d26c71790c555140e99735caccdab2-3.png)
検索バーに「PS Auto Sitemap」と入力して検索し、表示されたら「今すぐインストール」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/03/5244d39d6758871adc2c392c5c43b6c0-1024x377.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/5244d39d6758871adc2c392c5c43b6c0-1024x377.png)
「有効化」をクリック。これでプラグインのインストールは完了です。
![](https://yoshigadge.com/wp-content/uploads/2021/03/bdbcba752fa9eb49acdc3b76ce6776fb-2-1024x373.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/bdbcba752fa9eb49acdc3b76ce6776fb-2-1024x373.png)
やること②:HTMLサイトマップ用の「固定ページ」の作成
![](https://yoshigadge.com/wp-content/uploads/2021/03/d4150d42b7f9502c2a86d6027945ce94-1-1024x576.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/03/d4150d42b7f9502c2a86d6027945ce94-1-1024x576.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/01/62c22a75f746d7ad529100235083a16b.png)
![](https://yoshigadge.com/wp-content/uploads/2021/01/62c22a75f746d7ad529100235083a16b.png)
![](https://yoshigadge.com/wp-content/uploads/2021/01/62c22a75f746d7ad529100235083a16b.png)
ここからは、PS Site Automapで作成できるHTMLサイトマップを表示するための「固定ページ」を作成します。
WordPressのダッシュボードにある「WPForms」から「新規追加」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/03/2410a0043c633d6e7af2aa28600d3b3e-1.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/2410a0043c633d6e7af2aa28600d3b3e-1.png)
サイトに訪れてくれた人が実際にみるページです。
「サイトマップ」を設置するページなので、このページのタイトルはそのまま「サイトマップ」にしてみました。この表記は好きな表記にしてOKです。
また、このページのパーマリンクは「sitemap」としました。パーマリンクはこのページのURLにどのような表示される文字列ですので、こちらも好きな表記でOKです。
![](https://yoshigadge.com/wp-content/uploads/2021/03/09df68dfcc463c220f48c13e3d3cffcd-1024x429.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/09df68dfcc463c220f48c13e3d3cffcd-1024x429.png)
ページの本文をクリックすると「+」ボタンが表示されるのでクリック。検索バーが表示されるので「カスタム」または「HTML」と入力。
「カスタムHTML」がという項目が表示されるのでクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/03/9d49182806abc111849967b715f2a71a-1024x508.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/9d49182806abc111849967b715f2a71a-1024x508.png)
↓の画像と同じように <!– SITEMAP CONTENT REPLACE POINT –> と入力し、「公開」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/03/df1c6a0b78c0c7f0e0fb1a805726d2cc-1-1024x291.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/df1c6a0b78c0c7f0e0fb1a805726d2cc-1-1024x291.png)
WordPressのダッシュボードにある「固定ページ」から「固定ページ一覧」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/03/66c19942ab4ba346fdb64ccc04cde373.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/66c19942ab4ba346fdb64ccc04cde373.png)
「サイトマップ」という固定ページのIDの項にある数字(↓の赤枠部分)をコピー。
![](https://yoshigadge.com/wp-content/uploads/2021/03/83a1940395bd6c7943a746e4b3e76dac-2-1024x269.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/83a1940395bd6c7943a746e4b3e76dac-2-1024x269.png)
![](https://yoshigadge.com/wp-content/uploads/2021/01/456bf2fa9ef051fea7b408783548eb0c.png)
![](https://yoshigadge.com/wp-content/uploads/2021/01/456bf2fa9ef051fea7b408783548eb0c.png)
![](https://yoshigadge.com/wp-content/uploads/2021/01/456bf2fa9ef051fea7b408783548eb0c.png)
これでHTMLサイトマップを表示さるための固定ページ作成は完了です。
最後にコピーした「ID」はこの後で使いますよ。
やること③:PS Site Automapの設定
![](https://yoshigadge.com/wp-content/uploads/2021/03/student-849825_1920-1024x576.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/03/student-849825_1920-1024x576.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/01/62c22a75f746d7ad529100235083a16b.png)
![](https://yoshigadge.com/wp-content/uploads/2021/01/62c22a75f746d7ad529100235083a16b.png)
![](https://yoshigadge.com/wp-content/uploads/2021/01/62c22a75f746d7ad529100235083a16b.png)
PS Site Automapに、どの固定ページHTMLサイトマップを表示するかの設定をします。
WordPressのダッシュボードの「設定」にある「PS Site Automap」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/03/dc508d670a5cf2a5596b50e09dbb5aff-1.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/dc508d670a5cf2a5596b50e09dbb5aff-1.png)
「サイトマップを表示する記事」に、本記事の「やること②のSTEP6」でコピーしておいたID(数字)を貼り付け、「変更を保存」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/03/9a88d2cfed697567c28c1a0dd54597da-2-771x1024.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/9a88d2cfed697567c28c1a0dd54597da-2-771x1024.png)
やること④:作成した固定ページをサイト内に設置する。
![](https://yoshigadge.com/wp-content/uploads/2021/03/office-820390_1920-1024x576.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/03/office-820390_1920-1024x576.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/01/62c22a75f746d7ad529100235083a16b.png)
![](https://yoshigadge.com/wp-content/uploads/2021/01/62c22a75f746d7ad529100235083a16b.png)
![](https://yoshigadge.com/wp-content/uploads/2021/01/62c22a75f746d7ad529100235083a16b.png)
HTMLサイトマップ入りの「固定ページ」をサイト内に設置する手順を紹介します。
私はサイトの「フッター」にサイトマップへのリンクを設置しています。
WordPressのダッシュボードにある「外観」から「メニュー」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/03/f6b1d34b24be4814c92c07e89b4d6309-1.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/f6b1d34b24be4814c92c07e89b4d6309-1.png)
ここでは以前に固定ページを表示する「メニュー」を作成済という前提の手順を紹介します。
初めて「メニュー」を作成する方は、青下線が引いてある「新しいメニューを作成しましょう」からフッターメニューを作成してください。作成が完了したら↓の手順を参考にしてください。
HTMLサイトマップをフッターに表示するので「フッターメニュー」を選択。
画面左の「固定ページ」にある「サイトマップ」にチェックを入れ、「メニューに追加」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/03/18f536657a81eb75c7fb520bd88641ce-1-1024x689.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/18f536657a81eb75c7fb520bd88641ce-1-1024x689.png)
「メニュー構造」のセクションに「サイトマップ」が表示されます(赤字下線部分)。
「メニュー設定」にある「フッター」にチェックを入ってることを確認し、「メニューを保存」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/03/a2ef5d3358674262ab1bd7a433717cba-1-1024x775.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/a2ef5d3358674262ab1bd7a433717cba-1-1024x775.png)
サイトのフッター部分に「サイトマップ」が表示されました。
![](https://yoshigadge.com/wp-content/uploads/2021/03/589e152f2565486b1ae6c1cdc5fdfb76-1.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/589e152f2565486b1ae6c1cdc5fdfb76-1.png)
HTMLサイトマップが無事に表示されました。サイトマップの設置は完了です。
![](https://yoshigadge.com/wp-content/uploads/2021/03/7b8f40b645b84e44bd774fa44c4d0cdf.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/7b8f40b645b84e44bd774fa44c4d0cdf.png)
まとめ:HTMLサイトマップの作成と設置
HTMLサイトマップにはサイトへの訪問者の案内図ような役割があり、Googleアドセンスの審査にも影響していると言われています。
HTMLサイトマップは、本記事で紹介した↓の手順でブログ初心者でも簡単に作成することができます。
SWELLのインストール後にHTMLサイトマップをまだ作成していない場合には、ぜひ作成してみてください。
やること①:HTMLサイトマップ用のプラグインのインストール
やること②:HTMLサイトマップ用の「固定ページ」の作成
やること③:PS Site Automapの設定
やること④:作成した固定ページをサイト内に設置する
![](https://yoshigadge.com/wp-content/uploads/2021/03/a11e15480cc685b2860332ae6fcc1fcc-300x169.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/03/a11e15480cc685b2860332ae6fcc1fcc-300x169.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/02/analysis-1841158_1920-1-300x169.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/02/analysis-1841158_1920-1-300x169.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/02/stephen-phillips-hostreviews-co-uk-sSPzmL7fpWc-unsplash-2-300x169.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/02/stephen-phillips-hostreviews-co-uk-sSPzmL7fpWc-unsplash-2-300x169.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/02/c2d34df85d952c96c293f9898da44605-300x169.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/02/c2d34df85d952c96c293f9898da44605-300x169.jpg)