グローバルナビの設置方法を画像解説 ワードプレスCocoon編

ワードプレスのロゴと記事タイトル画像 ワードプレス

こんにちわ。

りゅうまるです。

 

この記事では、ワードプレスブログにグローバルナビゲーションを設置する手順を画像解説していきます。

グローバルナビゲーションとは

グローバルナビとかヘッダーメニューとかいうやつですが、これはもう設置してないブログ(サイト)のほうが圧倒的に少ないですよね。

 

ブログを開いたときによく目につくページ上部(ヘッダー)に設置してありますね。

 

ブログの概要をユーザーに伝えるための案内表示(リンク)という位置づけかな。

 

僕が運用している自社集客用のホームページにもしっかり設置してあります。

 

会社概要、お問い合わせ、料金、アクセス、選ばれる理由なんてのが定番の項目ですね。

 

事業内容と特徴を知ってもらうためのサイトなのでブログの様に頻繁に更新はしませんが、施工事例を定期的に更新して、放置サイトにしないようにしています。

 

そうそう、この記事は、前回記事にしたお問い合わせフォームの設置方法の続きになります。

 

前回は、「Contact Form 7」という有名なプラグインを使ったお問い合わせフォームの設置方法だけで終わってしまったので、その記事内へのリンクを早く設置しなくちゃなんないんですよね。(前回の続編として)

 

でないと、お問い合わせフォームはできたけどリンクがユーザーの目に触れないんじゃ全く意味ないですからね。

 

恥ずかしながら、僕の運営するもう一つのワードプレスブログにはグローバルナビが設置してないので、別ウインドウで設置作業をしながらさっそく記事を書いていきます☆(前回もフォームの設置、画像加工、記事作成の同時作業だったんですがむっちゃ効率悪いです)

 

前回の記事でも書きましたが、僕は無料テーマのCocoonを使用しているので他のテーマと若干手順が異なるかもしれません。

 

ご了承くださいませm(__)m

 

ワードプレス(コクーン)にグローバルナビゲーションを設置する方法

 

まずはワードプレスのダッシュボード(左管理メニュー)から外観⇒メニューをクリックします。

 

ワードプレスダッシュ簿度外観メニュー画面

 

このメニューページ内での設定がメインになります。

 

ブログ内に設置できる場所はヘッダー(グローバルナビ)、フッター(ページ最下部)、モバイル版表示向けの3種類ですが、モバイル表示での対応は表示される端末の横幅が768px(ピクセル)以下の場合です。(Cocoonの場合です)

 

項目の設定方法はフッターの場合も同じやり方なので、ここではグローバルナビ(メニュー)を例に進めていきますね。

 

メニューに設定できるのは以下の4項目です。(URLが存在するページ

 

  • 固定ページ⇒お問い合わせやプライバシーポリシーなど)
  • 投稿(個別の記事ページ)
  • カスタムリンク(任意のURL)
  • カテゴリー(存在する任意の項目)

新規メニューを作成してメニュー構造を設定

グローバルナビに表示させたい項目を設置するために新規メニューを作成します。

 

ココでのメニュー名は次回の編集時にわかりやすいように「ヘッダーメニュー」としました。

 

メニュー名は自分がわかりやすい名前を付けてくださいね。(ナビメニューには表示されません

 

新規メニューを作成⇒任意のメニュー名を記入⇒メニューを作成をクリックと進むと、先ほどの4項目が表示されます。

 

その中からグローバルナビのメニューとして設置したい項目を選んでいきます。

 

メニューに設置したいページの項目内をクリックすると、プルダウンが開きます。

 

以下の画像では、固定ページすべて表示させお問い合わせフォームを選択しています。

 

メニューに追加をクリックすると、メニュー構造下に選択したメニューが並びます。

 

ワードプレスのナビゲーションメニュー設定画面

 

同じ要領で各項目からメニューを追加していきます。

 

僕は、投稿からは選択せず、固定ページのお問い合わせとホーム(トップページ)、カテゴリーからCDと映像作品を設定してみます。

 

ワードプレスのメニュー項目設定画面

 

カスタムリンクを使用してリンク(メニュー)を設定する場合は任意のURLを記入しますが、記入欄には最初から「HTTP://」と記入されているので、「HTTPS://」で運用している方は、バックスペースで文字列(HTTP;//)を削除してから、正しいURLを記入してくださいね☆

 

リンク文字列にはメニューに表示させたい項目名を記入してください。

 

ワードプレスのグローバルメニュー設定画面

 

これで、グローバルメニューの項目設定は完了です。

 

メニューの並び替えと階層の設定

メニュー構造に並んでいる項目はドラッグ&ドロップで並び替えることができます。

左右の順番を並べ替える場合は、上下に移動します。

 

メニュー構造の上下並べ替え

 

階層を付けるには、目的の項目にカーソルを乗せ、右側にドラッグで移動するだけです。

 

グローバルナビでは、いわゆるドロップダウンメニューになります。

 

サブメニューを設定できるのはヘッダーメニューだけです。

 

別ウインドウで設置作業しながらの記事作成で、画像の用意が間に合わない為ココはこのブログの画像を使用してます。(汗)

 

メニュー構造の階層化

 

メニュー構造に設置した項目右側の矢印(▼マーク)をクリックすると、メニュー名の変更や項目の削除、上下の移動などが行えます。

 

メニュー構造内での編集画面

メニュー設定で選んだ項目の設置場所を設定できます

今回は4項目をグローバルナビに設置する方法ですが、メニュー構造と同じメニュー内容をフッターやモバイル版表示に設定することもできます。

 

その場合は、メニュー設定のメニューの位置で追加したい項目にチェックを付けてください。

 

以下の画像ではヘッダーナビに設置しています。

 

メニュー設定と配置設定が決まったら最後に保存を押して完了です。

 

お疲れさまでした(*^^*)

 

メニュー設定で設置場所を設定

グローバルナビの編集方法(Cocoon設定)

一連の設定で見事にグローバルナビが設置できましたが、デフォルトは超シンプル!

 

Cocoonでは、Cocoon設定画面内で、グローバルナビを装飾できるんです。(あ~良かった(^_^;)

 

先にグローバルナビ設置前と設置後の画像をご覧ください。(これはデフォルト設定です)

グローバルナビ設置前のヘッダー

もともとスッキリシンプルなデザインが好きなので、ブログタイトルの太文字と、文字色の変更しかしてないんですよね。

 

これはこれでいいと思うんですが、ユーザビリティやSEOの面ではやっぱりグローバルナビは必要ですよね。

 

グローバルナビゲーションを設置する前のヘッダー画像

グローバルナビ設置後のヘッダー

以下の画像が設置後ですが、グローバルナビゲーションですよね?確かに・・・。

 

凄いなこれ!

 

枠っていうか、仕切りひとつないんですね。

 

グローバルナビゲーション設置後のヘッダー画像

Cocoon設定でナビゲーションをカスタマイズ

ダッシュボード(左管理メニュー)内のCocoon設定をクリックし、ヘッダー項目をクリックします。

 

少し下にスクロールすると、グローバルナビの編集項目があります。

 

ワードプレステーマCocoonの設定画面

 

「Cocoon設定」でカスタマイズできる内容は以下の通りです。

 

  • ナビの背景色
  • ナビのテキスト色
  • トップメニューの幅(px指定)
  • サブメニューの幅(px指定)

 

あ~あ(*´Д`) 大げさにカスタマイズなんて書いちゃいました(笑)

Cocoon設定でグローバルナビをカスタマイズした結果

Cocoon設定でグローバルナビを編集した結果の画像

 

ん~~なかなかいいですね☆

 

どう思います?

 

可もなく不可もなく?

 

飽きの来ないデザインということで(*^^)v

 

グローバルナビゲーション設置のまとめ

いかがでしたでしょうか。

 

思ってたよりCocoon限定にならなかったと思うんですが。

 

最後のCocoon設定以外はワードプレス共通っていう感じじゃないでしょうか。

 

今回グローバルナビゲーションを設置したブログは、運用して約3か月間という若さなんですよね。

 

前回このブログで、お問い合わせフォームの設置の記事をかきながら運用歴3か月のブログに、お問い合わせフォームを設置したんですが固定ページにフォームを設置するとこまでしか書いてないのでまだ公開してません。

 

この記事と合わせて2記事完成したら早速公開したいと思います。

 

珍しくもない内容ですが、どなたかのお役に立てばうれしいです。

 

りゅうまるでした★

 

あわせて読みたい

 

コメント