【カスタマイズ例】スライダーで新着投稿をカルーセル表示

VK Blocks Pro の 投稿リスト と スライダー を使った、~~最新6件~~ 最新8件の新着投稿を表示するカルーセルのカスタマイズ例です。

2023.7.6 追記

最近の Lightning および VK Blocks のアップデートにより、組み込まれている Swiper のバージョンが 9.* にアップデートされました。
このことにより、カルーセルを正常に動作させるために同時表示スライド数の倍以上の数のスライドが必要になりました。これに加えて、スライドを中央に配置する場合はさらに2枚のスライドが必要です。

上記のカルーセルはいままで6件の新着記事をカルーセル表示していましたが、正常動作しなくなったため、記事数を8件に増やしてあります。

備忘録

スライダーブロックに追加 CSS クラス .card-in-text-right を指定してある。

画面幅が 992px より少し大きいあたりで投稿タイトルの行数が増えて見た目が悪くなる（投稿日の表示が欠ける）ので、以下の CSS により投稿タイトルの行数を最大4行に制限してある。

.card-in-text-right .card-intext .card-intext-inner .vk_post_body .vk_post_title {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

最初にスライダーアイテムが一瞬だけ大きく表示されることを防ぐために、以下の CSS を追加してある。

@media (min-width:576px) {
  .wp-block-vk-blocks-slider-item {
    max-width: 50vw;
  }
}

@media (min-width:992px) {
  .wp-block-vk-blocks-slider-item {
    max-width: 25vw;
  }
}

サイト運営者プロフィール

対馬俊彦魚沼情報サービス (新潟県南魚沼市)

WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

このサイトで行っているカスタマイズのやり方の多くもマンツーマンのオンラインレッスン形式などでわかりやすく説明させていただくことができますので、興味がある方はご連絡ください。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・PHP・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

デザイナー様・制作業者様のお手伝いも数多く行っております。難しい部分のコーディングをやってほしい、いま人手が足りない、等々... お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

» ご相談・お問い合わせはこちらからどうぞ

今よりもっといい WordPress サイトにしたいなら Vektor Passport がおすすめ

ベクトルから発売されている有料プラグイン Lightning G3 Pro Unit / VK Blocks Pro を使えば、このサイトで紹介しているようなコードを書かずにかんたんにカスタマイズできることがたくさんあります。

名前に Pro がついているので「制作のプロ向け製品」という印象を受けるかもしれませんが、
*もっといいサイトにしたい
* 効率よく作成・運用・管理をしたい
と考えているコーポレートサイトの担当者にこそ使っていただく価値がある製品です。

Lightning G3 Pro Unit / VK Blocks Pro は Vektor Passport というライセンス製品で販売されています（個々の単体販売はされていません）。これらのプラグインを使うと、便利なカスタマイズ機能やリッチなコンテンツ制作に役立つブロックをたくさん利用できるようになりますので、効率的にサイトを制作・運用したい方はぜひお使いになることをおすすめします。

ライセンス購入はこちら