商品レビューや子育て、生活、健康など色々な雑記ブログ

日々、まるまる暮らし

ブログ

PS Auto Sitemapの設置方法と子カテゴリーのCSSカスタマイズ

PS Auto Sitemapのカスタマイズ

WordPress(ワードプレス)には自動でサイトマップを作成してくれる「PS Auto Sitemap」というとても便利なプラグインがあります。

ブログを訪問してくれた読者さんが迷子にならないように簡単にサイトマップが作成できちゃうすぐれものなのですが、今回カテゴリーを見直して親カテゴリーの下に子カテゴリーを作ってみたところ、少し困った事態が発生しました。

親カテゴリーの記事子カテゴリーが同じ表記になってしまっていて、記事だかカテゴリーだかわかりにくいんですよね。

見やすいようにCSSをカスタマイズしてみたので、同じようにお困りの方は参考にしてみて下さい。

PS Auto Sitemapの設置方法とあわせて紹介します!

PS Auto Sitemapの設置方法

PS Auto Sitemapをインストール

  1. WordPressの『プラグイン』の「新規追加」を選択
  2. 検索窓に「PS Auto Sitemap」と入力(自動に探してくれます)
  3. 「今すぐインストール」をクリック
  4. インストールが終わったら「有効化」をクリック

固定ページにサイトマップを作成

WordPressの『設定』の「PS Auto Sitemap」を選択し、設定画面の一番下の「ご利用方法」のコードをコピーします。

 

WordPressの『固定ページ』の「新規追加」を選択し、タイトルを「サイトマップ」、スラッグを「sitemap」にして、コピーしたコードを貼りつけて公開します。

PS Auto Sitemapの設置方法2

公開するとアドレスバーにIDが表示されます。

・・・/post.php?post=ID&action=edit

post=の後のIDをメモします。

PS Auto Sitemapの設置方法3

PS Auto Sitemapの設定

まず、『設定』の「PS Auto Sitemap」を再び開き、メモしたIDを「サイトマップを表示する記事」の箇所に入力します。

PS Auto Sitemapの設置方法4

そのほかの細かい設定

ホームページの出力
チェックを入れると、トップページ(ホームページ名)が表示されます。

投稿リストの出力
チェックを入れると、投稿リスト(カテゴリーと記事)が表示されます。ここは必ずチェック!

固定ページリストの出力
チェックを入れると、固定ページが表示されます。

サイトマップを表示する記事
メモしたIDをここに記入(上で説明)。

出力段階制限
カテゴリーの段階を制限するかどうか。制限なしでOK。

先に出力するリスト
投稿リストと固定ページリストの両方にチェックを入れた場合、どちらを上に表示させるか。

カテゴリーと投稿の表示
● 同一マップ内・・・カテゴリーと記事を1ページ内に全て表示します。
● 投稿を分割・・・サイトマップにカテゴリーのみ表示し、カテゴリーをクリックするとカテゴリーごとの記事一覧に飛びます。
投稿を分割にするとめんどくさいので、同一マップ内がおススメです!

除外カテゴリ
表示させたくないカテゴリーがある場合、IDを入力します。

除外記事
表示させたくない記事がある場合、IDを入力します。

スタイルの変更
スタイルは14種類から選べます。このブログは「ビジネス」を使用しています。

キャッシュの使用
チェックを入れると、キャッシュを使用するのでページの表示速度が速くなると言われています。
すでにキャッシュ系のプラグインを導入している方はチェックをはずしておきましょう。

PS Auto Sitemapの子カテゴリーを見やすくするCSSカスタマイズ

まず、普通に設置した場合、このように表示されます。

カスタマイズ前


psautositemapのカスタマイズ1

『子育て』が親カテゴリーで、『妊娠と出産』が子カテゴリーになるのですが、親カテゴリーの記事と子カテゴリーの位置やアイコンが一緒なので、わかりずらいのです。

カスタマイズ後

psautositemapのカスタマイズ2

親と子のどちらの記事も『記事』とわかるように同じアイコンをつけ、配置位置も同じにしてみました。

さーこ
見やすくなったと思いませんか?

CSSのサンプルコードと説明

『外観』の「テーマの編集」のスタイルシート(styie.css)を開き、一番下に以下のCSSコードを貼りつけます。

/*サイトマップカスタマイズ*/
#sitemap_list li .post-item a{
	padding: 0px 0px 0px 20px;
	background: url(画像のURL) no-repeat left center;
}

#sitemap_list li .cat-item a {
margin-left: -14px;
font-size: 15px;
display: block ;
padding: 3px 5px 3px 20px;
border-bottom: dotted 1px #9D8E7F ;
}

#sitemap_list li li .post-item a 
{
background: url(画像のURL) no-repeat left center;
	font-size: 13px;
	border: none;
}

ちなみに、このブログはAFFINGER5というテーマを使っているんですが、その場合は『外観』→「カスタマイズ」のメニューの一番下に追加CSSというものがあるので、そこに貼りつければOK。

カスタマイズ説明

他のスタイルにするとデザインが崩れてしまうのでPS Auto Sitemapのスタイルは『ビジネス』に設定して下さい。

上のcssサンプルコードのbackground: url(画像のURL)の『画像のURL』の部分は、アップロードしたアイコン画像のURLを入れます。

メディアに画像をアップロードして選択するとメディアの詳細画面に移りますので、右下にある「さらに詳細を編集」画面からファイルのURLをコピーし、2箇所ある『画像のURL』に貼りつけて下さい。

ちなみに私はこちらのホームページのNO.22の矢印アイコンをお借りしています。

あまり大きいと見栄えが悪くなるので、最大でも11pxくらいが妥当だと思います。

そのほかの説明

#sitemap_list li .post-item a{
親カテゴリーの記事の設定
アイコンをつけて位置調整

#sitemap_list li .cat-item a {
子カテゴリーの設定
文字サイズを大きくして位置を調整し、親カテゴリーと同じような下部点線ボーダーをつける

#sitemap_list li li .post-item a {
子カテゴリーの記事の設定
子カテゴリーの設定が反映されて文字が大きく点線ボーダーがついてしまうので、文字の大きさの調整と点線ボーダーを消す設定

さーこ
位置調整などは私の好みも入っていますので、ご自分で色々カスタマイズしてみて下さいね。

PS Auto Sitemapのまとめ

PS Auto Sitemapの設置方法と子カテゴリーを追加した場合のカスタマイズ方法をお届けしました!

子カテゴリーを使っていない場合は特にカスタマイズの必要はありませんが、PS Auto Sitemapは一度設定しておくと、新しい記事を追加しても自動でサイトマップに表示されるのでとても便利ですよ!

スマホでも見やすいサイトマップが作れますので、まだの方はぜひ導入してみて下さい。

-ブログ

Copyright© 日々、まるまる暮らし , 2019 All Rights Reserved Powered by AFFINGER5.