あなたも気づきました？
実はWordpressライトボックス「Easy Fancy Box」をやめたんです。
理由は後で説明しますが、以前記事で紹介した手前もあるので報告をせねばと思いまして。
誤解の無いように言っておきますが「Easy Fancy Box」を使うのはやめましょうと言う事ではなくて、あくまでも私が使用しているテーマとは相性が悪かっただけの話です。
- Youtube,Vimeoなどの動画をポップアップしると警告表示が
- fanctions.phpをいじっても警告表示は消えず
- 結局はSSLの警告表示を解消できなかった
何故ここまでSSLの警告表示にこだわるのか？
それはGoogle様のご機嫌伺いのためでして。
最近はSNSで拡散されるコンテンツに切り替えているので、Google様のご機嫌伺いをする必要はないのですが気にってしまうんですよね。
今回はお詫びの意味も込めてJQueryプラグイン「Lity」の導入方法について紹介していきます。
INDEX
ライトボックス「Lity」の魅力と導入方法
なぜJQueryプラグイン「Lity」を導入したのか？
それは軽くて動作が軽快、そしてレスポンシブに対応している点です。
動作が軽いだけではなく、Wordpressのプラグインと比べても遜色はありません。
しかしJQeryのプラグインをWordpressに導入するには、かなりハードルが高くなってしまいます。
- ローカル環境の構築
- 子テーマの作成とアップロード
この2つが出来ていない人は絶対にやめましょう。
JQeryのプラグイン「Lity」に恋した理由とは？
動作が軽いのは既に紹介した通りですが、それだけではなく機能も豊富なんです。
- 画像のポップアップ表示
- inlineコンテンツのポップアップ
- Google Mapの表示も可能
- Youtube、Vimeo動画のポップアップ
- 外部リンクをポップアップ表示
唯一「Easy Fancy Box」と比べて弱点はギャラリーの表示を出来ない所です。
画像のギャラリー表示は色々と工夫すれば可能なのですが、今回は混乱してしまうと思うので紹介は差し控えますね。
JQeryのプラグイン「Lity」の導入方法ファーストステップ
何度も言って恐縮ですが、あなたが使っているテーマで警告表示が出ないなら「Lity」に変える必要はありません。
それではJQeryのプラグイン「Lity」の導入方法を紹介していきます。
ボタンをクリックすると「GitHub」のページに移動します。
- 今回はZIPファイルをダウンロードしてください
- 任意の場所に保存して下さい
- ZIPファイルを解凍します
- 「dist」ファルダを開きましょう
- lity.css、lity.min.css、lity.min.js
この「dist」ファルダの中の「CSS」と「JS」ファイルを使用します。CSSをカスタマイズしない場合は「lity.min.css」を使用します。
難しい事は考えないで子テーマに「Lity」をアップロード
ここからは中上級者向けです。
くれぐれも初心者の方は真似をしないようにしましょう。
何度も言いますが「ローカル環境」と「子テーマ」が必須だと考えて下さい。もしこの2つが出来ていない場合は残念ですがあきらめましょう。
- 親テーマの「header.php」をコピー
- 子テーマに「js」フォルダを作成
かなり面倒な話しになってきましたよね。
画像を参考にしながら作業を進めてて下さい。
いよいよ最終段階「ファイルをアップロードしましょう！
面倒な話はまだまだ続きます。
次はファイルをアップロードしなければいけません。
- FTPソフトを使ってアップロード
- サーバーの管理画面からアップロード
どちらでも構いませんが契約しているサーバーによって、管理画面は違うのでFTPソフトでアップロードした方が簡単かもしれません。
- 作成した「js」フォルダに「lity.min.js」をアップロード
- 次に「lity.min.css」を「style.css」と同じ階層にアップロード
- 次に「header.php」も「style.css」と同じ階層にアップロード
もう一息で終わりなので頑張りましょう。
PHPコードを書き加えて「Lity」の導入は終了！
この作業が最後になります。
「header.php」に以下の関数を記入して下さい。
<link href="<?php echo get_stylesheet_directory_uri(); ?>/css/lity.min.css" rel="stylesheet">
「header.php」の中に上のPHPコードを追記して下さい。場所はそれほど考える必要はないのでご安心を
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/lity.min.js"></script>
「/body」タグの直前に上記のコードを追記して下さい。
今回紹介した方法は全て「子テーマ」を作成している前提となります。親テーマに直接書き込む場合はPHPのコードの書き方が変わるので注意しましょう。
JQueryプラグイン「Lity」が出来ること！
正直言って前置きが長すぎますよね。
分かってはいるんですけど、これだけはしっかりと説明しないといけないので。
それではJQueryプラグイン「Lity」で出来ることを紹介します。
<a href="URL" target="_blank" data-lity>Movie</a>
たった「data-lity」を加えるだけです。
これで全てに対応できますし、JSを書き換えれば「data-lity」も必要ありません。
私はオススメはしませんが。
ここまでしてライトボックスを導入する意味があるの？
そうなんですよね。
でも「Easy Fancy Box」で決まり！
こんな記事を書いた手前、素通りは出来ないんですよ。
今回はWordpressのプラグインではなく、JQueryプラグインを導入しました。あくまでもSSLの警告が私のテーマでは解決できなかったので導入したまでです。
あなたが使っているテーマで同じような問題が起きていないのであれば、そのまま「Easy FancyBox」を使用しても構いません。
正直言うと疲れました。
今更ながらですが情報発信の責任の重さを痛感しています。
最後まで読んでくれるてくれて感謝です。
それでは次回お会いするまで、さようなら！