【テーマLightning G3でサイト制作】固定ページに記事一覧を表示する方法（有料版との比較あり）

2022年11月24日

2021年5月にG3（ジェネレーション３）に大幅リニューアルしたワードプレスの無料人気テーマLightningで、固定ページに記事一覧を表示する方法を紹介します。

特にフロントページに固定ページを指定するホームページ型サイトにおいては、記事一覧をどのように設置したらよいか気になるところですね。

※ワードプレス5.9でクエリーループブロックにgapプロパティが付与されるようになったため、本記事で紹介しているCSSコードを一部修正しました（2021年1月27日）

ウィジェット”VK最近の投稿”を使う

Lightningには記事一覧を表示するのに便利なウィジェット”VK最近の投稿”というウィジェットが準備されています。次の点で高機能なウィジェットです。

実際、ウェブチルで開催中のセミナーではLightnng G2の頃は”VK最近の投稿”を使って、固定ページで作成したトップページのウィジェットエリア”トップコンテンツエリア上部”にカテゴリー別やカスタム投稿一覧を表示させていました。

しかしLightning G3ではウィジェットエリア”トップページコンテンツエリア上部”が廃止されたため、この方法は一見使えなくなりました。

Lightning G3で”トップコンテンツエリア上部”を使えるようにする

しかしながら、functions.phpに次のコードを追記するだけで、”トップコンテンツエリア上部”が使えるようになります（Vektor,,inc参考ページ）。

function my_lightning_widgets_init_home_top() {
	register_sidebar(
		array(
			'name'          => __( 'Home content top', 'lightning' ),
			'id'            => 'home-content-top-widget-area',
			'before_widget' => '<div class="widget %2$s" id="%1$s">',
			'after_widget'  => '</div>',
			'before_title'  => '<h2>',
			'after_title'   => '</h2>',
		)
	);
}
add_action( 'widgets_init', 'my_lightning_widgets_init_home_top' );

function my_lightning_widgets_add_home_top() {
	if ( is_front_page() ) {
		if ( is_active_sidebar( 'home-content-top-widget-area' ) ) {
			dynamic_sidebar( 'home-content-top-widget-area' );
		}
	}
}
add_action( 'lightning_main_section_prepend', 'my_lightning_widgets_add_home_top' );

これでG2のときと同じくLightning G3でも”VK最近の投稿”ウィジェットを使って記事一覧を表示することができます。

しかしこの方法には次のデメリットがあります。

そこでここから先は、Gutenbergブロックを使った記事一覧表示を紹介していきます。

ブロック”最新の投稿”を使う

もともとGutenbergにデフォルトで準備されている”最新の投稿”ブロックを使うと次のような表示ができます。
（このウェブチルサイトの最新の投稿５つを表示しています。わかりやすくするためにグループ化してグレーの背景と枠線をつけてあります）

上記では記事のタイトルしか表示していませんが、”最新の投稿”ブロックでは他にも次の設定が可能です。

例えば、サムネイル小と投稿日をつけると以下の通りです。

また、グリッドレイアウトも選択できます。

記事の間隔や文字サイズ・文字色などはCSSで調整したくなるレベルですが、なかなかの高機能です。

ただし記事タイプは投稿のみで、固定ページとカスタム投稿は選択できません。固定ページやカスタム投稿の一覧は次に説明するクエリーループブロックを使うとよいでしょう。

ブロック”クエリーループ”を使う

”クエリーループ”ブロックはワードプレスversion5.8にてリリースされた新しいブロックなので今後スペックが変更される可能性やデザイン的に未完なところがありますが、以下の点で”最新の投稿”ブロックより優れています。

• 一覧表に表示する項目をブロックとして配置するので項目の表示順やレイアウトの自由度が高い。
  配置できるブロック：”投稿タイトル”、”投稿コンテンツ”、”投稿日”、”投稿の抜粋”、”投稿のアイキャッチ画像”
• 記事タイプとして、投稿・固定ページ・カスタム投稿　を選択できる。

こちらの記事でクエリーループブロックについて詳細を説明しています。参考にしてください。

また実際にクエリーループブロックを使った記事一覧の表示例は後述を参照ください。

Lightning G3でのサイト制作例にみる記事一覧

Gutenbergブロックを使った事例として、実際に私がセミナーで使用しているデモサイトのトップページ（固定ページ）に表示している記事一覧表を紹介します。

お知らせ一覧を”最新の投稿”ブロックで表示

まず、トップページ上部にお知らせ一覧を表示しています。

このデモサイトの場合、投稿の”お知らせ”カテゴリーを反映させればよいので、”最新の投稿”ブロックを使いました。

トップページの1stビューのすぐ下なので、シンプルに日付とタイトルのみの表示としています。ブロックの設定（Gutenberg画面右のパネル）は以下の通りです。

ただし、これをweb表示させると次の通りです。
（デモサイトなのでお知らせの投稿は2件だけです）

上記のデザインだとタイトルの下に日付が表示されてしまうので、子テーマのstyle.cssに次のCSSを記述して日付→タイトルの横並びに変更しました。

/* トップページお知らせのスタイル調整 */
.wp-block-latest-posts>li {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
}
.wp-block-latest-posts>li::after {
	display: inline;
	clear: none;
}
.wp-block-latest-posts>li>a {
	width: 60%;
	margin-bottom: 0;
}
.wp-block-latest-posts>li>time {
	width: 40%;
	padding-left: 5em;
}
@media screen and (max-width: 767px) {
	.wp-block-latest-posts>li>time {
		padding-left: 1em;
	}
}
@media screen and (max-width: 575px) {
	.wp-block-latest-posts>li>time {
		padding-left: 0em;
	}
}

CSS反映後は次のようになります。日付とタイトルが左右の並びとなり、PC表示で全体が左に寄り過ぎるのも調整してあります。

スマホ表示（デバイス幅575px以下）ではコンテナ幅いっぱいに広がります。

新商品一覧を”クエリーループ”ブロックで表示

トップページの中ほどに、新商品一覧を表示しています。

このデモサイトの新商品紹介記事は、 通常のブログとは分けておきたいためカスタム投稿を使っています。したがって一覧表の表示にはカスタム投稿でも表示できるクエリループブロックを使用しました。

以下に手順を紹介します。作業は一覧表を表示する固定ページの編集画面（ブロックエディター）を開いて行います。

１．クエリーパターンの選択

アイキャッチ画像とタイトルのみの表示としたいので、まずはクエリーのパターンの中から、”小さな画像とタイトル”を選択しました。

２．タイトルのHTMLタグを<h2>から<h3>に変更

記事タイトルは<h2>として挿入されてしまうので、ページ内の階層構造を守るために<h3>に変更しました。
（サイトの構成によっては必要のない手順です）

３．クエリーブロックの設定

クエリーブロックのツールバーと画面右のパネルの設定は以下の通りです。

以上で、カスタム投稿”新商品”の一覧表示は次のようになります。
（デモサイトで新商品の記事数が３つだけなので３つの商品表示になっています。）

このままではデザインとしてはあれなので、次のカスタムCSSで調整しました。セレクターのクラス名にnewproductsという表記がところどころにあるのは、新商品のカスタム投稿ページのスラッグがnewproductsだからです。

/* フロントページ新商品 一覧（.newproducts-post-list）のスタイル調整 */
.wp-block-query.newproducts-post-list .wp-block-post-template.is-flex-container {
	justify-content: space-between;
	gap: 1.25em 0 !important;
}
.wp-block-query.newproducts-post-list .wp-block-post-template.is-flex-container>li {
	width: calc((100% - 30px) / 3);
	margin-right: 0;
	margin-left: 0;
}
@media screen and (max-width:575px){
	.wp-block-query.newproducts-post-list .wp-block-post-template.is-flex-container>li {
		width: calc((100% - 10px) / 2);
	}
}
.wp-block-query.newproducts-post-list .wp-block-columns {
    flex-direction: column;
    justify-content: space-between;
	align-items: center;
	margin-bottom: 0;
}
.wp-block-query.newproducts-post-list .wp-block-column {
	width: auto;
}
.wp-block-query.newproducts-post-list .wp-block-column:not(:first-child){
    margin-left: 0;
}
.wp-block-query.newproducts-post-list h3 {
	font-size: 16px;
	font-weight: 600;
}
@media screen and (max-width:575px){
	.wp-block-query.newproducts-post-list h3 {
		font-size: 14px;
	}
}

以上でこのような表示となります。

PCでは3列表示ですが、スマホ表示では2列表示としています。

以上の手順で固定ページでの記事一覧表示が投稿・固定ページ・カスタム投稿のいずれも可能です。

ただ、残念ながらクエリーリープブロックは、カスタムCSSでのスタイル調整が必須です。CSSに慣れていない方だと結構時間もかかるでしょう。

有料版VK Blocks Proの”VK投稿リスト”ブロックなら簡単

有料版プラグインVK Block Proの”VK投稿リスト”ブロックを使えば、ブロックの設定だけでこんな記事一覧にすることができます。

アイキャッチ画像にホバー（マウスオーバー）すると、下からカラーオーバレイが移動してきて記事本文抜粋を表示することもできます。

いい感じでおしゃれなデザインですよね。

この記事一覧のデザインは、VK投稿リストブロックの設定で表示タイプに”カード（インテキスト）”を選んだ場合ですが、他にもさまざまなカードタイプやテキストのインライン表示するなどを選択することができます。

有料版プラグインVK Blocks ProはサブスクリプションサービスVektor Passportに同梱されており、ライセンス期間により次のようになっています。

Vektor Passport １年ライセンス	9,900円 （税込）
Vektor Passport ３年ライセンス	26,400円 （税込）
Vektor Passport ５年ライセンス	39,600円 （税込）

Lightning G3 Pro UnitおよびVK Blocks Proはプラグインなので、無料版Lightningですでに構築したサイトでもインストール・有効化すれば、簡単に有料版の機能を使うことができます。

サブスクリプションですが、ライセンス期間終了後も継続して使用が可能です。アップデートとサポートを受けられなくなるだけなので、再度サポートを受けたいというタイミングで再契約すればよいでしょう。

まとめ

固定ページに記事一覧を表示する方法を紹介してきました。まとめると以下の通りです。

①ウィジェット”VK最近の投稿”を使う

この方法は簡単ですが、ウィジェットの機能に依存するためデザインの自由度が低いうえ、フロントページにしか使用できません。

②ブロック”最新の投稿”を使う

このブロックは高機能で使勝手はよいのですが、投稿にしか適用できず、固定ページやカスタム投稿を表示することができません。

③ブロック”クエリーループ”を使う

一番高機能で設計自由度が高いですが、クエリーループ自体は新しいブロックなので、今後機能変更やデザイン変更が入る可能性があります。また実際に使うには、カスタムCSSによるスタイル調整が必須です。

このようにそれぞれ一長一短があって悩むところですね。

しかし、Vektor Passportを使用すれば、簡単にデザイン性の高い記事一覧を表示できます。一度検討してみるのもよいでしょう。