新着情報のレイアウトパターンいろいろ(マルチカラム・タブ・カルーセルなど)

WordPress個別サポート

WordPressサイトで新着情報といえば一覧表示するパターンが多いですが、プラグインを使えばもう少し違ったパターンでレイアウトすることができます。

ここでは、グリッドレイアウトを作成できるWP Canvas - Shortcodesプラグインと投稿を一覧表示できるList category postsプラグインを組み合わせて、固定ページに新着情報をレイアウトする例を紹介します。

具体的なショートコードは省略しますが興味がある方はWordPress個別サポートで対応いたしますので気軽にご相談ください。

複数カテゴリーの新着情報を2列に表示

複数カテゴリーの新着情報を一覧表示する場合、横に並べて表示したいこともあります。PHPとCSSを駆使すると面倒ですがプラグインを使えば簡単です。WP Canvasプラグインで2列のレイアウトを作って、その中にList category postsプラグインで好きなカテゴリーの新着情報を一覧表示すれば完成します。

2つのカテゴリーを横に並べて表示
2つのカテゴリーの新着情報を横に並べて表示

サイドバーなしのテンプレートに対応したテーマであれば3つのカテゴリーを横に並べてもよいでしょう。

3つのカテゴリーの新着情報を横に並べて表示
3つのカテゴリーの新着情報を横に並べて表示

画像付き最新記事1件+タイトル一覧5件

有料テーマでよく見るレイアウトですが、2カラムを使って左に最新の1件のみ画像付きで表示し、右には5件の新着情報を表示するレイアウトも可能です。1カテゴリーの新着情報の見せ方に変化を付けることができます。

左に画像付き最新記事・右に記事タイトルを一覧表示
左に画像付き最新記事・右に記事タイトルを一覧表示

タブ形式で表示する新着情報

複数カテゴリーを表示したいけどコンテンツ幅が気になる場合は、タブ形式でカテゴリーの新着情報を表示する方法があります。狭い範囲に多くの情報を整理することができて便利です。

タブ形式で複数カテゴリーの新着情報をスッキリまとめる
タブ形式で複数カテゴリーの新着情報をスッキリまとめる

新着ではない「おすすめ記事」の表示

新着情報では埋もれてしまう古い記事を個別にピックアップして「おすすめ記事」として表示することもできます。3列、4列にレイアウトするイメージですが、このパーツを2つ作れば6記事、8記事くらいまで表示することもできるでしょう。

新着ではない「おすすめ記事」をピックアップして個別に表示
新着ではない「おすすめ記事」をピックアップして個別に表示

画像が横にスライドするコンテンツカルーセル

おすすめ記事や紹介したいサービスがいくつもある場合は、3列や4列だと足りないかもしれません。その場合、画像が横にスライドしていくコンテンツカルーセルにまとめる方法があります。ショッピングサイトなどでよく見るスタイルです。狭い幅を活かして多くの記事やページ、商品、サービスを紹介できます。

複数ページが横にスライドするコンテンツカルーセル
複数ページが横にスライドするコンテンツカルーセル

画像だけを見せるポートフォリオ(作品集)

画像を強調してポートフォリオ(作品集)を見せたい場合はアイキャッチ画像などを一覧表示する方法があります。

画像を並べたポートフォリオ(作品集)
画像を並べたポートフォリオ(作品集)

画像サイズを変えて変化を付けてもよいでしょう。

ポートフォリオの最新3件のみ画像サイズを大きくする
ポートフォリオの最新3件のみ画像サイズを大きくする

WordPressの使い方