こんにちは。@ryorasppです。

http://www.slideshare.net/kuma2515/wordbench-nagoya-201601

WordBench Nagoya 201601







今日は、WordBench Nagoya 1月度に参加させていただいております。

https://wbnagoya.doorkeeper.jp/events/37182

【WordBench Nagoya 1月度】jQueryで動かしてみよう! & WordPressに組み込んでみよう! – WordBench Nagoya | Doorkeeper

jQueryで動かしてみよう! & WordPressに組み込んでみよう!

みなさんがjQueryを使えるようになりたい! というときのひとつにアニメーションを使った動きをつけたいという要望があると思います。
今回はjQueryのアニメーションをちょっと学びつつ、jQueryをWordPressに導入するときの注意点をワークショップ形式で学ぶことができればと思います。

内容

※変更の可能性もございますのでご注意ください。
1.jQueryを静的サイトに導入しよう
2.jQueryを使って静的サイトで動かしてみよう
3.WordPressでjQueryを動かすときの注意点
4.WordPress上でjQueryを呼び出す方法

ということで、今回の内容は「jQuery」らしいです。

MAMPをインストールして準備

今回はサーバーのご用意がないので、XAMPP・MAMPのインストールをできるだけお願いいたします。

ということですので、事前にMAMPを入れてテスト用のWordPressをインストールします。

MAMPをダウンロード

https://www.mamp.info/en/

MAMP & MAMP PRO

MAMPをダウンロード
MAMPをダウンロード

最新の3.5をインストールします
最新の3.5をインストールします

254MBとちょっとでかいので注意
254MBと結構でかいので注意

ダウンロードにはおよそ37分かかります。
前もって準備しておくのが一番ですね。
ダウンロードにはおよそ37分かかります。

MAMPのインストール画面

MAMPのインストール画面

インストール完了!
完了!

MAMP(左側)を起動
MAMPを起動

MAMP PROを確認のチェックを外して、MAMPを起動をクリック!
警告

ここから最新のWordPressをダウンロード
ここから最新のWordPressをダウンロード

MAMP上にWordPressを設置

htdocsの中にダウンロードしたWordPressを入れます。

ss_2016-01-23_11_09_13

MAMPのphpMyadminからデータベースを追加

ss_2016-01-23_14_00_58

ss 2016-01-23 11.10.22

ss 2016-01-23 11.10.27

WordPressをインストール

ss 2016-01-23 11.10.33

ss 2016-01-23 11.10.39

ss_2016-01-23_11_11_17

ss 2016-01-23 11.11.24

ss 2016-01-23 11.11.32

準備完了!

ss 2016-01-23 11.11.44

参加模様

初めに以下のファイルをダウンロード

http://kumamimumemo.info/WBN201601.zip

アジェンダ

IMG_7827

配布されてるZIPはテーマファイルなので、先ほどのMAMPのWordPressのテーマに入れる

ss 2016-01-23 14.27.28

テーマに適応できれば、このような画面が出てきます。
ss 2016-01-23 14.24.18

jQueryを動かす前に

IMG_7828

IMG_7829

基本的な書き方

IMG_7831

テーマのanimate.jsを編集する

ss 2016-01-23 14.43.06

WordPressが用意するjQuery

IMG_7833

IMG_7834

IMG_7835

IMG_7836

IMG_7837

IMG_7839

ss 2016-01-23 14.54.23

ss_2016-01-23_14_58_55

header_php_と_animate_js_と_wbn201601

IMG_7840

ss 2016-01-23 15.04.44

ss 2016-01-23 15.17.01

Animation!!を押してこうなれば成功です!
ss_2016-01-23_15_17_31

今回のコードの解説

IMG_7844

IMG_7841

IMG_7842

IMG_7843

IMG_7852

以上で基本的な書き方終了で、ここから休憩です。

fade◯◯、slide◯◯、show&hide、animete

IMG_7853

IMG_7854

IMG_7855

IMG_7856

IMG_7858

IMG_7859

IMG_7861

ss 2016-01-23 16.11.28

このワプーが、
ss 2016-01-23 16.11.48

右に移動したら成功!
ss 2016-01-23 16.11.54

解説1
解説1

解説2
解説2

解説3
解説3

バブリングや動きすぎの対処法

IMG_7865

IMG_7866

IMG_7867

対処法1
対処法1

対処法2
対処法2

高度なテクニック

IMG_7871

IMG_7872

IMG_7873

こちらをやってみると、重なってしまったので、修正

ss 2016-01-23 16.43.03

成功!
成功しました!

最後に

jQueryはJavaScriptを拡張してくれるもの、簡単にJavaScript をかけるようにしてくれるもの、というイメージがありましたが、

いざ自分が使おうとすると、難しそうだからまた今度と、

ずっと使ってこなかったです。

テーマカスタマイズにjQuery使ってカスタマイズした!と言えるようになりたいなあとは思ってました。

さて、今回、jQueryを書いてみて、前よりかは座敷が低くなったようで、家に帰ってから、もっとjQueryで何ができるのか知りたい! そう思うようになりました。

そのことに感謝です。

それでは次のWordBench Nagoyaはデザインのことを学べるらしく、そちらも楽しみです。

予定が空いていたら参加します!

それでは、今回はjQueryを使う機会が出来て本当に良かったです!!

この記事が気に入ったら
いいね ! しよう

Twitter で