以下のデザイン設計記事で計画した通りにデザインを改修していきます。
まずはヘッダー周りです。
この記事では、
- ヘッダーのナビゲーションメニューを右寄せにする方法
- ナビゲーションメニューに子カテゴリーを含むカテゴリーを追加する方法
について解説していきます。
ちなみに、最初の状態は以下です。ここからヘッダーを右寄せにして充実させていきます。
ナビゲーションメニューを右寄せにする
Cocoonでは、WordPress管理画面左側メニューの「Cocoon設定」から、ヘッダーメニューを編集することができます。
Cocoon設定の画面が表示されたら、「ヘッダー」タブをクリック。
「ヘッダーレイアウト」の部分で「トップメニュー（右寄せ）」を選択しましょう。
変更が終わったら「変更をまとめて保存」ボタンを押します。
トップページを確認すると、しっかり右寄せになっています。
カテゴリーを追加する
続いて、ナビゲーションメニューの中にカテゴリーを追加していきます。
私が以前作成したヘッダーメニューを利用しますが、「まだヘッダーメニューを作っていない！」という方は、以下の記事の「メニューを作成し、お問い合わせページを追加」の章がお役に立てるかと思います。
WordPress管理画面左側メニューの「外観」→「メニュー」をクリックします。
編集するメニューがちゃんとヘッダーメニューのものになっているか確認してください。（もしフッターメニューなどが選択されている状態なら、ヘッダーメニューを選んで「選択」ボタンを押します。
次に、「メニュー項目を追加」の部分で「カテゴリー」をクリックしてください。
現在作成しているカテゴリーを、子カテゴリー含めすべて選択して「メニューに追加」ボタンを押します。
「メニュー構造」の部分に選択したカテゴリーが入りますので、移動させたい項目をドラッグ&ドロップして、表示したい順に並び替えていきます。
以下の画像のように、通常より少し右を狙って項目を移動させると、入れ子のように配置されます。親カテゴリーと子カテゴリーは入れ子になるように並び替えていきましょう。
並び替えが終わったら「メニューを保存」ボタンを押します。
問題なく保存できたらトップページを更新して、ちゃんとカテゴリーが追加できているか確認しましょう。
ナビゲーションメニューのカテゴリー説明文を非表示にしたい場合
カテゴリーに説明文を設定している場合は、以下の画像のように説明文も一緒に表示されてしまいます。
その説明文を非表示にしたい場合は、メニュー設定から説明文を削除していく必要があります。
まずは、ヘッダーメニューを設定した画面の上部にある、「表示オプション」をクリックしてください。
すると、様々なチェックボックスが表示されますので、「説明」のところにチェックをいれます。
チェックを入れ終わったら、「メニュー構造」の中にある、編集したい項目の下矢印を押して、詳細設定を表示させます。
「説明」という項目があるので、中に記述されている説明文を削除しましょう。これを、親カテゴリー、子カテゴリーすべての項目で行います。
最後に「変更を保存」すると、ナビゲーションメニューからカテゴリーの説明文が削除されます。
まとめ
以上、「メニューを右寄せにする方法」と「子カテゴリーを含むカテゴリーの追加方法」の解説でした。
他にもヘッダーロゴの設定やヘッダー背景色の設定など色々あるのですが、私も探り探り試している最中なので、分かったことがあれば随時共有しようと思います。
さて、ひとまずヘッダーの改修は完了したので、次はCocoonの機能の一つである「おすすめカード」の設定をしてきます。
特におすすめのカテゴリーや記事を目立つところに表示させる機能です！
コメント