WordPressのビフォーアフター スライダーを（コードなしで）追加する方法 

作業は完了し、写真は用意でき、訪問者に変化を感じてもらいたいと思っています。しかし、2つの画像を並べて表示しても期待通りの効果が得られず、人々は立ち止まることなくスクロールしてしまいます。

WordPressのビフォーアフター スライダーはそれを変えます。訪問者は単一の画像上でハンドルをドラッグして、自分で変化を確認できます。このインタラクションの瞬間が、静的な写真では決して得られない、結果をリアルに感じさせます。

SeedProdの組み込みビフォーアフター トグルブロックを使用して、コードを一行も触れることなくWordPressにスライダーを追加する方法を正確に説明します。

Before Afterフォトエフェクトはどのように機能しますか？

ビフォーアフター写真スライダーは、2つの画像を重ね、ドラッグ可能なハンドルを追加します。訪問者はスライドして各バージョンの表示量を制御できるため、変化は受動的ではなく参加型に感じられます。

歯のホワイトニング結果を示す歯科医、ヘアカットの変化を示すサロン、または改築を示す請負業者など、スライダーを使用すると、訪問者は静的な写真を信頼するのではなく、自分で変化を確認するためにドラッグできます。

サイトで変更を直接表示する簡単な方法です。次に、WordPressでこのエフェクトを追加する方法を説明します。

WordPressにBefore Afterフォトスライダーを追加する方法

ほとんどのWordPressサイトでは、このエフェクトを追加するためにプラグインが必要です。以下のチュートリアルでは、SeedProdを使用してその方法を示します。

SeedProdは、コードなしでWordPressのページ、テーマ、ランディングページを作成できるドラッグ＆ドロップのウェブサイトビルダーです。ネイティブのビフォーアフター トグルブロックが含まれているため、別のスライダープラグインは必要ありません。SeedProdはすべてを1か所で処理します。

SeedProdを使用して、近日公開ページを作成し、WordPressをメンテナンスモードにすることもできます。作成するものはすべて100％モバイル対応で、モバイルデバイスでのサイトの使いやすさを保証します。

以下のボタンをクリックしてSeedProdプラグインをダウンロードし、ウェブサイトにBefore Afterフォトスライダーを埋め込む手順に従ってください。

ステップ1. SeedProdのインストールと有効化

プラグインをダウンロードしたら、SeedProdアカウントの「ダウンロード」タブを見つけて、ライセンスキーをコピーします。

次に、プラグインをWordPressサイトにアップロードします。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するこのステップバイステップガイドに従ってください。

SeedProdがインストールされたら、WordPress管理画面から「SeedProd »設定」に移動し、以前にコピーしたライセンスキーを貼り付けます。

ライセンスを有効化するには、Verify Key ボタンをクリックしてから、ステップ2に進んでください。

ステップ2. WordPressレイアウトの作成

SeedProdでは、スライダーを配置する場所として2つのオプションがあります。1つは、WordPressテーマ全体をカスタムデザインに置き換えるテーマビルダー、もう1つは、既存のテーマと並行してスタンドアロンページを作成するランディングページビルダーです。

このガイドでは、テーマビルダーを使用してカスタムWordPressテーマを作成し、ホームページテンプレートを編集しますが、スライダーブロックを追加する手順はどちらの場合も同じです。

新しいレイアウトを作成したら、ステップ3に進み、デザインにスライダーを追加します。

ステップ3. Before After WordPressブロックの追加

レイアウトを作成したら、SeedProd のページビルダーで編集したいページを開きます。

WordPress テーマのホームページを編集するので、SeedProd » Theme Builder に移動し、Homepage テンプレートの下にある Edit Design をクリックします。

次の画面で、以下のようなレイアウトが表示されます。

右側にはステップ2で選択したテンプレートのライブプレビューが表示され、左側にはデザインにドラッグ＆ドロップできるブロックとセクションが表示されます。

たとえば、見出しをクリックしてライブプレビューに直接新しいコンテンツを入力することで編集できます。

または、左側の設定パネルにあるテキストを編集することもできます。これには数え切れないほどのカスタマイズオプションが含まれています。

テンプレートが希望通りの見た目になるまでカスタマイズしてください。

次に、テンプレートに自動的に含まれていない機能を追加する方法を見ていきましょう。たとえば、私たちが選択したウェブサイトキットには、ビフォーアフター写真スライダーが含まれていないため、自分で追加する必要があります。

これを行うには、左側の WordPress ブロックをスクロールして Before After Toggle を見つけます。次に、ライブプレビューの目的の位置にドラッグします。

ブロックをクリックすると、左側の設定パネルでカスタマイズオプションが開きます。ここで、ビフォーアフターの画像を追加したり、スタイルを変更したりできます。

まず、最初の画像を追加しましょう。これは通常、「ビフォー」の写真になります。これを行うには、Use Your Own Image オプションをクリックし、新しい写真をアップロードするか、WordPress メディアライブラリから選択します。

次に、「アフター」画像についてもこの手順を繰り返します。テキストフィールドの名前を置き換えることで、各画像のラベルを編集できます。

画像が配置されたので、さらにいくつかの設定を見てみましょう。

向きの見出しの下で、スライダーを水平ではなく垂直にすることができます。

また、カーソルを画像に重ねたときにスライダーが移動するようにしたり、写真にカラーオーバーレイを適用したりすることもできます。

比較ハンドルの見出しを開くと、スライダーの色、幅、半径のピクセルサイズなどを変更する設定が表示されます。

詳細設定タブをクリックすると、さらに多くの設定を見つけることができます。たとえば、ラベルのタイポグラフィと色を変更したり、ブロックの間隔と属性を調整したり、モバイル画面で特定の要素を非表示にしたりできます。

ビフォーアフタースライダーの外観に満足したら、画面右上の保存ボタンをクリックし、公開をクリックします。

ランディングページを作成している場合は、ページをプレビューして、ビフォーアフター画像スライダーが実際に動作していることを確認できます。ただし、カスタムWordPressテーマを作成している場合は、ステップ4を完了する必要があります。

ステップ4.変更を有効にする

変更は保存および公開されていても、WordPressテーマを公開する必要があります。心配しないでください、この手順は迅速です。

WordPressダッシュボードからSeedProd »テーマビルダーに移動し、SeedProdテーマを有効にするトグルを「はい」の位置に切り替えます。それだけです！

これで、ウェブサイトのフロントエンドに移動して、新しいWordPressのビフォーアフタースライダーを試すことができます。

ビフォーアフター写真スライダーFAQ

WordPressで1ページに複数のビフォーアフタースライダーを追加できますか？

はい。SeedProdのビフォーアフター切り替えブロックは、レイアウトのどこにでも追加できるため、1つのページに複数のスライダーを配置できます。各ブロックは独立しており、独自の画像と設定を保持します。

使用できる数に制限はありませんが、画像が最適化されていない場合、1ページあたりのスライダーが多いと読み込み時間が遅くなる可能性があります。

ビフォーアフタースライダーはモバイルデバイスでも機能しますか？

はい。SeedProdのビフォーアフター切り替えブロックは完全にレスポンシブであるため、スライダーはタッチスクリーンとデスクトップの両方で機能します。訪問者はモバイルではドラッグする代わりにスワイプし、エクスペリエンスは自然に変換されます。

最良の結果を得るには、少なくとも800px幅の画像を使用し、モバイルではスライダーを単一列レイアウトに保ってください。SeedProdの高度なタブを使用して、さまざまな画面サイズでの表示と間隔を調整できます。

WordPressでスライダーを水平から垂直に切り替えるにはどうすればよいですか？

SeedProdのビフォーアフター切り替えブロックの設定で、向きオプションを見つけます。これをクリックすると、ドラッグ方向が左右（水平）から上下（垂直）に切り替わります。

垂直方向は、カットや身長に基づいた改築など、垂直軸に沿って変化がより顕著な比較に適しています。

ビフォーアフタースライダーにはどの画像サイズを使用すればよいですか？

両方の画像の寸法は同じである必要があります。サイズが異なる場合、スライダーの表示が不安定になる可能性があります。幅800〜1200pxはほとんどのレイアウトに適しています。

JPEGを70〜80％の品質で保存して、ファイルサイズをそれぞれ150KB未満に保ちます。画像寸法の不一致は、傾いたまたはジャンプするスライダーの最も一般的な原因です。

プラグインなしでWordPressにビフォーアフタースライダーを追加できますか？

技術的には可能ですが、ほとんどのWordPressサイト所有者が自分で書けないカスタムJavaScriptとCSSが必要です。また、WordPressのすべてのアップデートを通じてそのコードを維持する必要があります。

SeedProdのようなプラグインは技術的な側面を処理し、ドラッグアンドドロップインターフェイスはプロセス全体でコードを必要としません。

WordPressのビフォーアフタースライダーを追加して、あなたの仕事を可能な限り説得力のある方法で見せることができます。訪問者は静的な画像を見るだけでなく、自分で変化を発見することができます。それがまさにポイントです。

お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。