こんにちは。@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をダウンロード
ダウンロードにはおよそ37分かかります。
前もって準備しておくのが一番ですね。
MAMPのインストール画面
MAMP PROを確認のチェックを外して、MAMPを起動をクリック!
MAMP上にWordPressを設置
htdocsの中にダウンロードしたWordPressを入れます。
MAMPのphpMyadminからデータベースを追加
WordPressをインストール
準備完了!
参加模様
初めに以下のファイルをダウンロード
http://kumamimumemo.info/WBN201601.zip
アジェンダ
配布されてるZIPはテーマファイルなので、先ほどのMAMPのWordPressのテーマに入れる
jQueryを動かす前に
基本的な書き方
テーマのanimate.jsを編集する
WordPressが用意するjQuery
今回のコードの解説
以上で基本的な書き方終了で、ここから休憩です。
fade◯◯、slide◯◯、show&hide、animete
バブリングや動きすぎの対処法
高度なテクニック
こちらをやってみると、重なってしまったので、修正
最後に
jQueryはJavaScriptを拡張してくれるもの、簡単にJavaScript をかけるようにしてくれるもの、というイメージがありましたが、
いざ自分が使おうとすると、難しそうだからまた今度と、
ずっと使ってこなかったです。
テーマカスタマイズにjQuery使ってカスタマイズした!と言えるようになりたいなあとは思ってました。
さて、今回、jQueryを書いてみて、前よりかは座敷が低くなったようで、家に帰ってから、もっとjQueryで何ができるのか知りたい! そう思うようになりました。
そのことに感謝です。
それでは次のWordBench Nagoyaはデザインのことを学べるらしく、そちらも楽しみです。
予定が空いていたら参加します!
それでは、今回はjQueryを使う機会が出来て本当に良かったです!!
関連記事
投稿者プロフィール

- 通信の短大生
-
統合失調症と睡眠障害とRLSを治療しながら、通信制の大学と英会話で英語を学んでる大学生。
2016年セブ島へ1ヶ月語学留学してきた。
ジャズトランペットとガジェット関連が好きです。
WordPress関連を勉強してます。
Mac/iPadPro9.7/iPhone5s/pebble/Nexus7/XperiaZ1
[ 最近のWordPressコミュニティでの活動 ]
2017 WordFesNagoya 実行委員 Webサイト制作チーム & セッションスピーカー
2016 WordFesNagoya 実行委員 Webサイト制作チーム & セッションスピーカー
最新の投稿
考え事2018.04.12WordPress5.0でGutenbergになっても大丈夫!Ulyssesから更新できた!!
考え事2018.02.22Kindleであれもこれも全品一挙199円キャンペーン!やってるので今まで欲しかった英語の本をとても安く買えた!ブックオフより安い! 2/21日まで
iPhone2018.02.22スマートキングXが2018年1月から使えなくなったのを対処できた! #格安SIM #SmartKingX #下駄 #SIMロック解除アダプタ #ICCID
iPhone2017.12.31au版iPhone5sでdocomo系SIMを使うことに成功! #格安SIM #SmartKingX #下駄 #SIMロック解除アダプタ