2020.02.02この記事は約2分で読めます。2.0.7にて「ボックスメニュー」がウィジェットでも利用できるようになりました。ボックスメニューショートコードを利用せずとも、ウィジェットを放り込んで設定するだけで手軽に利用できるようになりました。アイコンや画像が使える「ボックスメニュー」ショートコードの使い方アイコンフォントや画像用いて、視覚的にわかりやすいボックスタイプのメニューを表示するショートコード機能の説明です。表示例まとめ参考\エックスサーバー開発のWordPressテーマ/ボックスメニューを利用するとこんなことができるサイドバーで使用した場合はこんな感じで2列になります。本文中で利用した場合は、こんな感じで4列になります。コンテンツ上部・下部で表示した場合は、こんな感じで6列になります。キーカラーを変更すると、色が反映されます。以下のように独自画像を指定してメニューも作成できます。DESIGNボックスメニューを利用する主な手順ボックスメニューを利用するための主な手順はこれだけ。WordPressメニューを作成するボックスメニューをショートコードで呼び出す大まかな設定方法はこれだけです。以下で詳しく方法を説明します。WordPressメニューを作成するメニューの作成は、WordPressのグローバルナビの作成方法と同じです。WordPress管理画面から「外観→メニュー」を選択します。新規メニューの作成メニュー画面で「新しいメニューを作成しましょう」リンクから新規メニューを作成します。「メニュー名」を入力して「メニューを作成」ボタンを押します。表示オプションの設定メニューを作成したら「表示オプション」から「CSSクラス」と「説明」を有効にしておきます。「メニュー項目を追加」からナビカードを作成したいメニューを選択していきます。メニューの追加例がこちら。class)」、「サブキャプション(説明)」を入力します。Awesomeアイコンは、4でも5でも入力できます。Cocoon設定の「全体」タブにある「サイトアイコンフォント」の設定に依存します。Awesome5を利用するか切り分けてください。Awesome4でアイコンを設定するには、アイコンページから好みのアイコンを選択してください。frameworkfontawesome.com個別ページからアイコンのクラス名をコピーします。class」部分に貼り付けます。Awesome5でアイコンを設定するには、アイコンページから好みのアイコンを選択してください。ico...fontawesome.com個別ページからアイコンのクラス名をコピーします。class」部分に貼り付けます。新規追加」から画像をアップロードしておいてください。メニュー」を開きます。その後「表示オプション」から「タイトル属性」を選択してください。アップロードした画像からURLをコピーします。その後、個別メニューの設定項目で「タイトル属性」に対してURLを入力してください。「ナビゲーションラベル」にタイトルを入力してください「タイトル属性」に画像アイコン用のURLを入力してください「説明」にサブメニューキャプション(サブタイトル)を入力してください「タイトル属性」は、本来HTML要素のtitle属性の値を入れるためのものだとは思いますが、今回は画像のURL用として利用しています。本来の使われ方ではないのはご容赦ください。新しいタブでボックスメニューのリンクを開く場合は、「表示オプション」から「リンクターゲット」を有効にしてください。すると個々のメニュー項目に「リンクを新しいタブで開く」という項目が出てくるので有効にします。「リンクを新しいタブで開く」が有効になっていると、そのメニューはブラウザの新しいタブで開かれます。上記までのような設定を個々のメニューに対して行い、最後に「メニューを保存」ボタンを押してください。ウィジェット」から行います。「ボックスメニュー」ウィジェットを表示したいウィジェットエリアにドラッグ&ドロップで移動します。あとは作成したメニューを「メニュー名」ドロップダウンリストから選択します。「ボックスメニュー」ウィジェットを「サイドバーウィジェットエリア」に入れた場合はこんな感じの表示になります。「コンテンツトップウィジェットエリア」に入れた場合は、以下のように6列になります(モバイルでは2列)。実際の動作などは、以下のフォーラムページを参照してみてください。Cocoonフォーラム書き込みの前に以下の3点をご確認ください。該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります...wp-cocoon.com2023.01.25まとめボックスメニューショートコードをウィジェット化したことにより、ショートコード作成という手間をかけるとも、ボックスメニューを使えるようになりました。ボックスメニューを本文中に表示させるには、ショートコードを利用したほうが便利かと思います。アイコンや画像が使える「ボックスメニュー」ショートコードの使い方アイコンフォントや画像用いて、視覚的にわかりやすいボックスタイプのメニューを表示するショートコード機能の説明です。wp-cocoon.com2022.12.01ボックスメニューは、ヒートマップツールなどで見ても、とてもタップ(クリック)されやすいメニューになります。上手に利用利用すれば、分かりやすいサイトになり、サイト回遊率もアップも図れる機能化と思います。今回のボックスメニューのデザインは、ぽんひろ.comを運営されているぽんひろさんの以下の記事を参考にさせていただきました。ボックス分けされたナビを作る!回遊率をアップしよう!区分けされたナビゲーションをHTMLとCSSで作ります。単純なグローバルナビゲーションよりも視認性が高く、スマホでタップしやすいのでユーザーに優しいインタフェースになっています。HTMLとCSSがわからない初心者向けでコピペで簡単に作れるよ...ponhiro.comぽんひろさんは、Cocoonのseasonスキンの作者でもあります。Cocoonのカスタマイズ記事も多数書いておられます。【30通り以上!】Cocoonカスタマイズ!コピペで簡単!Cocoonのカスタマイズまとめです。おしゃれなものから機能性をあげるものまで紹介します。プロフィール、タブ切り替え、トップページ、リスト、ボックス、スマホのメニュー固定方法なども紹介していきます。ponhiro.comウィジェット\エックスサーバー開発のWordPressテーマ/\WordPressの情報を発信中!/わいひら無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。高速かつ高い安定性を誇る高性能レンタルサーバー【エックスサーバー】稼働率99.99%以上の高い安定性で、業界トップクラスの高コストパフォーマンスを誇る高品質レンタルサーバーです。Cocoon設定の「スキン」タブで変更できます。