こんにちは。@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を使う機会が出来て本当に良かったです！！
![Microsoft Azure上の超高速WordPress仮想マシン「KUSANAGI」上で独自ドメインを設定できた！[仮想マシン][サブドメインなし]](https://ryo.nagoya/wp-content/uploads/2015/09/ss_2015-09-13_15_41_59-2.png "Microsoft Azure上の超高速WordPress仮想マシン「KUSANAGI」上で独自ドメインを設定できた！[仮想マシン][サブドメインなし]")
![「サイドバーの引数の配列で id が設定されてない」と出るのを対処してみました[WordPress4.2.1][wp-material]](https://ryo.nagoya/wp-content/uploads/2015/05/スクリーンショット-2015-05-03-19.15.17.png "「サイドバーの引数の配列で id が設定されてない」と出るのを対処してみました[WordPress4.2.1][wp-material]")
![[NG]Microsoft Azure上の超高速WordPress仮想マシン「KUSANAGI」を常時SSL・HTTP/2化に対応させるために移設する](https://ryo.nagoya/wp-content/uploads/2017/02/ss_2017-02-13_1_21_51.jpg "[NG]Microsoft Azure上の超高速WordPress仮想マシン「KUSANAGI」を常時SSL・HTTP/2化に対応させるために移設する")
![[謝罪]Omakerより頂いた高耐久&リバーシブルLightningケーブルを8ヶ月で壊してしまいました[LAT100]](https://ryo.nagoya/wp-content/uploads/2017/07/IMG_0275-2.jpg "[謝罪]Omakerより頂いた高耐久&リバーシブルLightningケーブルを8ヶ月で壊してしまいました[LAT100]")
![[PR]iPhoneを紛失した時は、「Leawo iPhoneデータ復元」に助けてもらおう！[iOSDataRecovery]](https://ryo.nagoya/wp-content/uploads/2016/09/ss_2016-09-12_21_04_08.jpg "[PR]iPhoneを紛失した時は、「Leawo iPhoneデータ復元」に助けてもらおう！[iOSDataRecovery]")
![速報 [iOS 10 beta 3]iOS10でFlappy Birdを楽しもう！[GBA4iOS2.1]](https://ryo.nagoya/wp-content/uploads/2016/07/IMG_2184-1.png "速報 [iOS 10 beta 3]iOS10でFlappy Birdを楽しもう！[GBA4iOS2.1]")
![[iPhone6]iOS 10 Beta 1 vs iOS9.3.2 vs iOS9.2とベンチマーク比較！勝者は誰だ？](https://ryo.nagoya/wp-content/uploads/2016/06/IMG_0666-1.png "[iPhone6]iOS 10 Beta 1 vs iOS9.3.2 vs iOS9.2とベンチマーク比較！勝者は誰だ？")
![iPhone6をiOS 10 Developer Beta 1にアップデートする[エラー45に対処できた！]](https://ryo.nagoya/wp-content/uploads/2016/06/IMG_0386-1.jpg "iPhone6をiOS 10 Developer Beta 1にアップデートする[エラー45に対処できた！]")
![[謝罪]結果6.0.1 marshmallow辺りがベンチマーク上だったけど、5.1.1も完全に負けてはなかった{“razor” for Nexus 7 [2013] (Wi-Fi)}](https://ryo.nagoya/wp-content/uploads/2016/01/ss-2015-12-08-18_59_03.png "[謝罪]結果6.0.1 marshmallow辺りがベンチマーク上だったけど、5.1.1も完全に負けてはなかった{“razor” for Nexus 7 [2013] (Wi-Fi)}")
![[Nexus7 2013]6.0 Marshmallowでもベンチマークが測れるようになった！(Antutu Benchmark V6.0) アップデートは正解だったのか？](https://ryo.nagoya/wp-content/uploads/2015/12/ss-2015-12-08-18.59.03.png "[Nexus7 2013]6.0 Marshmallowでもベンチマークが測れるようになった！(Antutu Benchmark V6.0) アップデートは正解だったのか？")
![Nexus 7 [2013] (Wi-Fi)を6.0 Marshmallowにファクトリーイメージからアップデートしてみました！[要ブートローダーアンロック]](https://ryo.nagoya/wp-content/uploads/2015/10/Screenshot_20151006-201706.png "Nexus 7 [2013] (Wi-Fi)を6.0 Marshmallowにファクトリーイメージからアップデートしてみました！[要ブートローダーアンロック]")
![Nexus 7 [2013] (Wi-Fi)にも6.0 Marshmallowのファクトリーイメージが来た！恒例のあのやり方でアップデートできるよ！[要ブートローダーアンロック]](https://ryo.nagoya/wp-content/uploads/2015/10/slooProImg_20151006132620.jpg "Nexus 7 [2013] (Wi-Fi)にも6.0 Marshmallowのファクトリーイメージが来た！恒例のあのやり方でアップデートできるよ！[要ブートローダーアンロック]")
![[Skyland Ventures Campus in 名古屋]起業家の講演を聞き、その一歩への世界を体感できてすごく有意義な時間でした #SVcampus](https://ryo.nagoya/wp-content/uploads/2016/08/IMG_2684.jpg "[Skyland Ventures Campus in 名古屋]起業家の講演を聞き、その一歩への世界を体感できてすごく有意義な時間でした #SVcampus")
![こちらで有意義な時間を過ごさせていただきました！「【ハイブリッドアプリ開発ハンズオン】クラウドワークス × Monaca × NCMB]」#ncmb](https://ryo.nagoya/wp-content/uploads/2016/03/IMG_8772-2.jpg "こちらで有意義な時間を過ごさせていただきました！「【ハイブリッドアプリ開発ハンズオン】クラウドワークス × Monaca × NCMB]」#ncmb")
![[【WordBench Nagoya 1月度】jQueryで動かしてみよう！ & WordPressに組み込んでみよう！]に参加してきました！！](https://ryo.nagoya/wp-content/uploads/2016/01/IMG_7825.jpg "[【WordBench Nagoya 1月度】jQueryで動かしてみよう！ & WordPressに組み込んでみよう！]に参加してきました！！")
![[宅録]「365日の紙飛行機」トランペットで吹いてみました！Youtubeにてご静聴ください！！](https://ryo.nagoya/wp-content/uploads/2016/02/slooProImg_20160211150443.jpg "[宅録]「365日の紙飛行機」トランペットで吹いてみました！Youtubeにてご静聴ください！！")
![[トランペット]Hetman2のバルブオイルからberpbiooil LITEに変えたら、速すぎて手がついていかなくなった[Trumpet]](https://ryo.nagoya/wp-content/uploads/2016/01/IMG_7451.jpg "[トランペット]Hetman2のバルブオイルからberpbiooil LITEに変えたら、速すぎて手がついていかなくなった[Trumpet]")
![[ロゼレム]疲れた後に、昼まで寝てしまう人にオススメな薬！](https://ryo.nagoya/wp-content/uploads/2016/01/slooProImg_20160115160611.jpg "[ロゼレム]疲れた後に、昼まで寝てしまう人にオススメな薬！")
![[睡眠の頓服]ルネスタ錠からレンドルミンに変えてから眠れるようになった](https://ryo.nagoya/wp-content/uploads/2015/12/slooProImg_20151211195005-e1449831212609.jpg "[睡眠の頓服]ルネスタ錠からレンドルミンに変えてから眠れるようになった")
![人生で初めてのお酒を飲んでみました！(「カルピスサワー」完熟マンゴー）[リキュール]](https://ryo.nagoya/wp-content/uploads/2015/09/IMG_5871.jpg "人生で初めてのお酒を飲んでみました！(「カルピスサワー」完熟マンゴー）[リキュール]")
![[スタバ新作]ベイクド チーズケーキ フラペチーノ®をカスタマイズして飲み比べ！](https://ryo.nagoya/wp-content/uploads/2016/06/slooProImg_20160601184447.jpg "[スタバ新作]ベイクド チーズケーキ フラペチーノ®をカスタマイズして飲み比べ！")
![LoFT NAGOYAのカフェに入ってみたらとても良かった！[VILLAGE CAFE]](https://ryo.nagoya/wp-content/uploads/2015/10/IMG_6138.jpg "LoFT NAGOYAのカフェに入ってみたらとても良かった！[VILLAGE CAFE]")
![[スタバ]あるブログを参考に初めてフラペチーノをカスタマイズして注文してみました！](https://ryo.nagoya/wp-content/uploads/2015/09/IMG_5842-2.jpg "[スタバ]あるブログを参考に初めてフラペチーノをカスタマイズして注文してみました！")
![[今日まで！]5/22日までの学割で「Kindle 7」を買い「Kindle Paperwhite (第1世代)」と比較、ストレージ容量だけ唯一廉価版の勝ち！](https://ryo.nagoya/wp-content/uploads/2016/05/IMG_0060.jpg "[今日まで！]5/22日までの学割で「Kindle 7」を買い「Kindle Paperwhite (第1世代)」と比較、ストレージ容量だけ唯一廉価版の勝ち！")
![Android5.0Lolipopはどこまでバックアップができるのか試してみました。[root権限なし]](https://ryo.nagoya/wp-content/uploads/2014/11/スクリーンショット_2014-11-16_17_20_121.png "Android5.0Lolipopはどこまでバックアップができるのか試してみました。[root権限なし]")
![早速Nexus7 2013を自力でMacからAndorid5.0Lolipopにしたよー！！[要ブートローダーアンロック]](https://ryo.nagoya/wp-content/uploads/2014/11/スクリーンショット_2014-11-13_21_49_05.png "早速Nexus7 2013を自力でMacからAndorid5.0Lolipopにしたよー！！[要ブートローダーアンロック]")
![[Kindle本]これもこれもこれも！！285円!? 主にプログラミングの本！](https://ryo.nagoya/wp-content/uploads/2014/10/programing-hon-sale-300x300.png "[Kindle本]これもこれもこれも！！285円!? 主にプログラミングの本！")
![韓国ドラマリメイクの「銭の戦争」いかにもネトウヨから叩かれそうなドラマが意外とストーリーがよく面白い[쩐의 전쟁]](https://ryo.nagoya/wp-content/uploads/2015/02/スクリーンショット-2015-02-01-17.57.531.png "韓国ドラマリメイクの「銭の戦争」いかにもネトウヨから叩かれそうなドラマが意外とストーリーがよく面白い[쩐의 전쟁]")
![[Wi-Fiを有線LANに変換]PLANEXのコンバーターを使ってWi-Fi接続！Panasonic BZT-600にて成功！！](https://ryo.nagoya/wp-content/uploads/2015/02/IMG_19921.jpg "[Wi-Fiを有線LANに変換]PLANEXのコンバーターを使ってWi-Fi接続！Panasonic BZT-600にて成功！！")
![[マンガ]「健康で文化的な最低限度の生活 １」をKindleで読みました。これから社会で頑張っていこう！という人に読んで欲しい！](https://ryo.nagoya/wp-content/uploads/2015/02/IMG_19281.jpg "[マンガ]「健康で文化的な最低限度の生活 １」をKindleで読みました。これから社会で頑張っていこう！という人に読んで欲しい！")
コメント
コメントはありません。
※Nameを空欄にすると匿名になります。
※コメント欄のみでコメントできます。
※管理者が承認するまで公開されません。