SWELL│メインビジュアル用新着記事スライダーのカスタマイズ

オウンドメディアでは、メインビジュアルの所が新着記事になっているタイプをよく見ますよね?

SWELLのメインビジュアルは手動で入力するタイプですが、これをカスタマイズして新着記事を読み込む用にしてみました。

※基本的にSWELLのメインビジュアルスライダーと同じ構造なので、同じ見た目です。サンプルは割愛。

1.5枚表示した応用例

メインビジュアル用新着記事スライダーのメリットは以下の通りです。

メインビジュアル用新着記事スライダーのメリット
  • 新着記事をメインビジュアルで表示できる
  • 自動で更新される
  • スライダーの数が無制限(SWELLでは5個まで)
  • コードベースなので別の条件の記事を表示するカスタマイズもできる
  • ショートコードベースで別の場所でも表示できる

それでは早速、このメインビジュアル用新着記事スライダーのカスタマイズを紹介します。

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

メインビジュアル用新着記事スライダーのカスタマイズ

基本的にはfunctions.phpでコードを設定して、ショートコードで配置するだけです。

なるべくSWELLの資産を使っているので、CSSの設定等はありません

またこのカスタマイズはコード化しているので、さらに好きな条件で表示できるカスタマイズ性もあるので便利です。

SWELLの事前設定

カスタマイズを開きましょう。

メインビジュアルのカスタマイズ設定

トップページ > メインビジュアルを表示しないにチェックを入れます。

手動で設定するメインビジュアルは使いません

メインビジュアル下の余白設定

トップページ > その他からコンテンツ上の余白量をなしにします。

サイト全体設定のNO IMAGE画像

アイキャッチ画像を表示しますが、設定がない場合を考慮してNO IMAGE画像を設置しておきましょう。

トップページ用の固定記事の設定

トップページ用の記事を作成します。

フルワイドブロックの設置

フルワイドのブロックを設置してフルワイドにします。

上下の余白量も0にしておきましょう。

これであとで設置するメインビジュアルスライダーが画面いっぱいに表示されます。

ショートコードの設置

最後にショートコードを設置します。

これを表示するコードは後述します。

[latest_posts_slider]

Swiperまわりのコードの読み込み

最後にメインビジュアル用新着記事スライダーをfunctions.phpに設置します。

エラーが怖い人はCode Snippetsのプラグインを入れて、そこからコードを挿入しましょう。

以下、有料コンテンツです。

目次