「ブログの記事をカテゴリー別にボタン表示させたい！」
こんなことを考え始めて調べずにはいられなくなったので、調べてみました。
結果、こんなメニューボタンを作ることができました！
このボタン「ボックスメニュー」と言うらしいです。
本記事ではこのボックスメニューの作り方をご紹介します。
この記事を読んで出来ることはコチラ
- ボックスメニューを作る
- CSSでボックスメニューをカスタマイズする（次の記事）
テーマCocoonでカテゴリー別ボックスメニューを作る
1. まず初めに、外観の中の→メニュー→表示オプションで詳細の設定をしておきます。
・タイトル属性
・CSSクラス
・説明
この3つにチェックを入れておきます。
2. 新しいメニューを作成しましょうを選択。
3. メニュー名を入力してメニューを作成
メニュー名は「カテゴリーボックスメニュー」とつけてみました。
4. 表示させたいメニュー項目を選択してメニューに追加
5. 右上の▲をクリック → 各メニューの追加設定オプションを入力してメニューを保存
- ナビゲーションラベル
- タイトル属性またはCSS classどちらか1つ
- 説明
この3つを入力します。
実際に表示される画面で解説するとこんな感じです。
アイコン部分を画像で表示させたい場合は、CSS classを記入せずタイトル属性に画像のURLを入力します。（画像は事前にメディアからアップロードしておく必要があります）
CSS classに入力する Font Awesomeアイコンについて
CSS classにはFont Awesomeアイコンのクラス名を入力します。
Font AwesomeにはFont Awesome4とFont Awesome5の2つがありますが、今回はFont Awesome4を使用しました。
＜CSS class入力例＞
1. Font Awesome4のページから好みのアイコンを選びクラス名をコピーする。
2. CSS classに貼り付ける。
ここまででボックスメニューの作成は完了しました！
次は作ったメニューを表示させてみましょう。
ボックスメニューをコンテンツ上部に表示させる
1. 外観の中のウィジェットを選択。
2. [C]ボックスメニューをドラッグアンドドロップでコンテンツ上部へ移動させる。
3. 右上の▲を押して、以下の2つを選択。
メニュー名：先ほど作成したメニュー名
ウィジェットの表示：チェック・入力したページで表示
4. ページを選び、ボックスメニューを表示させたいページにチェックを入れてSave
これでカテゴリー別メニューボックスを作成して表示することができました！
表示させてみると・・・
このように左寄りで表示されます。（試しに2つだけメニューを作った時の画像なので本来であれば4つメニューを作った場合は左から4つメニューが並んで表示されます）
このままではバランスが悪いので次の記事でCSSを使ってカスタマイズしていきます！
