Webサイトにおいて、HTMLサイトマップを作ることはとても重要です。

例えば、通販サイトAmazonのHTMLサイトマップを見てみましょう。

ps-auto-sitemap-customize-08

このように、カテゴリーごとに目的のページがどのページに存在するのかが一目瞭然でわかるように整理されています。

HTMLサイトマップでユーザビリティーを向上させる

訪問者がサイト内で迷ってしまったとき、サイトマップがあれば全てのページを一ページで把握することができるというメリットがあります。

WordPressなら「PS Auto Sitemap」というプラグインがお勧めです。

デザインもあらかじめ含まれているので、どなたでも5分でHTMLサイトマップの実装が可能です。

この記事では初期設定の方法とHealerオリジナルのCSSデザインを紹介しますので参考にしてみてください。

最終完成イメージ

完成イメージはこのような感じになります。

ps-auto-sitemap-customize-01

「PS Auto Sitemap」の設定手順

「PS Auto Sitemap」の設定は以下の手順でおこないます。

  • 「PS Auto Sitemap」のインストール
  • 固定ページの作成
  • 「PS Auto Sitemap」の設定

「PS Auto Sitemap」のインストール

WordPress管理画面の[プラグイン] ⇒ [新規追加]に移動します。

ps-auto-sitemap-customize-02

検索フォームに「PS Auto Sitemap」と入力し、インストール、有効化します。

ps-auto-sitemap-customize-03

固定ページの作成

サイトマップを表示するための固定ページを作ります。

以下の画像の順番通りに進めてください。

ps-auto-sitemap-customize-05

重要なのは

  • スラッグをsitemapにする
  • IDを確認する

の2つです。

本文に記入する文字は以下をコピペしてください。

<!-- SITEMAP CONTENT REPLACE POINT -->

「PS Auto Sitemap」の設定

最後にプラグインの設定をおこないます。

WordPress管理画面の[設定] ⇒ [PS Auto Sitemap]に移動します。

ps-auto-sitemap-customize-04

設定は以下を真似していただいて構いません。

[サイトマップを表示する記事]に先ほど確認した固定ページのIDを入力します。

[スタイルの変更]を使えば、プラグインに含まれるデザインがそれぞれ適応されます。

ps-auto-sitemap-customize-06

最後にHealerオリジナルのCSSを紹介します。

このデザインを使う際は[スタイルの変更]をスタイルなしにしておいてください。

子テーマのスタイルシート (style.css)に下記CSSを追加します。

/*--------------------------------------
サイトマップ
--------------------------------------*/
#sitemap_list {
	margin: 0;
	padding: 0;
}
#sitemap_list li {
	padding: 0;
	margin: 1.5em 0;
	list-style-type: none;
}
#sitemap_list li a {
	text-indent: 0;
	border-bottom: #9AC29F double 3px;
}
#sitemap_list .home-item a {
	border: none;
	font-size: 20px;
}
#sitemap_list .home-item a:after {
	content: "―Topページ―";
	padding-left: 10px;
	font-size: 1.2rem;
}
#sitemap_list .cat-item a {
	display: block;
	border: #333 1px solid;
	padding: 10px 20px;
	border-radius: 2px;
	background-size: 5px 5px;
	background-color: #fff;
	background-image: linear-gradient(-45deg, #dcf8dc 25%, transparent 25%,
	transparent 50%, #dcf8dc 50%, #dcf8dc 75%,
	transparent 75%, transparent);	
}
#sitemap_list .post-item {
	line-height: 1.4;
	margin-left: 15px;
	border-bottom: #9AC29F dashed 1px;
}
#sitemap_list .post-item a {
	padding: 0;
	font-size: 1.4rem;
	border: none;
	background: none;
}
#sitemap_list .post-item a:before {
	font-family: 'FontAwesome';
	content: "\f06c";
	color: #9AC29F;
	padding-right: .5em;
	font-size: 1.4rem;
}

サイト全体では以下のようになります。

ps-auto-sitemap-customize-07

実際のページはこちらです。

healerver2-thumbnail
「PS Auto Sitemap」の設定と独自CSSデザインまとめ
この記事はいかがでしたでしょうか。
是非Healerの最新ニュース情報を、
いいねしてチェックしてください!

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。