こんにちは。@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を使う機会が出来て本当に良かったです！！