WordPressでスライダー効果を使用して前後の画像を表示する方法

公開: 2019-02-08

あなたがフィットネスブロガーであり、体の変化の前後の画像を共有することで視聴者に刺激を与えたいとしましょう。画像を並べて配置するのではなく、前後の画像スライダーを使用して違いを表示できれば、かなりクールです。

待って！前後の画像スライダーとは何ですか？

これは、ある画像を別の画像の上に積み重ね、インタラクティブなスライダーを使用して画像を表示する画像スライダーです。スライダーが水平方向に移動すると、スライダーが右端に移動すると最初の画像が表示され、左端に移動すると2番目の画像が表示されます。

このようなスライダーは、2つの類似した画像を比較するのに便利です。したがって、写真家、美容師、デザイナー、医師、歯科医などの多くの専門家に役立つ可能性があります。

あなたがWordPressユーザーであり、あなたのウェブサイトでそれをどのように使用できるか疑問に思っているなら、あなたは正しい場所にいます。この記事では、Webサイトのスライダー効果を使用して前後の画像を追加する方法を共有します。

それで、それ以上の苦労なしに、始めましょう。

私たちのYoutubeチャンネルを購読する

画像スライダーの前後に追加する方法

Webページに前後の画像スライダーを追加できる無料のプレミアムプラグインがたくさんあります。

ただし、この記事ではTwenty20 Image BeforeAfterプラグインを使用します。後で、人気のある無料およびプレミアムの代替品についても説明します。

プラグインの前後にTwenty20イメージをインストールします

Twenty20は無料のプラグインであり、WordPressプラグインリポジトリで入手できます。投稿、ページ、サイドバーに前後の画像スライダーを追加できます。 ElementorやWPBakeryなどの人気のあるページビルダーもサポートしています。

このプラグインをインストールするには、[プラグイン]-> [新規追加]に移動し、Twenty20 ImageBefore-Afterを検索します。プラグインを見つけたら、それをインストールしてアクティブ化するだけです。

投稿またはページに前後の画像を追加する

Twenty20プラグインには、設定ページは付属していません。したがって、プラグインをインストールした後、ダーティな作業を開始できます。

これで、WordPress 5.0の更新後、ClassicエディターまたはGutenbergエディターのいずれかを使用できるようになります。それでは、このプラグインが両方のエディターでどのように機能するかをお見せしましょう。

グーテンベルク編集者

Twenty20プラグインにはこれまでのところブロックがありませんが、そのショートコード機能を使用して、ショートコードブロックにコードを追加できます。

ショートコードの例を見てみましょう。

[twenty20 img1 =” 3442” img2 =” 3442” direction =” horizontal” offset =” 0.4” align =” none” width =” 100％” before =” Before” after =” After” hover =” false”]

各パラメータについて説明します。

img1 –ここで、最初の画像の画像ID（画像のURLではない）を追加する必要があります。
img2 – 2番目の画像のID（画像のURLではない）を追加します。
方向–これにより、スライダーを水平方向にするか垂直方向にするかを決定できます。したがって、値は水平または垂直のいずれかになります。
オフセット–オフセットの値は0.1から1の間でなければなりません。
align –これは前後の画像の配置を決定します。値は、none、left、またはrightのいずれかになります。
width –画像の幅はパーセンテージまたはピクセル単位で指定できます。
before –ここにbefore画像のキャプションを追加できます。
after –後の画像のキャプションを追加します。
ホバー–このパラメーターは、マウスの動きでスライダーを動かすかどうかを決定します。 trueまたはfalseの値を受け入れます。

画像のIDを見つける方法がわかりませんか？ WordPressダッシュボードの左側のサイドバーから[メディア]-> [ライブラリ]に移動し、画像をクリックします。次に、Webブラウザのアドレスバーを確認します。

上記の例では、URLにitem = 50が含まれていることがわかります。したがって、50はその特定の画像のIDです。

わかった！ Twenty20ショートコードの使用方法がわかったので、前後の画像スライダーを追加する投稿またはページを作成（または編集）します。次に、新しいブロックを追加して、ショートコードウィジェットを検索します。

上記の例で使用したコードをコピーし、ショートコードボックスに貼り付けて、要件に応じて微調整します。

それでおしまい。これで、投稿（またはページ）をプレビューして、正しく機能しているかどうかを確認できます。

クラシックエディター

クラシックエディターを使用している場合は、プラグインをインストールした後、新しいボタンAdd Twenty20が表示されます。そのボタンをクリックすると、ポップアップウィンドウが開き、2つの画像を選択するように求められます。

2つの画像を選択して[挿入]をクリックすると、新しいウィンドウが開き、ショートコードを生成するための詳細を尋ねられます。

設定が完了したら、[ショートコードの挿入]ボタンをクリックできます。

このショートコードは後で変更することもできます。Gutenbergエディターセクションの例に従ってください。

サイドバーに前後の画像を追加する

Twenty20プラグインを使用すると、Webサイトのサイドバーに前後の画像を追加することもできます。それはあなたのためにクールな仕事をするウィジェットが付属しています。

[外観]-> [ウィジェット]に移動します。次に、Twenty20ウィジェットを見つけて、サイドバー領域にドラッグします。このウィジェットの設定は前のセクションと同様です。前と後の画像を選択（またはアップロード）するための2つの追加ボタンがあります。

完了したら、ウィジェットの設定を保存して、Webサイトを確認します。簡単ですね。

いくつかの代替プラグイン

Twenty20プラグインはシンプルで無料なので気に入っていますが、他のものを好むかもしれません。したがって、私はこのプラグインのいくつかの無料およびプレミアムの代替手段を共有することにしました：

1.Diviの前+後の画像

Diviユーザーの場合、DiviプラグインのBefore + AfterImagesがニーズに最適です。軽量で応答性が高く、遅延読み込みをサポートします。それはあなたがあなたのウェブサイトに前後の画像を追加するのを助ける新しいモジュールを作成します。この無料のプラグインは、Divi Builderプラグイン、Diviテーマ、およびエレガントテーマによるその他のテーマで動作します。

価格–無料| 詳しくは

2.多目的ビフォーアフタースライダー

多目的ビフォアアフタースライダーは、タッチアンドスワイプ対応のプレミアムプラグインです。必要に応じて各画像スライダーを微調整するのに役立つ使いやすい管理パネルが付属しており、ショートコードを使用する必要はありません。無制限の前後画像を作成して、投稿、ページ、サイドバーで使用できます。

価格– $ 18 | 詳しくは

3.スマートビフォアアフタービューア

Smart Before After Viewerは、完全にレスポンシブでタッチフレンドリーなプレミアムプラグインです。これにより、前後の画像にカスタムラベルテキストを追加できます。また、ラベルの位置や色を手間をかけずに変更できます。このプラグインを使用すると、1つのページに複数の画像を追加することもできます。

価格– $ 18 | 詳しくは

巻末注

前後の画像スライダーは、2つの同一の画像の違いを表示するための優れた方法です。そして、このチュートリアルに従って、WordPressサイトでそのようなスライダーを使用できます。

それで、この記事で言及されているプラグインのいずれかを使用したことがありますか？または、同じことを達成するのに適した特定のプラグインを提案しますか？コメント欄でお知らせください。

__ /shutterstock.com経由の注目の画像