「ボックスメニュー」ウィジェットの使い方

ウィジェット
この記事は約2分で読めます。

Cocoon 2.0.7にて「ボックスメニュー」がウィジェットでも利用できるようになりました。

ボックスメニューショートコードを利用せずとも、ウィジェットを放り込んで設定するだけで手軽に利用できるようになりました。

アイコンや画像が使える「ボックスメニュー」ショートコードの使い方
アイコンフォントや画像用いて、視覚的にわかりやすいボックスタイプのメニューを表示するショートコード機能の説明です。

\エックスサーバー開発のWordPressテーマ/
エックスサーバー開発のWordPressテーマ

ボックスメニューを利用するとこんなことができる

サイドバーで使用した場合はこんな感じで2列になります。

ボックスメニュー(サイドバー)

本文中で利用した場合は、こんな感じで4列になります。

ボックスメニュー(本文中)

コンテンツ上部・下部で表示した場合は、こんな感じで6列になります。

ボックスメニュー(コンテンツトップ・ボトム)

キーカラーを変更すると、色が反映されます。

キーカラーを変更したボックスメニュー

以下のように独自画像を指定してメニューも作成できます。

ボックスメニュー(画像アイコン)

画像アイコン FLAT ICON DESIGN

ボックスメニューを利用する主な手順

ボックスメニューを利用するための主な手順はこれだけ。

  1. WordPressメニューを作成する
  2. ボックスメニューをショートコードで呼び出す

大まかな設定方法はこれだけです。以下で詳しく方法を説明します。

WordPressメニューを作成する

メニューの作成は、WordPressのグローバルナビの作成方法と同じです。

まずはWordPress管理画面から「外観→メニュー」を選択します。

外観からメニューを選択する

新規メニューの作成

メニュー画面で「新しいメニューを作成しましょう」リンクから新規メニューを作成します。

メニュー画面で新規メニューの作成

「メニュー名」を入力して「メニューを作成」ボタンを押します。

メニューでボックスメニューを作成

表示オプションの設定

メニューを作成したら「表示オプション」から「CSSクラス」と「説明」を有効にしておきます。

表示オプションからCSSクラス等説明を有効化

メニュー項目の追加

「メニュー項目を追加」からナビカードを作成したいメニューを選択していきます。

メニュー項目を追加からメニュー作成

メニューの追加例がこちら。

ボックスメニューのメニュー構造例

個別メニューの設定を行う

次に個々のメニューに対して「タイトル(ナビゲーションラベル)」、「アイコン(CSS class)」、「サブキャプション(説明)」を入力します。

入力例がこちら。

ボックスメニューの個別メニューの入力例

  1. 「ナビゲーションラベル」にタイトルを入力してください
  2. 「CSS class」にアイコンフォントのクラス名を入力します(Font Awesome4、Font Awesome5)
  3. 「説明」にサブメニューキャプション(サブタイトル)を入力してください

Font Awesomeアイコンの入力例

Font Awesomeアイコンは、4でも5でも入力できます。

ただしCocoon設定の「全体」タブにある「サイトアイコンフォント」の設定に依存します。

サイトアイコンフォントの設定に依存

上記の設定で、Font Awesome4利用するか、Font Awesome5を利用するか切り分けてください。

Font Awesome4でアイコンを設定する

Font Awesome4でアイコンを設定するには、アイコンページから好みのアイコンを選択してください。

Font Awesome Icons
Font Awesome, the iconic font and CSS framework

個別ページからアイコンのクラス名をコピーします。

Font Awesome4のクラス名を取得する

あとは、メニューの「CSS class」部分に貼り付けます。

CSS classに貼り付ける

Font Awesome5でアイコンを設定する

Font Awesome5でアイコンを設定するには、アイコンページから好みのアイコンを選択してください。

Find Icons with the Perfect Look & Feel | Font Awesome
Used by millions of designers, devs, & content creators. Open-source. Always free. Check out the all-new Sharp Solid ico...

個別ページからアイコンのクラス名をコピーします。

Font Awesome5の個別ページからクラス名をコピーする

あとは、メニューの「CSS class」部分に貼り付けます。

Font Awesome5クラスをCSS classに貼り付ける

画像をアイコンとして利用する場合

画像をアイコンとして利用する場合は、「メディア → 新規追加」から画像をアップロードしておいてください。

アイコン用画像のアップロード

次に「外観 → メニュー」を開きます。その後「表示オプション」から「タイトル属性」を選択してください。

表示オプションからタイトル属性を選択

アップロードした画像からURLをコピーします。

アップロードアイコンからURLを取得

その後、個別メニューの設定項目で「タイトル属性」に対してURLを入力してください。

画像はアイコンメニューの入力

  1. 「ナビゲーションラベル」にタイトルを入力してください
  2. 「タイトル属性」に画像アイコン用のURLを入力してください
  3. 「説明」にサブメニューキャプション(サブタイトル)を入力してください
「タイトル属性」は、本来HTML要素のtitle属性の値を入れるためのものだとは思いますが、今回は画像のURL用として利用しています。本来の使われ方ではないのはご容赦ください。

個別メニューごとに新しいタブでリンクを開く場合

新しいタブでボックスメニューのリンクを開く場合は、「表示オプション」から「リンクターゲット」を有効にしてください。

すると個々のメニュー項目に「リンクを新しいタブで開く」という項目が出てくるので有効にします。

「リンクを新しいタブで開く」が有効になっていると、そのメニューはブラウザの新しいタブで開かれます。

メニューの保存

上記までのような設定を個々のメニューに対して行い、最後に「メニューを保存」ボタンを押してください。

ボックスメニューの保存

ウィジェットの設定

ウィジェットの設定はWordPress管理画面の「外観 → ウィジェット」から行います。

「ボックスメニュー」ウィジェットを表示したいウィジェットエリアにドラッグ&ドロップで移動します。

ボックスメニューウィジェットをウィジェットエリアに設置する

あとは作成したメニューを「メニュー名」ドロップダウンリストから選択します。

ボックスメニューウィジェットからメニュー名を選択する

表示例

「ボックスメニュー」ウィジェットを「サイドバーウィジェットエリア」に入れた場合はこんな感じの表示になります。

サイドバーにボークスメニューウィジェット入れた表示で

「コンテンツトップウィジェットエリア」に入れた場合は、以下のように6列になります(モバイルでは2列)。

ボークスメニューウィジェットをコンテンツトップウィジェットエリアに入れた場合

実際の動作などは、以下のフォーラムページを参照してみてください。

Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。 1つのトピックにつき1つの質問を書き込んでください 不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります...

まとめ

ボックスメニューショートコードをウィジェット化したことにより、ショートコード作成という手間をかけるとも、ボックスメニューを使えるようになりました。

ただ、ボックスメニューを本文中に表示させるには、ショートコードを利用したほうが便利かと思います。

アイコンや画像が使える「ボックスメニュー」ショートコードの使い方
アイコンフォントや画像用いて、視覚的にわかりやすいボックスタイプのメニューを表示するショートコード機能の説明です。

ボックスメニューは、ヒートマップツールなどで見ても、とてもタップ(クリック)されやすいメニューになります。

上手に利用利用すれば、分かりやすいサイトになり、サイト回遊率もアップも図れる機能化と思います。

参考

今回のボックスメニューのデザインは、ぽんひろ.comを運営されているぽんひろさんの以下の記事を参考にさせていただきました。

ボックス分けされたナビを作る!回遊率をアップしよう!
区分けされたナビゲーションをHTMLとCSSで作ります。単純なグローバルナビゲーションよりも視認性が高く、スマホでタップしやすいのでユーザーに優しいインタフェースになっています。HTMLとCSSがわからない初心者向けでコピペで簡単に作れるよ...

ぽんひろさんは、Cocoonのseasonスキンの作者でもあります。

Cocoonのカスタマイズ記事も多数書いておられます。

【30通り以上!】Cocoonカスタマイズ!コピペで簡単!
Cocoonのカスタマイズまとめです。おしゃれなものから機能性をあげるものまで紹介します。プロフィール、タブ切り替え、トップページ、リスト、ボックス、スマホのメニュー固定方法なども紹介していきます。
タイトルとURLをコピーしました