ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

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

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

この記事でわかること

テーマLightning G3において、固定ページ(特にサイトのフロントページに指定した場合)に記事一覧を表示させる3つの方法を紹介します。

①ウィジェット”VK最近の投稿”を使う
②ブロック”最新の投稿”を使う
③ブロック”クエリーループ”を使う

上記の紹介のあと、②③の方法としてデモサイトでの事例も紹介します。

また最後に、有料版のG3 Proを使った場合の違いも紹介します。

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

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

”VK最近の投稿”でできること
  • サムネイルつき、サムネイルなしを選択できる
  • 公開日順・更新日順を選択できる
  • 表示記事数の指定が可能
  • 記事タイプには投稿・固定ページ・カスタム投稿から選択できる
  • カテゴリーやタグも指定できる
  • リンク先ボタン(テキスト)を表示できる

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

G2の頃の記事一覧表示
Lightnin G2でトップコンテンツエリア上部に記事一覧表示の例

しかし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最近の投稿”ウィジェットを使って記事一覧を表示することができます。

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

  • ブロックを使ったコンテンツ制作になっておらず、コンテンツ制作の自由度が低い
    (テーマの準備したウィジェットの機能に依存してしまう)
  • フロントページにしかこの手法は使えない
  • ”VK最近の投稿”ウィジェットではサムネイルサイズが選べない
    (150×150pxのサムネイル画像を80×80pxで表示)

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

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

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

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

”最新の投稿”ブロックでできること
  • 記事本文の表示ができる(抜粋・全文を選択可能)
  • 投稿者名の表示が可能
  • 投稿日の表示が可能
  • アイキャッチ画像の表示が可能
    (サイズはテーマが設定したサムネイルサイズから選択できる。画像のレイアウトも左・中央・右・回り込み)
  • 並び順を新しいもの順・古いもの順で選択可能
  • カテゴリーの指定が可能
  • 投稿者の指定が可能
  • 記事数の設定が可能

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

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

記事の間隔や文字サイズ・文字色などは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表示で全体が左に寄り過ぎるのも調整してあります。

お知らせCSS反映後

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

お知らせスマホ表示

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

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

新商品一覧の表示

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

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

1.クエリーパターンの選択

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

クエリーパターンの選択

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

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

3.クエリーブロックの設定

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

クエリーループブロックの設定

以上で、新商品の一覧表示は次のようになります。
(デモサイトで新商品の記事数が3つだけなので3つの商品表示になっています。)

新商品の一覧表示(デフォルトデザイン)

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

/* フロントページ新商品 一覧(.newproducts-post-list)のスタイル調整 */
.wp-block-query.newproducts-post-list .wp-block-post-template.is-flex-container {
	justify-content: space-between;
}
.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;
	}
}

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

新商品一覧表示(カスタムCSS反映後)

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

新商品一覧スマホ表示

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

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

5記事目を左詰めとしたい場合(2021年11月29日追記)

上記で紹介したCSSの場合、記事が5つの場合には次のように表示されます。

クエリーループをカスタムCSSで5記事表示

トップページなのでこのままでもよいかな、と考えていたのですが、セミナー受講者さんから5記事目を左に詰めたいとの声があったので左詰めにするCSSも紹介しておきます。

手法としては5記事目にmargin-right: auto;を付けて自動的に左へ寄せ、あとは左marginの調整をするだけです。(それに伴いスマホ表示の記述も若干修正が必要です)

/* フロントページ新商品 一覧(.newproducts-post-list)のスタイル調整 */
.wp-block-query.newproducts-post-list .wp-block-post-template.is-flex-container {
	justify-content: space-between;
}
.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;
}
.wp-block-query.newproducts-post-list .wp-block-post-template.is-flex-container>li:nth-of-type(3n-1):last-child {
	margin-right: auto;
	margin-left: 15px;
}
@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-post-template.is-flex-container>li:nth-of-type(3n-1):last-child {
		margin-right: 0;
		margin-left: 0;
	}
}
.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;
	}
}

これで左詰めとなります。

クエリーループをカスタムCSSで5記事表示左詰め

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

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

VK投稿リストによる新商品一覧

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

VK投稿リストのホバー

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

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

Lightningの有料版であるLightning G3 Pro Packはサブスクリプションとなっており、ライセンス期間により次のようになっています。

無料版テーマLightning無料
Lightning G3 Pro Pack 1年ライセンス9,900円
(税込)
Lightning G3 Pro Pack 3年ライセンス26,400円
(税込)
Lightning G3 Pro Pack 5年ライセンス39,600円
(税込)
※価格は2021年10月24日現在のものです
Lightning G3 Pro Packに含むもの
  • テーマ機能拡張プラグインLightning G3 Pro Unit
  • ブロック追加プラグインVK Blocks Pro
  • テーマLightning Pro(旧製品)
  • ライセンスキー

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

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

まとめ

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

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

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


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

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


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

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

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

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

Lightning G3 Pro Pack(アップデート期間1年)
Lightning G3 Pro Pack(アップデート期間3年)
Vektor WordPress Solutions

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる