Cocoon ボックスメニューの作り方

Cocoon|ページのタイトルを非表示 Cocoon
スポンサーリンク

上の画像の様なボックスメニューの作り方を簡単に説明していきたいと思います。

1.管理画面の「外観」→「メニュー」をクリック

メニューが表示されます。

2.「メニュー名」を入力し「メニューを作成」をクリックする

※赤い枠の中のメニュー名は何でもいいですよ!

今回は「boxmenu」というメニュー名で進めていきたいと思います。

3.画面右上にある「表示オプション」をクリック

4.「タイトル属性」「CSSクラス」「説明」にレ点チェックを入れ有効にする

5.メニュー項目を追加する

固定ページ・投稿ページ・カスタムリンク・カテゴリーなどからメニューに追加したい項目にレ点チェックをし、「メニューに追加」をクリックする。

下の画像のようにメニューできると思います。

6.メニューの項目をクリックする

7.「ナビゲーションラベル」「タイトル属性」「※説明」を入力する

・ナビゲーションラベル:画像の下に表示されるタイトル文字です。

・タイトル属性:表示したい画像のURLを入力してください。

※メディアライブラリからURLをコピーする方法

・説明:タイトル文字の下に表示される文字です。

7-1.管理画面の「メディア」→「ライブラリ」をクリック

7-2.表示したい画像をクリックする

7-3.リンクをコピーという項目をコピーする

7-4.タイトル属性項目にURLを入力(ペースト)

全ての入力をし終えたら、

8.「メニューを保存」クリックする

9.ショートコードを入力し、表示させる

9-1.表示させたい固定・投稿ページを開き

9-2.表示させたい箇所に、「ウィジェット」→「ショートコード」をクリック

9-3.ショートコードを入力

「メニュー名」の文字はメニューでつけた名前を入力してください。

この記事のショートコードは、

です。

10.ボックスメニューの表示

説明を入力しなかった場合

説明を入力した場合

11.ボックスメニューのまとめ

簡単に作ることができる便利でおしゃれなメニューなのでぜひ作ってみて下さい。

本当、、、Cocoonのショートコード機能凄い便利すぎるだろう!!!

コメント

タイトルとURLをコピーしました