【画像解説】HTMLサイトマップを設置しよう!ワードプレス編(Cocoon)

アイキャッチ画像 ワードプレス

こんにちわ。

りゅうまるです。

 

今回は、ワードプレスブログでプラグインを使った、MTMLサイトマップの作成方法を記事にしていきたいと思います。

 

Cocoonというテーマを使用した解説ですが、他のテーマでもやり方は基本的に同じです。

 

使用するプラグインは【PS Auto Sitemap】です。

ワードプレスプラグイン[PS Auto Sitemap]のタイトル画像

 

HTMLサイトマップとXMLサイトマップの違い

 

サイトマップという言葉自体は、聞いたことがある、見たことがあるという方は多いと思います。

 

自分でホームページやブログを運用している方はご存じだと思いますが、サイトマップには2種類あります。

 

サイトマップには2種類ある

 

XMLサイトマップ

一つは、XMLサイトマップで、Googleなどの検索エンジンに対してブログ(サイト)の構造を伝えるためのサイトマップです。

 

クローラーと呼ばれている巡回ロボットが、XMLサイトマップの情報を読み取ってGoogleやBingなどの検索エンジンに伝える形となります。

 

XMLサイトマップを設置しなくても、サイトの情報はいずれ検索エンジンに伝わりますが、設置しておいたほうがより早くより正確に伝えることができます。

 

実際のページでは目に見えない、検索エンジン向けのサイトマップ(XML形式のファイル)で、SEO対策(検索エンジン最適化)に効果的なのがXMLサイトマップです。

 

ワードプレスでブログを構築(運用)している方なら、【Google XML Sitemaps】というプラグインを利用して簡単に作成(設置)することができます。

 

一度設置しておくと、記事やリンクの追加などの更新情報(検索エンジンへの通知)をすべて自動で行ってくれる便利なプラグインです。

 

【Google XML Sitemaps】を使ったXMLサイトマップの作成方法は以下の記事が参考になります。(画像解説)

【画像解説】XMLサイトマップの作成方法 SEO効果抜群!ワードプレス編
SEO効果を高めるためのXMLサイトマップの作成方法(手順)を、画像解説しています。ワードプレス プラグインの【Google XML Sitemaps】を使えば作成(設置)にかかる時間は10分ほどです。ユーザーの利便性を高めるためのHTMLサイトマップの概要と記事リンクも設置してあります。

 

HTMLサイトマップ

もう一方のサイトマップが今回紹介するHTMLサイトマップです。

 

HTMLサイトマップは実際のページ内にリンクとして設置することで、閲覧者の方にブログ(サイト)の構造を伝えるためのもので、グローバルナビゲーションやフッターメニューなどに設置するのが一般的です。

 

前述しましたが、閲覧者の方がこのブログ(サイト)にはどんな記事が掲載されているのか?一目で分かるように書籍の目次の様になっています。

 

パソコンやスマホで自分のブログを読んでくれている方向けのサイトマップで、閲覧者の利便性を高めるのが主な目的です。

 

閲覧者の方が探している記事内容を明確に伝えることができるので、リピートユーザーの増加(PV数)や直帰率の低下(滞在時間が長くなる)などの理由で、SEO効果を期待することができます。

 

直帰率は、閲覧者があなたのサイト内で他のページを閲覧せず、1ページだけしか見られなかった割合です。

 

以下は、このブログのHTMLサイトマップ(ページ)です。(パソコン画面)

 

書籍の目次の様になっていて、どのカテゴリにどんな記事があるのかとても分かりやすいですよね。

 

閲覧者が希望する記事を、効率よく提供することができますね。

 

ブログのサイトマップ

 

こちらは(以下)はスマホ画面(iPhone6/7/8)で見たサイズです。

 

これでは少し文字が読みにくいですね。(文字が小さくタップもしにくいです)

 

文字の大きさはワードプレスのスタイルシートに簡単な記述を追加(コピペ)するだけで変更できます。(ページ後半でやり方を画像解説しています)

 

スマートフォン画面でのHTMLサイトマップ画面

 

HTMLサイトマップをグローバルナビやフッターに設置する場合、「記事一覧」や「サイトメニュー」などの名前で設置すると、閲覧者の方の利便性がさらに高まります。(以下は一例です)

 

サイトマップをグローバルナビゲーションに設置した一例画像

グローバルナビへの設置例です

 

フッターメニューにHTMLサイトマップを設置した一例画像

フッターへの設置例です

 

作成したHTMLサイトマップを、グローバルナビやフッターへ設置(メニュー名の変更)する方法は、以下の記事で画像解説していますので参考にしてくださいね。

 

グローバルナビの設置方法を画像解説 ワードプレスCocoon編
この記事では、ワードプレスのグローバルナビゲーションを設置する方法を画像解説しています。前回、「Contact Form 7」というプラグインでのお問い合わせフォーム作成記事と合わせてお読みください。キャプチャ画像を豊富に使っているので初心者の方にもわかりやすい内容です。

 

わざわざテキストを入力してリンク貼りつけなどの面倒な作業をこなさなくても、簡単にHTMLサイトマップを作成できるのが【PS Auto Sitemap】というプラグインです。

 

【PS Auto Sitemap】は、WordPressの公式サイト(wordpress.org)によって安全性が確認されているプラグインで、だれでも無料で使うことができます。

 

ワードプレス5.0以降のバージョンも解説

2018年10月にメジャーバージョンアップした5.0以降をお使いの方もいると思いますので、4.9以前のバージョンと併せて解説しています。

 

両バージョンの操作方法の違いは、コード貼り付け画面(テキストエディタ―)への切り替え方だけです。

PS Auto Sitemapを使ってHTMLサイトマップを設置しよう

工程は少なくありませんが、僕が実際に設定したときの画像を使って解説していますのでわかりやすいと思います。

 

PS Auto Sitemapをインストールする

まずは今回使用するプラグイン【PS Auto Sitemap】をインストール(有効化)します。

 

ダッシュボード内の「プラグイン」をクリックします。

 

ワードプレス内のダッシュボード画面

 

プラグインの管理画面に移動するので画面上部の「新規追加」をクリックします。

 

ワードプレス内のプラグイン管理画面

 

キーワード▼横のプラグインの検索窓にPS Auto Sitemapと入力します。

 

ワードプレス内でプラグインを検索している画像

 

すると画面が切り替わりプラグイン一覧が表示されます。

 

プラグインの一覧から【PS Auto Sitemap】を見つけたら(おそらく左上)今すぐインストールをクリックします。

 

ワードプレっすプラグインのインストール画面

 

インストールは数秒で完了し「有効化」という文字に変わりますので、そのまま「有効化」をクリックしてください。

 

これでHTMLサイトマップを設置(作成)する準備は完了です。

 

ワードプレスプラグインの有効化をクリック

固定ページでHTMLサイトマップを作成

HTMLサイトマップを、通常の投稿ページで作成すると「最近の投稿」などと混ざって表示されるのであえて固定ページで作成します。
目的に応じてクリック(タップ)してもらう「お問い合わせ」と同じ扱いでよいと思います。

 

まずは、ワードプレスのダッシュボード内(左管理メニュー)の「固定ページ一覧」をクリックします。

 

ワードプレスのダッシュボード画面

 

次にページ上部の「新規追加(固定ページの文字横)」をクリックします。

 

ワードプレスの固定ページ作成画面

 

新規追加をクリックすると、固定ページを編集する画面に変わります。

ページタイトルを設定しよう

通常の投稿記事同様に、固定ページにもタイトルが必要ですので今回はわかりやすく「サイトマップ」としておきましょう。

 

グローバルメニューやフッターなどにメニュー(リンク)として設置する際は、別の文字列に設定することもできますが、「サイトマップ」としておくのが無難だと思います。

 

ワードプレスの固定ページタイトル入力画面

パーマリンクを設定しよう

パーマリンクは、ページごとにつく個別名(URL)のことで、通常はタイトル(記事内容)に合わせた文字列を設定します。
<ワードプレスではタイトルと同じ文字列がパーマリンクとして設定される仕様になっています。 今回タイトルを日本語で「サイトマップ」とつけたので、パーマリンクも「サイトマップ」と日本語で設定されますが、SEOの観点からは半角英(数)字で設定するのが好ましいとされています。
この時点で、タイトルの下にパーマリンク編集が出ていない場合は、タイトル文字の横をクリックすると編集出来るようになります。(編集の文字をクリック
 

バックスペースキーで「サイトマップ」を消した後に「sitemap/」に変更しておきます。

 

パーマリンク設定後に「保存」を忘れずクリックしてくださいね。

 

ワードプレス固定ページのパーマリンク設定画面

固定ページ内に読み取り用コードを入力(コピペ)しよう

ページタイトルとパーマリンクを設定したら、同じページ内にサイトマップの読み込み用コードを入力(コピペ)します。

 

読み取り用のコードは、HTMLの編集ページに以下のコードを入力(コピペ)するだけです。

 

<!– SITEMAP CONTENT REPLACE POINT –>

~ >をコピーして使ってね(*^^*)

 

ワードプレスの固定記事編集画面

 

ページ内には、<!– SITEMAP CONTENT REPLACE POINT –>を入力するだけでOKです。

 

コードを入力(コピペ)したらそのまま記事を「公開」してください。

 

下書き保存ではなく「公開」してしまって大丈夫です。

 

固定ページ内での作業はこれで完了です。

 

HTMLサイトマップ用の記事IDを取得しよう

次にHTMLサイトマップ用の記事ID(ページごとのID番号)を取得(コピー)します。

 

先ほどと同じようにダッシュボード内から「固定ページ一覧」をクリックします。

 

ワードプレスのダッシュボード画面

 

固定ページ一覧に移動すると先ほど公開したサイトマップという項目が見当たると思いますのでマウスカーソルをサイトマップの文字に近づけてください(どこもクリックしません

 

「編集」という文字が現れるので、文字の上にカーソルを合わせると、画面(ブラウザ)左下の方に文字列(これがID)が現れると思います。(編集をクリックしないでね

 

マウスカーソルを編集文字の上に置くだけですクリックすると再び編集画面になってしまいます

 

少し見にくいですが、その文字列の中に3桁の数字があると思います。おそらく3桁だと思います。その数字がIDです。この後すぐに使いますのでメモっておいてください。

 

今回の作業で必要なのは数字だけです。(以下表示例)

admin/post.php?post=数字&action=edit

 

注意IDが表示されるのは、「編集」にカーソルを乗せている間だけです。

 

ワードプレス固定ページの記事ID取得画面

HTMLサイトマップ用のIDをPS Auto Sitemapに入力

ここまで来たらもう一息です。

 

次に先ほど覚えたID(数字)を【PS Auto Sitemap】内に入力(設定)します。

 

画面左の管理メニュー内の「設定」にカーソルを合わせると、プラグイン一覧が表示されるので、その中から先ほどインストール(有効化)した【PS Auto Sitemap】をクリックします。

 

ワードプレスのダアッシュボード画面

 

【PS Auto Sitemap】の設定画面に切り替わりますので、「サイトマップを表示する記事」の空白ボックス内に先ほど覚えた記事ID(数字)を入力します。(以下画像)

 

PS Auto Sitemapの記事ID入力画面の画像

 

その他の項目設定については以下の通りです(参考例です)

ホームページの出力

サイトマップページ内にブログ名がいる場合は✔を付けます。【ブログ名】が不要なら、✔マークを解除(クリックで解除)(サイトマップページにもヘッダーが表示されます

僕はヘッダーにブログ名を表示しているのでチェックは外しました。

 

投稿リスト

普段投稿している記事は必要なので出力!(自動的に追加されます)

 

固定ページ

ダッシュボードの固定ページ一覧(投稿記事以外)で作成してあるプロフィール詳細やお問い合わせページなどをサイトマップ項目に表示するか?しないか?の設定です。

 

出力階層制限

サイトマップ内のカテゴリ階層を設定します。

ここでは投稿ページ(通常の記事)のカテゴリと異なる階層を表示できます。

例えば、投稿ページ(通常記事のサイドバーなど)のカテゴリは2階層だが、サイトマップページでは1階層だけ表示したい場合など)

 

先に出力するリスト

投稿記事(一覧)をページ先頭(上)にするなら、投稿にチェック!

 

カテゴリーと投稿の表示

カテゴリーと投稿メニューを、同一マップ(ページ)内に表示するかどうかです。

僕は同一にしました。

 

除外カテゴリ】と【除外記事

表示させたくないカテゴリや記事がある場合、該当の記事IDを入力します。

僕はあえて非表示にしたいページはないので空欄のままです。

 

スタイルの変更

デザイン設定です。スタイルなしを含めて14種類あります。

プラグインの編集⇒PS Auto Sitemap管理画面でいつでも変更可能です(以下画像で解説)

 

キャッシュの使用

すでに「W3 Total Cache」などのキャッシュ系プラグインを使用していると競合してしまうので、チェックを外しておいたほうがよいかも。(不具合の回避)

僕は✔を外しています。

 

すべての項目を設定し終わったら、「変更を保存」をクリックします。

 

PS Auto Sitemapの管理画面の画像

 

以上で【PS Auto Sitemap】でのHTMLサイトマップの設置は完了です。

 

おつかれさまでした(*^^*)

 

わかりにくい部分もあったと思いますが、1度サイトマップを設定しておけば後は放置しておいても自動的に更新(項目追加)される便利なプラグインです。

 

この機会にぜひ設置してみてくださいね。

 

【PS Auto Sitemap】で作成したHTMLサイトマップを、グローバルナビやフッターメニューに設置する方法は以下の記事を参考にして下さい。

 

グローバルナビとフッターメニューを設置する方法

テーマCocoonの場合

グローバルナビの設置方法を画像解説 ワードプレスCocoon編
この記事では、ワードプレスのグローバルナビゲーションを設置する方法を画像解説しています。前回、「Contact Form 7」というプラグインでのお問い合わせフォーム作成記事と合わせてお読みください。キャプチャ画像を豊富に使っているので初心者の方にもわかりやすい内容です。

 

ワードプレス(デフォルト)の場合

メニューの作成と設定
WordPressには、メニュー(ナビゲーションメニュー)を簡単に作成する機能があります。メニューの設置は、訪問者にやさしいサイト作りには欠かせません。このページでは、メニューの作成と設定について基本的な方法を紹介します …

 

サイトマップのデザイン(テキストサイズ)変更は、以下を参考にしてくださいね。

 

PS Auto Sitemap(サイトマップページ)のデザインを変更する手順

  1. ワードプレスダッシュボードから「設定」にカーソルを合わせる
  2. PS Auto Sitemapをクリック
  3. ▼マークをクリックしてデザインを選ぶ
  4. 「変更を保存」をクリック

PS Auto Sitemapのデザイン変更画面

サイトマップページ(テキストサイズ)のカスタマイズ

 

※CSSデータのバックアップは必ず保存してください!

※子テーマのスタイルシートを編集してください!

 

  1. ダッシュボードから「外観」にカーソルを合わせる
  2. 「テーマの編集」をクリック
  3. スタイルシート(子テーマ)に以下を記述
  4. 「ファイルを更新」」をクリック

 

ワードプレステーマCocoonのスタイルシート編集画面

 

【以下のスタイルシートをコピぺ(編集)して使えます】

/*** サイトマップのカスタマイズ ***//** カテゴリ名の文字 **/
#sitemap_list li .cat-item ,#sitemap_list .cat-item {
font-size:26px;/*文字を大きく*/
font-weight: bold;/*文字を太く*/
}/*記事タイトルの文字と余白幅*/
#sitemap_list li .post-item {
font-size: 20px;/*タップしやすいサイズに*/
padding-bottom: 1em;/*タイトル下の余白幅*/
}/*カテゴリ間のリストの余白幅*/
#sitemap_list li[class^=”cat-item”] {
margin-top: 1em;/*カテゴリ上にスペース*/
}

 

今回参考にさせてもらった記事

プラグインPS Auto Sitemap設置方法!ページ一覧表示するHTMLサイトマップは、カテゴリごとに自動出力
ブログを訪問したユーザーにとって利便性として、カテゴリ分けした投稿ページ一覧のサイトマップを簡単に固定ページに設置するWordPressプラグインの設置方法。設置後にCSSでスタイルを変更して、スマホでタップしやすく・PCでも見やすいように

コメント