Elementorとブロックエディタで「できるだけコーディングしない」WordPressサイト制作フロー

CSS Nite in Osaka, vol.53 Girls Nite vol.2（2019年12月14日）
Elementorとブロックエディタでできるだけコーディングの工数を抑えてWordPressサイトを制作するフローをご紹介しました。

Transcript

1. Elementor & BlockEditor &MFNFOUPSͱϒϩοΫΤσΟλͰ
   ʮͰ͖Δ͚ͩίʔσΟϯά͠ͳ͍ʯ
   8PSE1SFTTαΠτ੍࡞ϑϩʔ CSS Nite in Osaka, vol.53 Girls Nite vol.2 ❤
2. Profile ࣗݾ঺հ ❤ ౔ډ
   ҆Ղཬ Ͳ͍
   ͔͋Γ ❤ 8FCɾ%51σβΠφʔ
   ❤ σδλϧϋϦ΢ουେࡕߍߨࢣ
   ❤ $PEFS%PKP੢ٶʗകాϝϯλʔ
   ❤ ݩύςΟγΤ
   ❤ Ұࣇͷ฼
3. ͸͡Ίʹ Introduction ❤
4. ࠓ೔͓࿩͢͠Δ͜ͱ ❤ &MFNFOUPSɾϒϩοΫΤσΟλͬͯͲΜͳ΋ͷʁ
   ❤ ͳͥͦΕΛ࢖͏ͷʁ
5. ͓࿩͠͠ͳ͍͜ͱ ❤ ࡉ͔͍ૢ࡞ํ๏΍࢖͍ํ
6. ͖͔͚ͬ Trigger ❤
7. খ͞ͳاۀ΍͓ళͷαΠτΛ࡞Δͱ͖ ❤ ͱΓ͋͑ͣεϚϗͰݟΕΔΑ͏ʹͳΕ͹͍͍
   ❤ ͲΜͳσβΠϯ͕͍͍ͱ͔Θ͔Βͳ͍͠
   ❤ ಛʹر๬΋ͳ͍ ͋Δ
   
   
   ͋Δ
8. ͋Δఔ౓ݟͨ໨͸ඞཁʜ ͚ͩͲ ΦϦδφϧςʔϚΛ
   ࡞Δඞཁ͕͋Δͷ͔ʁ
9. ͦ͜ͰʮࢠςʔϚʯˍʮΧϯϓΛ࡞Βͳ͍ʯϑϩʔ ❤ ςʔϚ͸΄΅ެࣜςʔϚσΟϨΫτϦ͔Β
   ❤ ϫΠϠʔͰ಺༰΍ϨΠΞ΢τ֬ೝ
   ❤ ෦෼తͳσβΠϯ͚ͩ࡞੒
   ❤ ࡞ͬͨαΠτʹ౰ͯ͸Ί͍ͯ͘ ❤
   ˡ͜ͷϑϩʔΛίετΛ͔͚ͣʹ
   Ͱ͖Δ͚ͩΦϦδφϦςΟΛ
   ग़ͤΔΑ͏ʹ͍ͨ͠ʂ Point Point Point
10. &MFNFOUPSͷ࠾༻ ❤ ͙͢Ͱ͖Δ
    ❤ ख໭Γ͕͋·Γ௧͘ͳ͍
11. &MFNFOUPSͱ͸ʁ About❤
12. ❤ 8PSE1SFTTͷϓϥάΠϯ
    ❤ υϥοάˍυϩοϓͰ௚ײతʹϨΠΞ΢τͰ͖Δ ඦฉ͸Ұݟʹ͔ͣ͠ʜ ݟͯΈ͍ͯͩ͘͞
13. σϞ Demo❤
14. &MFNFOUPSΛ࢖͏ϝϦοτ Merit❤
15. &MFNFOUPSͰϚʔέοτ͕Ͱ͖͍ͯͯ
    ׆༻Ͱ͖Δ΋ͷ͕͍ͨ΁Μଟ͍
16. ๛෋ͳςϯϓϨʔτͱΞυΦϯ ΞυΦϯͰ΢ΟδΣοτ͕૿͑Δɾ͞ΒʹςϯϓϨʔτ͕૿͑Δ
17. &MFNFOUPSʹରԠͨ͠ςʔϚ Πϯϙʔτػೳɾ΢ΟδΣοτ͕૿͑ΔͳͲ
18. ΨοπϦϋϚΔҊ݅ͩͱ
    ຊ౰ʹϊʔίʔσΟϯά΋ເ͡Όͳ͍ ը૾΍จষͷࠩ͠ସ͑ɾ೔ຊޠʹͨ͠ͱ͖ͷϑΥϯτͷௐ੔
    ͜Ε͘Β͍Ͱऴ͑ΒΕΔʜʂ ͦ͏͸͍͔ͳ͍৔߹΋ઌड़Ͳ͓Γɺ
    ෦෼తσβΠϯɾίʔσΟϯάͰ0,
19. &MFNFOUPSΛ࢖͏ͱ͖ͷ஫ҙ Attention ❤
20. ʮਆʯ͚ͩͲʮສೳͷਆʯͰ͸ͳ͍ ࢖͍࢝ΊΔલ͕Ұ൪େࣄʂ w w w w w w
21. ͜ͷϑϩʔͰେৎ෉ͳΫϥΠΞϯτ͔֬ೝ ͢Ͱʹࣗ෼ͷதͰΠϝʔδ͕ݻ·͍ͬͯͯ
    ͩ͜ΘΓͷڧ͍ํʹ͸Ή͔ͳ͍
22. ؒҧ͑ͯ΋ؾܰʹʮߋ৽Ͱ͖Δʯͱ͔
    ݴͬͯ͸͍͚ͳ͍ σβΠϯʹΑͬͯ͸TQBOλάΛ࢖Θͳ͍ͱ
    ࣮ݱͰ͖ͳ͍ͱ͍͏Α͏ͳ͜ͱ΋ग़ͯ͘Δ
23. σβΠϯΛ͓·͔ͤ͢Δ৔߹͸
    &MFNFOUPSΛ࢖ͬͨ͜ͱ͕͋Δํʹ Ͱ͖Δ͜ͱͱͰ͖ͳ͍͜ͱͷೝ͕ࣝ͋Ε͹
    $44ͰͷΧελϚΠζΛ࠷௿ݶʹͰ͖Δ
24. ηϚϯςΟοΫͳίʔσΟϯά͕ඞਢͳͱ͖ ग़ྗ͞ΕΔίʔυ͸͖Ε͍Ͱ͸͋Γ·ͤΜ
    ʢ4&0తʹΞΧϯͱײͨ͜͡ͱ͸ͳ͍ʣ
25. ͏·͘࢖͑͹࡞੒΋मਖ਼΋ૣ͍
    ετϨεͳ͘ίετ࡟ݮ
26. ϒϩοΫΤσΟλͱ͸ʁ About❤
27. ❤ 8PSE1SFTT͔Βొ৔ͨ͠هࣄೖྗը໘
    ❤ ࠓ·ͰͰ͖ͳ͔ͬͨϦονͳදݱ͕Ͱ͖ΔΑ͏ʹ
28. ΧϥϜϒϩοΫ ΧόʔϒϩοΫ΍ϘλϯϒϩοΫ ϝσΟΞͱจষ ͢΂ͯϊʔίʔσΟϯάʂ
29. &MFNFOUPSͱಉ͘͡ϒϩοΫΛ֦ு͢ΔΑ͏ͳ
    ϓϥάΠϯ͕͔ͳΓ૿͖͑ͯͨ ϊʔίʔσΟϯάͰ͞ΒʹϦονͳදݱ͕Մೳʹ
30. σϞ Demo❤
31. ΋ͬͱϒϩοΫΤσΟλ͕஌Γ͍ͨʁ IUUQTTQFBLFSEFDLDPNBLBSJXPSEDBNQPTBLBCVSPUVLVFEFJUBEFTIVJEFNPLBOUBOOJZVOZPOHTJZBTVJTBJUPXP[VPSPV
32. &MFNFOUPSͱϒϩοΫΤσΟλͷ࢖͍෼͚ Use properly ❤
33. &MFNFOUPSͷํ͕ॊೈ ͳͲʹ޲͍͍ͯΔ ❤ τοϓϖʔδ
    ❤
    -1
34. ϒϩοΫΤσΟλ͸ͦΕҎ֎ͷ͢΂ͯ ❤ 8PSE1SFTTͷΤσΟλͳͷͰ
 &MFNFOUPSΛ࢖༻͠ͳ͍ϖʔδ͸͢΂ͯϒϩοΫΤσΟλͰ
    ❤ ܾ·ͬͨૢ࡞ํ๏ͳͷͰ୭ʹͰ΋࢖͍΍͍͢
    ❤ ΦϦδφϦςΟͷ͋ΔσβΠϯϖʔδҎ֎͸ϒϩοΫΤσΟλ
35. ·ͱΊ Summary ❤
36. ੍࡞ίετμ΢ϯ
37. ୯७ʹ௿Ձ֨ͰചΔ͜ͱ΋Ͱ͖Δ͚Ͳ
38. ଞ΁ͷ౤ࢿΛఏҊ͢Δ͜ͱ΋Ͱ͖Δ w w w w w w w w ෇ՃՁ஋ʹͳΔ
39. ͲͪΒͷπʔϧ΋͙͢࢖͍࢝ΊΒΕΔͷͰ
    ͥͻɺ͞ΘͬͯΈ͍ͯͩ͘͞
40. ͋Γ͕ͱ͏͍͟͝·ͨ͠ Thank You ❤ kokona_san