Ultimate Before After Image Slider & Galleryの使い方と設定
ビフォーアフタースライダーを作成することができる WordPress 用プラグインの紹介です。
それは「Ultimate Before After Image Slider & Gallery」です。
その導入手順から日本語化・使い方と設定などを解説していきます。
Ultimate Before After Image Slider & Gallery
Ultimate Before After Image Slider & Gallery は、ビフォーアフタースライダーを作成できます。
Ultimate Before After Image Slider & Gallery の主な特徴は、以下のとおりです。
- スライダーを無制限に作成可。
- スライダーは、水平もしくは垂直方向にスライド可能。
- 個々のスライダーをカテゴリーで分類しギャラリーを作成可。
- 専用ウィジェットでもスライダーを表示可能。
作者のサイトでデモも確認できます。
Ultimate Before After Image Slider & Gallery DEMO – themefic.com
記事を作成もしくは更新時点でのバージョン：4.2.3
マルチサイトでの利用:可
Gutenberg エディターでの動作
Gutenbergでのショートコードの挿入手順
このプラグインは、ショートコードを使用します。
挿入手順については、下記の記事にて詳しく解説していますので、御覧ください。
Gutenberg でのショートコードの挿入手順 – WordPress活用術
インストール手順
Ultimate Before After Image Slider & Gallery をインストールするには 2 種類の方法があります。
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化する。
Ultimate Before After Image Slider & Gallery – WordPress.org
もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面からインストールできます。
ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Ultimate Before After Image Slider & Gallery」と入力します。
検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。
プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。
WordPressプラグインのインストール手順を解説 – WordPress活用術
日本語化
Ultimate Before After Image Slider & Gallery を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。
WordPress と関連プロジェクト（テーマ・プラグイン）用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。
※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。
日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。
WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術
専用メニュー
ダッシュボードの「コメント」メニューの下に追加されています。
管理画面
作成済みのスライダーを一覧表示できます。
使い方
新規スライダーを作成するには「Add New」メニューを選択もしくはボタンをクリックします。
スライダー新規作成画面では、一覧画面で識別可能なタイトルを入力します。
Content
- Before After Method
Pro 版のみ変更可能。
- Before image
ビフォーアフターとして使用する画像を選択します。 - After image
ビフォーアフターとして使用する画像を選択します。
- Slider Title
スライダーのタイトルを入力します。 - Slider Description
スライダーの説明を入力します。
- Read More Link
「続きを読む」ボタンクリック時の飛び先を指定します。 - Read More Link Target
リンクを同じタブで開くか新しいタブで開くかを選択します。 - Read More Text
Pro 版の機能。
- Orientation Style
スライド方向を選択します。 - BEAF Template Style
Pro 版の機能。
Options
- Default Offset
ページが読み込まれた時に表示される前の画像の表示割合を指定します。
初期値：0.5 - Before Label
「Before」タイトルのカスタムラベルを入力します。 - After Label
「After」タイトルのカスタムラベルを入力します。
- Auto Slide
Pro 版の機能。 - On scroll Slide
Pro 版の機能。
- Move slider on mouse hover?
マウスホバーでスライドさせるかどうか。 - Click to Move
画像をクリックすると、そこまでスライドさせるかどうか。
- Show Overlay
オーバーレイを表示するかどうか。 - Skip lazy load
他の遅延読み込みプラグインなどと競合する場合に「Yes」を選択します。
Style
文字色や背景色などをカスタマイズすることができます。
カテゴリー
このプラグイン専用のカテゴリーからカテゴリーを作成できます。
スライダー表示例
カテゴリー
Settings
Pro 版のみの機能。
Gallery Generator
複数のスライダーをまとめてギャラリーとして表示したい場合に使用します。
専用ウィジェット
URL
Ultimate Before After Image Slider & Gallery – WordPress.org