ryo.nagoya

夢の夢を直向きに追いかけて本当にする

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

calendar

reload

こんにちは。@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

参加模様

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

http://kumamimumemo.info/WBN201601.zip

アジェンダ

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を使う機会が出来て本当に良かったです!!

この記事をシェアする

コメント

コメントはありません。

down コメントを残す




Optionally add an image (JPEG only)


※Nameを空欄にすると匿名になります。

※コメント欄のみでコメントできます。

※管理者が承認するまで公開されません。

関連記事

MacbookAirに本気で完璧にシールを貼る方法! WordFes Nagoyaのシールをいただいたので早速貼りました!! WordBench Nagoya 11月度にて
[マテリアル]「count.json」APIが廃止された今、ツイート数を取得する方法[wp-material]
I know was how to update of WordPress and the Plugins on KUSANAGI!
WordBench Nagoya 11月度参加してます!今回の内容はPHPの基本からテーマ作成まで!!
[NG]Microsoft Azure上の超高速WordPress仮想マシン「KUSANAGI」を常時SSL・HTTP/2化に対応させるために移設する
KUSANAGI上でWordPressやプラグインのアップデートの仕方をようやく知った!
[Skyland Ventures Campus in 名古屋]起業家の講演を聞き、その一歩への世界を体感できてすごく有意義な時間でした #SVcampus
ブログ塾に初参加しました! 現役プロ・ブロガーが語る「ファンが増えて10年継続できるブログのコツ」#ブログ塾
WordBench Nagoya 11月度のデザイナーさん必見の回の勉強会に参加してきました!
PHP技術者認定機構からPHP5の初級試験の問題集を当選していただきました!

誰が書いてるの?

ryoraspp

ryoraspp

統合失調症睡眠障害RLSを治療しながら通信制の大学と英会話AEONで英語を学んでる大学生。
いつか留学したいと思いながら勉強してます。
ジャズトランペットPC・ガジェット関連とWordPressが好きです。
詳細はこちらをクリック!

folder iPhoneアプリ開発用語

No Image

No Image

No Image

No Image

No Image

No Image

more...

folder Java言語習得

No Image

more...

folder Sonar

「Sonar X1 LE」をDominoのように使いたい!そんな時はこれ!
more...

folder スピーカー

No Image

more...

folder テーマ

Stinger5子テーマ「SIMPLESTER」Ver2が出たので、Ver1と比較してみました!
more...

folder 考察

グループ系YouTuberカリスマブラザーズは何も変わってない
more...