[【WordBench Nagoya 1月度】jQueryで動かしてみよう！ & WordPressに組み込んでみよう！]に参加してきました！！

こんにちは。@ryorasppです。 WordBench Nagoya 201601

今日は、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 & MAMP PRO 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を使う機会が出来て本当に良かったです！！