PS Auto Sitemapを使って自分のブログのサイトマップを作成する

以前からブログ内のページに「サイトマップ」という項目はあったのですが、最近になってきちんとしたサイトマップを設置しました。(ここで言うサイトマップというのはxmlで作られたGoogle Search Console等に送信するためのサイトマップではなく、利用者に自分のサイトの全体像を把握してもらうためのページとしてのサイトマップです。)
把握するも何も、僕のブログはそこまで複雑ではないですしコンテンツもまだまだ少ないのですが、それでも今後記事やコンテンツを増やしていく前に作っておきたいなと思い作成する事にしました。
PS Auto Siemapのインストール
さて、作成するにあたって「PS Auto Siemap」というプラグインを使ってみる事にしました。見出しを表示するためのWordPressプラグインの「TOC+」というプラグインにもサイトマップ機能はあり、もともとそれを使用していたのですが、あまりカスタマイズが出来ない等の理由で、今回PS Auto Siemapを使ってみる事にした次第です。

サイトマップを表示するページの作成
プラグインをインストールしたら先に設置する記事か固定ページを作成してしまいましょう。僕は固定ページで「サイトマップ」という名前で既に作成してあるのでそれを使用します。

固定ページの編集画面でビジュアルエディタではなく、テキストエディタに切り替えて下記文字列を入力します。
<!-- SITEMAP CONTENT REPLACE POINT -->入力したら保存をしてページのアドレス(URL)に含まれている「post=〇〇」と書かれている数字の部分だけをコピーかメモしておきましょう。僕の場合は「89」でした。
これは、WordPressの固定ページや記事に付けられる固有のIDで、サイトマップを表示するページの指定のために後で必要になってきます。

PS Auto SItemapでの設定
次に[設定]の[PS Auto Sitemap]をクリックして、PS Auto Sitemapの設定画面へ移動します。そしてそれぞれの項目を埋めていきましょう。

| ホームページの出力 | 自分のサイト名をサイトマップに表示するかどうか |
|---|---|
| 投稿リストの出力 | 記事一覧を表示するかどうか |
| 固定ページリストの出力 | 固定ページ一覧を表示するかどうか |
| サイトマップを表示する記事 | 先程メモした「post=〇〇」の数字の部分を入力 |
| 出力階層制限 | リストの階層をどこまで制限するかの設定 |
| 先に出力するリスト | 「投稿記事一覧」か「固定ページ一覧」のどちらを先に表示するか |
| カテゴリーと投稿の表示 | 同じマップにカテゴリと投稿を入れるか、分割するか |

| 除外カテゴリ | サイトマップに表示させたくないカテゴリのIDを入力すると、表示されなくなる |
|---|---|
| 除外記事 | サイトマップに表示させたくない記事のIDを入力すると、表示されなくなる |
| スタイルの変更 | ここでスタイルを選択すると、サイトマップがある程度装飾される |
| キャッシュの使用 | キャッシュを使用するかどうか |
設定ができたら「変更を保存」を押して保存しておきましょう。
サイトマップページの編集
設定が終わったら、サイトマップ情報を表示させたいページへ移動して、編集モードを「ビジュアル」から「テキスト」に変更して下記文字列を入力します。
<!-- SITEMAP CONTENT REPLACE POINT -->
入力したらそれでページを保存します。この文字列を入力した部分にサイトマップがリスト表示されるというわけです。
プレビューしてみるとちゃんとサイトマップが表示されると思います。僕の場合は下記のような表示になりました。

PS Auto Sitemapの設定で「スタイルの変更」を選択する事である程度の装飾はしてくれますし、自分でCSSで好きなようにカスタマイズする事も可能です。




Visual Studio Codeでできる最低限のGit操作方法
Visual Studio Codeで対応する括弧に色を付けて見やすくする環境設定
SourceTreeで環境設定の「カスタムアクション」「アップデート」「高度な設定」が選択できない
SourceTreeでマージ時に「fatal: You have not concluded your merge (MERGE_HEAD exists).」と表示される場合の対処法
スクロールしてもテーブルヘッダーが追尾するテーブルの作り方
無料版を使っている人は検討する価値あり!MAMP PRO 5で簡単にローカル開発環境を構築・管理する
「Dart Sass」「LibSass」「Ruby Sass」などSassの種類や記法に関するまとめ
様々な作業を自動化するgulpの基礎と導入方法
Local by FlywheelでWordPressのローカル開発環境構築のハードルが一気に下がる
コーディング時のclass名の省略はどこまでして良いのか?「img / btn / ttl / desc / thumb」
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Jedit Ωに「別名で保存」のショートカットキーを割り当てる方法
Vue CLIでの画像パスの指定方法・配置場所まとめ
Visual Studio Codeで簡易的なローカルサーバーを起動して、コード保存時に自動でブラウザをリロードする拡張機能「Live Server」
通知パネルの「閉じる」クリックをショートカットキーで行う方法
どちらの表記がより一般的なのか? /「ウインドウ」と「ウィンドウ」/「バイオリン」と「ヴァイオリン」/「バーチャル」と「ヴァーチャル」
Macのウインドウサイズを瞬時に変更できる「BetterSnapTool」を自分好みにカスタマイズする方法
メールによくある「アーカイブ機能」が何なのか今まで知らなかったので調べてみた
CSS Nite in Kobe, vol.43「ウェブページを高速化してユーザーに価値を届けたい制作者のためのセミナー&ワークショップ」に参加してきました
Visual Studio CodeでIllustratorのスクリプトを書く時に便利な拡張機能「ExtendScript Debugger」