WordPressを用いていく上で、必ず必須ではないものの、様々な機能の実装からSEO対策, エディタの変更まで幅広く活用されているプラグインですが、今回は、その中でも実装するうえで、通常であればJavaScriptの知識がないといけない機能の一つを実現可能なプラグイン[Easy Fancy Box]の活用方法を一緒にみていきましょう。
以下、Easy Fancy Boxの公式ページになります。
参考までに載せておきますので、深く理解する上では確認しておきましょう。
✅ Easy Fancy Boxのインストール~有効化の手順が分かる
✅ Easy Fancy Boxの使い方が分かる
Easy Fancy Boxとは??
画像(動画も含む)をクリックした際に、画像を拡大した画面を表示することができるjQuery系のプラグインになります。
イメージとしては、配置した要素をクリックするとふわっと表示するアニメーションでポップアップが現れるような感じです。
次のような特徴があります。
- YouTube・Vimeo・Dailymotionの動画配信サービスに対応。
- PDFファイル, SWF(フラッシュ)ファイル, SVG メディア画像にも対応。
- webpを含むすべての一般的な画像形式(JPEG, PNGなど)が利用可能。
- JavaScriptやjQueryの知識がなくても利用可能。
- ギャラリー（複数の画像）を挿入することが可能。
Eacy Fancy Boxの使い方
インストールから設定方法まで順番に使い方をみていきましょう。
インストール/有効化
[管理画面] → プラグイン → 新規追加
② 検索結果内にEasy Fancy Boxを見つけたら、インストールボタンをクリック
インストールが完了したら、有効化する
設定の仕方
詳細設定は、メディア設定で行う
どのファイルを有効化するかなど、Easy Fancy Boxの詳細な設定は、メディア設定から変更することが可能です。
手順は、以下の通りになります。
[管理画面] → 設定 → メディア
メディア設定が開けたら、少し下へスクロールしましょう。
すると以下のようにEasy fancy Boxの設定項目が表示されていることが確認できます。
ここでは、有効化するファイルの種類の設定など様々な設定をすることが可能ですので、必要に応じて設定を行いましょう。
Easy Fancy Boxで使う画像を準備
[管理画面] → メディア → 新規追加
ファイルをドラッグアンドドロップするか、選択してアップロードする
以下のようにダイアログが表示されますので、好きな画像を選択しましょう。
選択できたら、右下の開くボタンをクリック。
ライブラリ上の一覧に画像が追加されていれば準備OK
実際に使ってみよう
画像のアップロードなど下準備は終わりましたので、ここからは実際にEasy Fancy Boxの使い方についてみていきましょう。
まずは、練習用の投稿ページを作成していきます。
[管理画面] → 投稿 → 新規投稿
新規投稿追加画面に遷移したら、以下の手順になります。
② 終わったら、メディアを追加ボタンをクリック
次のようなダイアログ画面が表示されますので、以下の手順で進めましょう。
② リンク先の指定をメディアファイルに変更する
③ 投稿に挿入ボタンをクリック
最後に以下の作業をしましょう
② 変更内容を確認しますので、「変更をプレビュー」ボタンをクリック
実際に画像をクリックすると、ふわっとポップアップ表示することを確認できたら実装完了です！
イメージとしては以下のようになります。
ここまでお疲れ様です。
以上でEasy Fancy Boxについての使い方の紹介については終了となりますが、無事実装できましたでしょうか??
もし、上手く動作してない場合は、設定を見直してみてくださいね。
まとめ
⇨ 画像(動画も含む)をクリックした際に、画像を拡大した画面を表示することができるjQuery系のプラグイン
⇨ プラグインとして、WordPress管理画面よりインストール/有効化してください
⇨ 一通り作業が終わりましたら、画像をクリックすると、ふわっとポップアップ表示することを確認しましょう。
コメント