こんにちは。@ryorasppです。
今日は、WordBench Nagoya 1月度に参加させていただいております。
【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をダウンロード
MAMPをダウンロード
最新の3.5をインストールします
254MBとちょっとでかいので注意
ダウンロードにはおよそ37分かかります。
前もって準備しておくのが一番ですね。
MAMPのインストール画面
インストール完了！
MAMP（左側）を起動
MAMP PROを確認のチェックを外して、MAMPを起動をクリック！
ここから最新のWordPressをダウンロード
MAMP上にWordPressを設置
htdocsの中にダウンロードしたWordPressを入れます。
MAMPのphpMyadminからデータベースを追加
WordPressをインストール
準備完了！
参加模様
初めに以下のファイルをダウンロード
http://kumamimumemo.info/WBN201601.zip
アジェンダ
配布されてるZIPはテーマファイルなので、先ほどのMAMPのWordPressのテーマに入れる
テーマに適応できれば、このような画面が出てきます。
jQueryを動かす前に
基本的な書き方
テーマのanimate.jsを編集する
WordPressが用意するjQuery
Animation!!を押してこうなれば成功です！
今回のコードの解説
以上で基本的な書き方終了で、ここから休憩です。
fade◯◯、slide◯◯、show&hide、animete
このワプーが、
右に移動したら成功！
解説1
解説2
解説3
バブリングや動きすぎの対処法
対処法1
対処法2
高度なテクニック
こちらをやってみると、重なってしまったので、修正
成功しました！
最後に
jQueryはJavaScriptを拡張してくれるもの、簡単にJavaScript をかけるようにしてくれるもの、というイメージがありましたが、
いざ自分が使おうとすると、難しそうだからまた今度と、
ずっと使ってこなかったです。
テーマカスタマイズにjQuery使ってカスタマイズした！と言えるようになりたいなあとは思ってました。
さて、今回、jQueryを書いてみて、前よりかは座敷が低くなったようで、家に帰ってから、もっとjQueryで何ができるのか知りたい！ そう思うようになりました。
そのことに感謝です。
それでは次のWordBench Nagoyaはデザインのことを学べるらしく、そちらも楽しみです。
予定が空いていたら参加します！
それでは、今回はjQueryを使う機会が出来て本当に良かったです！！
関連記事
投稿者プロフィール
- 通信の短大生
-
統合失調症と睡眠障害とRLSを治療しながら、通信制の大学と英会話で英語を学んでる大学生。
2016年セブ島へ1ヶ月語学留学してきた。
ジャズトランペットとガジェット関連が好きです。
WordPress関連を勉強してます。
Mac/iPadPro9.7/iPhone5s/pebble/Nexus7/XperiaZ1
TOEIC
2016年03月13日 LR 235 (Listening 180 Reading 55)
[ 最近のWordPressコミュニティでの活動 ]
2017 WordFesNagoya 実行委員 Webサイト制作チーム & セッションスピーカー
2016 WordFesNagoya 実行委員 Webサイト制作チーム & セッションスピーカー
