【図解】WordPress Cocoon(コクーン)でグローバルナビを設定する方法

ワードプレスは難しい設定や、プログラミング言語がわからなくても、サイトを作成、更新できます。とてもシンプルで使いやすいです。

しかし、さらなる利便性向上のためにグローバルナビを設定しました。

コクーンだけでなく、全てのワードプレスに共通の設定方法です。

グローバルナビとは

グローバルナビとはサイトのヘッダー(上部)もしくはフッター(下部)にあるメニューのことです。当ブログならタイトル下の「Home カテゴリー」 と書いてあるメニューのことです。

利用者の利便性だけでなく、SEOにも重要

これがあることによって、利用者が目当てのページにアクセスしやすくなるので利便性向上につながります。

利用者の利便性だけでなく、検索エンジン最適化(SEO)のためにも重要らしいです。

検索エンジンにとって重要なナビゲーション

ウェブサイトのナビゲーションは、訪問者に必要なコンテンツをすばやく見つけてもらうために重要です。また、ナビゲーションによって、ウェブマスターが重要だと考えているコンテンツを検索エンジンが理解しやすくなります。Google の検索結果はページレベルで提供されますが、Google はサイト全体でそのページがどのような役割を果たしているのか把握しようとしています。

引用元:検索エンジン最適化(SEO)スターターガイド

グローバルナビの設定方法

外観→メニュー→

新しいメニューを作成しましょう→

メニュー名を入力→メニューの作成

メニューの名前はなんでもいいです。今回はグローバルナビメニューとしました。

これでメニューが作成できました。

トップページへのリンク設定

まずは、トップページ(ホーム)へ戻るメニューを作りましょう。

メニュー項目を追加からカスタムリンクを選ぶ→URLに自分のサイトのトップページのアドレスを入力→リンク文字列にHomeと入力→メニューに追加

URL欄に初めから書いてあるURL(「http://」)ではなく、自分のサイトのURLが「https://」で始まるのなら、忘れないように「s」を入力しておいてください。

カテゴリを追加する

あとは、自分が必要だと思うカテゴリーにチェックをいれて→メニューに追加


固定ページを追加する場合は、固定ページ項目から同様に選択して、追加できます。

プルダウンメニューの作り方

当ブログのカテゴリーメニューは、プルダウンメニューを使っています。

プルダウンメニューは、カテゴリーの上にマウスポインタを乗せると、表示されるメニューのことです。

プルダウンメニューの作り方は、カスタムリンクを利用します。

カスタムリンクのURLに「#」とだけ入力→リンク文字列はカテゴリーと入力→メニューに追加

追加したいカテゴリーを副項目として追加する

メニューに追加されたら、次は追加したいカテゴリーを副項目として追加します。

プルダウンメニューに追加したいカテゴリーにチェックマークを入れて、メニューに追加します。

その後、プルダウンメニューに表示したいカテゴリーをドラッグして、先ほど作ったカスタムリンク(カテゴリー)の下でクリックしたまま、少し右にずらすと副項目として追加されます。

副項目として追加されたなら、「〇〇(カテゴリー名) 副項目」と表示されるようになります。

アドセンス広告を張りたい人は絶対に目を通して下さい

アドセンス広告を表示する位置によっては、メニューが広告に被って誤クリックを誘発する可能性があります。プルダウンメニューを設定する際には、広告の位置と被らないように注意しましょう。

偶発的クリックの誘導

Google 広告をクリックするようユーザーに促す行為は、どのような方法であっても認められません。

メニュー、ナビゲーション、ダウンロード用リンクといった他のサイト コンテンツと誤認させるような形で広告を配置することもこれに該当します。
広告の近くにリンク、再生ボタン、ダウンロード ボタン、操作ボタン([戻る] や [次へ] など)、ゲーム ウィンドウ、動画プレーヤー、プルダウン メニュー、アプリケーションを配置する際には注意が必要です。

こうした配置方法は広告の偶発的クリックを招く可能性があります。たとえ意図していなくてもレイアウトが原因で偶発的なクリックが発生してしまったサイト運営者様には、違反通知が送信される場合があります。

引用元:Adsenseヘルプ 広告のプレースメントに関するポリシー

自分にとって必要な物を追加する

お問い合わせ、プライバシーポリシー等、自分が必要だと思うものを追加してください。

最後にメニューを保存

あとは、 メニュー設定のみです。

「このメニューに新しいトップレベルページを自動的に追加 」というのは、メニュー作成後に、新しく作った固定ページが自動でメニューに追加されます。とりあえずチェックを入れておきます。

メニューの位置はヘッダーナビにチェックを入れます。スマートフォンにも表示させたいのなら、モバイルヘッダーナビにもチェックをいれてください。

最後に忘れないように、メニューを保存してください。

外観の設定が反映されない時は、ブラウザのキャッシュを削除してみる

作成したメニューがちゃんと表示されているか、確認してみてください。

もしも、更新しても反映されない場合は、ブラウザのキャッシュを削除して再度更新して確認してください。

グローバルナビの設定は、ブログ初心者でも簡単にできる

ブログをカスタマイズすることによって、利便性向上やSEOだけでなく、自分のブログやサイトに対して愛着を持つことができるようになります。

難しい作業のように思えますが、ブログ初心者の方でも簡単に行えますので、是非この機会に設定してみてください。

コメント