WordPressのカスタマイズやプラグインに関する情報です。
今回は「Astra ✕ Elementor」でトップページに新着情報を表示するカスタマイズ例です。
前回は、無料テーマ「Astra」の記事一覧・個別記事ページをスッキリかっこよくカスタマイズする方法をご紹介しました。
その続きになりますが、記事一覧をトップページに新着情報として横並びに表示してみます。
完成形:トップページに新着情報を横並びに表示する
左側にサムネイルなしのお知らせ記事(NEWS)、右側にサムネイルありのブログ記事(BLOG)を表示したサンプルです。

サムネイルつき記事一覧「Recent Posts Widget Extended」
プラグイン「Recent Posts Widget Extended」をインストールして有効化します。
サムネイルつき記事一覧を表示するプラグインはいくつかありますが、ウィジェットのみ対応のものは固定ページでは簡単に表示できなので選定外。
「Recent Posts Widget Extended」はショートコードに対応していて、固定ページの「Elementor」で編集できるのでトップページに記事一覧を表示する場合におすすめです。
トップページをElementorで編集
トップページを「Elementor」で編集します。
セクションを作成
新着情報を追加したい場所に、タイトル用の1カラムセクションと記事一覧用の2カラムセクションを作成します。
ショートコードウィジェットを追加
左側のカラムにお知らせ記事一覧(NEWS)、右側のカラムにブログ記事一覧(BLOG)のショートコードをそれぞれ設定します。

左側「NEWS」欄
記事を4行表示・サムネイルは非表示。
[rpwe limit="4" cat="△" styles_default="true"]
右側「BLOG」欄
記事を3行表示・サムネイルは表示する。
[rpwe limit="3" cat="△" thumb_width="100" thumb_height="70" styles_default="true"]
「cat=”△”」はカテゴリIDを指定します。
カスタマイズ前の記事一覧
カスタマイズなしの表示がこちら。あらら、ちょっとひどい・・・

CSSを追加してきれいにカスタマイズ
ショートコードウィジェットにクラス名を追加
左側「NEWS」欄は画像のないお知らせ記事のため、サムネイルを非表示にします。ショートコードウィジェットのCSSクラスにclass名「news」を追加します。

スタイルシートを編集
子テーマの「style.css」を編集します。
以下のコードをスタイルシートに追加して「Recent Posts Widget Extended」で書かれている部分を整形します。
/* プラグイン:Recent Posts Widget Extended */
.rpwe-alignleft {
display: inline;
float: left;
}
.rpwe-alignright {
display: inline;
float: right;
}
.rpwe-aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.rpwe-clearfix:before,
.rpwe-clearfix:after {
content: "";
display: table !important;
}
.rpwe-clearfix:after {
clear: both;
}
.rpwe-clearfix {
zoom: 1;
}
.rpwe-block {
padding: 20px;
}
.rpwe-block ul {
list-style: none;
margin: 0;
}
.rpwe-block ul li {
padding: 10px 0 10px 0;
border-bottom: 1px solid #dfdfdf;
display: list-item;
}
.rpwe-block ul a.rpwe-img img.rpwe-thumb {
max-width: 100px;
max-height: 70px;
margin: 0 10px 0 0;
}
.news .rpwe-block ul a.rpwe-img img.rpwe-thumb {
display: none;
width: 0;
height: 0;
margin: 0;
}
.rpwe-block ul h3 {
clear: none;
margin: 0;
font-size: 1.25rem;
line-height: 1.1;
}
.rpwe-block ul time.rpwe-time {
color: #1a1a1a;
font-size: 0.9rem;
font-weight: 400;
}
仕上がりはこちら
左右バランスよく並びました。

左側「NEWS」欄
お知らせ記事なので画像のない記事が書かれることを想定して、サムネイルは非表示にします。
右側「BLOG」欄
ブログ記事は画像付きの記事が多いことを想定して、サムネイルを表示。サムネイルとタイトル・公開日が左右横並びになるようにします。