【WordPress】プラグイン[PS Auto Sitemap]のスタイルを自分好みにカスタマイズ

こちらの記事は2015年2月に公開したものです。情報が古くなっていますのでご注意ください。

WordPressでブログを運営するなら必須プラグインのひとつともいえる[PS Auto Sitemap]。PS Auto Sitemapはサイトマップを出力するさいに十数種類ものスタイルから選ぶことができますが、これを自分のサイトに合わせたものに変えてみました。

以前から気になっていた子カテゴリー、孫カテゴリーの表示もついでに直したので備忘録的にコードを紹介します。なお、PS Auto Sitemapの詳細、設定方法はカツアイとします。

こちらはWordPress 4.1、PS Auto Sitemapは1.1.8 時点のエントリーです。

[adsense]

PS Auto Sitemapのココが気になる

PS Auto Sitemapのスタイルが気に入らないのではないのです。しかしカテゴリーで子カテゴリーを設定している場合、カテゴリーが記事と同じ階層、同じスタイルになっているのが気になっていました。

これをカテゴリーは記事とスタイルを変えてここはカテゴリーだ！と一目でわかるようにたのです。

出力されているclassを利用しカスタマイズ

特に難しいとこはないんですが、プラグインが出力しているコードをそのまま利用しました。cssを弄るだけです。

PS Auto Sitemapで出力される各クラス名

PS Auto Sitemapはサイト名、カテゴリー、そのカテゴリーに属している記事、固定ページが＜ul id=”sitemap_list”＞として表示されているのです。

プラグインのcssを無効にする

ダッシュボードの[設定]→[PS Auto Sitemap]→[スタイルの変更]を[スタイルなし]にしてください。これでプラグインのスタイルシートは適応されなくなります。

参考までにわたしのサイトの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:#f09696 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:12px;
}
		

#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, #fcf1f1 25%, transparent 25%,
    　　transparent 50%, #fcf1f1 50%, #fcf1f1 75%,
    　　transparent 75%, transparent);	
}

#sitemap_list .post-item{
	line-height:1.4;
	margin-left:15px;
	border-bottom:#f09696 dashed 1px;
}
#sitemap_list .post-item a{
	padding:0;
	font-size:90%;
	border:none;
	background:none;
}
#sitemap_list .post-item a:before {
    　　font-family: "FontAwesome";
	content: "f004";
	color:#f09696;
	margin-right:3px;
	font-size:80%;
}

今現在のスクショ。

子メニューには左余白を設けず、メニューとして明確に表示しています。トップページURLにはトップページとわかるようにしたかったので疑似クラスで文字を付け足しました。ハート部分はFontAwesomeを利用しています。

固定ページはクラスがなくliだけなのでカスタマイズするならソコを基準に考えるとわかりやすいですね。

コードはサイトマップのページにだけ読み込ませる

コードはstyle.cssに書き込むだけで表示されますが、サイトマップの為だけにスタイルシートに記述しているのはもったいないですね。でもスタイルシートの数もなるべく減らしたい。（わたしはエックスサーバーのmod_pagespeedでファイルを圧縮しているのでなるべく一つのファイルにまとめたいのです。）サイトマップのページを表示している場合のみスタイルを読み込むようにする方法をご紹介します。

head内に直接記述してしまう

一応記載しておきますがhrad内にcssを記述する際は以下のようにします。

<style type="text/css">
ここにコードを記述
</style>

以前書いた記事で記事毎に＜head＞内にcssなどを追加できるコードを紹介しています。今回はこの方法でhead内にcssを直接書いています。

【WordPress】ページごとに個別のCSSやJavaScript、meta descriptionなどを追加する方法 – Shufulife

この方法を試すと投稿の編集の画面に[headに追加]という項目が出現しますので、そこにcssを入れてしまいます。

コードを圧縮する

上記の方法でcssをhead内に記述するにはコードを圧縮して一行にする必要があります。インデントが入ると表示ができないのです。

わたしはコード圧縮には以下のサイトを利用しています。※minifyなのでコメントはすべて削除されますのでご注意ください。

Minifier – compress JavaScript or CSS, deminify JavaScript or CSS, create SQL INSERT commands from CSV

このコードをheadに追加へコピペをすると、サイトマップの記事のhead内に自分のコードを挿入することができます。

まとめ

この方法は自分のテーマのスタイルをサイトマップにも適応できますし、必要なページにのみcssを読み込ませることができるので高速化にもつながりますね。

プラグインを使わなくてもサイトマップの出力はできるようなので、それはまた次の機会に。

それではちゅんこ@shufulifeがお送りしましたー