[WordPress]サイトマップ自動生成プラグイン「PS Auto Sitemap」と「SlickMap CSS」でステキサイトマップ

2013/6/1 2013/8/24 css, WordPress

そういえば鹿児島は梅雨入りしました下山です。

WordPressでサイトマップを生成するプラグイン「PS Auto Sitemap」ってデフォルトでスタイルがいくつか選択できるようになっていますが、デザインがステキすぎてくぁｗせｄｒｆｔｇｙふじこ・・・

そこでサイトマップをオシャレに演出してくれる「SlickMap CSS」を使いたいと思ったわけですよ。
決して「PS Auto Sitemapがダサい」って言ってるわけじゃなくてー。

「PS Auto Sitemap」の設定等は終わってると仮定して「PS Auto Sitemap」に「SlickMap CSS」のスタイルを設定する方法を解説。

「SlickMap CSS」の一般的な設定方法はhead内に

<link href="slickmap.css" rel="stylesheet" type="text/css" />

1	<link href="slickmap.css" rel="stylesheet" type="text/css" />

body内に

<ul id="primaryNav">
	<li id="home"><a href="#">Home</a></li>
	<li><a href="#">Offices</a></li>
	<li><a href="#">Map</a></li>
	<li><a href="#">Contact Form</a></li>

</ul>

<li><a href="#">Offices</a></li>

<li><a href="#">Contact Form</a></li>

</ul>

こんな感じです。
slickmap.cssをリンクして、先頭のulにidでprimaryNavを、トップページ(Home)のliにidでhomeを追加してやればok。

この2つのidを「PS Auto Sitemap」に追加する方は「PS Auto Sitemap」の本体「wp-content/plugins/ps-auto-sitemap/ps_auto_sitemap.php」をほんの少し書き換えてあげるだけです。

まずはps_auto_sitemap.phpの101行目

修正前
$sitemap_content = "<ul id=\"sitemap_list\" class=\"sitemap_disp_level_" . $this->option['disp_level'] . "\">\n";

修正後
$sitemap_content = "<ul id=\"primaryNav\" class=\"sitemap_disp_level_" . $this->option['disp_level'] . "\">\n";

修正前

$sitemap_content = "<ul id=\"sitemap_list\" class=\"sitemap_disp_level_" . $this->option['disp_level'] . "\">\n";

修正後

$sitemap_content = "<ul id=\"primaryNav\" class=\"sitemap_disp_level_" . $this->option['disp_level'] . "\">\n";

と書き換えます。(sitemap_listをprimaryNavに書き換え)

次に同じくps_auto_sitemap.phpの103行目

修正前
$sitemap_content .= '<li class="home-item"><a href="' . get_bloginfo( 'url' ) . '" title="' . get_bloginfo( 'name' ) . '">' . esc_html( get_bloginfo( 'name' ) ) . "</a></li>\n";

修正後
$sitemap_content .= '<li class="home-item" id="home"><a href="' . get_bloginfo( 'url' ) . '" title="' . get_bloginfo( 'name' ) . '">' . esc_html( get_bloginfo( 'name' ) ) . "</a></li>\n";

修正前

$sitemap_content .= '<li class="home-item"><a href="' . get_bloginfo( 'url' ) . '" title="' . get_bloginfo( 'name' ) . '">' . esc_html( get_bloginfo( 'name' ) ) . "</a></li>\n";

修正後

$sitemap_content .= '<li class="home-item" id="home"><a href="' . get_bloginfo( 'url' ) . '" title="' . get_bloginfo( 'name' ) . '">' . esc_html( get_bloginfo( 'name' ) ) . "</a></li>\n";

と書き換えます。(id=”home”を追加)

以上でオサレサイトマップの完成です。

※「SlickMap CSS」はCSSをリンクしてあげるだけですがWordPressのstyle.cssとの兼ね合いは調整してください。

ブログにサイトマップは必要ないと思いますが、デモ的に当ブログのサイトマップを上記の方法で作ってみました。

demo