【cocoon】トップページやサイドバーにボックスメニューを設置する方法

カスタマイズ

こんにちは。

サイドバーにあるカテゴリーをボックスメニューに置き換えてみました。
普通のリンク型よりも目につきやすいのでクリックに繋げることが出来ると思います。(未検証ですが(笑))

そんなわけで、今回はトップページやサイドバーにボックス型のメニューを設置する方法です。

このサイトはワードプレス用の無料テーマ『cocoon』を使用しているので、cocoonを使用した設置方法です。
スポンサーリンク

ボックスメニューを作る

メニューの作成方法

まずは表示するためのボックスメニューを作成します。

ダッシュボードから外観を開き、メニューをクリックし、新規メニューを作成。
これはメニューバーを作るのと同じ要領で作れます。
メニューバーの作り方詳細は下記リンクをご覧ください。

cocoonでトップページにメニューバーを設置する方法

 

1つ違うのが、ボックス型のメニューにする場合、表示する場所を設定するための『メニュー位置』にはチェックを入れません。

メニューのタイトルはボックスメニューを設置する際に使用します。
このサイトでは分かりやすく区別するために『ボックス』というタイトルをメニューに付けました。

 

ボックスメニューにはアイコンや画像が必要

ボックスメニューを設置する場合、メニュー名と一緒にアイコンが表示されます。(デフォルトでは全て★マーク。)

これを変更したい場合は、メニューの編集へ行き『タイトル属性』に画像URLなど入力していきます。

画像URLを取得

  1. アイコンにしたい画像をメディアにアップロードしておく。
  2. 使用したい画像をクリック
  3. 画像URLをコピー
  4. 外観→メニュー→メニュー項目の右にある小さい矢印をクリックして追加設定する
  5. タイトル属性に画像URLをコピペ
  6. メニューを保存  

 

Font Awesomeのアイコンを使用する場合

Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
  1. 使用したいアイコンのクラス名をコピーする
  2. メニュー項目のCSS class(オプション)の欄にアイコンのクラス名を貼り付ける
  3. メニューを保存
<i class=”fab fa-wordpress“></i>
fab fa-wordpress
の部分だけでよい

 

 

スポンサーリンク

トップページにボックスメニューを設置する方法

トップページが投稿型の場合

トップページが投稿型の場合は、ウィジェットの『(C)テキスト(PC用)』を、【コンテンツ上部】に追加します。

ウィジェットの追加方法・ウィジェット欄の左側から利用したいウィジェットをクリック
・コンテンツ上部を選択し、ウィジェットを追加をクリック
・追加されたウィジェットの編集は、一欄右側のウィジェットエリアをクリックし、追加されているウィジェットから編集する

テキストの中には下記のショートコードを入力してください。
メニュー名にはメニュー作成時に決めたタイトルを入力します。

すると、コンテンツの上部(メインカラムの上部エリア)にボックスメニューのショートコードを入力したテキストが表示され、コンテンツ上部にボックスメニューが実装される仕組みというわけです。

トップページが固定ページの場合

トップページを固定ページでサイト型にしている場合は、それぞれトップページに指定しているページを開き、表示させたい場所にボックスメニューのショートコードを追加します。

メニュー名にはメニュー作成時に決めたタイトルを入力します。

 

サイドバーにボックスメニューを設置する場合

ダッシュボードの外観からウィジェットを開き、[C]テキスト(PC用)をサイドバーへ追加します。
追加されたテキストボックスの中に、下記のショートコードを入力してボックスメニューを表示させます。

サイドバーに設置すると、メニューが多数あっても自動的に2列づつのボックス表示へと切り替わります。

ウィジェットだけで実装できた

さて、ここまで書いてきましたが、、
ウィジェット欄に『[C]ボックスメニュー』という機能があることに気付いた方もいらっしゃるのではないでしょうか……。

私も、この記事を書いている最中に気が付きました(笑)

 

これまでテキストボックスのウィジェットにショートコードを入力してきましたが、[C]ボックスメニューを利用することでさらに簡単にボックスメニューを実装することが出来ます。

ボックスメニュー設定の方法

  1. メニューを作成する
  2. ウィジェット欄から[C]ボックスメニューを表示させたい場所(コンテンツ上部やサイドバーなど)に追加
  3. 追加した項目で[C]ボックスメニューからメニュー名を選択して表示させたいメニューを選択する

 

ウィジェットvsショートコード

さいごに、余談として(?)ウィジェットで表示させたボックスメニューとショートコードで実装したボックスメニューを比べてみました。

少し余白に違いがありますね。
ウィジェットのボックスメニューの方は幅広く表示されるのに対し、テキストに記入したショートコードでは少し幅が狭くなります。

両方ともCSSで細かな指定は出来ると思いますが、お好きな方法で表示させることができるので、、テキストボックスも見捨てないでください( ;∀;)

 

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