WordPress

【WordPress】無料版Astraカスタマイズ:トップページに新着情報を表示(サムネイルあり・なし)

無料版Astraカスタマイズ:トップページに新着情報を表示(サムネイルあり・なし)

WordPressのカスタマイズやプラグインに関する情報です。

今回は「Astra ✕ Elementor」でトップページに新着情報を表示するカスタマイズ例です。
前回は、無料テーマ「Astra」の記事一覧・個別記事ページをスッキリかっこよくカスタマイズする方法をご紹介しました。

その続きになりますが、記事一覧をトップページに新着情報として横並びに表示してみます。

完成形:トップページに新着情報を横並びに表示する

左側にサムネイルなしのお知らせ記事(NEWS)、右側にサムネイルありのブログ記事(BLOG)を表示したサンプルです。

無料版Astraカスタマイズ:トップページに新着情報を表示(サムネイルあり・なし)

サムネイルつき記事一覧「Recent Posts Widget Extended」

プラグイン「Recent Posts Widget Extended」をインストールして有効化します。
サムネイルつき記事一覧を表示するプラグインはいくつかありますが、ウィジェットのみ対応のものは固定ページでは簡単に表示できなので選定外。

「Recent Posts Widget Extended」はショートコードに対応していて、固定ページの「Elementor」で編集できるのでトップページに記事一覧を表示する場合におすすめです。

トップページをElementorで編集

トップページを「Elementor」で編集します。

セクションを作成

新着情報を追加したい場所に、タイトル用の1カラムセクションと記事一覧用の2カラムセクションを作成します。

ショートコードウィジェットを追加

左側のカラムにお知らせ記事一覧(NEWS)、右側のカラムにブログ記事一覧(BLOG)のショートコードをそれぞれ設定します。

無料版Astraカスタマイズ:トップページに新着情報を表示(サムネイルあり・なし)
左側「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を指定します。

カスタマイズ前の記事一覧

カスタマイズなしの表示がこちら。あらら、ちょっとひどい・・・

無料版Astraカスタマイズ:トップページに新着情報を表示(サムネイルあり・なし)

CSSを追加してきれいにカスタマイズ

ショートコードウィジェットにクラス名を追加

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

無料版Astraカスタマイズ:トップページに新着情報を表示(サムネイルあり・なし)

スタイルシートを編集

子テーマの「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;
}

仕上がりはこちら

左右バランスよく並びました。

無料版Astraカスタマイズ:トップページに新着情報を表示(サムネイルあり・なし)
左側「NEWS」欄

お知らせ記事なので画像のない記事が書かれることを想定して、サムネイルは非表示にします。

右側「BLOG」欄

ブログ記事は画像付きの記事が多いことを想定して、サムネイルを表示。サムネイルとタイトル・公開日が左右横並びになるようにします。

この記事は、2022.3.13時点の情報です。
ABOUT ME
モンキー
福岡県在住。社内SEとしてkintone(キントーン)でシステムを開発したりWordPress(ワードプレス)でサイトを制作したりしてます。もともとは20年ほどシステム会社で働いていて趣味でネットショップを構築・運営していました。 ある日突然英会話に興味を持ち国際交流が好きになりました。その影響で留学生に日本語を教えてみたいと思い、日本語教師の資格を取るため日本語教師養成講座420時間コースを修了。世界中を旅しながら仕事するのが夢です。