ブログ

【WordPress初心者】サイトマップのカスタマイズの仕方を解説

 

こんにちは、たくまです。本日は「サイトマップ」のカスタマイズについて紹介していきたいと思います。

前回の記事でサイトマップが作れた方向けの記事になりますのでまだの方はぜひ先に作ってからこちらの記事を見ることをオススメします。

あわせて読みたい

サイトマップの導入方法

今回、サイトマップの記事を分けたことには理由があります。今回の記事には「プログラミング言語」が含まれておりますので少しだけ専門的な知識が含まれるからです。

「プログラミング言語」が初心者だから上手くできるかな・・・
せっかく作ったサイトマップをもっと見やすくしたいな・・・

私も初めてのプログラミング言語は、戸惑うばかりでした。「コード」を書くってだけで躊躇してしまう人もいると思います。

こちらの記事で「コピペ」をすれば使えるように意識、プログラミング言語初心者にも伝わるようにすることをテーマに書いてありますので「安心」してみていただければと思います。

Contents
  1. ショートコード：基本の使い方
  2. カテゴリーごとの投稿
  3. ページ
  4. カテゴリーごとの投稿
  5. カテゴリー
  6. タグ
  7. アーカイブ
  8. 著者
  9. ショートコード：カスタマイズしていく
  10. カテゴリーごとの投稿
  11. カテゴリーごとの投稿
  12. カテゴリーごとの投稿
  13. カテゴリーごとの投稿
  14. 追加CSS：サイトマップの見栄えをカスタマイズする
  15. 最後に

ショートコード：基本の使い方

前回、サイトマップを作った際に使ったショートコードがございます。

それがこちらの一番上のショートコードを使いました。
この中に”基本のショートコード”と”ソート系のショートコード”がございます。

基本のショートコード

カテゴリーごとの投稿

よくあるサイトマップを表示する

ページ

ページを表示する

カテゴリーごとの投稿

投稿をカテゴリーごとに表示する

カテゴリー

カテゴリーを表示する

タグ

タグを表示する

アーカイブ

 アーカイブを表示する

著者

 著者を表示する
[/box02]

ソート系のショートコード

[sort=”menu_order”] メニュー順をソートする
[sort=”count”]　投稿やカテゴリー数を投稿数でソートする
[only=”author”] 著者の投稿数でソートする
[sort=”post_count”]　著者の投稿数でソートする
[order=”ASC”]　ソート表示を昇順（小さい順）
[order=”DESC”]　ソート表示を降順（大きい順）

このような分類になります。

ショートコード：カスタマイズしていく

カスタマイズとゆうのが、分類した、基本ショートコードにソート系ショートコードを「組み合わせる」ことを言います。例えば

カテゴリーごとの投稿

＋[sort=”count”]

を組み合わせると

カテゴリーごとの投稿

このようになります。

wp_sitemap_page　が基本コードになり、それより後ろのコードが何かのデータを「ソート」する内容です。今回の組み合わせを直訳すると

「投稿をカテゴリごとに投稿数でソートする」

このようになります。通常の設定

カテゴリーごとの投稿

の場合

こんな形になります。では

カテゴリーごとの投稿


に変更してみます。

順番が入れ替わったことがわかります。このように組み合わせで表示される順番が変わるので「読者」に対して、どう見せたいかを考えカスタマイズしていただければと思います。

追加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;
}

/* サイトマップカスタマイズ ここまで*/

デフォルトで何か記載されているかと思いますので、記載されている最後の行から1行改行して載せておくと安全です。私の場合は22行目は空白にしております。

追加してから「サイトマップ」を確認してみると

見栄えが変わったと思います。背景色をグレーにしてますが「background:」のコードを変更してあげると色を変更は自由にできます。

変えたい色を決めて「Google」で　「カラーコード ピンク」などで調べたらコードを手軽に調べて変更できますのでぜひ、お好みの色にしてみください。

最後に

今回は、少し応用編にはなるかと思いますが、サイトマップを「カスタマイズ」してより見やすいサイトマップにしてみました。読者の目に留まりやすくなることで離脱者も最小限に抑えることができて、貴方の「ファン」になると思います。

ぜひ参考になればと思います。
最後まで読んでいただきありがとうございます！

SEO webマーケティング wordpress 初心者
システムエンジニア
匠麿
35歳｜社畜から脱却をしたくて勉強を決意｜普段はシステムエンジニアとして仕事をしている｜現在「30代」からでも目指せるwebマーケティングの勉強をブログとして情報発信
LINE公式始めてみました

LINEを追加いただくことで豪華特典を無料プレゼント中!!
特典1 【有料級の記事を大公開】
特典2【無料相談キャンペーン】

友だち追加

RELATED POST