あなたも気づきました？
実はWordpressライトボックス「Easy Fancy Box」をやめたんです。

理由は後で説明しますが、以前記事で紹介した手前もあるので報告をせねばと思いまして。

誤解の無いように言っておきますが「Easy Fancy Box」を使うのはやめましょうと言う事ではなくて、あくまでも私が使用しているテーマとは相性が悪かっただけの話です。

何故ここまでSSLの警告表示にこだわるのか？
それはGoogle様のご機嫌伺いのためでして。

最近はSNSで拡散されるコンテンツに切り替えているので、Google様のご機嫌伺いをする必要はないのですが気にってしまうんですよね。

今回はお詫びの意味も込めてJQueryプラグイン「Lity」の導入方法について紹介していきます。

参考記事

WordPressライトボックスは「Easy FancyBox」で決定

なぜJQueryプラグイン「Lity」を導入したのか？
それは軽くて動作が軽快、そしてレスポンシブに対応している点です。

動作が軽いだけではなく、Wordpressのプラグインと比べても遜色はありません。

しかしJQeryのプラグインをWordpressに導入するには、かなりハードルが高くなってしまいます。

この2つが出来ていない人は絶対にやめましょう。

参考記事

初心者でも簡単bitnamiでWordPressローカル環境構築

参考記事

WordPressをカスタマイズするなら子テーマの作成は必須！

動作が軽いのは既に紹介した通りですが、それだけではなく機能も豊富なんです。

唯一「Easy Fancy Box」と比べて弱点はギャラリーの表示を出来ない所です。

画像のギャラリー表示は色々と工夫すれば可能なのですが、今回は混乱してしまうと思うので紹介は差し控えますね。

何度も言って恐縮ですが、あなたが使っているテーマで警告表示が出ないなら「Lity」に変える必要はありません。

それではJQeryのプラグイン「Lity」の導入方法を紹介していきます。

Lityの公式サイトにアクセス

Lity公式サイトはコチラ

1. Downloadボタンをクリック

ボタンをクリックすると「GitHub」のページに移動します。

ファイルをダウンロード

1. 今回はZIPファイルをダウンロードしてください

ZIPファイルを展開

1. ZIPファイルを解凍します
2. 「dist」ファルダを開きましょう
3. lity.css、lity.min.css、lity.min.js

この「dist」ファルダの中の「CSS」と「JS」ファイルを使用します。CSSをカスタマイズしない場合は「lity.min.css」を使用します。

ここからは中上級者向けです。
くれぐれも初心者の方は真似をしないようにしましょう。

何度も言いますが「ローカル環境」と「子テーマ」が必須だと考えて下さい。もしこの2つが出来ていない場合は残念ですがあきらめましょう。

用意するファイル

1. 親テーマの「header.php」をコピー
2. 子テーマに「js」フォルダを作成

かなり面倒な話しになってきましたよね。
画像を参考にしながら作業を進めてて下さい。

面倒な話はまだまだ続きます。
次はファイルをアップロードしなければいけません。

どちらでも構いませんが契約しているサーバーによって、管理画面は違うのでFTPソフトでアップロードした方が簡単かもしれません。

もう一息で終わりなので頑張りましょう。

この作業が最後になります。
「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」で出来ることを紹介します。

 <a href="URL" target="_blank" data-lity>Movie</a>
 

たった「data-lity」を加えるだけです。
これで全てに対応できますし、JSを書き換えれば「data-lity」も必要ありません。

私はオススメはしませんが。

そうなんですよね。
でも「Easy Fancy Box」で決まり！

こんな記事を書いた手前、素通りは出来ないんですよ。

今回はWordpressのプラグインではなく、JQueryプラグインを導入しました。あくまでもSSLの警告が私のテーマでは解決できなかったので導入したまでです。

あなたが使っているテーマで同じような問題が起きていないのであれば、そのまま「Easy FancyBox」を使用しても構いません。

正直言うと疲れました。
今更ながらですが情報発信の責任の重さを痛感しています。

最後まで読んでくれるてくれて感謝です。
それでは次回お会いするまで、さようなら！

参考記事

WordPressライトボックスは「Easy FancyBox」で決定

参考記事

初心者でも簡単bitnamiでWordPressローカル環境構築

参考記事

WordPressをカスタマイズするなら子テーマの作成は必須！