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



スクロール時に表示領域に画面がくっつくようになる処理をCSSだけで実現する「scroll-snap」
gulpのwatch機能を使って、監視ファイルに変更があった時にタスクを実行する
gulpfile.jsにAutoprefixerのブラウザオプションを書くとエラーがでる場合の修正方法
HTMLのpattern属性を使ってフォームのバリデーションチェックを行う方法
WordPressの常時SSL化で、下層ページのhttpからhttpsへのリダイレクトがうまくいかない場合に確認すること
コーディング時にちゃんと意識したい複数語の連結方法一覧(キャメルケース・スネークケース・ケバブケース)
Visual Studio Codeで連番を入力する拡張機能「vscode-input-sequence」
scpコマンドでターミナル接続先のリモートファイルをローカルにダウンロードする方法
Webデザイナーを目指す専門学生が技術ブログを書くメリット
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Figma × Keyboard Maestroでどこまで効率化できる?
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」
Macで複数ディスプレイを使っている場合に便利な設定集
AppCleanerでMacアプリを関連ファイルごと完全に削除する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」
chezmoi(シェモア)で始めるdotfiles管理
GitHubの通知を見逃さない!通知に特化したアプリ「Gitify」
Keyboard Maestroの変数基礎
Neovimを使い始める最初の一歩として便利な「LazyVim」
ウェブサイトをmacOSアプリとしてラッピングする「Unite Pro」