スタイリスト、デコレーター、レタッチャーなど、作業の成果を視覚的に見せる必要があるプロフェッショナルの方はいませんか?ウェブサイトにビフォーアフタースライダーを掲載すれば、操作もかんたんで、価値をひと目で伝えられます。しかし残念ながら、WordPressユーザーにとって、WordPressにはスライダー機能が標準で備わっていません。
とはいえ、WordPressにスライダーを追加することは不可能ではありません。方法は3つあります。サードパーティ製のプラグインを使う、軽量な無料の外部ウィジェットを使う、またはカスタムコードを書いてゼロからスライダーを作成する方法です。
この記事では、3つの方法すべてを使ってWordPressにビフォーアフタースライダーを追加する手順を解説します。ご自身のニーズに合った方法を見つけてください。
方法1:WordPressスライダープラグインをインストールする
ビフォーアフタースライダーを追加する最も一般的な方法のひとつが、WordPressプラグインの利用です。ただし、この方法にはいくつかのデメリットがあります。
プラグインによっては、サイト全体に余分なCSSやJavaScriptが追加され、ページの読み込み時間が長くなることがあります。さらに、Elementorのような「重い」ページビルダーでは、複雑なショートコード(テキストベースのWordPress専用コード)でスライダーを管理しなければならず、初心者にとっては悩みの種になりかねません。コードの一部をうっかり削除してしまうと、スライダーはたちまち動作しなくなります。加えて、フリーミアムモデルを採用しているプラグインも多く、高度な機能は有料プランでしか使えないことがあります。
プラグインはすべてのユーザーに向いているわけではありませんが、技術に詳しく、WordPressの操作に慣れている方にとっては確実な選択肢です。WordPress用のビフォーアフタープラグインをインストールするには、次の手順に従ってください。
- プラグインをインストールする:WordPressのダッシュボードにアクセスし、[プラグイン]をクリックします。検索バーに「ビフォーアフタースライダー」と入力し、検索結果から使用したいプラグインを選択します。(候補は数十種類あります。ほかの用途に使えるプラグインについては、おすすめのWordPressプラグインの一覧もご覧ください。)
画面の指示に従ってプラグインをインストールします。(具体的なインストール手順は、プラグインによって異なります。)
プラグインには無料のものが多い一方で、買い切りの有料プラグインもあります。ほとんどの場合、有料のWordPressプランでのみ利用できます。
- ビフォーアフタースライダーを作成する:WordPressのダッシュボードからプラグインを開き、新しいビフォーアフタースライダーを作成するオプションを選択します。ビフォー画像とアフター画像をアップロードします。ベストプラクティスとして、構図とサイズが同じ画像を使用してください。
- ビフォーアフタースライダーをカスタマイズする:ほとんどのプラグインでは、画像のラベル、開始位置、ハンドルの外観、スライダーの向きなどの設定を調整できます。設定を調整したら保存します。
- ビフォーアフタースライダーをWordPressサイトに追加する:スライダーを表示したいWordPressのページを開きます。プラグインによっては、専用のWordPressブロックを作成するか、ページにショートコードを追加することでスライダーを設置できます。
Pro Tip
WordPressプラグインの使い方について、さらに詳しく知りたい方は、「WordPressの使い方」をご覧ください。WordPressのプラグイン、フォーム、テーマなどの使い方に関する重要な情報を網羅した詳細なチュートリアルです。
方法2:無料のノーコードスライダーウィジェットを使う(おすすめ)
面倒なショートコードや、WordPressサイトの表示速度を低下させる重いプラグインを避けたい場合は、ノーコードのスライダーウィジェットを使うのが最適です。Jotformのビフォーアフタースライダーウィジェットは完全無料で、かんたんに使えます。このウィジェットはサーバーレスのため、サイトの表示速度にまったく影響しません。さらに、パソコンでもスマートフォンでも問題なく動作します。
Jotformのビフォーアフタースライダーウィジェットは、コーディング不要の視覚的なインターフェースを備えています。ウィジェットビルダーに2枚の画像をアップロードし、ドラッグハンドルの色をカスタマイズして、初期の開始位置を設定するだけです。あとはコードをコピーして、WordPressに貼り付けます。
詳しい手順は次のとおりです。
- 画像のペアを追加する:Jotformのビフォーアフタースライダーウィジェットのページにアクセスし、ウィジェットの設定ボックスにビフォー画像とアフター画像をアップロードします。ウィジェットのタイトルを編集し、提供したい操作の種類(ドラッグ&クリックまたはホバー)を指定します。[続行]をクリックまたはタップします。
- スライダーの設定をカスタマイズする:画像の縦横比、角の丸み、区切り線の太さ、スライダーの色などの設定を調整できます。下にスクロールして、すべての項目を設定します。
- スライダーウィジェットの埋め込みコードを取得する:[Try It on Your Website for Free]をクリックまたはタップします。Jotformからスライダーウィジェットの埋め込みコードが表示されます。[コピー]をクリックまたはタップします。コードを取得するには、Jotformへのサインアップまたはログインが必要です。
- スライダーの埋め込みコードをWordPressに貼り付ける:WordPressサイトにアクセスし、ブロックインserターからカスタムHTMLブロックを追加します。HTMLブロックに埋め込みコードを貼り付け、[更新]をクリックまたはタップします。ビフォーアフタースライダーウィジェットが、WordPressサイトに自動的に挿入されます。
方法3:カスタムHTML/CSSでスライダーをコーディングする
サードパーティ製のプラグインや外部ウィジェットを使いたくない、WordPressの純粋主義の方は、生のコードを使ってスライダーをゼロから作成することもできます。
この方法は技術的には無料で、WordPressに標準で備わっている機能だけで実現できますが、決してかんたんではありません。特に、サイト訪問者がスマートフォンでもスライダーを操作できるようにしたい場合は、コーディングの高度な経験が必要です。また、コーディングのミスがひとつあるだけで、スライダーが動作しなくなったり、スマートフォンでのレスポンシブ対応に影響が出たりすることがあります。
カスタムコードでWordPressにビフォーアフタースライダーを追加する手順は次のとおりです。
- ビフォー画像とアフター画像をアップロードする:両方の画像をWordPressのメディアライブラリに追加します。
- スライダー用のカスタムHTML/CSSコードを作成する:スライダーの構造とスタイルを定義するHTML/CSSコードを記述します。ドラッグやスワイプの操作を可能にするには、JavaScriptが必要になる場合もあります。
このコードは、ご自身で書くことも、コーディング経験のある同僚に依頼することも、AIツールで生成することもできます。
コードをコピーします。
- WordPressサイトにコードを追加する:WordPressサイトでカスタムHTMLブロックを追加し、そのブロックにコードを貼り付けます。必要に応じて、WordPressのテーマやサイト設定からCSSやJavaScriptを追加します。
便利なノーコードウィジェットでWordPressサイトをレベルアップ
サイトの表示速度とセキュリティを重視しつつ、コストを抑え、複雑なコードも避けたい場合は、Jotformのビフォーアフタースライダーウィジェットが、リッチでインタラクティブなメディアをウェブサイトに追加する優れた方法です。完全無料で使え、初心者にもプロにも最適で、コードを書く必要もありません。
ただし、Jotformが提供しているのはそれだけではありません。
Jotformのウェブサイトウィジェットディレクトリには、WordPressサイトをレベルアップできる無料のウェブサイトウィジェットが150種類以上そろっています。たとえば、訪問者カウンターウィジェットはサイトの人気ぶりをアピールするのに最適で、カウントダウンタイマーウィジェットは重要なイベントやキャンペーンへの緊急性を高めるのに役立ちます。
Jotformでは、お問い合わせフォーム、リード獲得フォーム、注文フォームなど、数千種類ものWordPressフォームも提供しています。サイトに追加して、訪問者の大切な情報を収集しましょう。
Jotformには無料プランがあります。まずは試してウィジェットを使ってみて、パフォーマンスを犠牲にしたりコードを書いたりすることなく、WordPressサイトの機能を手軽に向上できることを実感してください。
この記事は、重いプラグインでサイトの表示速度を落としたり、複雑なショートコードに悩まされたりすることなく、ビジュアルの変化(写真のレタッチ、UIのリデザイン、リフォームなど)を紹介したい、WordPressのブロガー、ポートフォリオ所有者、代理店の方を対象としています。
コメントの送信: