【WordPress】おすすめカードのカスタマイズ

※当サイトでは、アフィリエイト広告を利用しています

WordPress

今回は、おすすめカードのカスタマイズについてまとめていきたいと思います。

Cocoonマニュアルは ⇒ こちら ⇐

私は、WordPressテーマのCocoonを使用していますが、おすすめカードは以下のようなデザインにしています。

このように、オススメしたい記事やカテゴリーなどを表示させることができます。おすすめカードの設定方法について紹介していきます。

おすすめカードの設定方法

まずは、おすすめカードのカスタマイズの流れを説明します。

◆おすすめカードのカスタマイズの流れ◆
1.おすすめカード用のメニューを作成する
2.デザインを整える

1.おすすめカード用のメニューを作成する

まずは、おすすめカードの内容を作成していきます。

1.WordPressメニューの「外観」から「メニュー」を開きます。

2.新しいメニューを作成するときは、上部に表示されている「新しいメニューを作成しましょう。」をクリックします。

3.メニュー名に『おすすめカード』と入力して、「メニューを作成」をクリックします。

4.「メニュー項目を追加」からおすすめカードに並べたいコンテンツを複数選び「メニューに追加」をクリックします。

ヘッダーメニューとして選択できる項目は以下の通りです。

◆選べるコンテンツ
・固定ページ
・投稿
・カスタムリンク
・カテゴリー
・タグ
今回は「投稿」の中からすでに投稿している記事を選びました。
 
5.このように追加したコンテンツが並んで表示されているので、それぞれ「▼」をクリックして表示名を変更します。
 

6.ここに入力した文字が、そのままおすすめカードに表示されるよう設定することができます。

7.すべての表示名を入力したら「メニューを保存」をクリックします。

ここまでで、おすすめカード用のメニューの作成が完了です。

2.デザインを整える

おすすめカード設定

1.WordPressメニューから「Cocoon設定」を開きます。

2.「Cocoon設定」から「おすすめカード」タブを選択し、上から順番に設定していきます。

3.設定内容は以下の通りです。

◆おすすめカード設定◆
・おすすめカードの表示
 →フロントページのみで表示
・メニュー選択
 →おすすめカード
・表示スタイル
 →画像のみ
 ※変更した表示名を使用する場合は、「画像中央に白文字タイトル」を選択
・カード余白
 →おすすめカード毎に余白を設ける
・カードエリア左右余白
 →おすすめカードエリアの左右に余白を設ける
このように各項目にチェックを入れます。

画像設定

1.メニューの「Cocoon設定」から「画像」を開きます。

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

以上でCocoon設定が完了です。

項目ごとに画像を変更したい場合

おすすめカードの表示画像を1つずつ設定変更する場合は、以下の方法で変更することができます。

1.投稿記事の場合は、投稿のアイキャッチ画像を登録することで画像のように変更することができます。

2.カテゴリーをおすすめカードに表示する場合は、「投稿」→「カテゴリー」を選択し、表示させるカテゴリーを選択します。

アイキャッチに表示させたい画像を登録することで、おすすめカードに表示することができます。

今回は、ここまでになります。色々と試してみて、自分に合ったおすすめカードを見つけていけると、印象が変わるので試してみてください。

他のカスタマイズも紹介していますので こちら を参考にしてみてください!

コメント

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