Contents
Cocoonテーマの サイドウィジェット
私はサイトデザインを少しずつ改良していますが、今回はCocoonテーマの サイドウィジェット を画像付きのものに変えてみたいと思います。
オレンジ枠の部分のようになるようにします。
Cocoonテーマにはもともと画像付きサイドウィジェットが用意されています。
その設置手順を説明します。
設置は簡単
１.表示させたいメニューを作る
外観→メニューを開き、新しいメニューを作成します。
このとき、表示のオプションは図のようにチェックしておくと、この後の作業がスムーズになります。
メニュー名はご自由に。私はわかりやすいようにボックスメニューにしました。
メニューを作成をクリック。
①上で作ったメニューを選択
②メニュー名はご自由に
③今回はカテゴリーを表示させたいのでここを開く
④表示させたいカテゴリーをチェック
⑤メニューに追加
⑥カスタムリンクで外部サイトも追加できます。
2.各項目に画像を設定する
ナビゲーションラベルは画像の下に表示される文字列です。
説明はナビゲーションラベルのさらに下に表示される文字列です。
私は空欄にしています。
画像の挿入方法は2種類用意されています。
自分で用意した画像を挿入する時はタイトル属性にアップロードした画像のURLを書き込みます。
URLを調べる方法の記事はこちらをどうぞ。
font awesome のwebフォントを画像にする時はCSS classにfont awesome のコードのクラス名を書き込みます。
例えばclass=”fas fa-walking”←黄色の部分だけペーストする
font awesome についての記事はこちらをどうぞ。
カスタムリンクをメニューにする時はリンク先URLの入力項目が追加されます。
入力が終わったらメニューの順番を整えて、メニューを保存をします。
3.サイドウィジェット を設置する
左メニューの外観→ウィジェットを開きます。
[c]ボックスメニューを追加します。
ちなみにCocoonテーマによって用意されているウィジェットには[c]が付いています。
タイトルに入力した文字はウィジェットのタイトルとして表示されます。
私は『カテゴリー』にしました。
メニュー名では先ほど作成したボックスメニューを選びます。
ウィジェットの設置場所はサイドバーにしました。
位置は検索窓の次に置きたかったので２を選びました。
最後にウィジェットを保存を選んで終了です。
画像が表示されないとき
まずは次の２つを疑ってみてください。
１つはウィジェットに関するプラグインの干渉
もう１つはCocoonのスキンによる干渉
プラグインは無効化して簡単にテストできますが、スキンによる不具合はなかなか気付けません。
私は画像表示系のトラブルを何回か経験しており、それ以来スキンテンプレートで一から作るようにしています。
そのうちの１つを紹介しますので、興味のある方は御覧ください。
