ほぼほぼ完成です。

《10》ウィジェット

サイドバー等の事です。Cocoonでは多くのウィジェットとウィジェットエリアを用意してくださっています。

ウィジェット設定

管理メニュー

「管理メニュー>ウィジェット」をクリックします。。

 

ウィジェット 画面

図左:利用できるウィジェット です。
図右:ウィジェットエリア です。

 
使えるパーツを『ウィジェット』と呼び、ウィジェットを表示できる場所を『ウィジェットエリア』と呼ぶみたいです。サイドバーだと『サイドバーのウィジェットエリア』って感じですね。
 

使い方 例

サイドバーにサイトのバナー画像を追加する例を紹介します。

画像を追加

図左:利用できるウィジェット から画像を選択して、サイドバーウィジェットを追加します。
図右:サイドバーのウィジェットエリア に画像のボックスが出るので、タイトルを入力して、画像を追加をクリックします。

 

ウィジェットに追加

メディアライブラリが開くので、画像を選択してウィジェットに追加をクリックします。
サイドバーにバナーを設置する場合は[サイズ:中-300x●●●]がフィットします。

 

表示設定

このまま保存で構いません。
緑枠の表示設定をクリックすると、緑細枠が出ます。
ここで、ウィジェットごとにどのページで表示するか非表示にするかを細かく設定出来ます。
このウィジェットはこのカテゴリーには表示したくないという場合は、非表示を選択して、カテゴリーに ✓ を入れます。

 

ページ毎に設定

図は投稿ですが、固定ページも同じ要領です。
記事のID番号を入力します。複数の場合はカンマ(,)で区切ります。

 

記事ID確認方法-A

図は投稿ですが、固定ページも同じ要領です。
記事の編集画面を開いた時に、ブラウザのアドレスバーに表示される[post=数字]の数字の部分です。

 

記事ID確認方法-B

図は固定ページですが、投稿も同じ要領です。
記事のページ一覧を開いて、マウスオンした時に、ブラウザ画面の一番下の左端に表示されるURLの[post=数字]の数字の部分です。

 

保存・完了

ウィジェットが完成したら保存をクリックすると以下のようになります。
サンプルでカテゴリーも開いてみました。開く・閉じるは水色枠の三角です。
ただ、変更を加えた場合は必ず[完了]をクリックしないといけないのですが三角でも閉じてしまえるのです。そのままウィジェット画面から移動しようとすると「保存されてませんよ」というような警告が出ることがあるので、[完了]で閉じれば安心です。
要らないウィジェットは[削除]します。

 


他のウィジェットも色々試してみてください。

サイドバーに関しては、
「Cocoon 設定>全体>サイドバーの位置:左右を選択出来ます。」

 


わたしは普段サイドバーしか使いませんが、他のウィジェットエリアも試してくださいね。