[Diver]GIFアニメの再生を制御するjQueryプラグイン「gifffer」をワードプレスに導入！

 

１．はじめに（茶番）

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

２．少しだけjQueryの説明と思ったけど・・・

 

 

 

 

 

↓「jQuery」とはを分かりやすく解説してくれているサイトへはこちら

（ぶっちゃけjQueryとは何かを一ミリも知らなくてもjQueryプラグインは使うことができます）

jQueryについての解説はこちら

 

３．jQueryプラグイン「gifffer」の導入方法（ワードプレステーマ「Diver」で説明）

 

jQueryプラグイン導入作業の流れ

 

よし、それじゃまずは今からやる作業の流れを見ていくぞ。

 

結構簡単そうだろう？

「scripts.js」ファイルを作成する

 

「作業１」では自分のデスクトップに「scripts.js」というファイルを作成するんだ。

メモ帳などの適当なテキストエディタに、下のコードをまるっとコピーして貼り付けるんだ。

 

貼り付けたら、「scripts.js」という名前でデスクトップに保存するんだけど、
「ファイルの種類」を「すべてのファイル」にするのを忘れずにな！

 

作った「scripts.js」ファイルをサーバーにおく

 

さて、お次は今作った「scripts.js」ファイルをサーバーにアップロードするぞ。

今回は使っているサーバーが「エックスサーバー」というサーバーだから、

「エックスサーバー」を例に説明するけど、たぶん他のサーバーを使っている人も

考え方は一緒だから読み替えて見てくれよな。

 

エックスサーバーでサーバーにファイルをアップロードするにはまず、インフォパネルにログインするんだ。

 

 

ログインしたら、下にスクロールだ。すると「ファイルマネージャ」ってのがあるから「ログイン」してくれ。

 

こんな画面に遷移したらログイン成功だ。

そしたら、ファイルを置く場所まで下っていくぜ。

まずは自分のサイトの「ドメイン名」を探してそいつをクリック。

 

ここからは、人によって違うかもしれないから先に言っとくけど、目的の場所は「子テーマが置いてあるフォルダ」だ。

もしフォルダ構成が違うって人は頑張って子テーマが置いてあるフォルダを見つけてくれ。

とりあえず僕の環境だと次は「public_html」をクリック。

 

その次は「wp-content」をクリック。

 

次は「themes」をクリック。

 

次は「diver-child」をクリックだ。ちなみに「Diver」を使っている人は、このフォルダが「子テーマが置いてあるフォルダ」にあたるぞ。

 

ここまできたらいよいよファイルのアップロードだ。

アップロード方法はまず、「ファイルのアップロード」の下にある「参照...」ボタンをクリックして、先ほど作った「scripts.js」を選択する。

それが終わったら「アップロード」ボタンを押すとアップロード完了だ！

 

※アップロードしたファイルの権限が他のファイルと違うのが気になる人は「パーミッション変更」で変えることもできるぞ。

↓詳しいことはエックスサーバー公式サイトを見てくれ。

パーミッション（権限）について

 

子テーマをカスタマイズして「gifffer」を有効にする

 

「scripts.js」ファイルをアップロードできたら、後は子テーマを少しカスタマイズして「gifffer」を有効にするだけだ。

子テーマのカスタマイズは「ダッシュボード画面」→「外観」→「テーマの編集」からできるぞ。

 

上の画像を参考に、「テーマのための関数（function.php）」をクリックして「function.php」を開き、

以下のコードをまるっとコピーして、元々あるコードに追記するような形ではり付けた後、忘れずに「ファイルを更新」ボタン押せばカスタマイズ完了だ！

 

 

 

※もしかすると、他の「gifffer」導入記事を見た後に、この記事を見た人は「gifffer」本体はダウンロードしないの？と思うかもしれません。

・・安心してくだい。実は「jQuery」のプラグインはダウンロードしなくても使えるものがあるんです。

しかし、自分でダウンロードした「gifffer」が使いたいという人は、上のコードの

部分を書き換えて、自分のサーバー上の「gifffer」ファイルまでのパスにすればＯＫです。

（その時エックスサーバーをお使いの方は「public_html」はパスから外してください）

おススメの置き場としては、「scripts.js」と同じく子テーマの中か、新しく「js」というフォルダをつくってその中に

入れるとかです。

 

 

４．「gifffer」の使い方

 

 

 

 

 

 

 

 

 

 

※クリックして再生

 

 

 

 

 

５．おわりに

 

本来は「gifffer」を導入すると「GIFアニメ」に再生ボタンが付くはずなのですが、

条件によっては再生ボタンがつかないこともあるようですね。

（今回の記事のように）

 

それでもちゃんとアニメーション制御はできているみたいなのでよしとしましょう。

（原因がわからない）

 

それとちなみになのですが、この記事は「Diver」の開発者様に「gifffer」の導入方法を問い合わせて、

その回答をもとに作成した記事となっております。

（めちゃくちゃ神対応でほとんどコピペで導入できた！）

 

こちらに問い合わせに関する記事も置いておきますのでよかったら見ていってね。