![](https://ytechnote.com/wp-content/uploads/2023/01/女性ブロガー.webp)
ブログにサイトマップを設置したい!
ブログにサイトマップページを作成すると、全部の記事が1ページで把握できるので読者が便利に利用できます。
ここでは、WordPressのサイトマップを作成する方法を解説します。
- プラグイン「WP Sitemap Page」のインストールと設定
- ショートコードの基本解説と使い方
- コピペOK、おすすめのサイトマップコードを紹介
- 更に見栄え良く、コピペでできるサイトマップのCSSカスタマイズ
この記事を閲覧することで、
- ブログにサイトマップを作成する手順がわかります
- サイトマップのデザインを自分流にカスタマイズする方法もわかります(コピペCSSもあり)
もし現在、PS Auto Sitemapを使っていて移行したい場合は下記も参考にして下さい。
参考≫ PS Auto Sitemapが終了【代替はWP Sitemap Page】設定と移行方法
WP Sitemap Pageプラグインのインストール手順
![プラグイン新規追加へ](https://ytechnote.com/wp-content/uploads/2023/01/603831d577ba8a22c145e9c592a145ad.webp)
![プラグイン新規追加へ](https://ytechnote.com/wp-content/uploads/2023/01/603831d577ba8a22c145e9c592a145ad.webp)
![WP Sitemap Pageのインストールと有効化](https://ytechnote.com/wp-content/uploads/2023/01/5855eb8d0a23d5e5a6c007e2eab468b7.webp)
![WP Sitemap Pageのインストールと有効化](https://ytechnote.com/wp-content/uploads/2023/01/5855eb8d0a23d5e5a6c007e2eab468b7.webp)
![WP Sitemap Pageのインストール完了](https://ytechnote.com/wp-content/uploads/2023/01/8c097056d52283289702cadf70f025f5.webp)
![WP Sitemap Pageのインストール完了](https://ytechnote.com/wp-content/uploads/2023/01/8c097056d52283289702cadf70f025f5.webp)
◆スポンサーリンク
WP Sitemap Pageの初期設定
![WP Sitemap Pageの設定へ](https://ytechnote.com/wp-content/uploads/2023/01/c422893973d9d20278a80cf879c304fd.webp)
![WP Sitemap Pageの設定へ](https://ytechnote.com/wp-content/uploads/2023/01/c422893973d9d20278a80cf879c304fd.webp)
![WP Sitemap Pageの管理画面](https://ytechnote.com/wp-content/uploads/2023/01/9fa5c99707af8e8f63cb17afab0ac755.webp)
![WP Sitemap Pageの管理画面](https://ytechnote.com/wp-content/uploads/2023/01/9fa5c99707af8e8f63cb17afab0ac755.webp)
![リンクにnofollow属性を追加](https://ytechnote.com/wp-content/uploads/2023/01/0827ea8cf959d6a6bb75949107c59006.webp)
![リンクにnofollow属性を追加](https://ytechnote.com/wp-content/uploads/2023/01/0827ea8cf959d6a6bb75949107c59006.webp)
![記事が複数のカテゴリーに属する場合それぞれのカテゴリーで表示する](https://ytechnote.com/wp-content/uploads/2023/01/7d70f3ee5e1b572a135feaef943acae4.webp)
![記事が複数のカテゴリーに属する場合それぞれのカテゴリーで表示する](https://ytechnote.com/wp-content/uploads/2023/01/7d70f3ee5e1b572a135feaef943acae4.webp)
- ページ
- アーカイブ
- 著者
- LP
![除外するカスタム投稿タイプ](https://ytechnote.com/wp-content/uploads/2023/01/64af27664965a38a6f16750bc84daebe.webp)
![除外するカスタム投稿タイプ](https://ytechnote.com/wp-content/uploads/2023/01/64af27664965a38a6f16750bc84daebe.webp)
![](https://ytechnote.com/wp-content/uploads/2023/01/4fbfb5a9bba28d46e02b6d36d60a927a.webp)
![](https://ytechnote.com/wp-content/uploads/2023/01/4fbfb5a9bba28d46e02b6d36d60a927a.webp)
◆スポンサーリンク
サイトマップのコードを固定ページに貼り付け⇒公開する
![使い方のタブへ](https://ytechnote.com/wp-content/uploads/2023/01/847440a80db2c3e0988012e9539a5880.webp)
![使い方のタブへ](https://ytechnote.com/wp-content/uploads/2023/01/847440a80db2c3e0988012e9539a5880.webp)
![WP Sitemap Page使い方の画面](https://ytechnote.com/wp-content/uploads/2023/01/7086818c08bdb69deef5bf0a14530b2a.webp)
![WP Sitemap Page使い方の画面](https://ytechnote.com/wp-content/uploads/2023/01/7086818c08bdb69deef5bf0a14530b2a.webp)
![基本のショートコードをコピー](https://ytechnote.com/wp-content/uploads/2023/01/96b2a317b2b39fb14bc35e0b4d16f34f.webp)
![基本のショートコードをコピー](https://ytechnote.com/wp-content/uploads/2023/01/96b2a317b2b39fb14bc35e0b4d16f34f.webp)
![固定ページにショートコードを貼り付ける](https://ytechnote.com/wp-content/uploads/2023/01/5a56afdd1d8622451c3f475bf8af5a82-1.webp)
![固定ページにショートコードを貼り付ける](https://ytechnote.com/wp-content/uploads/2023/01/5a56afdd1d8622451c3f475bf8af5a82-1.webp)
![基本的なサイトマップの完成](https://ytechnote.com/wp-content/uploads/2023/01/e97de862b967ec82d48ec1224140330e.webp)
![基本的なサイトマップの完成](https://ytechnote.com/wp-content/uploads/2023/01/e97de862b967ec82d48ec1224140330e.webp)
◆スポンサーリンク
ショートコード:基本の使い方とカスタマイズ
前項で使用した[WP_Sitemap_Page]のショートコードは一番標準なレイアウトのサイトマップです。
カッコ内の「WP_Sitemap_Page」の部分を書き換えることでレイアウトをカスタマイズ可能です。
WP Sitemap Pageのサイトマップをカスタマイズするには、「使い方」の画面にあるショートコードを使い編集(組合せ)します。
✔ ショートコードの基本説明
❶基本のショートコード
# | ショートコード | 意味 |
---|---|---|
1 | [wp_sitemap_page] | ノーマルのサイトマップ |
2 | [wp_sitemap_page only=”page”] | 固定ページ |
3 | [wp_sitemap_page only=”post”] | 投稿記事 |
4 | [wp_sitemap_page only=”category”] | カテゴリー |
5 | [wp_sitemap_page only=”tag”] | タグ |
6 | [wp_sitemap_page only=”archive”] | アーカイブ |
7 | [wp_sitemap_page only=”author”] | 著者 |
❷ソート系コード
# | ショートコード | 意味 |
---|---|---|
1 | sort=”menu_order” | ページをメニュー順でソート。その他の値は「post_title」,「post_date」,「post_modified」,「ID」,「post_author」,「post_name」 |
2 | sort=”count” | 投稿やカテゴリーを投稿数でソート。その他の値は「ID」,「name」,「slug」,「term_group」 |
3 | only=”author” sort=”post_count” | 著者の投稿数でソート。その他の値は「name」,「email」,「url」,「registered」,「ID」,「user_login」 |
4 | order=”ASC” | ソート表示を昇順(小さい順)に指定。 |
5 | order=”DESC” | ソート表示を降順(大きい順)に指定。 |
❸表示・非表示のコード
✔ ショートコードのカスタマイズ(組合せ方)
ショートコードのカスタマイズは、「基本コード」に「ソート系コード」や「表示・非表示のコード」を追加するイメージです。
例えば、「投稿記事」を「投稿数の少ない順」で表示させたい場合は、
# | 種類 | ショートコード |
---|---|---|
① | 基本コード | [wp_sitemap_page only=”post”] |
② | ソート系コード | sort=”count” |
の2つを組み合わせ①+②になるので、
[wp_sitemap_page only=”post” sort=”count”] |
となります。
追加するコードは半角スペースで間を空けます。
以上のルールを踏まえ、自分に合うコードの組み合わせを試してください。
![](https://ytechnote.com/wp-content/uploads/2023/01/吹き出しキャラ_困った女性_1.webp)
![](https://ytechnote.com/wp-content/uploads/2023/01/吹き出しキャラ_困った女性_1.webp)
![](https://ytechnote.com/wp-content/uploads/2023/01/吹き出しキャラ_困った女性_1.webp)
コードの組み合わせとか、なんか私には難しそう…
![](https://ytechnote.com/wp-content/uploads/2022/11/cropped-YOSHI_000C1.png)
![](https://ytechnote.com/wp-content/uploads/2022/11/cropped-YOSHI_000C1.png)
![](https://ytechnote.com/wp-content/uploads/2022/11/cropped-YOSHI_000C1.png)
そんな人のために、次でコピペで済むオススメの組み合わせコードを紹介します。
◆スポンサーリンク
おすすめのショートコード構成
ショートコードの組み合わせを考えるのが面倒という人におすすめの構成を紹介。
![](https://ytechnote.com/wp-content/uploads/2022/11/cropped-YOSHI_000C1.png)
![](https://ytechnote.com/wp-content/uploads/2022/11/cropped-YOSHI_000C1.png)
![](https://ytechnote.com/wp-content/uploads/2022/11/cropped-YOSHI_000C1.png)
コピペで簡単にできます。
- 投稿記事をカテゴリーごとに表示
- サイトマップの「H2見出し」を消す
- 「Category:」の文字を消す
余分なモノを消すことでスッキリした表示になります。
上記レイアウトにするショートコード
【wp_sitemap_page only=”post” display_title=”false” display_category_title_wording=”false”】 |
サイトマップの固定ページにコピペし、前後の大カッコ【 】を半角の角カッコ[ ]に書き換えてページ更新してください。
さらに、ダブルクォーテーションもコピペしたとき全角になることあるので、その際もお手数ですが半角に入力し直してください。
![ダブルクォーテーションも書き換える](https://ytechnote.com/wp-content/uploads/2023/01/a03e30bb048597ed5b065ed1e35bec29.webp)
![ダブルクォーテーションも書き換える](https://ytechnote.com/wp-content/uploads/2023/01/a03e30bb048597ed5b065ed1e35bec29.webp)
◆スポンサーリンク
サイトマップの見栄えを更によくするカスタマイズ:追加CSS
前項で紹介したサイトマップに、CSSカスタマイズを実施してもう少し見栄えを良くします。
![](https://ytechnote.com/wp-content/uploads/2022/11/cropped-YOSHI_000C1.png)
![](https://ytechnote.com/wp-content/uploads/2022/11/cropped-YOSHI_000C1.png)
![](https://ytechnote.com/wp-content/uploads/2022/11/cropped-YOSHI_000C1.png)
CSSもコピペでOK。
- カテゴリ先頭の記号を消す
- カテゴリ背景色と余白を変更
- 全体の余白をゼロに(全体左寄せ)
- 記事タイトル先頭の記号を項番に変更
![CSSカスタマイズしたサイトマップ](https://ytechnote.com/wp-content/uploads/2023/01/CSSカスタマイズしたサイトマップ.webp)
![CSSカスタマイズしたサイトマップ](https://ytechnote.com/wp-content/uploads/2023/01/CSSカスタマイズしたサイトマップ.webp)
下記のCSSコードを、WordPressの追加CSSエリアにコピペしてください。
コピーボタン↓
/* サイトマップカスタマイズ */
/* (1)カテゴリ先頭記号を非表示 */
.wsp-container > ul.wsp-posts-list>li {
list-style-type: none;
}
/* (2)カテゴリ背景色と位置調整 */
.wsp-container strong.wsp-category-title {
display: block;
padding: 0.2em 1.0em;
background: #e9e9e9;
}
/* (3)全体の余白をゼロに(全体左寄せ) */
.wsp-container > ul.wsp-posts-list {
padding: 0;
}
/* (4)カテゴリごとの末尾に余白*/
ul.wsp-posts-list {
padding-bottom: 15px;
}
/* (5)記事タイトルの先頭記号を項番に */
.wsp-container li {
list-style-type: decimal;
}
/* サイトマップカスタマイズ ここまで*/
![CSSを貼り付けて公開](https://ytechnote.com/wp-content/uploads/2023/01/CSSを貼り付けて公開_1.webp)
![CSSを貼り付けて公開](https://ytechnote.com/wp-content/uploads/2023/01/CSSを貼り付けて公開_1.webp)
![カスタマイズ後のサイトマップ](https://ytechnote.com/wp-content/uploads/2023/01/完成したサイトマップ.webp)
![カスタマイズ後のサイトマップ](https://ytechnote.com/wp-content/uploads/2023/01/完成したサイトマップ.webp)
CSSコードは項目ごとに分かれているので、不要と思うカスタマイズコードはグループ単位で削除してもOKです。
![不要CSSは項目ごとに削除を](https://ytechnote.com/wp-content/uploads/2023/01/不要CSSは項目ごとに削除を.webp)
![不要CSSは項目ごとに削除を](https://ytechnote.com/wp-content/uploads/2023/01/不要CSSは項目ごとに削除を.webp)
◆スポンサーリンク
CSSコードを編集して自分流にカスタマイズ
紹介したCSSコードの中で(2)の中の背景色と(4)の記号は、コードを入れ替えることで自分流にアレンジが可能です。
例えば、(2)の背景色を変更するには、
background: #e9e9e9;
の6ケタのカラーコード「e9e9e9」を変更すればOK。
また、(4)の記号を変更するには、
list-style-type: decimal;
の「decimal」を別コードに変更します。
参考≫ list-style-type – リストの行頭記号の指定 _ 日経クロステック
◆スポンサーリンク
まとめ:サイトマップがあるとユーザビリティが良い
WordPressにサイトマップを作成できるプラグイン、WP Sitemap Pageの導入からカスタマイズまでをご紹介しました。
ブログの運営スタイルによってはサイトマップの設置は無くてもいいケースもありますが、あると記事全体が把握できて読者も管理側も便利。
サイトを効率よく回遊する手助けにもなります。
こういったメニューを用意して、ユーザビリティの良いサイト構築を心がけましょう。
コメントをどうぞ
コメント一覧 (1件)
[…] 参考WP Sitemap Pageの使い方とカスタマイズ|サイトマップ・プラグイン […]