Cocoonのアイコンや画像も使えるボックスメニューの使い方

Cocoonには、便利に使えるショートコードが複数ありますが、今回はアイコンフォントや画像も使えるボックス型のメニューをカスタマイズしてみます。


 

ボックスメニューの使い方

ショートコード1つで記事内でもウィジェットでも、アピールエリアやヘッダー下など、好きな場所にボックス型のメニューを表示出来ます。

使い方は以下の2工程のみですが、メニューの作成時にアイコンフォントを設定したり、画像の設定が必要です。

アイコンフォントを指定しなかった場合の表示は以下のように★マークになります。

 

メニュー作成

外観→メニュー からメニューを作成します。

 

表示オプション

上記のような設定画面になっていない場合は、メニュー編集画面の右上にある「表示オプション」から必要な項目を表示するようにチェックを入れます。

  • CSSクラス
  • 説明

その他の項目もいつでも表示出来ます。

 

注意点

メニューの編集で「リンクを新しいタブで開く」設定にしても、このボックスメニューではそちらは効かず、同じタブで開く仕様でしたが

Ver.2.1.3~ ボックスメニューショートコードにリンクの開き方を変更できるtargetオプションが追加されました。

[box_menu name="メニュー名" target="_blank"]

 

但し、ボックスメニュー全体のターゲット指定になる為、

個別のメニューで同じタブだったり新しいタブだったりといった指定は不可能。

外部リンクだけを新しいタブで開きたい場合

公式サイトに紹介されている方法で、

function.phpに以下のコードを追記する事で可能です。

 

PHP

//ボックスメニューのリンクを外部リンクだけ「新しいタブ」で開く
add_filter('box_menu_link_target', function ($target, $url){
  if (!includes_home_url($url)) {
    $target = '_blank';
  }
  return $target;
}, 10, 2);

 

 

function.phpは重要なファイルですのでバックアップを取るなどの対応をした上、子テーマのファイルに追記して下さい。

 

CocoonでのPHPファイル編集を伴うカスタマイズについて
Cocoonに限らずですが、PHPファイルを編集するのはリスクが伴います。 最初から子テーマに用意されているものと、親テーマにしかないものがあり、特に親テーマにしかないファイルを触りたい場合には手順がありますのでまとめておきます。 親テーマ...

 

アイコンフォントの使い方

アイコンフォントは Cocoon設定全体 の設定を確認し、対応するバージョンから使いたいアイコンフォントを探してコードを入力します。

 

 

Font Awesome Ver.4.7.0

Font Awesome Ver.5.0~

上記リンクより、使いたいフォントを選びます。

選択すると、アイコン詳細画面が開きます。

上にコードが出ていますのでクリックするとコピー出来ます

上記の例であれば以下の部分を

fas fa-apple-alt

 

CSS class(オプション)」の欄に貼り付けます。


以下では、よく使うアイコンフォントのコードをコピーできる一覧にしていますのでよろしければご利用下さい。(Font Awesome Ver.5.0~)

 

WordPressメニューの基本的な作り方については以下をご覧ください。

 

ボックスメニューを表示する

サイドバーやヘッダー下などに表示する場合

「(C)ボックスメニュー」ウィジェットを挿入。

表示するメニューを選択します。

 

記事内に挿入する場合

表示したい場所にショートコードを記述します。

 

記事内ならそのままショートコードを記述。

作成したメニュー名を入れて記述します。

↓ ここはクリックしてコピー出来ます。
[box_menu name="メニュー名"]

 

新しいタブで開きたい場合は、「target=”_blank”」を追記します。

※初期値 target=”_self”(同じタブで開く)

↓ ここはクリックしてコピー出来ます。
[box_menu name="メニュー名" target="_blank"]

 

アイコンフォントではなく、画像を利用する事も可能です。

詳細は以下の公式サイトをご覧ください。

 

プチ・カスタマイズサンプル

Before

After

 

余白、枠線、枠線角丸め、フォントサイズ、オンマウス時の背景色設定などを変更しています。

カスタマイズ方法

簡単なCSS追記のみです。

CSS追記は以下のいずれかから行って下さい。

外観→カスタマイズ追加CSS

外観→テーマエディターstyle.css

 

CSS

以下のCSSの必要な部分をお使いください。

.box-menus{
margin:2px; /*全体の外側余白*/}
.box-menu{
border: 1px solid #839b5c; /*枠線の形状・色*/border-radius: 10px; /*枠線の角丸み*/padding: 0; /*枠内余白*/}
.box-menu:hover { /*オンマウス時*/box-shadow: inset 1px 1px 0 0 #839b5c,
 1px 1px 0 0 #839b5c, 1px 0 0 0 #839b5c;
border-radius: 10px; /*枠線角丸*/background: #5d5855; /*背景色*/color:#fff; /*文字色*/}
.box-menu-label{ /*メニューの文字*/ font-size: 16px; /*文字サイズ*/}
.box-menu-description{ /*説明文の文字*/ font-size: 12px; /*文字サイズ*/}
.box-menu-icon { /*アイコン*/font-size: 30px; /*アイコンサイズ*/color: #839b5c; /*アイコンカラー*/}

 

カラーの変更

お好きなカラー設定には以下もご利用下さい。

マカロンビビッドパステル伝統色和色セーフ色名

 

 

綾糸: 綾糸 主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています