cocoonでフロントページを強化する方法

2021年7月4日現在のフロントページイメージ

些事日誌ではWordpressに国産無料スキンcocoonを使いカスタマイズをしています。スタート時から半年を経て記事数がおよそ100本と一定量貯まったことと、力を入れて書いた記事を前面に押し出したい思いからフロントページをデフォルトの時系列表示から変えていくことにしました。

カスタマイズのビフォーアフター

時系列表示から見てもらいたい記事をより押し出すなど以下3つの改修を行いました。

  1. おすすめ(したい)記事の固定一覧表示
  2. 最新記事の強調
  3. アクセスの多い記事の紹介

カスタマイズ前;ブログスタイル(時系列表示)

ブログスタイル;記事をタイル状に時系列で表示
ブログスタイル;記事をタイル状に時系列で表示

カスタマイズ後;サイトスタイル(強弱をつけた表示)

カスタマイズ後;①おすすめ記事の掲出、②最新記事の強調、③アクセス数の多い記事の掲出を実施
カスタマイズ後;①おすすめ記事の掲出、②最新記事の強調、③アクセス数の多い記事の掲出を実施

おすすめ記事を固定で一覧表示

おすすめ記事を抜き出し、表示するにはWordpress とcocoon、2つの設定を組み合わせることで可能です。もっともWordpress単体でも一覧メニューは作成可能ですが、cocoonの「おすすめカード」を設定することでより見栄えの良い一覧を作成できます。

STEP1:WordPress でメニューをつくる)

管理画面;外観>メニューで新規メニューを作成。一押ししたい記事を集める。
管理画面;外観>メニューで新しいメニューを作成を選び、表示したい記事を選びます。

STEP2:cocoonのおすすめカードを設定する

「おすすめカード」はWordpressで設定したメニューをもとにカード形式で一覧を構成する機能です。STEP1で設定を行なったメニューを選び設定します。

管理画面;cocoon設定>おすすめカード…

「おすすめカード」の設定詳細はcocoonの以下のページを参照ください。

https://www.google.com/amp/s/wp-cocoon.com/recommended-cards-widget/%3famp=1

WordPressの標準機能でも対応できる
特定の記事の表示優先順位を変えるだけであればWordpressの標準機能でも可能です。記事編集画面「投稿設定」で「フロントページに記事を固定表示」の項目を有効にするこも可能で、有効にすることで、時系列に囚われずに設定した記事を先出し表示することが可能です。複数記事に設定した場合は設定した記事を時系列順に表示します。

最新記事を強調して表示

記事一覧の表現方法を変更する

記事一覧の表示スタイルを決めるものがcocoonのカードタイプ設定です。この設定はcocoon設定>インデックスにあり、カードタイプを変更することで行えます。

ここではより最新の記事を目立たせるように「大きなカード(先頭のみ)」を選択しました。

「大きなカード(先頭のみ)」を選び、記事一覧に変化をつける
管理画面;cocoon設定>インデックスでカードタイプを選び、見え方を変更

サイドメニューに「人気記事」を表示

アクセスの多い記事は興味を持つ人が多いことが期待され、そうした記事を明示することでユーザのサイト内回遊率を上げることが期待できます。そこでサイドメニューに表示することで、そうしたチャンスを確保したいと思います。

ウィジットで対応

アクセスランキングに基づく記事の一覧はcocoonをインストールすることで使用できるウィジェットです。外観>ウィジェットにある「人気記事」が該当します。サイドメニューに「人気記事」のウィジットを登録し設定すれば表示可能です。

管理画面;外観>ウィジェットでサイドメニューに「人気記事」のウィジットを登録し設定
管理画面;外観>ウィジェットでサイドメニューに「人気記事」のウィジットを登録し設定

本文中での表示も可能

なお、このウィジェットはcocoonのショートにコードを利用してページ中任意の場所に埋め込むことも可能です。サイドメニューでなくメインのカラム内に表示させたい時にも下記のように利用できます。ここでは上位3記事をピックアップして紹介するように設定しています。固定ページでフロントページを作成する際に利用できるテクニックです。

涙で救えるのは自分だけだよ
ハナマサ プロ仕様牛丼のたれ
これ!BEATS STUDIO BUDS

「人気記事」のウィジェットについてはcocoonの以下ページも参照ください。

Cocoonデフォルトのウィジェット機能まとめ
Cocoonのデフォルト状態で利用できるウィジェット機能を見やすくまとめてみました。

コメント

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