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

こんにちは。@ryorasppです。
http://www.slideshare.net/kuma2515/wordbench-nagoya-201601
WordBench Nagoya 201601



今日は、WordBench Nagoya 1月度に参加させていただいております。

https://wbnagoya.doorkeeper.jp/events/37182
【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をダウンロード

https://www.mamp.info/en/
MAMP & MAMP PRO
MAMPをダウンロード MAMPをダウンロード 最新の3.5をインストールします 最新の3.5をインストールします 254MBとちょっとでかいので注意 254MBと結構でかいので注意 ダウンロードにはおよそ37分かかります。 前もって準備しておくのが一番ですね。 ダウンロードにはおよそ37分かかります。 MAMPのインストール画面 MAMPのインストール画面 インストール完了! 完了! MAMP(左側)を起動 MAMPを起動 MAMP PROを確認のチェックを外して、MAMPを起動をクリック! 警告 ここから最新のWordPressをダウンロード ここから最新のWordPressをダウンロード

MAMP上にWordPressを設置

htdocsの中にダウンロードしたWordPressを入れます。 ss_2016-01-23_11_09_13

MAMPのphpMyadminからデータベースを追加

ss_2016-01-23_14_00_58 ss 2016-01-23 11.10.22 ss 2016-01-23 11.10.27

WordPressをインストール

ss 2016-01-23 11.10.33 ss 2016-01-23 11.10.39 ss_2016-01-23_11_11_17 ss 2016-01-23 11.11.24 ss 2016-01-23 11.11.32

準備完了!

ss 2016-01-23 11.11.44

参加模様

初めに以下のファイルをダウンロード

アジェンダ

IMG_7827

配布されてるZIPはテーマファイルなので、先ほどのMAMPのWordPressのテーマに入れる

ss 2016-01-23 14.27.28 テーマに適応できれば、このような画面が出てきます。 ss 2016-01-23 14.24.18

jQueryを動かす前に

IMG_7828 IMG_7829

基本的な書き方

IMG_7831

テーマのanimate.jsを編集する

ss 2016-01-23 14.43.06

WordPressが用意するjQuery

IMG_7833 IMG_7834 IMG_7835 IMG_7836 IMG_7837 IMG_7839 ss 2016-01-23 14.54.23 ss_2016-01-23_14_58_55 header_php_と_animate_js_と_wbn201601 IMG_7840 ss 2016-01-23 15.04.44 ss 2016-01-23 15.17.01 Animation!!を押してこうなれば成功です! ss_2016-01-23_15_17_31

今回のコードの解説

IMG_7844 IMG_7841 IMG_7842 IMG_7843 IMG_7852 以上で基本的な書き方終了で、ここから休憩です。

fade◯◯、slide◯◯、show&hide、animete

IMG_7853 IMG_7854 IMG_7855 IMG_7856 IMG_7858 IMG_7859 IMG_7861 ss 2016-01-23 16.11.28 このワプーが、 ss 2016-01-23 16.11.48 右に移動したら成功! ss 2016-01-23 16.11.54 解説1 解説1 解説2 解説2 解説3 解説3

バブリングや動きすぎの対処法

IMG_7865 IMG_7866 IMG_7867 対処法1 対処法1 対処法2 対処法2

高度なテクニック

IMG_7871 IMG_7872 IMG_7873 こちらをやってみると、重なってしまったので、修正 ss 2016-01-23 16.43.03 成功! 成功しました!

最後に

jQueryはJavaScriptを拡張してくれるもの、簡単にJavaScript をかけるようにしてくれるもの、というイメージがありましたが、 いざ自分が使おうとすると、難しそうだからまた今度と、 ずっと使ってこなかったです。 テーマカスタマイズにjQuery使ってカスタマイズした!と言えるようになりたいなあとは思ってました。 さて、今回、jQueryを書いてみて、前よりかは座敷が低くなったようで、家に帰ってから、もっとjQueryで何ができるのか知りたい! そう思うようになりました。 そのことに感謝です。 それでは次のWordBench Nagoyaはデザインのことを学べるらしく、そちらも楽しみです。 予定が空いていたら参加します! それでは、今回はjQueryを使う機会が出来て本当に良かったです!!

関連記事


投稿者プロフィール

ryoraspp
ryoraspp通信の短大生
統合失調症と睡眠障害とRLSを治療しながら、愛知産業大学短期大学通信教育学部国際コミュニケーション学科卒業(英語)
2016年セブ島へ1ヶ月語学留学してきた。
ジャズトランペットとガジェット関連が好きです。
WordPressとES6関連を勉強してます。

Mac/iPadPro9.7/iPhone7 Plus/Apple Watch/pebble/XperiaZ1/Kindle Paperwhite (第1世代)

TOEIC
2016年03月13日 LR 235 (Listening 180 Reading 55)
2018年04月08日 LR 300 (Listening 180 Reading 120)

[ 最近のWordPressコミュニティでの活動 ]
WordCamp Haneda 2019 – START!セッションスピーカー
2017 WordFesNagoya 実行委員 Webサイト制作チーム & セッションスピーカー
2016 WordFesNagoya 実行委員 Webサイト制作チーム & セッションスピーカー