CSS記述無し!【WordPress×cocoon】コクーンでおすすめカードを表示する方法 | ヒメとまいにち

CSS記述無し!【WordPress×cocoon】コクーンでおすすめカードを表示する方法

 

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

 

スポンサーリンク

コクーンでヘッダーにおすすめ記事のカードを設置しよう。

 

2日ほど前に「ヒメとまいにち」サイトのヘッダーを少し変更しました。

気づいてくださった方、どうもありがとうございます。

Cocoonには、カルーセルと呼ばれる「おすすめ記事」などを

自動でスライド表示させてくれる機能(スライダー)が用意されています。

このような。自分の過去記事をアピールしてくれるんですね。

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

ずっとやりたいなーと思っていたんですが、そのまま放置。

なんだかとても難しそう…ではありますが、

意外や簡単な操作で設定することができます。

いわゆる画像が流れて表示されるだけのスライドショーとは異なり、

画像を表示するだけでなく、画像のリンクへ飛ぶこともできます。

 

 

スポンサーリンク

CSS追加記述無しでおすすめ記事をアピールする

 

Cocoon設定から「カルーセル」タブを選択します。

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

カルーセル設定は、「表示しない」がデフォルトになっています。

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

これを表示する、に変更。

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

表示する記事の期間、カテゴリー、タブを選択します。

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

並ぶ替えはランダムでいいでしょう。

最大表示数は1200記事ですが、ここまで設定してしまうのは…どうでしょう。

結局アピールにならない気がします。

表示する数を選び、必要であれば、その他も選択。

「変更をまとめて保存」を忘れずに。

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

たったのこれだけで、このように

おすすめ記事をカルーセル表示をさせる事が出来ます。

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

簡単ですね。ちょっと拍子抜けしました。

自動回転させることで「目を引く」という利点もありますが

「うるさく感じる」という難点もあります。

動かしたくない場合、これだと表示数はぐんと減ってしまいますが、

ウィジエットから表示させる方法もあります。

 

 ウィジエットからおすすめカードを表示させる方法。

外観→メニューから、

編集するメニューを選択します。

メニュー名は何でもいいですが、解りやすいものがいいです。

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

カテゴリーから表示させたいカテゴリーを選択します。

メニュー設定は、「ヘッダーメニュー」を選択。

ここで選んだカテゴリーの数が

カードの表示される数になります。

スマホへ表示される数を考えて、4つが良いとされています。

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

外観→ウィジエットから「おすすめカード」を選択します。

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

表示させたいスタイルを選んで

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

コンテンツ上部を選択します。

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

これでカテゴリータイプのアピールカードが表示されます。

ただ、このままでは画像はnotfound用の画像になってしまうですね。

なので、カテゴリーに合わせた画像を用意して設定します。

cocoon設定から画像を選択し、

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

「Retinaディスプレイ」にチェックを入れます。

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

これでカテゴリごとに設定したサムネイルが表示されます。

 

 どうしても読んでほしい記事がある!と言う場合。

上記のランダムにおすすめ記事が表示されるのではなく、

どうしてもこの記事を目立たせたい、アピールしたい、

読んでほしいんだ、という方は、

外観→メニューから、

メニューを選択し、

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

記事を指定して表示させることもできます。

 

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

記事を選択し終えたら、

コクーン→おすすめカードを選択。

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

表示させる場所を選んで、

表示スタイルを決める。これで、

もう、これは絶対おすすめ、読んでほしい!

と言う記事が表示されます。

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

いずれの場合も変更を保存することをお忘れなく。

このように変わったわたしのブログのヘッダー周りですが、

もともと「ヒメとまいにち」サイトのヘッダーは少し大きいんですね。

これを何とかしようと縮めたら、画像がぼやけてしまいました。

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

これは…作り直しかな。



 

 

 

今日のヒメちー

 

よいしょ、よいしょ。

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

ねぇやん、食べ物ばかりアピールしないで、

ヒメと、もーちゃんとちゃーこさんと

羊毛フェルトのヒメもちゃんとアピールしてくださいね。

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

絶対ですよ。

【Wordpress×cocoon】コクーンでおすすめカードを表示する方法

も、もちろんよー。

まだ試験段階だから、今後細かく調整していくわ。

 

このエントリーをはてなブックマークに追加 ブログランキング・にほんブログ村へ

よろしければ読者登録お願いします。
ヒメとまいにち - にほんブログ村
スポンサーリンク
ブログ ワードプレス
スポンサーリンク
スポンサーリンク
ヒメとまいにち

コメント

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