本記事ではWordPressテーマCocoonを使用している方へ向けて、簡単なサイトマップの作り方を紹介していきます。
サイトマップはXMLサイトマップ（検索エンジンロボット用）とHTMLサイトマップ（訪問者用）の2種類がありますが、本記事はHTMLサイトマップを解説します。
Cocoonにはサイトマップを生成するための機能（＝ショートコード）が最初から備わっているため、わざわざプラグインを使う必要がなくとても便利です。
一言でいえば[sitemap]て書くだけ、すばらしいですね
ここで、出来上がりのサンプル画像を見てみましょう。
上の画像が[sitemap]というショートコードを使ってできるサイトマップです。
めちゃくちゃ簡単に作れるんですが、文字だけでちょっと味気なかったので、私は下のようなサイトマップを作ってます。
上の画像はちょっと工夫して[new_list]っていう新着記事一覧を表示するショートコードを使って、アイキャッチも出るようにしたサイトマップです。
画像でみていただいた2種類のサイトマップの作り方を詳しく説明していきます。画像を見ながら一緒にやっていただければと思います
それでは、最初に念のためXMLサイトマップとHTMLサイトマップの違いを確認したあと、2種類のサイトマップの作り方を見ていくことにしましょう。
補足：HTMLサイトマップとXMLサイトマップ
まずはサイトマップって人間用とロボット用の2種類があるんだよっていうことを覚えておきましょう。で、今回は人間用のサイトマップを作ります。
HTMLサイトマップ…サイト訪問者用のサイトマップのこと。ウェブサイトの全体像を理解してもらって、気になるページに行ってもらうための記事一覧ページ。これから解説する方
XMLサイトマップ…検索エンジンロボット向けのサイトマップのこと。クローラーと呼ばれる巡回ロボットがサイトを巡回するための資料。Google XML Sitemapsプラグインなどで設定する。
XMLサイトマップの詳細についてはバズ部さんのページを貼っておきますのでそちらを確認ください。
外部リンクGoogle XML Sitemapsの設定方法
HTMLサイトマップ（記事一覧）の作り方
では今回のメインに入っていきます。全体の流れを見てから作業に入りましょう。
ざっと4ステップです
まずは固定ページを作るところから始めましょう。ここから一緒に作業になります。ワードプレスの編集画面から固定ページ→新規追加と進んでください。
そしたらタイトルにサイトマップと入力。パーマリンクにsitemapと入力しましょう。
次の行程からやり方が2通りに分かれます。文字だけのリンク一覧を作成の方は[sitemap]ショートコードを使うへ進みましょう。
アイキャッチも含んだリンク一覧を作成の方は[new_list]ショートコードを使うに進みましょう。
[sitemap]ショートコードを使う
段落ブロックに[sitemap]と入力すると、上記のようなサイトマップが表示されます。とりあえず[sitemap]と入力してプレビューで見てみてください。
これだけで固定ページ、投稿記事一覧、カテゴリーが表示されたと思います。サイトマップはこれで良いという方はここで終了です。
サイトマップを公開してメニューに表示させましょう。
次はこのショートコードで設定できるオプションについて解説します。
サイトマップショートコードのオプション
オプション設定をすると、固定ページへのリンクや投稿ページへのリンクを表示させなくしたり、月アーカイブへのページを表示させたりすることができます。
一覧表でオプションを確認します。
[sitemap page=1 single=1 category=1 archive=0]
上の例では、次のように設定されています。
- 固定ページ：表示
- 投稿ページ：表示
- カテゴリーページ：表示
- 月アーカイブページ：非表示
例えばpage=1をpage=0に変えれば固定ページは非表示になります。数字の１を０にするだけですね。
表示したいもの、したくないものを好みで選択してみてください。オプション設定も完了したら、サイトマップを公開してメニューに追加へ進みましょう。
※下の画像ではオプション設定はしていません
サイトマップショートコードはCocoon公式ページでも紹介されています。
Cocoon公式簡単なサイトマップページを生成できるsitemapショートコードの使い方
ちょっとオプションが難しかった。という方はショートコードについて解説している記事がありますので、そちらをご確認ください。
続いて、new_listショートコードを使ったやり方も見てみましょう
[new_list]ショートコードを使う
段落ブロックに[new_list count=100]と入力すると上のような記事一覧が表示されます。※数字の100は記事数です。100記事以上ある方は100より大きい数を入力しましょう。
私はカテゴリーごとにまとまっていた方が見に来た人がわかりやすいと思ったので、カテゴリーごとにまとめて表示させています。
そのやり方はオプション設定を使う必要がありますので、オプションの説明をしたあと私のサイトマップの実際の編集画面をお見せします。
新着記事ショートコードのオプション
設定できることがたくさんありますが、使うのは count,cats,childrenくらいですかね。あとはお好みです。
実際にどんな風に作ってるか見てみないとなかなか分かりづらいと思いますので、私のサイトマップの編集画面を見てみましょう。
見出しは自分で作って、あとはカテゴリーごとnew_listショートコードを使って表示させています。実際のサイトマップと見比べてみてください。
参考リンクサイトマップ
カテゴリーIDはワードプレスの編集画面から投稿→カテゴリーと進んだときに見れるカテゴリー一覧で確認できます。
サイトマップが完成したら公開しましょう。できたら次のメニューに追加へ進みます。
ちょっとオプションが難しかった。という方はショートコードについて解説している記事がありますので、そちらをご確認ください。
Cocoon公式ページにも新着記事一覧を表示するショートコードの説明があります。
Cocoon公式新着記事一覧を表示するショートコードの利用方法
サイトマップをメニューに追加する
公開したサイトマップをメニューに表示させます。ヘッダー・フッター・サイドバーなどに適切にリンクを張ります。これらは簡単に設定できます。
順番に見ていきましょう。
ヘッダーやフッターに追加する
ヘッダーやフッターのメニューにサイトマップを表示する方法です。外観→メニューと進んでください。
ヘッダーメニューやフッターメニューを既に作っている人は編集するメニューを選択からそのメニューを選択、まだ作っていない人は新しいメニューを作成しましょうを選択
メニュー名に「ヘッダー」や「フッター」とつけてメニューを作成
メニュー項目を追加から先ほど作ったサイトマップにチェックを入れて、メニューに追加。そのほかメニューに追加したいページがあればそれも追加。
フッターを作ってる人はメニュー設定のフッターメニューにチェック。ヘッダーを作ってる人はヘッダーメニューにチェック。
ヘッダーもフッターも同じで良い人は両方にチェックしてメニューを保存
そうするとメニューにサイトマップが表示されます。
ボックスメニューに追加する
ボックスメニューは下の画像のやつのことを言います。
ウィジェットで設置場所を決められるため、サイドバーや記事上、記事下など好きな場所におけるリンク集です。
私はボックスメニューにもサイトマップを置いています。詳しくは別記事にて説明していますので、そちらを確認ください。
【Cocoon】サイトマップ（記事一覧）の超簡単な作り方 まとめ
本記事ではWordPressテーマCocoonを使っている人向けに、HTMLサイトマップの作り方から表示の仕方まで詳しく説明してきました。
サイトマップは訪問者にとってとても大事なページです
あなたのサイトがよりユーザーにやさしいブログになるよう、わかりやすいサイトマップを表示させてあげてください。
Cocoonの「困った」を解決する記事
Cocoonの使い方
当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。
コメント