【Cocoon】HTMLサイトマップの表示順を入れ替える【WordPress】

WordPressテーマ「Cocoon」には、ショートコードを貼り付けるだけでHTMLのサイトマップが作れる機能があります。

公式 簡単なサイトマップページを生成できるsitemapショートコードの使い方 | Cocoon

という人向けの機能なので、見た目や機能はとてもシンプルです。

そこまでこだわりがないので、プラグインを使わずCocoonのショートコードを使い、固定ページでHTMLのサイトマップを作りました。

ただし、表示順が

この順番に固定されています。

カテゴリー一覧を上に表示させたいのですが順番を変更する機能がないため、少し工夫をして順番を入れ替えました。

CSSやPHPは全く使わずに出来ます！

「Cocoon」利用者でショートコードが使えれば誰でも出来る方法です。

HTMLサイトマップショートコードの使い方

HTMLのサイトマップを作るショートコードの、基本的な使い方です。

ショートコードの使い方をスキップ（次の項目までジャンプします。）

「固定ページ」を新規作成し、以下のショートコードを入力します。

[sitemap]

そして固定ページを保存します。

これでHTMLサイトマップの完成です。

ショートコードにはオプションが用意されており、固定ページ・記事・カテゴリー・アーカイブの4種の表示・非表示を設定できます。

オプション一覧

page	固定ページ
single	記事
category	カテゴリー
archive	アーカイブ

オプション記入例

[sitemap page=0 single=1 category=0 archive=0]

「1」を入力すると表示、「0」を入力すると非表示になります。

記事のオプション「single」のみに、「1（表示する）」を入力しているため、記事のみ表示させるサイトマップのショートコードになります。

公式 簡単なサイトマップページを生成できるsitemapショートコードの使い方 | Cocoon

表示する項目の順番を入れ替える

表示・非表示を設定するオプションを利用します。

それぞれ1つのみ表示させるショートコードを作り、表示させたい順番にショートコード入力するだけです。

固定ページのみを表示するショートコード

[sitemap page=1 single=0 category=0 archive=0]

記事のみを表示するショートコード

[sitemap page=0 single=1 category=0 archive=0]

カテゴリーのみを表示するショートコード

[sitemap page=0 single=0 category=1 archive=0]

アーカイブのみを表示するショートコード

[sitemap page=0 single=0 category=0 archive=1]

当ブログでのショートコード使用例

実際当ブログで使用しているショートコードはこちら。

[sitemap page=0 single=0 category=1]
[sitemap page=0 single=1 category=0]
[sitemap page=1 single=0 category=0]

この3つのショートコードを入力すると

上記の順番に表示出来ます。

アーカイブ一覧は使ってないので「archive」オプションは使っていません。

まとめ

もともとシンプルなサイトマップなので、「カテゴリー別に表示したい」などのカスタマイズがしたい場合は、プラグインを使う必要があります。（もしくはPHPでのカスタマイズ。）

Cocoonには今回紹介したHTMLサイトマップのショートコードだけでなく、他にもたくさんの機能があります。

デフォルトの機能を工夫して使うだけで、様々な表現や使い方が出来るので、

と考えながら試行錯誤するのが、とっても楽しい！！

ぜひ「自分が考えた最強のCocoonカスタマイズ」を見つけてください！

そして記事にして下さい！！笑