9月26日まで、エックスサーバーで「独自ドメインプレゼントキャンペーン」!更新料金も無料!サーバー新規開設が条件です。

HTMLサイトマップの作り方 ~ 正攻法とアナログ法

HTMLサイトマップの作り方 ~ 正攻法とアナログ法
アイキャッチ画像は

Th GによるPixabayからの画像

当ブログのHTMLサイトマップ↓を作成しました!

サイトマップ
初心者の学習ノート「あぁ、ブログ。」のサイトマップです。サイト構成と記事一覧を載せました。

HTMLサイトマップはブログの「目次」で、記事のリンクがはってあるページです。

HTMLサイトマップのメリット

  • 読者がブログ記事のタイトルを一気にチェックできる。
  • 読者が読みたい記事を探して、リンクで移動できる。

ということで、記事数が増えてきたら作成したいものです。

タイトルに「アナログ法」という言葉をいれた理由は、私がHTMLサイトマップを「コピー&ペースト」で作成したからです。

まだ40記事にも満たないブログなので、割と簡単にできました。

アナログ法のメリットは、自由度」。

普通の投稿記事と同じように、自由自在にスタイルをつけ、色を変えて、順番を変えて、説明を入れて・・・ということができます。

ブログカード形式にすればアイキャッチ画像も表示できます

あえてサイトマップに載せたくないメニューや記事があったら、「載せなければいいだけ」です。

コードの知識は不要。検索・学ぶ時間をカットできます。

デメリットは、最初に作成するときにかかる時間と非効率性です。

「コード」や「プラグイン」なら一瞬でできるところ、手動で作業するわけです。

新しい記事を投稿する度に、そのリンクをサイトマップページに手動で追加する必要もあります。(私はこのポイントは気にならないのですが、手間に感じる方のが多いかなと思います。)

手動なので、「自分が入れ忘れたら」サイトマップに載らない記事が出ます。

当記事のポイント

1.[正攻法] CocoonのショートコードでHTMLサイトマップを作成する方法

2.[正攻法] HTMLサイトマップを作れるプラグインを簡単に紹介

3.[アナログ法] 手動でHTMLサイトマップを作成する方法

[正攻法1] Cocoonのショートコードを利用してHTMLサイトマップを作る ~ とても効率的

私も、まずはこれを試しました。

いくみ
いくみ

感動の速さでサイトマップができあがります!

大げさじゃなくて、一瞬で終了します。

方法です。

1.[固定ページ]>[新規追加]をクリック。

ショートコードでHTMLサイトマップ作成 [固定ページ][新規追加]

2.タイトルに「サイトマップ」や「記事一覧」など、希望のタイトルを入力します。

ショートコードでHTMLサイトマップ作成 - タイトルの入力
入力例

3.その下のブロックにたった1行、以下のショートコードをコピーして貼り付けます。

[sitemap]

以下は入力した後の画面です。

ショートコードでHTMLサイトマップ作成 - ショートコード入力例

4.右上にある[下書きとして保存]ボタンをクリック。これで終了しています。

確認するため、[プレビュー]ボタンをクリックしてみてください!

たった1行のコピペで、「サイトマップ」が完成していますね!

ショートコードでHTMLサイトマップ作成 - 出力例
出力例

コードの説明は以下のページにあります。

項目ごとに「表示するか・非表示にするか」という設定までは、初心者でも、このページを読めば変更できます。

ただ、「表示する順番や見た目を変えたい」となると、どういうコードが必要かを検索する必要があります。

5.お好みのコードを使って、設定を変えたりしてできあがった所で、[公開する]ボタンをクリックします。

6.その固定ページのサイトマップをメニューとして表示させます。

固定ページをグローバルメニューに表示させる方法は、以下の記事の目次3番にまとめています。

いくみ
いくみ

「コード」の威力に驚きました・・・。

投稿画面とまったく違う内容を表示させられるなんて・・・。

「効率重視」の方は、断然この方法がおススメです。

サイトマップ作成に利用できるCocoonショートコード

特に「サイトマップ用」ではありませんが、「新着記事」順、「人気記事」順で記事を表示してくれるショートコードがありました!サイトマップで有効利用できますね。以下にリストしておきます。

新着記事順:[new_list count=50 cats=all type=default children=1]

このコードを使うと、「新着記事順」で記事がリストされます。

この例では、「50記事分・全カテゴリーの記事対象・通常のリスト表示・子カテゴリーも表示」という設定になっています。

が、イコール記号(=)の後の数字や単語を変更することで、表示条件をお好みで設定できます!

「1つのカテゴリー」対象にしたり、ブログカードのタイプを変えたりできます!

設定の詳細・選択肢・表示例は以下のページをご覧ください。

「count=」の値が表示される記事数です。自分が書いた記事数以上の数値にしておけば(100とか)、その数値に達するまでは「全記事」が表示されることになります。

いくみ
いくみ

「人気記事順」のコードもありました。

ランキング形式で表示するサイトマップでも楽しいかも。

人気記事順:[popular_list days=all rank=1 pv=0 count=100 cats=all type=large_thumb_on]

このコードを使うと、「人気記事順」で記事がリストされます。

この例では、「集計対象が全期間・ランキング番号表示・PV数非表示・100位まで表示・全カテゴリー対象・大きなサムネイルにタイトルを重ねる」という設定になっています。

「count=」の値が表示される記事数です。自分が書いた記事数以上の数値にしておけば(100とか)、その数値に達するまでは「全記事」が表示されることになります。

設定の詳細・選択肢・表示例は以下のページをご覧ください。

いくみ
いくみ

使い方は先ほどと同じ。コピペだけです!

サイトマップ用のコードと違って、固定ページへのリンクやカテゴリーページへのリンクは出力されませんので、その部分は手動で作成することになります。

[正攻法2] プラグインを利用してサイトマップを作る ~ 効率的

1番有名なのは「PS Auto Sitemap」だと思います。

検索を進めると、「WP Sitemap Page」も人気でした。

それぞれ「売り」ポイントがハッキリと違って、その比較が最高に分かりやすく書かれているサイトがこちらです。目次の「機能比較」にあります。(このサイト、見た目もとってもステキ。)

上記のページで勉強しますと、「PS Auto Sitemap」の売りは「見た目のバリエーションが豊富」。(その見た目出力例も最後の「スタイル」というセクションで載せてくださっています!嬉しいですよね~。)

「WP Sitemap Page」の売りは「サイトマップに表示させる情報の順番を変える選択肢が豊富」。


で、私は「PS Auto Sitemap」に惹かれました。

私のブログはまだ記事数も少なく、構造もシンプルなので、情報表示の順番は、今のところ重要度が低いからです。

「PS Auto Sitemap」に見た目を選択できる「スタイル」があるのは魅力だなと思いました。



これでほぼ決まり・・・と思っていたのですが、最近ちょっと、「プラグイン疲れ」でして。

できれば増やしたくなく、減らしたいなぁとも思っています。

プラグインの良いところは、思い立ったらあっという間に使えることなので、とりあえず今はアナログ式にしよう・・・という結論になりました。

[アナログ法] 手動でサイトマップ作成する方法 ~ メリットは自由度

いくみ
いくみ

「記事数が少ない」ことが強みになる、数少ない場面でございます。

[ブログカード形式にする場合]

手動(コピペ)でHTMLサイトマップ作成 - ブログカード式
できあがり例

1.[固定ページ]>[新規追加]をクリック。

手動(コピペ)でHTMLサイトマップ作成 - [固定ページ][新規追加]

2.タイトルに「サイトマップ」や「記事一覧」など、希望のタイトルを入力します。

手動(コピペ)でHTMLサイトマップ作成 - タイトル入力
入力例

3.1ブロックに1つ、URLをコピペしていきます。これを必要回数繰り返します。

いくみ
いくみ

ここがアナログ的!

でも記事数が多くなければ、あっという間です。

テキストコピー無しでOKなので、楽ちんです。

 コピーが終了したら、順番を変えたり、お好みでスタイルをつけてできあがり!

4.[公開する]ボタンを押して、できあがった固定ページのサイトマップをお好きなところに表示させましょう。

サイトマップ固定ページをグローバルメニューに表示させる方法は、以下の記事の目次3番にまとまっています。

[テキストリンクにしたい場合]

手動(コピペ)でHTMLサイトマップ作成 - テキストリンク形式
できあがり例

テキストリンク形式希望の方はコピペ作業から逃れられます!

1.[正攻法1]を参照して、プレビューを表示するところまで実行

最終的に「どんな順番で並べたいか」によって、一番楽なショートコードを選びましょう。サイトマップ用のコードは、メニュー構造も出力されるところが魅力。新着記事順・人気記事順は、カテゴリー別に出力できるのがメリットだと思います。

2.プレビュー画面で全ての記事リンクを一気にコピー。

3.新しく、[固定ページ]>[新規投稿]をクリックして、タイトルに希望のタイトルを入力。

4.コピーした全記事のリンクを貼り付けます。[下書きとして保存]をクリック。

5.リンクがリストされているブロックを選択します。以下のように上部にメニューが表示されます。一番左のアイコンの上にマウスポインタをもっていきます。

手動(コピペ)でHTMLサイトマップ作成 - ブロックスタイル変更

6.矢印マークの[ブロックタイプまたはスタイルを変更]アイコンになるのでクリック。

手動(コピペ)でHTMLサイトマップ作成 - ブロックスタイル変更

7.[段落]を選びます。

手動(コピペ)でHTMLサイトマップ作成 - ブロックスタイルを[段落]に変更

8.すると、一記事ずつ、別のブロックになります。お好みで順番を変えて、スタイルをつけたりして出来上がり!ブロックを選択すると、上移動・下移動のマークが出ますので、コピペは必要なくなります♪。

手動(コピペ)でHTMLサイトマップ作成 - リンクの順番を変更

9.できあがった固定ページのサイトマップをお好きなところに表示させましょう。

サイトマップ固定ページをグローバルメニューに表示させる方法は、以下の記事の目次3番にまとまっています。

テキストリンク形式の注意点とチョコっとメリット

注意点

手動でテキストリンク形式のサイトマップを作った場合の注意点です。

公開済みの記事の「タイトル」を変更したら、「手動で」サイトマップのテキストを変更する必要があります。

「ブログカード形式」だと、自動でタイトルの変更が反映されますが、テキストリンクの場合はそのままになります。

(ショートコードは常に最新の情報を使ってくれるので心配ないです。プラグインもそのはずです。)

テキストリンク形式のチョコっとメリット ~ Cocoonのコピーボタンを有効利用

新しく記事を投稿したら、そのテキストリンクを手動でサイトマップに追加する必要があります。

その際、「コピーボタン」を使うと、ほんのすこ~し、手間が省けます。

Cocoonコピーボタン

コピーボタンは、記事のトップかラストに、シェアボタンと並んでありますね。(設定で省略した方は、また表示するようにできます。)

これをクリックすると、テキストとURLがコピーされます。

[Ctrl]+[V]で貼り付けをするとこうなります↓。

Cocoonコピーボタン 貼り付け例

URLの部分だけ選択して、[Ctrl]+[X]でカットします。

残ったテキスト部分を選択して、[Ctrl]+[V]で貼り付ければ、テキストリンクのできあがりです!

ブログカード形式のチョコっとメリット

私が読者の立場のときは、サイトマップのページでキーワード検索することが多いです。

ブログカード形式にすると検索対象の文字数が増えるので、ヒットする確率もあがります

たとえば以下のようなタイトルだと、どのプラグインの記事かは分かりません。

  • [WordPress] 初めに入れたいプラグイン2つ
  • 頼れるパンダくん ~ 画像圧縮プラグインでサーバーへの負担を軽減

プラグインの正式名を検索ワードにする方がいた場合、上のようなタイトルだと検索機能では見つからないことになります。

ブログカード形式だと、記事の説明も表示されるため、長いキーワードをタイトルに入れられなかったときでも補足できます。

手動(コピペ)でHTMLサイトマップ作成 - ブログカード形式のメリット

以下のようなタイトルのときもブログカード形式のほうが、読者にとっては便利だと思います。

  • 記事を書く前に知っておきたかったこと3つ
手動(コピペ)でHTMLサイトマップ作成 - ブログカード形式のメリット
いくみ
いくみ

大抵、「記事の説明文」を書いているときは、本文を書きあげてぐったりしているときで、あっさりしすぎているものもあります。

見直そうと思います。

当記事のまとめ

1.[正攻法] ショートコードでHTMLサイトマップを作成する方法

  固定ページに[sitemap]と入力するだけでできあがる!速くて効率的!

  新着記事順・人気記事順で記事をリストしてくれるショートコードもある!

2.[正攻法] HTMLサイトマップを作れるプラグイン

  有望プラグインは以下の2つ
  - PS Auto Sitemap(見た目オプション豊富)
  - WP Sitemap Page(情報の表示順変更オプション豊富)。

3.[アナログ法] 手動でHTMLサイトマップを作成する方法

  • メリットは最強の自由度。デメリットは非効率性(記事を公開する度に手動で追加)。
  • [テキストリンク形式]と[ブログカード式]がある。

  [テキストリンク形式]:タイトルの更新が反映されないので、変えたら手動修正。コピーボタンを使うとちょっと楽ちん。

  [ブログカード形式]:検索対象の文字列が増えるのでチョコっとお得。

コメント

タイトルとURLをコピーしました