Diviチップス Before + After Images のインストール

ワードプレス（WordPress）で作成している Web サイトで、写真や画像の分割比較表示をしたくなった場合に、便利なプラグインとして「TwentyTwenty」があります。 Divi でもそのプラグインは利用できるのですが、さらに便利にした「Before + After Images for Divi」が使えます。今回はそのご紹介をしたいと思います。

Before + After Images for Divi をインストールするには、ワードプレスダッシュボードの「プラグイン」＞「新規追加」で、「 Before 」と入力して下記を検索します。

Before + After Images for Divi を利用するには、

前後で比較したい画像２つを、 Before + After Images モジュールに追加します。モジュールの設定を開き、 Before Image（前画像） 、 After Image（後画像） のそれぞれの「＋ Add Image」をクリックします。

メディアライブラリが開くので、設定したい画像を選択して、

Befor と After の画像がそれぞれ配置されます。

「✔（チェックマーク）」をクリックし承認（保存）すると、サイトに下記のようにバーが配置された画像が追加されます。

しかし、既定のサイズでは画像のサイズと合っていません。

画像の表示サイズを変更するには、

画像上のスライドバーを動かしてみてください。前後で画像の表示が切り替わります、

表示サイズは Full Size としています。

サーバの PHP バージョンによって、「 Warning: A non-numeric value encountered in 」というエラー（警告）が出てしまうことがあります。エラーが出てしまう場合は下記の対策を実施ください。