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で好きなようにカスタマイズする事も可能です。




さくらのレンタルサーバで.htaccessが原因で500エラーになってしまう場合のチェックリスト
WordPressでコンタクトフォームを設置したいならこれ!!Contact Form 7のインストール方法
Visual Studio Codeで開始タグを修正すると自動で閉じタグも修正してくれる拡張機能「Auto Rename Tag」
Neovimを使い始める最初の一歩として便利な「LazyVim」
Nuxt.jsで「Classic mode for store/ is deprecated and will be removed in Nuxt 3.」のエラーメッセージが表示される場合の対処法
Movable TypeでAssetURLやEntryPermalink・ContentPermalinkで出力されるパスを絶対パスから相対パスに変える
Vue CLIのtitleタグやmetaタグの設定方法
CSSだけで画像の比率を保ってトリミングできる「object-fit」
超軽量なコードエディタ 「Zed」をサブエディタとして活用する
1Passwordの開発者向け機能(SSH Agent / Environments / 1Password CLI / Developer Watchtower)
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
WordPressで「予約投稿の失敗」となってしまう場合の対処方法
Adobe XD × Keyboard Maestroでここまでできる!ショートカットキーであらゆることを実現するマクロサンプル
Chrome拡張機能の「Wappalyzer」を使ってウェブサイトの使用技術を確認する
複数サービスを1つのアプリで管理できるStationの通知設定
Alfred 4のClipboard History機能で、前にコピーした内容をペーストする方法
iTerm2終了時に表示される確認ダイアログを非表示にする
Visual Studio Codeでコメントを色分けして管理する「Better Comments」
ブログに見出しを設置できるjQueryプラグイン「TOC | jQuery Table of Contents」
iTerm2で画面の見た目や細かい設定などを「プロファイル」単位で保存・管理する環境設定の「Profiles」タブ
Movable TypeでMTLoopを使ってkeyでソートしたときに、10個以上表示させると並びがおかしくなる