WP Sitemap Pageの使い方とカスタマイズ|サイトマップ・プラグイン

< スポンサー リンク >

【i】当ページはプロモーションが含まれています

ブロガー

ブログにサイトマップを設置したい!

ブログにサイトマップページを作成すると、全部の記事が1ページで把握できるので読者が便利に利用できます。

ここでは、WordPressのサイトマップを作成する方法を解説します。

この記事の内容
  • プラグイン「WP Sitemap Page」のインストールと設定
  • ショートコードの基本解説と使い方
  • コピペOK、おすすめのサイトマップコードを紹介
  • 更に見栄え良く、コピペでできるサイトマップのCSSカスタマイズ

この記事を閲覧することで、

  • ブログにサイトマップを作成する手順がわかります
  • サイトマップのデザインを自分流にカスタマイズする方法もわかります(コピペCSSもあり)

もし現在、PS Auto Sitemapを使っていて移行したい場合は下記も参考にして下さい。

参考≫ PS Auto Sitemapが終了【代替はWP Sitemap Page】設定と移行方法

< スポンサーリンク >

目次

WP Sitemap Pageプラグインのインストール手順

STEP
WordPressダッシュボードの「プラグイン」>「新規追加」をクリック。
プラグイン新規追加へ
プラグイン新規追加へ
STEP
検索ボックスに「WP Sitemap Page」と入力し「今すぐインストール」>「有効化」をクリック。
WP Sitemap Pageのインストールと有効化
WP Sitemap Pageのインストールと有効化
STEP
インストール済プラグインの一覧に追加されます。
WP Sitemap Pageのインストール完了
WP Sitemap Pageのインストール完了
END
以上で、WP Sitemap Pageのインストール作業は完了です。続いて「初期設定」の解説に進みます。

◆スポンサーリンク

WP Sitemap Pageの初期設定

STEP
WordPressダッシュボードメニューの「設定」>「WP Sitemap Page」をクリック。
WP Sitemap Pageの設定へ
WP Sitemap Pageの設定へ
STEP
WP Sitemap Pageの管理画面が開きます。設定変更はここで行います。
WP Sitemap Pageの管理画面
WP Sitemap Pageの管理画面
STEP
「一般的な設定」の「リンクにnofollow属性を追加」にチェックを入れます。
リンクにnofollow属性を追加
リンクにnofollow属性を追加
STEP
「表示方法のカスタマイズ・複数表示」の「記事が複数のカテゴリーに属する場合、それぞれのカテゴリーで表示する」にチェックを入れます。
記事が複数のカテゴリーに属する場合それぞれのカテゴリーで表示する
記事が複数のカテゴリーに属する場合、それぞれのカテゴリーで表示する
STEP
「除外するカスタム投稿タイプ」で「投稿」以外の下記4項目にチェックを入れます。
  • ページ
  • アーカイブ
  • 著者
  • LP
除外するカスタム投稿タイプ
除外するカスタム投稿タイプ
STEP
「変更を保存」をクリックします。
END
以上で、WP Sitemap Pageの初期設定は完了です。続いて「ショートコードを固定ページに貼る」解説に進みます。

◆スポンサーリンク

サイトマップのコードを固定ページに貼り付け⇒公開する

STEP
WP Sitemap Page管理画面を「使い方」タブに切り替えます。
使い方のタブへ
使い方のタブへ
WP Sitemap Page使い方の画面
WP Sitemap Page使い方の画面
STEP
[WP_Sitemap_Page]のショートコードをカッコも含めてコピーします。
基本のショートコードをコピー
基本のショートコードをコピー
STEP
サイトマップ用に作成した固定ページの本文内にコピーしたコードを貼り付け公開(更新)します。
固定ページにショートコードを貼り付ける
固定ページにショートコードを貼り付ける
基本的なサイトマップの完成
基本的なサイトマップの完成
END
以上で、WP Sitemap Pageによる基本的なサイトマップの作製は完了です。次からは「カスタマイズ方法」を解説します。

◆スポンサーリンク

ショートコード:基本の使い方とカスタマイズ

前項で使用した[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”]著者

❷ソート系コード

スクロールできます
#ショートコード意味
1sort=”menu_order”ページをメニュー順でソート。その他の値は「post_title」,「post_date」,「post_modified」,「ID」,「post_author」,「post_name」
2sort=”count”投稿やカテゴリーを投稿数でソート。その他の値は「ID」,「name」,「slug」,「term_group」
3only=”author” sort=”post_count”著者の投稿数でソート。その他の値は「name」,「email」,「url」,「registered」,「ID」,「user_login」
4order=”ASC”ソート表示を昇順(小さい順)に指定。
5order=”DESC”ソート表示を降順(大きい順)に指定。
(※)基本のショートコードに組み合わせます。

❸表示・非表示のコード

✔ ショートコードのカスタマイズ(組合せ方)

ショートコードのカスタマイズは、「基本コード」に「ソート系コード」や「表示・非表示のコード」を追加するイメージです。

例えば、「投稿記事」を「投稿数の少ない順」で表示させたい場合は、

スクロールできます
#種類ショートコード
基本コード[wp_sitemap_page only=”post”]
ソート系コードsort=”count”

の2つを組み合わせ①+②になるので、

スクロールできます
[wp_sitemap_page only=”post” sort=”count”

となります。

追加するコードは半角スペースで間を空けます。

以上のルールを踏まえ、自分に合うコードの組み合わせを試してください。

PC苦手な人

コードの組み合わせとか、なんか私には難しそう…

よしてっく

そんな人のために、次でコピペで済むオススメの組み合わせコードを紹介します。

◆スポンサーリンク

おすすめのショートコード構成

ショートコードの組み合わせを考えるのが面倒という人におすすめの構成を紹介。

よしてっく

コピペで簡単にできます。

  • 投稿記事をカテゴリーごとに表示
  • サイトマップの「H2見出し」を消す
  • 「Category:」の文字を消す

余分なモノを消すことでスッキリした表示になります。

ビフォー ⇒ アフター

サイトマップのおすすめ構成

上記レイアウトにするショートコード

スクロールできます
wp_sitemap_page only=”post” display_title=”false” display_category_title_wording=”false”

サイトマップの固定ページにコピペし、前後の大カッコ【 】を半角の角カッコ[ ]に書き換えてページ更新してください。

さらに、ダブルクォーテーションもコピペしたとき全角になることあるので、その際もお手数ですが半角に入力し直してください。

ダブルクォーテーションも書き換える
ダブルクォーテーションも書き換える

◆スポンサーリンク

サイトマップの見栄えを更によくするカスタマイズ:追加CSS

前項で紹介したサイトマップに、CSSカスタマイズを実施してもう少し見栄えを良くします。

よしてっく

CSSもコピペでOK。

  • カテゴリ先頭の記号を消す
  • カテゴリ背景色と余白を変更
  • 全体の余白をゼロに(全体左寄せ)
  • 記事タイトル先頭の記号を項番に変更
CSSカスタマイズのビフォー ⇒ アフター
CSSカスタマイズしたサイトマップ
CSSカスタマイズしたサイトマップ

下記のCSSコードを、WordPressの追加CSSエリアにコピペしてください。

追加用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の貼り付け手順
STEP
WordPressの「カスタマイズ」を開く。

WordPressのカスタマイズへ

STEP
追加CSSをクリック。

追加CSSへ

STEP
コードをコピペ>「公開」。
CSSを貼り付けて公開
END
以上でCSSカスタマイズは完了です。ちゃんと反映しているかサイトマップを確認しましょう。

カスタマイズ後のサイトマップ
カスタマイズ後のサイトマップ

CSSコードは項目ごとに分かれているので、不要と思うカスタマイズコードはグループ単位で削除してもOKです。

不要CSSは項目ごとに削除を
不要CSSは項目ごとに削除を

◆スポンサーリンク

CSSコードを編集して自分流にカスタマイズ

紹介したCSSコードの中で(2)の中の背景色(4)の記号は、コードを入れ替えることで自分流にアレンジが可能です。

例えば、(2)の背景色を変更するには、

background: #e9e9e9;

の6ケタのカラーコード「e9e9e9」を変更すればOK。

参考≫ WEB色見本 原色大辞典 – HTMLカラーコード

また、(4)の記号を変更するには、

list-style-type: decimal;

の「decimal」を別コードに変更します。

参考≫ list-style-type – リストの行頭記号の指定 _ 日経クロステック

◆スポンサーリンク

まとめ:サイトマップがあるとユーザビリティが良い

WordPressにサイトマップを作成できるプラグイン、WP Sitemap Pageの導入からカスタマイズまでをご紹介しました。

ブログの運営スタイルによってはサイトマップの設置は無くてもいいケースもありますが、あると記事全体が把握できて読者も管理側も便利。

サイトを効率よく回遊する手助けにもなります。

こういったメニューを用意して、ユーザビリティの良いサイト構築を心がけましょう。

記事が参考になりましたらシェアお願いします
  • URLをコピーしました!

< スポンサーリンク >

コメントをどうぞ

コメント一覧 (1件)

コメントする

CAPTCHA


目次