［WP覚書］サイトマップを固定ページで自動出力できるプラグイン『PS Auto Sitemap』で自動更新できるツリー上のサイトマップを作成
通常サイトからWPサイトへの変換作業をやってます。
そのサイトは期間限定のページや、申し込みを閉めきったらクローズするページなどがあるので、今までもサイトマップの扱いが面倒だったのですが、このプラグインを使えば自動更新できるかも！と導入してみました。
ここで紹介されてる『PS Auto Sitemap』というプラグインです。
サイトマップを自動生成してくれるWordpressプラグイン | necozine
利点としては、固定ページの新規投稿や非公開操作に合わせて、こちらも勝手に更新されるということにつきますねー。
並ぶ順番は「順序」通り
20131203追記
サイトマップの並ぶ順番は、記事の「ページ属性」の「順序」に左右されます。
あらかじめ順番通りに並べておきましょう。
ちなみに自分は、あとから途中にも入れられるように、1、3、5、7、9と奇数並べにしてます。
プラグイン設定ページでサイトマップを表示する記事IDを入力
まず最初の設定として、PS Auto Sitemapの設定ページでサイトマップを表示する記事を入れないと表示されないよ。記事のIDを入れます。
本文の記述
サイトマップページに以下の記述を入れる
<!-- SITEMAP CONTENT REPLACE POINT -->
タイトルが短いと真ん中寄せにしたくなるので、その時はこんな感じで（ーー；
align centerだとテキストだけ真ん中になっちゃうので注意。
<div style="margin-left:100px;"><!-- SITEMAP CONTENT REPLACE POINT --></div>
トップページを手打ちにする場合
トップページの表示がサイト名そのままになってしまってヘンなので、設定から「ホームページの出力」のチェックをはずして表示させないようにして、最上部にトップページへのリンクを付けました。
<a href="トップページのURL">トップページ</a><div id="sitemap"><!-- SITEMAP CONTENT REPLACE POINT --></div>
ついでに、PS Auto sitemapのスタイルを採用した時でトップページを手打ちにしたときの全記述。
「付箋」スタイルで確認しました。他のスタイルだとおそらく ulのclass名が変わります。
<div style="margin-left:100px;"> <ul id="sitemap_list" class="sitemap_disp_level_0"> <li class="home-item"><a href="http://XXXXXX.com/">トップページ</a></li></ul> <!-- SITEMAP CONTENT REPLACE POINT --> </div>
自ページへのリンクは削除
また、サイトマップページにサイトマップへのリンクがあるとヘンなので「除外記事」項目にサイトマップ記事のIDを入れました。「サイトマップを表示する記事」項目と同じIDすね。
スタイルの選択
20120418追記
下にツリー型スタイルの導入方法も書きましたが、再び設置しようと思ったら、スタイルが結構入ってて、どれも良い感じ。
真面目なサイトであれば「シンプル」とか「ドキュメントツリー」とか、ちょっとくだけた感じのサイトだったら「蛍光ペン」とか「CUBE」とか好みです。
これだとツリー型の最下部の処理も気にしなくていいしね～。
ツリー型スタイルの導入
『PS Auto Sitemap』で出力されるソースはこんな感じ。
<ul id="sitemap_list" class="sitemap_disp_level_0"> <li class="page_item page-item-4"><a href="http://hogehoge.com/guide/">大会案内</a></li> <li class="page_item page-item-6"><a href="http://hogehoge.com/place/">会場案内</a></li> <li class="page_item page-item-8"><a href="http://hogehoge.com/course/">コースガイド</a> <ul class='children'> <li class="page_item page-item-10"><a href="http://hogehoge.com/course/5km/">コースガイド~5km~</a></li> <li class="page_item page-item-12"><a href="http://hogehoge.com/course/10km/">コースガイド~10km~</a></li> <li class="page_item page-item-14"><a href="http://hogehoge.com/course/half/">コースガイド~ハーフ~</a></li> </ul> </li> ・・・
いつも使っているツリー型のCSSを、PS Auto Sitemapが吐き出すCSSに合わせて修正しました。
/************************************************
* Sitemap *
************************************************/
div.sitemap {
margin-left: 50px;
}
ul li.home {
list-style-type: none;
}
ul.tree {
margin: 0 0 0 1em!important;
padding: 0!important;
list-style: none!important;
}
ul.tree ul {
margin: 0 0 0 1em!important;
padding: 0!important;
}
ul.tree li {
margin: 0!important;
padding: 0 0 0 16px!important;
background-image: url(blogimg/tree_lst.gif);
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.tree li.tree_end {
background-image: url(blogimg/tree_end.gif);
list-style: none;
}
↓↓↓
/************************************************
* Sitemap *
************************************************/
div#sitemap {
margin-left: 50px;
}
ul li.home {
list-style-type: none;
}
ul.sitemap_disp_level_0 {
margin: 0 0 0 1em!important;
padding: 0!important;
list-style: none!important;
}
ul.sitemap_disp_level_0 ul {
margin: 0 0 0 1em!important;
padding: 0!important;
}
ul.sitemap_disp_level_0 li {
margin: 0!important;
padding: 0 0 0 16px!important;
background-image: url(images/custom/tree_lst.gif);
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.sitemap_disp_level_0 li.page-item-14,ul.sitemap_disp_level_0 li.page-item-170,ul.sitemap_disp_level_0 li.page-item-184 {
background-image: url(images/custom/tree_end.gif);
list-style: none;
}
手間取った点としては、
ツリー型ではリストのlastクラス指定でリストの一番下がL字型の画像になるのですが、PS Auto Sitemapで出力されてる場合、lastクラス指定ができないので、スタイルにリストの最後に来るページのIDを指定しないといけないです。
ul.tree li.tree_end {
background-image: url(blogimg/tree_end.gif);
list-style: none;
}
↓ ↓ ↓
ul.sitemap_disp_level_0 li.page-item-14,ul.sitemap_disp_level_0 li.page-item-170,ul.sitemap_disp_level_0 li.page-item-184 background-image: url(blogimg/tree_end.gif); list-style: none; }
この場合、この指定したページがページの追加などでリストの最後でなくなった場合は、当然修正しないといけないです。が、今回の場合は動かなさそうなページなので、ま、ま（＾＾；
類似プラグインなど。
プラグインを使わずサイトマップページを作る方法
お手軽WordPress Tips：プラグインを使わず、簡単なコードでシンプルなサイトマップを作成する – かちびと.net
何らかの事情でプラグインを使えない場合によいかもですね。
ここでもプラグインを使う場合はPSを推奨されてはいますが。
類似プラグイン：Dagon Design Sitemap Generator
利用したことはありませんが、ググってる時にいくつか見かけたのでメモ。
サイトマップ作成プラグイン Dagon Design Sitemap Generator | WordPressで企業ウェブサイト作成・商用ホームページ制作 WordPress Go Go
今使ってる「Google XML Sitemap」と併用した時に不具合があるらしい。
スラッグをかぶらせるといけないみたい。
サイトマップ作成プラグイン「Dagon Design Sitemap Generator」導入方法とその設定。(「Google XML Sitemap」と併用した場合) | うつしよ
「Dagon Design Sitemap Generator」 と 「Google (XML) Sitemaps Generator for WordPress」 を併用して使用した場合、「Dagon Design Sitemap Generator」 のページスラッグを 「sitemap」 にしてしまうと、サイトマップが表示されなくなるようだ。