スポンサーリンク

1.はじめに(茶番)

 

ボブ
gifgifgifgifgifgifgifgif..etc..

 

サム
お、おい、どうしちゃったんだいボビー、虚ろな表情筋をして。
ご自慢の筋肉もしょんぼりしているぞ。

 

ボブ
あぁ、サミーかい・・・。
僕はもうダメだ・・・。

 

サム
うぉい!こいつは只事じゃあないぞ。
どうしたんだよ、僕に言ってごらん!

 

ボブ
こればっかりはいくらサミーでもダメさ。僕のこの筋肉でもダメだったのだから・・・。

 

サム
君の筋肉が役に立ったことなんて、たったの一度もないだろう。
いいから何があったかこの僕に言ってごらん。

 

ボブ
なんだか文句を言われた気がするけど、まあいいや。
実は、実は、ブログに貼ったgifアニメーションが勝手に再生しまくっちゃって困っているんだ!

 

サム
はっはっは、なんだ、そんなことか。

 

ボブ
そんなことって・・・。
僕にとっては一大事さ!それこそ困りすぎて筋トレができないくらいに!

 

サム
つまりは、ブログに貼り付けたgifアニメーションが勝手に再生されまくらないようにしたいんだろう?
僕にまかせてよ!

 

ボブ
ほ、ほんとうにできるのかい、そんなことが!
世界の理に反せずとも!

 

サム
大げさだなボビーは。
GIFアニメの制御はjQueryプラグインで一発さ。

 

ボブ
jQueryプラグインでそんなこともできるのかい!?
オーマイマッスル!!

 

サム
・・・さて、茶番はこれくらいにして説明に入るよ。

 

 

2.少しだけjQueryの説明と思ったけど・・・

 

ボブ
ウェイ、ウェイ、ウェイトッ!
ちょっと待っておくれよ。そもそもjQueryって「メイドイン・どこ」なんだよ?
何味なんだよ?これっぽちも分からないよっ!

 

サム
まったくボビーってやつは。
仕方がない、ここは男サム、親友の君のために一肌脱いで、jQueryの説明をしようじゃあないか。

 

ボブ
オーイエス!やっぱり持つべきものはベンチプレスと親友だね!

 

サム
はい、ということで「jQuery」については以下のサイト様が分かりやすく解説してくださっていますので、
ぜひご覧ください。

 

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

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

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

 

ボブ
自分では解説しないんだね・・・。

3.jQueryプラグイン「gifffer」の導入方法(ワードプレステーマ「Diver」で説明)

この記事で使用している環境について
利用サーバー:「エックスサーバー」
利用ワードプレステーマ:「Diver」

 

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

 

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

  1. 「scripts.js」ファイルを作成する
  2. 作った「scripts.js」ファイルをサーバーにおく
  3. 子テーマをカスタマイズして「gifffer」を有効にする

 

結構簡単そうだろう?

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

 

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

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

 

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

 

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

 

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

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

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

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

 

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

 

インフォパネル

 

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

 

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

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

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

filemanager1

 

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

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

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

filemanager2

 

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

filemanager3

 

次は「themes」をクリック。

filemanager4

 

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

filemanager5

 

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

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

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

filemanager6

 

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

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

パーミッション(権限)について

 

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

 

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

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

filemanager07

 

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

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

 

 

 

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

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

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

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

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

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

入れるとかです。

 

 

4.「gifffer」の使い方

 

サム
というわけだ。わかったかボビー?

 

ボブ
サンキューサミー!これでGIFアニメが勝手に再生されないは・・・、
asd;lfkjsdf:aslf;dkj!!!!

 

サム
どうしたんだよボビー?
急にバグついたりして。

 

ボブ
おかしい、おかしいよサミー、あんなに頑張ってjQueryプラグインを入れたのにまだ勝手にGIFアニメが再生されるんだ。

 

サム
ああ、それは単にコードの書き換えがまだなだけさ。
「gifffer」を使うにはGIFアニメのコードを少し書き換えないといけないんだ。

 

ボブ
サミー、コードを書き換えるなんて高等ティクニック僕には無理さ・・・。

 

 

サム
大丈夫さ、ボビー。下の画像のように「テキスト」画面に切り替えて、
「src」のところを「data-gifffer」に書き換えるだけだよ。

filemanager08

ボブ
なぁんだ、これくらいなら僕にもできそうだぞ。

 

サム
できているか確認するから、何でもいいからココにGIFアニメを張り付けてごらん。

 

※クリックして再生
マッスル

ボブ
どうだい、できているだろう?

 

サム
さすがボビー、バッチリだね!

 

ボブ
目にブラジャー着けてるのに見えるのかな?

 

 

 

5.おわりに

 

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

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

(今回の記事のように)

 

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

(原因がわからない)

 

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

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

(めちゃくちゃ神対応でほとんどコピペで導入できた!)

 

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

 

スポンサーリンク
おすすめの記事