【PC版】cocoonヘッダーメニューを作成してユーザーフレンドリーにしよう

ワードプレス
スポンサーリンク
銀ペン
銀ペン

サイドバーにもメニューあるけど、やっぱりサイトと言えば、ヘッダーにメニューだよね~

sabo
sabo

そうだね!ヘッダーにもあったほうがユーザーにも見やすかったり扱いやすかったりするので作成しておこう!

ここでは、cocoonのヘッダーにヘッダーメニュー(グローバルメニュー)を作成する方法をご紹介します。

パソコンでの表示設定です。
※一般のグローバルメニューは768pxより大きな幅の端末で表示される。

スポンサーリンク

cocoonのヘッダーメニュー作成方法

ワードプレスのダッシュボート 外観→メニューに入ります。

メニューを作成

新しいメニューを作成しましょう。をクリック

メニュー名を任意で決め、メニューを作成します。
※ここではヘッダーメニューとしています。

作成したメニューの中に表示させたいコンテンツを入れる

ウィジェットと同様の考え方で左にある、項目を右に移動します。

ウィジェットの設定はこちら

4つの項目からあなたの載せたいページや投稿を選択します。
ヘッダーメニューに表示させたいものにチェックを入れてメニューに追加をクリックすると追加されていきます。

今回はホームと各カテゴリを選択しています。
選択が終わったらメニューを保存します。

位置の管理

メニューの位置の管理を開きます。
ここではどの位置に作成したメニューを表示するか?が決められます。

ヘッダーメニューであなたが今作成したメニューを選択します。
変更を保存しましょう。

サイトを更新するとヘッダーにメニューが表示されます。

cocoonのヘッダーメニューに補足文を追加する

上記だけでも立派なヘッダーメニューですが、最近の傾向だと下記のように補足文が入ったメニューをよく見かけますよね。なんだかこちらの方がおしゃれです。

こちらも簡単です。

メニューに補足文を入れる

ダッシュボート 外観→メニューに入ります。

右上の表示オプションを開きます。

説明にチェックを入れます。

先ほどあなたが作ったメニュー(ここではヘッダーメニュー)を開き

各項目の説明の部分に補足に入れたい文を入力します。
メニューを保存します。

銀ペン
銀ペン

補足を入れた方が銀ペンは好みだな♪

コメント

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