ボックスメニュー作成・ウィジェットで簡単に使用する方法

Cocoonカスタマイズ

こんにちは、ハナです。

サイドバーに表示されたカテゴリーが、アイコン表示になっています。

これは、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]ボックスメニューをクリックすると分かるように、多くの箇所にボックスメニューが挿入できるようになりました。

色々メニューを作ることで、カスタマイズの幅がぐっと増えます。

アイコンの色も好きな色にカスタマイズできます。
カスタマイズについては次回書きたいと思います。