こんにちは、ハナです。
サイドバーに表示されたカテゴリーが、アイコン表示になっています。
これは、Cocoonのボックスメニューを使用して作成できます。
Cocoon 2.0.7より、ボックスメニューをウィジェット使用できるようになりました。
アイコンは、Font Awesome4、Font Awesome5より選択して入力します。
アイコンの代わりに画像を使用することもできるので、自由にカスタマイズが楽しめます。
ボックスメニュー作成方法
ボックスメニューを使用するには、まず、WordPressでメニューを作成します。
次に、ウィジェットのボックスメニューで挿入して使用します。
サイトアイコンフォントの設定
Cocoonでは、 Font Awesome4、Font Awesome5のアイコンフォントをどちらにするか設定できます。アイコンを使用する時には設定を確認しておきましょう。
管理画面 ⇒ Cocoon設定 ⇒ Cocoon設定 ⇒ 全体 ⇒ アイコンフォントでどちらかを選び「変更をまとめて保存」をクリックします。
WordPressでのメニュー作成
①管理画面 ⇒ 外観 ⇒ メニューをクリックします。
②メニュー画面が表示されたら、「新しいメニューを作成しましょう」をクリックします。
③メニュー構造に、メニュー名を記入します。
(例)カテゴリーのメニューを作成したいので、メニュー名をカテゴリーにしました。
④上部の「表記オプション」で「CSSクラス」と「説明」「タイトル属性」を有効にしておきます。
⑤「メニュー項目を追加」よりメニューに入れたい項目を選び「メニューに追加」をクリックします。
右側に項目が表示されます。
アイコン設定
項目ごとに個々に設定を行います。
アイコンのクラスを入力
- ナビゲーションラベルはメニュータイトルになります。
- CSS class(オプション)に、Font Awesome4、Font Awesome5より選択したアイコンのクラスを入力します。
- 説明はサブキャプションになります。
設定したアイコンフォントページより挿入したいアイコンのクラス名をコピーして CSS class(オプション) に入力します。
Font Awesome4はこちらのページから選択してください。
Font Awesome5はこちらのページから選択してください。
(例)Font Awesome5のページを開きます。
使用したいアイコンをクリックします。
アイコンのページが表示されるので、枠のCopy HTMLクリックします。
クリックでコピーされます。
CSS class(オプション)に張り付けると<i class=”fas fa-apple-alt”>と貼られるのでクラス名のみにいらない箇所は削除します。
画像をアイコンとして使用する場合
画像をアイコンとして使用する時には、先に画像をアップロードしておきます。
アップロードした画像のURLをタイトル属性に入力します。
メニューの保存
項目ごとに個々にアイコンの設定が終わったら、メニュー構造横の「メニューを保存」クリックして保存します。
ウイジェットでのボックスメニューの使用方法
①サイドバーへのボックスメニューの挿入方法です。
管理画面 ⇒ 外観 ⇒ ウイジェット ⇒ [C]ボックスメニューをクリックします。
下に表示された中よりサイドバーを選び「ウイジェットを追加」をクリックします。
②サイドバーに挿入されたボックスメニューをクリックします。
メニュー名の赤枠をクリックし、カテゴリーが表示されるのでクリックすると、メニュー名にカテゴリーが表示されるので保存をクリックします。
これで設定は終わりです。
まとめ
ウイジェットの [C]ボックスメニューをクリックすると分かるように、多くの箇所にボックスメニューが挿入できるようになりました。
色々メニューを作ることで、カスタマイズの幅がぐっと増えます。
アイコンの色も好きな色にカスタマイズできます。
カスタマイズについては次回書きたいと思います。