HTMLサイトマップの作成|CocoonとTinyMCE Advancedの環境において

jisakusitemap Cocoon
この記事は約6分で読めます。

はじめに

 前のサイトマップの記事では、テーマCocoonが持っているサイトマップ作成機能を利用して自分のブログの訪問者用のHTMLサイトマップを作成しました。

 しかし、このサイトマップは記事一覧が表示されるタイプなので、この記事がどのカテゴリーに入る記事なのかが分かりません。

 訪問者にとっても不親切であり、他のブログを見ても、カテゴリーごとに分類されて表示されているサイトが多いのが事実です。

 また、サイトマップを通じて不要なカテゴリーとかまとめたほうが良いカテゴリーとか一目で分かるので、自分のブログサイトを把握する際にも便利です。

 と言うことで、カテゴリーごとに記事を分類できるHTMLサイトマップを作成することにしましたが、一つひとつ自分で分類して作成する方法もありますが、ここでは、自動でHTMLサイトマップを作成してくれるWordPressプラグインを使うことにしました。

 そのプラグインは、「PS Auto Sitemap」と言う日本人が作成したプラグインであり、使い勝手も良いことが、HTMLサイトマップを自動作成するプロがインの紹介などでは書かれていたからです。

 例えば、次の記事を参照。

私のブログサイトのWordPress環境

 これから、実際にHTMLプラグインを作成していくわけですが、自分が使用しているWordPress、テーマ、WordoPressエディターなどバージョンや種類により画面が異なってくるので、ここで私が利用しているWordoPress、テーマのバージョン、エディターなどについて、ここにはっきり記しておきます。

  • WordPressのバージョン : Ver.5.6
  • テーマ 
    : 親Cocoon Ver.2.2.5.7、子Cocoon Vre.1.1.1
  • エディター
    Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0を利用

 

PS Auto Sitemapのインストール及び設定

PS Auto Sitemapのインストール

 WordPressプラグインのインストールは、ここでは省略しますが、以下の記事の「初心者におすすめなプラグイン」の「プラグインのインストール」を参照下さい。

 プラグインをインストール際に、プラグイン⇒新規追加⇒検索欄に「PS Auto Sitemap」を入力⇒色々なプラグインから「PS Auto Sitemap」を選びインストール⇒有効化(忘れないように!)の手順を踏めば、容易に「PS Auto Sitemap」のプラグインをインストールして使えるようにできます。

PS Auto Sitemapの設定の準備

 先ず、サイトマップを表示する固定ページがないのであれば、作成しタイトルを入力して下さい。

 作成したら、WordoPressの左メニューの固定ページ⇒固定ページ一覧と選んでクリックすると、固定ページ一覧画面が表示されます。

 その一部をキャプチャーした画像が下の画像です。

koteisaitomap
 あなたが作成したサイトマップを表示させる固定ページの横を見るとIDと書かれたカラムとあなたが作成したサイトマップを表示させる固定ページ(ここでは、サイトマップ)が交わるところの番号(3491、これは私のサイトを表示させる固定ページの記事ID)が、サイトマップを表示させる固定記事のIDとなります。

 この記事IDは、固有の番号ですのであなたが作成したサイトマップ用の固定ページの記事IDはこの番号ではないので気を付けて下さいね。

 もし、IDカラムが表示されていないのであれば、右上の表示オプションをクリックして、IDにチェックを入れ表示するようにしてください。

 それでも、記事IDが表示されないようであれば、次の方法で調べることができます。

 サイトマップを表示させる固定記事の編集をクリックしてください。

 編集画面の左上部の一部をキャプチャーしたものが下の画像です。

sitemapkijiID

 記事のアドレス欄の赤く塗った数字(3491)が記事IDとなりますので、何かにメモしておいてくださいね。

PS Auto Sitemapの設定

 WordPressの左のメニューから設定⇒「PS Auto Sitemap」を選択し、クリックします。

 下のキャプチャー画像は、「PS Auto Sitemap」の設定画面です。

sitemapnosetei00

 この設定画面で重要なのは、サイトマップを表示する記事を書かれた横の数字(ここでは、3491)で、あなたが作成する固定記事の記事IDを入力することになります。

 このサイトマップを表示する記事と書かれた横の欄に先ほど「PS Auto Sitemapの設定の準備」で調べたあなたのサイトマップ用固定記事IDを記入してください。

 そして、最後に「変更を保存」をクリックするのを忘れないでくださいね。

HTMLサイトマップの作成

 あともう少しですので、頑張ってくださいね。

 サイトマップを表示させる固定ページの編集画面移動してください。

 ここに、サイトマップを表示させるための「PS Auto Sitemap」のコードをサイトマップの本文に記入するだけです。

 記入するコード

<!-- SITEMAP CONTENT REPLACE POINT -->

 ただし、注意があります。それは、HTMLモードで記入してください。

 以下にその画面を示します。

sitemapcodenoinput

 サイトマップ用の固定ページの編集画面を開くと、右上にあるタブがビジュアルになっていますが、これをテキストにしてください。こうすることにより、HTMLモードになります。

 この状態で先ほどの「PS Auto Sitemap」のコードを本文欄に記入して(画像中の赤で塗り潰した部分)、右にある「更新」をクリックしてください。

 これで、OKです。

 実際に、サイトマップを表示して見て下さい。

 下の画像は、私のサイトマップの上部のみを切り取ったスナップショットです。

sitemapnohyouji

おわりに

 皆さんいかがだったでしょうか?

 HTMLサイトマップを「PS Auto Sitemap」と言うWordPressのプラグインから作成してみました。

 サイトマップをフッターメニューなどに追加する方法は、私の次の記事を参考にしてください。

 皆さんも大いに活用してみてはいかがでしょうか?

 この記事が少しでも皆様のお役に立てればこれほど嬉しいことはありません。

 今後とも皆様にとって役に立つ記事、ためになる記事を書いていきますので応援してくださいね。

以上です。

 

コメント

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