誰得コンテンツ、「Cocoonをコーポレートサイトっぽくカスタマイズ！」の2回目。メニュー編です。
※こちらクラシックエディタ向けの記事になります。
1回目はこちら。トップページ編。
コーポレートサイトに必要なページはだいたいこんなものがあるかと思います。
- トップページ
- メニュー・料金案内
- よくある質問
- スタッフ紹介・会社概要
- アクセス
- プライバシーポリシー・サイトポリシー
- ブログ（新着情報・ニュース・プレスリリース・お知らせ）
今回はページを作ってメニュー（ナビゲーション）を設定したいと思います。
固定ページの追加と順番の並び替え、スラッグの設定
固定ページの追加はWordpressの固定ページの「新規追加」から。
こんな風になりました。
ページ順は固定ページ一覧の「クイック編集」の「並び順」に番号を振ることで並び順を変えられます。
（実は私、この固定ページ一覧のページ順を並べ替えることができると知ったのがだいぶ最近の事なんです。情けないことに。）
ついでに「スラッグ」も編集してしまいます。スラッグはファイル・フォルダ名のようなものなので半角英数で設定を。
「メニュー」をつくる
ページができたら、それを表示させる「メニュー」、つまりナビゲーションを設定していきます。
プルダウンメニューの親ページにはリンクさせないようにしたい
今回はこんな感じのプルダウンメニューにしようと思います。
このなかの「メニュー」「○○について」は、カテゴリーや親ページのようなイメージで、リンクはさせないようにしたいなと思います。
プルダウンで出てくる子ページはリンクさせるけど、親ページは表示だけで何もさせないようなやつです。
プルダウンメニューだと動いて出てくる下のページ（子ページ）はクリックするけど、一番上（親ページ）ってあんまりクリックしない気がしませんか？
まあなんか個人的にそんな感じがするので今回は親ページにはリンクさせないように作りたいと思います。
WordPressの外観の「メニュー」で新しいメニューを作っていきます。
ふつうなら固定ページを全選択して「メニューに追加」するのですが、それだとプルダウンメニューの親ページにのリンクされてしまうんです。
今回は「プルダウンメニューの親ページにはリンクさせないようにしたい」という野望がありますので、「カスタムリンク」を使用します。
カスタムリンク
「カスタムリンク」をクリックし、URL（後ほど消すのでなんでもいいので文字を入れておきます。今回は「a」）とリンク文字列を入力。
「メニューに追加」をクリック。
右側に追加されたメニューの「カスタムリンク▼」をクリックするとパネルが開くので、URLを削除。
あとはその下にプルダウンで表示させたいページを「固定ページ」から選び、メニューに追加。
追加された固定ページは右にドラッグすると階層を下げることができます（プルダウンで出てくるページになる）。
これで「親ページにはリンクなし」のプルダウンができます。
メニューにアイコンも設定する
ナビゲーションラベルにはアイコンを設定することができます。
Cocoonテーマではfontawesomeを使うことができるので、例えばトップページの文字のひだりに家のアイコンを、といった場合にはナビゲーションラベルに
<i class="fa fa-home" aria-hidden="true"></i> TOP
を設定。
こんな感じ。
「メニュー」の完成
上記の作業を繰り返し、メニューはこんな感じになりました。
架空の会社名とかコンセプトとかもっとちゃんと決めておけばよかった…
ひととおりできあがったサンプルサイト公開しています。（広告出ますが…）
スクロールアニメーションについてはコチラの記事で書いてます。
コメント