【JIN】PS Auto Sitemap を使ったサイトマップの作り方

admin

ブログサイトに訪れた人たちが見るための「全記事一覧」に該当する「サイトマップ」の作り方。記事の探しやすさがアップしますよ。

サイトマップは通常の記事の書き方でリンクを貼る工夫さえすれば、オリジナル作成はもちろん可能。でも、頻繁に記事を追加していくようなブログサイトの場合、メンテナンスに苦慮します。カテゴリを変えたりなんぞした時には、そりゃあもぅ悲鳴です。

今回は、そんなサイトマップの更新も自動で内部的に行ってくれる「PS Auto Sitemap」を使った一例をご紹介します。WordPressのプラグインなので、初心者でも簡単に実装が可能ですよ。

Contents

サイトマップとは
PS Auto Sitemap の設定手順
JINテーマのスタイルが干渉する場合の対処法

サイトマップとは

今回は、こんなものを作ります。

PS Auto Sitemap の設定手順

とてもシンプルな手順なので、あえて画像はあまり使わずに説明します。無料のプラグインなので、やりながら実装しちゃうのがおススメです。

PS Auto Sitemap プラグインをインストールする

WordPress のダッシュボード、左側の列の「プラグイン」へ
『PS Auto Sitemap』を検索
見つけたら『インストール』をクリック

PS Auto Sitemap を有効化する

インストールが完了したら『有効化』をクリック。
（下記は、有効化後の画面）

固定ページを作る

WordPress のダッシュボード、左側の列の「固定ページ」へ
新規作成、をクリック
固定ページのタイトルは、お好みで入力
（例：サイトマップ、全記事一覧　等）
固定ページのパーマリンクをカスタマイズ

sitemap とだけにするとSEO、サイトマップ系の他プラグインと干渉する可能性があるようです。無難に site-map や sitemaps 、もしくは all-pages 等、sitemap とだけの文字列にならないように設定しましょう。

固定ページに html コードを埋め込む

下記のコードをコピーします。

1<div class="wp-block-jin-gb-block-box simple-box5">
2<pre class="wp-block-code"><code><!-- SITEMAP CONTENT REPLACE POINT --></code></pre>
3</div>

貼りつけたコードは、固定ページの記事欄の部分に入力します。この時、テキストではなくhtmlコードで入力しましょう。

入力後、記事を公開します。
（めちゃめちゃ味気ないけどね。ビジュアルエディタあかん、っていう記事もありますが、htmlコードで入力すればOKです。どれくらい味気ないかは一応画像貼り付けます）

リンクのコードは「ダッシュボード > 設定 > PS Auto Sitemap」でたどったページでも確認できます。

PS Auto Sitemap に固定ページIDを登録する

固定ページの編集画面、または固定ページ一覧のID列に記載されているIDをコピー（またはメモするなどして控えておく）
ダッシュボード > 設定 > PS Auto Sitemap へ遷移
「サイトマップを表示する記事」の欄に入力

PS Auto Sitemap のオプション設定を行う

余計なオプションは外しましょう。（下記は設定後のサンプル画面）

最終的には、こんな状態。「スタイルの変更」は、表示されるデザインを選ぶ箇所。この部分は、ビジネス以外でもお好みのものでOKです。

メニュー等に固定ページを追加

作った固定ページをグローバルメニューなどに追加します。（手順は省略）

好みのデザインに設定する

PS Auto Sitemap には十数種類のデザインがあります。先にも少し触れましたが、「スタイルの変更」でお好みのものを利用しましょう。

なお、設定の確認をするときには都度、設定後にブラウザのページを再読み込みして確認しましょう（Windows なら F5 を押下すればOK）。

完了

一旦は、完了です。ただし、テーマにより表示が思い通りにいかないケースがあります。次の「JINテーマのスタイルが干渉する場合の対処法」の部分も併せてご参考ください。

JINテーマのスタイルが干渉する場合の対処法

WordPress のテーマによっては、箇条書きをするときの丸（ポチ？）がデザインと一緒に表示されるものもあります。残念ながら JIN もその一つ。

好みのデザインを指定するとその丸が出てしまう時には、下記の css コードを追加する手順をお試しください。本ブログサイト（JIN を利用中）でも解決している方法です。

指定するコード

1<div class="wp-block-jin-gb-block-box simple-box5">
2<pre class="wp-block-code"><code>/* サイトマップの箇条書き丸削除 */
3/* PA Auto Sitemap 関連設定 */
4#sitemap_list li:before{
5    width: 0;
6    height: 0;
7}</code></pre>
8</div>