【超初心者向け】Gutenberg（ブロックエディター）を使って、ブログを書いたりページを作ってみよう / wpmokumoku-nihonbashi-2019-05-25

2019年05月25日（土）に開催された WordPress もくもく勉強会＠日本橋で発表したスライドです。

WordPress 5.0 から導入された ブロックエディターですが「存在は知っているけど、旧エディターを使い続けている」という方も少なくないと思います。

・いずれブロックエディターに移行したい
・ブロックエディターで何ができるのか、イマイチ理解できていない
・ブロックエディターを使い始めたんだけど、うまく使いこなせていない

という方に向けて「ブロックエディターでこんなことができるよ！」というお話をしました。

当日参加いただいた方の振り返りや、参加できなかった方は参考資料としてご活用ください。

この機会に、ぜひブロックエディターを使ったブロク記事やページ作成に挑戦いただけますと幸いです。

Transcript

1. ʲ௒ॳ৺ऀ޲͚ʳ(VUFOCFSHʢϒϩοΫΤσΟλʔʣ Λ࢖ͬͯɺϒϩάΛॻ͍ͨΓϖʔδΛ࡞ͬͯΈΑ͏ 8PSE1SFTT
   ΋͘΋͘ษڧձˏ೔ຊڮʢ2019೥5݄25೔ʣ ൃදऀ
   גࣜձࣾ"OJNB(BUFʢΞχϚήʔτʣ
   ୅දऔక໾
   ࠓଜ
   ఩໵
2. bouya Imamura
   
   ࣗݾ঺հ ग़਎ ࡏॅ े৚ ෋ࢁݝ ʢ౦ژ౎ʣ
3. 2006 2008 2010 2016 ๏ਓ ུྺ ৮Δ ॻ͘ ಠཱ ݱࡏ
   
   ࣗݾ঺հ
4. WordPress Λ࢖ͬͨ ͔ͳΓ೉қ౓͕ߴ͍ ੍࡞΋΍͍ͬͯ·͢ ΍͍ͬͯΔ͜ͱ ΢ΣϒαΠτ੍࡞ ΢ΣϒαʔϏεӡӦ ΢ΣϒγεςϜ։ൃ CMSߏங ECαΠτߏங σβΠϯ੍࡞ ੍໊ࢗ࡞ ϩΰ੍࡞ ૢ࡞ڭҭ ΢Σϒ੍࡞ձࣾ΁ͷٕज़ࢦಋ
   
   ࣗݾ঺հ
5. ͳΔ΂͘ίʔυΛॻ͔ͣʹ
   
   ࣗݾ঺հ ϝϯςφϯείετΛ཈͑Δ WordPress ͷߏங ΍͍ͬͯ·͢
6. ݱࡏ WordPressʹؔ͢Δ׆ಈ Nishikiʢެࣜʣ Newpost Catchʢެࣜʣ ϓϥάΠϯ ςʔϚ WordCamp Tokyo 2017 WordCamp Osaka 2018 εϐʔΧʔ ଞʹ΋ͨ͘͞Μ ଞʹ΋ͨ͘͞Μ
   
   ࣗݾ঺հ WordCamp Tokyo 2018
7. 
   
   ࣗݾ঺հ ϫʔυΩϟϯϓ ౦ژ 2018 ͷ༷ࢠ
8. 
   
   ࠓճͷ͓࿩ ɾૢ࡞σϞʢಈըʣ ɾϒϩοΫΤσΟλʔͰ࡞ΒΕͨ΢ΣϒαΠτ ɾGutenberg ϒϩοΫΤσΟλʔ ʹ͍ͭͯ ɾچΤσΟλʔͱͷʮҧ͍ʯͱʮڞ௨఺ʯ ɾϒϩοΫΤσΟλʔରԠͷϫʔυϓϨεςʔϚ ɾϒϩοΫΤσΟλʔରԠͷٕज़ॻ
9. Gutenberg ϒϩοΫΤσΟλʔ ʹ͍ͭͯ
10. ࣮͸ϓϩδΣΫτ໊ Gutenberg ͱ͸
    
    Gutenberg ϒϩοΫΤσΟλʔ ʹ͍ͭͯ
11. ʮϒϩοΫΤσΟλʔʯͷ౥ࡌ͸ Gutenberg ϓϩδΣΫτͷҰ؀
    
    Gutenberg ϒϩοΫΤσΟλʔ ʹ͍ͭͯ ͳͷͰ
12. WordPress όʔδϣϯ 5.0 ͔Β ਖ਼ࣜʹϦϦʔε͞Εͨ ʮ৽͍͠ΤσΟλʔʯͷ͜ͱ
    
    Gutenberg ϒϩοΫΤσΟλʔ ʹ͍ͭͯ ϒϩοΫΤσΟλʔ͸
13. จࣈͰ͸Ͳ͏දݱͨ͠Β͍͍ʁ
    
    Gutenberg ϒϩοΫΤσΟλʔ ʹ͍ͭͯ
14. ๻͸ϒϩάͳͲͰ͸ ʮGutenberg ϒϩοΫΤσΟλʔʯ ͱॻ͘͜ͱʹ͍ͯ͠Δ
    
    Gutenberg ϒϩοΫΤσΟλʔ ʹ͍ͭͯ
15. چΤσΟλʔͱͷʮҧ͍ʯͱʮڞ௨఺ʯ
16. چΤσΟλʔͱͷʮҧ͍ʯ͸ʁ
17. ฤूը໘͕ҧ͏ ౤ߘɾݻఆϖʔδͷ چΤσΟλʔ ϒϩοΫΤσΟλʔ
    
    چΤσΟλʔͱͷʮҧ͍ʯ͸ʁ
18. ϒϩοΫ Λ࢖͏ͷͰ
    
    چΤσΟλʔͱͷʮҧ͍ʯ͸ʁ ϖʔδͷ࡞Γํ͕ҧ͏
19. ͭ·Γ ૢ࡞ํ๏͕ʮҧ͏ʯ
    
    چΤσΟλʔͱͷʮҧ͍ʯ͸ʁ
20. چΤσΟλʔͱͷʮڞ௨఺ʯ
21. ίϯςϯπΛ࡞੒ Ͱ͖Δ
    
    چΤσΟλʔͱͷʮڞ௨఺ʯ ϒϩάΛॻ͍ͨΓ ϖʔδΛ࡞ͬͨΓ
22. ϒϩοΫΤσΟλʔ Ͱ΋ ಉ͡Α͏ͳ͜ͱ͕Ͱ͖Δ
    
    چΤσΟλʔͱͷʮڞ௨఺ʯ ݟग़͠ΛೖΕͨΓ ը૾ΛషΓ෇͚ͨΓ
23. ૢ࡞σϞʢಈըʣ
24. ΞΠίϯͰϒϩοΫΛ௥Ճ ʴ
25. ଞͷϒϩοΫ΁ม׵
26. εϙοτϥΠτϞʔυͰϒϩοΫʹϑΥʔΧε
27. ϏδϡΞϧΤσΟλʔɾίʔυΤσΟλʔͷ੾Γସ͑
28. ιʔγϟϧϝσΟΞ΍ಈըͷຒΊࠐΈ
29. γϣʔτίʔυʹ΋ରԠ
30. چΤσΟλʔͰ࡞੒ͨ͠΋ͷΛม׵
31. 
    
    ૉૣ͘ϒϩοΫΛ௥Ճ͢Δ
32. ଞʹ΋͜Μͳ͜ͱͰ͖·͔͢ʁ
33. ΤσΟλʔͷ࢖͍ํ͸༷ʑɻ ؾʹͳΔͱ͜Ζ͸ ࣮ࡍʹ৮ͬͯΈΑ͏ ͢΂ͯ঺հ͖͠Εͳ͍ʂʂ
34. ͜ͷษڧձͷ࣌ؒΛ࢖ͬͯ ϒϩάهࣄ΍ϖʔδΛ࡞ͬͯΈΑ͏
35. ͲΜͳϒϩοΫ͕͋Δͷ͔Λ ·ͣ͸ʮ஌Δʯͱ͜Ζ͔Β ͸͡ΊΑ͏ શͯͷϒϩοΫΛҰ౓͸࢖ͬͯΈΑ͏ ษڧձதʹͥͻ΍ͬͯ΄͍͜͠ͱᶃ
36. چΤσΟλʔͰ࡞ͬͨ ౤ߘɾݻఆϖʔδΛ ʮϒϩοΫ΁ม׵ʯ͠Α͏ ʮϒϩοΫ΁ม׵ʯͯ͠ΈΑ͏ ษڧձதʹͥͻ΍ͬͯ΄͍͜͠ͱᶄ ※ݱࡏʮچΤσΟλʔʯΛ࢖͍ͬͯΔํͷΈର৅
37. ɾϒϩοΫ΁ม׵͢Δͱίʔυ͕ফ͑ͯ͠·͏ ɾچΤσΟλʔͰ࢖͑ͨػೳ͕࢖͑ͳ͍ ʮΧελϜHTMLʯϒϩοΫʹ׳ΕΑ͏ ʮΧελϜHTMLʯϒϩοΫ Λ࢖ͬͯίʔυΛҡ͓࣋ͯ͘͠ ษڧձதʹͥͻ΍ͬͯ΄͍͜͠ͱᶅ
38. ͜ͷษڧձதʹ࣭໰͍ͯͩ͘͠͞
39. खΛಈ͔ͦ͏ɻ
    ͭ·Γʮ׳Εʯ
40. ׳ΕΔͱچΤσΟλʔΑΓ ޮ཰͕͍͍Ͱ͢ʂʂ
41. ϒϩοΫΤσΟλʔରԠͷϫʔυϓϨεςʔϚ
42. ϒϩοΫΤσΟλʔରԠ WordPress ެࣜςʔϚ Nishiki ແྉ഑෍த!!
    
    ϒϩοΫΤσΟλʔରԠͷϫʔυϓϨεςʔϚ ೔ຊޠରԠ ೔ຊޠϚχϡΞϧ΋͋Γ·͢ μ΢ϯϩʔυͯ͠Έ͍ͯͩ͘͞
43. ϒϩοΫΤσΟλʔରԠͷٕज़ॻ
44. ϒϩοΫΤσΟλʔରԠͷ
    81
    ຊͰ͢
45. ϒϩοΫΤσΟλʔͰ࡞ΒΕͨ΢ΣϒαΠτ
46. ͿΒͿΒਆࣾ IUUQTCVSBCVSBKJOKBOFU
47. 8PSE1SFTT
    ςʔϚ
    /JTIJLJ
    1SP
    σϞαΠτ IUUQTEFNPBOJNBHBUFDPNXQOJTIJLJQSP
48. ͜ͷษڧձதʹ࣭໰͍ͯͩ͘͠͞
49. ओͳ׆ಈɾऔΓ૊Έ
50. ϫʔυϓϨε
    ςʔϚൢചɾαϙʔτʮαϙτϐΞʯ ϓϥάΠϯൢച ϫʔυϓϨεςʔϚ ͓खຊσʔλ ͓ࢼ͠൛μ΢ϯϩʔυ ΞϑΟϦΤΠτ ݸผαϙʔτ ΦϯϥΠϯαϙʔτ ΧελϚΠζαϙʔτ ϢʔβʔίϛϡχςΟ
51. ϫʔυϓϨε
    ςʔϚൢച /JTIJLJ
    ςʔϚͷ্Ґ൛ /JTIJLJ
    1SP &$
    αΠτߏங /JTIJLJ
    1SP
    GPS
    8PP$PNNFSDF ແྉ͓ࢼ͠൛͋Γ·͢ʂʂ ΞϑΟϦΤΠτϓϩάϥϜͷࢀՃʢ೚ҙʣ
52. ݸผαϙʔτ ςʔϚ։ൃऀͱରͰղܾ͢Δ
    ׬શΫϩʔζυͷαʔϏε ˞ଞͷํʹαϙʔτ಺༰͕஌ΒΕΔ͜ͱ͸͋Γ·ͤΜ
53. ϑΥʔϥϜʹ౤ߘͨ͠Γɺνϟοτ΍ϝʔϧ ͳͲΛ࢖ͬͨΓɺͱʹ͔͘จষΛॻ͘ͷ͕ۤ खʂʂ ΦϯϥΠϯαϙʔτ
54. ϫʔυϓϨεॳ৺ऀ޲͚ʹ
    ϥΠϒ഑৴΍ղઆಈըΛ
    :PV5VCF
    Ͱਵ࣌ެ։ νϟϯωϧొ࿥
    ΑΖ͘͠Ͱ͢ʂʂ CPVZB
    *NBNVSB
55. ʮ։ൃऀͱϢʔβʔͷަྲྀͷ৔ʯΛఏڙ͍ͯ͠·͢ɻςʔ ϚͷΞοϓσʔτ৘ใɺ৽੡඼ͳͲͷઌߦࠂ஌ɺػೳ௥Ճ ͷཁ๬΍ෆ۩߹ใࠂͳͲͷϑΟʔυόοΫ΋ड͚෇͚͍ͯ ·͢ɻ ϢʔβʔίϛϡχςΟ
56. ɾϫʔυϓϨεͷૢ࡞ɾΧελϚΠζͰࠔͬͨʂʂ ʮαϙτϐΞʯͰ๻͕αϙʔτ͠·͢ ɾϫʔυϓϨεςʔϚɺͲΕΛબΜͰ͍͍͔Θ͔Βͳ͍ʂʂ IUUQTTVQQPSUBOJNBHBUFDPN
57. Ͳ͏΋͋Γ͕ͱ͏͟͝·ͨ͠ʂʂ