SWELL│Site Reviewsの口コミをSwiperを使ってスライダー表示する方法

swell-site-reviews-slider

SWELLのスライダーは現在、Swiperという技術が採用されています。

例:おすすめ記事をスライダー表示するカスタマイズ

簡単にスライダーを作成できるこの技術を使って、口コミプラグインの情報をスライダーでまとめてみました。

その備忘録になります。

Site Reviewsの口コミのスライダー表示のサンプル

4
Rated 4 out of 5
5つ星のうち4つ星(3件のレビューに基づく)
とても満足34%
満足33%
ふつう33%
不満0%
とても不満0%

口コミ

No Title
Rated 5 out of 5
2022-06-26

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ

渡辺
No Title
Rated 4 out of 5
2022-06-26

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ

田中
No Title
Rated 3 out of 5
2022-06-26

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ

鈴木
目次

SWELLでSwiperを使ってスライダー表示させてみる

まずは簡単なコードでSwiperを使ってみましょう。

サンプル

簡単なスライダー表示になります。

今回はテキストですが、HTMLに画像を入れるのも可能です。

1
2
3
4
5

サンプルの作り方

まず、SWELLに格納されているSwiperを読み込みます。

WordPressの管理画面 > 外観 > テーマファイルエディター > functions.php

function motoki_swiper() {
	wp_enqueue_script('swell_swiper');
	wp_enqueue_style('swell_swiper');
}
add_action('wp_enqueue_scripts', 'motoki_swiper');

次に新規記事を作成します。

カスタムHTMLのブロックを作成。

下記のコードを挿入します。

<div class="swiper slider_motoki sample">
    <div class="swiper-wrapper">
        <div class="swiper-slide">1</div>
        <div class="swiper-slide">2</div>
        <div class="swiper-slide">3</div>
        <div class="swiper-slide">4</div>
        <div class="swiper-slide">5</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

あとは記事編集の下側にあるカスタムCSS & JSに以下のコードを挿入しましょう。

まずは見た目(CSS)から

.slider_motoki.sample .swiper-slide{
    height       : 150px;
    background   : #b18e37;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 4em;
}
.slider_motoki.sample .swiper-pagination-bullet-active{
    background   : #b18e37;
}
.slider_motoki.sample .swiper-button-prev, .slider_motoki.sample .swiper-button-next{
    color: #fff;
    bottom: 10px;
    background: rgb(0 0 0 / 0%);
}
.slider_motoki.sample .swiper-button-prev:after, .slider_motoki.sample  .swiper-button-next:after{
    top: -10px;
}
.slider_motoki.sample .swiper-wrapper {
    box-sizing: content-box;
    display: flex;
    height: 100%;
    position: relative;
    transition-property: transform;
    width: 100%;
    z-index: 1;
}
.slider_motoki.sample .swiper-pagination {
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    margin-top: 16px;
    width: 100%;
}
.slider_motoki.sample .swiper-bullet {
    box-shadow: none;
    cursor: pointer;
    display: flex;
    text-decoration: none;
}
.slider_motoki.sample .swiper-bullet:before {
    background: #c3c4c7;
    border-radius: 10px;
    content: "";
    height: 10px;
    margin: 4px;
    transition: background .2s ease;
    width: 10px;
}
.slider_motoki.sample .swiper-pagination{
	bottom:0!important;
}
.slider_motoki.sample .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #b18e37;
    opacity: 1;
}

次に挙動を設定するJavaScriptを挿入します。

こちらはしらこさんのコードを参考にしました。

var swiper = new Swiper('.slider_motoki', {
  loop: true, //最後に達したら先頭に戻るかどうか
  slidesPerView: 1, //一画面での表示スライド枚数(スマホ)
  spaceBetween: 5, //各スライド間の余白の間隔(スペース)(スマホ)
  centeredSlides: false, //対象のスライドを中央寄せするかどうか
  speed: 1000, //各スライド間の移動速度
  breakpoints: {
    600: {
      slidesPerView: 2, //一画面での表示スライド枚数(PC)
      spaceBetween: 5 //各スライド間の余白の間隔(スペース)(PC)
    }
  },
  autoplay: {
    delay: 2000, //自動再生の1枚のスライドを待機する速度
    disableOnInteraction: false, //Swiperのautoplayがクリック・フリック後も止まらないようにする
  },
  pagination: {
    el: '.swiper-pagination', //ページネーションの要素
    type: 'bullets', //ページネーションの種類
    clickable: true, //クリックに反応させる
  },
  //ナビゲーションボタン(矢印)表示の設定
  navigation: {
    nextEl: '.swiper-button-next', //「次へボタン」要素の指定
    prevEl: '.swiper-button-prev', //「前へボタン」要素の指定
  },
})

new Swiper('.slider_motoki'の部分ですが、名前を変える場合でも冒頭の.sliderはの命名にしておかないと動かないことがあります。

以上です。

あとは記事をプレビューするとSwiperによるスライダー表示が確認できます。

Site Reviewsの口コミをSwiperを使ってスライダー表示する

続いて本題です。

Site Reviewsはブロック表示だけでなく、中上級者向けにphpによる出力が可能です。

ですので、先ほどのSwiperと組み合わせでコードを作成、ショートコードを使って該当記事にの口コミを自動でカルーセル表示させてみたいと思います。

スプリプトで制御できるプラグインはSwiperと組み合わせると、スライダーを使った新しい表示ができるようになります。

Site Reviewsのインストール

プラグイン検索からSite Reviewsをインストールしましょう。

まずはこの投稿記事(公開済み)にたいして、Submit a Reviewのブロックを表示して、いくつかの口コミを作成をしてみます。

言語が全て英語なので、必要な個所を日本語にしておきます。

Site Reviews > Settings

口コミの投稿が終えたら、まずは管理画面 > Site Reviewsを開き、先ほどの口コミに表示したい投稿記事を紐づけます。

Assigned Postsに表示したい記事が登録すれば準備完了です。

再度にスライダー表示した口コミレビューのコードを入力しましょう。

WordPressの管理画面 > 外観 > テーマファイルエディター > functions.php

function swiper_func($atts){
	ob_start();
	$reviews = apply_filters('glsr_get_reviews', [], [
		'assigned_posts' => 'post_id',
		'display' => 10,
		'hide' => ['title','date','rating'],
	]);
	if ($reviews) {
		$reviewsHtml = $reviews->build();
		printf('<div class="%s">', $reviewsHtml->style);
		echo '<div class="glsr_swiper-container"><div class="swiper-wrapper">';			
		foreach ($reviewsHtml as $review) {
			echo '<div class="swiper-slide">';
			echo $review;
			echo '</div>';					
		}
		echo '</div><div class="swiper-pagination"></div></div></div>';
	}

	return ob_get_clean();	
}
add_shortcode('motoki_review', 'swiper_func');

add_filter('site-reviews/review/build/tag/title', function ($field) {
    return str_replace(['<h3','h3>'], ['<div','div>'], $field);
});

ショートコードは[motoki_review]で表示されます。

あとはCSSとJavaScriptを入れるだけです。

window.onload = function() {
	var mySwiper = new Swiper ('.glsr_swiper-container', {
	  loop: true, //最後に達したら先頭に戻るかどうか
	  slidesPerView: 1, //一画面での表示スライド枚数(スマホ)
	  spaceBetween: 5, //各スライド間の余白の間隔(スペース)(スマホ)
	  centeredSlides: false, //対象のスライドを中央寄せするかどうか
	  speed: 1000, //各スライド間の移動速度
	  breakpoints: {
		768: {
		  slidesPerView: 2, //一画面での表示スライド枚数(PC)
		  spaceBetween: 5 //各スライド間の余白の間隔(スペース)(PC)
		}
	  },
	  autoplay: {
		delay: 2000, //自動再生の1枚のスライドを待機する速度
		disableOnInteraction: false, //Swiperのautoplayがクリック・フリック後も止まらないようにする
	  },
	  pagination: {
		el: '.swiper-pagination', //ページネーションの要素
		type: 'bullets', //ページネーションの種類
		clickable: true, //クリックに反応させる
	  },
	  //ナビゲーションボタン(矢印)表示の設定
	  navigation: {
		nextEl: '.swiper-button-next', //「次へボタン」要素の指定
		prevEl: '.swiper-button-prev', //「前へボタン」要素の指定
	  },
	})
}
.glsr-review {
    background: #fff;
    padding: 1em;
    margin: 0.5em;
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px 0px rgba(0,0,0,0.06)
}
.glsr_swiper-container {
    box-sizing: border-box;
    margin: 0calc(var(--gl-spacing)/2*-1);
    overflow: hidden;
    padding: 0calc(var(--gl-spacing)/2);
}
.glsr-review-author::before, .glsr-review-title, .glsr-review-date {
    display: none !important;
}
.glsr .swiper-wrapper {
    box-sizing: content-box;
    display: flex;
    height: 100%;
    position: relative;
    transition-property: transform;
    width: 100%;
    z-index: 1;
}
.glsr .swiper-pagination {
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    margin-top: 16px;
    width: 100%;
    bottom:0!important;
}
.glsr .swiper-bullet {
    box-shadow: none;
    cursor: pointer;
    display: flex;
    text-decoration: none;
}
.glsr .swiper-bullet:before {
    background: #c3c4c7;
    border-radius: 10px;
    content: "";
    height: 10px;
    margin: 4px;
    transition: background .2s ease;
    width: 10px;
}

こちらのサンプルは記事の冒頭にあります。

まとめ

本記事ではSwellによるSite Reviewsの口コミをSwiperを使ってスライダー表示する方法を書きました。

スライダーで情報をまとめてあげると情報がまとまりますよね。

コードを使わずに手動でやる場合はリッチカラムを横にスライドさせることで似たような表現ができます。

SWELLカスタマイズ全まとめ

SWELLに関連するカスタマイズ記事を全てまとめました。

是非チェックしてみてください。

contact

お問い合わせ

WordPressの技術的なお悩みやご要望がありましたら、お気軽にお問い合わせください。

もちろんデザインに関することも相談できます。

  • 見た目の調整エラー相談その他技術に関する相談をしたい
  • 絞り込み検索オリジナルのブロックを作りたい
  • SEO内部施策構造化データの設定を依頼したい
  • サイトの高速化を診断・依頼したい
  • トップページデザインを依頼したい

この記事を書いた人

すいみんのアバター すいみん テクニカルアーティスト

カナダ在住のテクニカルアーティスト。
大学ではアート(油画)を専攻。卒業後はアニメ・映画・映像・ゲーム業界で、2Dから3DCG、ゲームエンジン、WEB制作まで幅広いコンテンツ制作の経験を積んでいます。デザイナーとエンジニアの中間のポジションでお仕事をするのが得意。

目次
閉じる