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

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

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

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

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

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

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

Transcript

1. ʲ௒ॳ৺ऀ޲͚ʳ(VUFOCFSHʢϒϩοΫΤσΟλʔʣ
   Λ࢖ͬͯɺϒϩάΛॻ͍ͨΓϖʔδΛ࡞ͬͯΈΑ͏
   8PSE1SFTT΋͘΋͘ษڧձˏ೔ຊڮʢ2019೥5݄25೔ʣ
   ൃදऀ
   גࣜձࣾ"OJNB(BUFʢΞχϚήʔτʣ
   ୅දऔక໾ࠓଜ఩໵
   

   View Slide

2. bouya Imamura
   ࣗݾ঺հ
   ग़਎ ࡏॅ
   े৚
   ෋ࢁݝ
   ʢ౦ژ౎ʣ
   

   View Slide

3. 2006 2008 2010 2016
   ๏ਓ
   ུྺ
   ৮Δ ॻ͘ ಠཱ
   ݱࡏ
   ࣗݾ঺հ
   

   View Slide

4. WordPress Λ࢖ͬͨ
   ͔ͳΓ೉қ౓͕ߴ͍ ੍࡞΋΍͍ͬͯ·͢
   ΍͍ͬͯΔ͜ͱ
   ΢ΣϒαΠτ੍࡞ ΢ΣϒαʔϏεӡӦ ΢ΣϒγεςϜ։ൃ
   CMSߏங ECαΠτߏங
   σβΠϯ੍࡞ ੍໊ࢗ࡞ ϩΰ੍࡞
   ૢ࡞ڭҭ ΢Σϒ੍࡞ձࣾ΁ͷٕज़ࢦಋ
   ࣗݾ঺հ
   

   View Slide

5. ͳΔ΂͘ίʔυΛॻ͔ͣʹ
   ࣗݾ঺հ
   ϝϯςφϯείετΛ཈͑Δ
   WordPress ͷߏங ΍͍ͬͯ·͢
   

   View Slide

6. ݱࡏ
   WordPressʹؔ͢Δ׆ಈ
   Nishikiʢެࣜʣ
   Newpost Catchʢެࣜʣ
   ϓϥάΠϯ ςʔϚ
   WordCamp Tokyo 2017
   WordCamp Osaka 2018
   εϐʔΧʔ
   ଞʹ΋ͨ͘͞Μ ଞʹ΋ͨ͘͞Μ
   ࣗݾ঺հ
   WordCamp Tokyo 2018
   

   View Slide

7. ࣗݾ঺հ
   ϫʔυΩϟϯϓ ౦ژ 2018 ͷ༷ࢠ
   

   View Slide

8. ࠓճͷ͓࿩
   ɾૢ࡞σϞʢಈըʣ
   ɾϒϩοΫΤσΟλʔͰ࡞ΒΕͨ΢ΣϒαΠτ
   ɾGutenberg ϒϩοΫΤσΟλʔ ʹ͍ͭͯ
   ɾچΤσΟλʔͱͷʮҧ͍ʯͱʮڞ௨఺ʯ
   ɾϒϩοΫΤσΟλʔରԠͷϫʔυϓϨεςʔϚ
   ɾϒϩοΫΤσΟλʔରԠͷٕज़ॻ
   

   View Slide

9. Gutenberg ϒϩοΫΤσΟλʔ ʹ͍ͭͯ
   

   View Slide

10. ࣮͸ϓϩδΣΫτ໊
    Gutenberg ͱ͸
    Gutenberg ϒϩοΫΤσΟλʔ ʹ͍ͭͯ
    

    View Slide

11. ʮϒϩοΫΤσΟλʔʯͷ౥ࡌ͸
    Gutenberg ϓϩδΣΫτͷҰ؀
    Gutenberg ϒϩοΫΤσΟλʔ ʹ͍ͭͯ
    ͳͷͰ
    

    View Slide

12. WordPress όʔδϣϯ 5.0 ͔Β
    ਖ਼ࣜʹϦϦʔε͞Εͨ
    ʮ৽͍͠ΤσΟλʔʯͷ͜ͱ
    Gutenberg ϒϩοΫΤσΟλʔ ʹ͍ͭͯ
    ϒϩοΫΤσΟλʔ͸
    

    View Slide

13. จࣈͰ͸Ͳ͏දݱͨ͠Β͍͍ʁ
    Gutenberg ϒϩοΫΤσΟλʔ ʹ͍ͭͯ
    

    View Slide

14. ๻͸ϒϩάͳͲͰ͸
    ʮGutenberg ϒϩοΫΤσΟλʔʯ
    ͱॻ͘͜ͱʹ͍ͯ͠Δ
    Gutenberg ϒϩοΫΤσΟλʔ ʹ͍ͭͯ
    

    View Slide

15. چΤσΟλʔͱͷʮҧ͍ʯͱʮڞ௨఺ʯ
    

    View Slide

16. چΤσΟλʔͱͷʮҧ͍ʯ͸ʁ
    

    View Slide

17. ฤूը໘͕ҧ͏
    ౤ߘɾݻఆϖʔδͷ
    چΤσΟλʔ ϒϩοΫΤσΟλʔ
    چΤσΟλʔͱͷʮҧ͍ʯ͸ʁ
    

    View Slide

18. ϒϩοΫ Λ࢖͏ͷͰ
    چΤσΟλʔͱͷʮҧ͍ʯ͸ʁ
    ϖʔδͷ࡞Γํ͕ҧ͏
    

    View Slide

19. ͭ·Γ
    ૢ࡞ํ๏͕ʮҧ͏ʯ
    چΤσΟλʔͱͷʮҧ͍ʯ͸ʁ
    

    View Slide

20. چΤσΟλʔͱͷʮڞ௨఺ʯ
    

    View Slide

21. ίϯςϯπΛ࡞੒ Ͱ͖Δ
    چΤσΟλʔͱͷʮڞ௨఺ʯ
    ϒϩάΛॻ͍ͨΓ
    ϖʔδΛ࡞ͬͨΓ
    

    View Slide

22. ϒϩοΫΤσΟλʔ Ͱ΋
    ಉ͡Α͏ͳ͜ͱ͕Ͱ͖Δ
    چΤσΟλʔͱͷʮڞ௨఺ʯ
    ݟग़͠ΛೖΕͨΓ
    ը૾ΛషΓ෇͚ͨΓ
    

    View Slide

23. ૢ࡞σϞʢಈըʣ
    

    View Slide

24. ΞΠίϯͰϒϩοΫΛ௥Ճ
    ʴ
    

    View Slide

25. ଞͷϒϩοΫ΁ม׵
    

    View Slide

26. εϙοτϥΠτϞʔυͰϒϩοΫʹϑΥʔΧε
    

    View Slide

27. ϏδϡΞϧΤσΟλʔɾίʔυΤσΟλʔͷ੾Γସ͑
    

    View Slide

28. ιʔγϟϧϝσΟΞ΍ಈըͷຒΊࠐΈ
    

    View Slide

29. γϣʔτίʔυʹ΋ରԠ
    

    View Slide

30. چΤσΟλʔͰ࡞੒ͨ͠΋ͷΛม׵
    

    View Slide

31. ૉૣ͘ϒϩοΫΛ௥Ճ͢Δ
    

    View Slide

32. ଞʹ΋͜Μͳ͜ͱͰ͖·͔͢ʁ
    

    View Slide

33. ΤσΟλʔͷ࢖͍ํ͸༷ʑɻ
    ؾʹͳΔͱ͜Ζ͸
    ࣮ࡍʹ৮ͬͯΈΑ͏
    ͢΂ͯ঺հ͖͠Εͳ͍ʂʂ
    

    View Slide

34. ͜ͷษڧձͷ࣌ؒΛ࢖ͬͯ
    ϒϩάهࣄ΍ϖʔδΛ࡞ͬͯΈΑ͏
    

    View Slide

35. ͲΜͳϒϩοΫ͕͋Δͷ͔Λ
    ·ͣ͸ʮ஌Δʯͱ͜Ζ͔Β
    ͸͡ΊΑ͏
    શͯͷϒϩοΫΛҰ౓͸࢖ͬͯΈΑ͏
    ษڧձதʹͥͻ΍ͬͯ΄͍͜͠ͱᶃ
    

    View Slide

36. چΤσΟλʔͰ࡞ͬͨ
    ౤ߘɾݻఆϖʔδΛ
    ʮϒϩοΫ΁ม׵ʯ͠Α͏
    ʮϒϩοΫ΁ม׵ʯͯ͠ΈΑ͏
    ษڧձதʹͥͻ΍ͬͯ΄͍͜͠ͱᶄ
    ※ݱࡏʮچΤσΟλʔʯΛ࢖͍ͬͯΔํͷΈର৅
    

    View Slide

37. ɾϒϩοΫ΁ม׵͢Δͱίʔυ͕ফ͑ͯ͠·͏
    ɾچΤσΟλʔͰ࢖͑ͨػೳ͕࢖͑ͳ͍
    ʮΧελϜHTMLʯϒϩοΫʹ׳ΕΑ͏
    ʮΧελϜHTMLʯϒϩοΫ
    Λ࢖ͬͯίʔυΛҡ͓࣋ͯ͘͠
    ษڧձதʹͥͻ΍ͬͯ΄͍͜͠ͱᶅ
    

    View Slide

38. ͜ͷษڧձதʹ࣭໰͍ͯͩ͘͠͞
    

    View Slide

39. खΛಈ͔ͦ͏ɻ
    ͭ·Γʮ׳Εʯ
    

    View Slide

40. ׳ΕΔͱچΤσΟλʔΑΓ
    ޮ཰͕͍͍Ͱ͢ʂʂ
    

    View Slide

41. ϒϩοΫΤσΟλʔରԠͷϫʔυϓϨεςʔϚ
    

    View Slide

42. ϒϩοΫΤσΟλʔରԠ
    WordPress ެࣜςʔϚ
    Nishiki
    ແྉ഑෍த!!
    ϒϩοΫΤσΟλʔରԠͷϫʔυϓϨεςʔϚ
    ೔ຊޠରԠ
    ೔ຊޠϚχϡΞϧ΋͋Γ·͢
    μ΢ϯϩʔυͯ͠Έ͍ͯͩ͘͞
    

    View Slide

43. ϒϩοΫΤσΟλʔରԠͷٕज़ॻ
    

    View Slide

44. ϒϩοΫΤσΟλʔରԠͷ81ຊͰ͢
    

    View Slide

45. ϒϩοΫΤσΟλʔͰ࡞ΒΕͨ΢ΣϒαΠτ
    

    View Slide

46. ͿΒͿΒਆࣾ
    IUUQTCVSBCVSBKJOKBOFU
    

    View Slide

47. 8PSE1SFTTςʔϚ/JTIJLJ1SPσϞαΠτ
    IUUQTEFNPBOJNBHBUFDPNXQOJTIJLJQSP
    

    View Slide

48. ͜ͷษڧձதʹ࣭໰͍ͯͩ͘͠͞
    

    View Slide

49. ओͳ׆ಈɾऔΓ૊Έ
    

    View Slide

50. ϫʔυϓϨεςʔϚൢചɾαϙʔτʮαϙτϐΞʯ
    ϓϥάΠϯൢച
    ϫʔυϓϨεςʔϚ ͓खຊσʔλ
    ͓ࢼ͠൛μ΢ϯϩʔυ
    ΞϑΟϦΤΠτ
    ݸผαϙʔτ ΦϯϥΠϯαϙʔτ ΧελϚΠζαϙʔτ
    ϢʔβʔίϛϡχςΟ
    

    View Slide

51. ϫʔυϓϨεςʔϚൢച
    /JTIJLJςʔϚͷ্Ґ൛
    /JTIJLJ1SP
    &$αΠτߏங
    /JTIJLJ1SPGPS8PP$PNNFSDF
    ແྉ͓ࢼ͠൛͋Γ·͢ʂʂ
    ΞϑΟϦΤΠτϓϩάϥϜͷࢀՃʢ೚ҙʣ
    

    View Slide

52. ݸผαϙʔτ
    ςʔϚ։ൃऀͱରͰղܾ͢Δ
    ׬શΫϩʔζυͷαʔϏε
    ˞ଞͷํʹαϙʔτ಺༰͕஌ΒΕΔ͜ͱ͸͋Γ·ͤΜ
    

    View Slide

53. ϑΥʔϥϜʹ౤ߘͨ͠Γɺνϟοτ΍ϝʔϧ
    ͳͲΛ࢖ͬͨΓɺͱʹ͔͘จষΛॻ͘ͷ͕ۤ
    खʂʂ
    ΦϯϥΠϯαϙʔτ
    

    View Slide

54. ϫʔυϓϨεॳ৺ऀ޲͚ʹ
    ϥΠϒ഑৴΍ղઆಈըΛ:PV5VCFͰਵ࣌ެ։
    νϟϯωϧొ࿥
    ΑΖ͘͠Ͱ͢ʂʂ
    CPVZB*NBNVSB
    

    View Slide

55. ʮ։ൃऀͱϢʔβʔͷަྲྀͷ৔ʯΛఏڙ͍ͯ͠·͢ɻςʔ
    ϚͷΞοϓσʔτ৘ใɺ৽੡඼ͳͲͷઌߦࠂ஌ɺػೳ௥Ճ
    ͷཁ๬΍ෆ۩߹ใࠂͳͲͷϑΟʔυόοΫ΋ड͚෇͚͍ͯ
    ·͢ɻ
    ϢʔβʔίϛϡχςΟ
    

    View Slide

56. ɾϫʔυϓϨεͷૢ࡞ɾΧελϚΠζͰࠔͬͨʂʂ
    ʮαϙτϐΞʯͰ๻͕αϙʔτ͠·͢
    ɾϫʔυϓϨεςʔϚɺͲΕΛબΜͰ͍͍͔Θ͔Βͳ͍ʂʂ
    IUUQTTVQQPSUBOJNBHBUFDPN
    

    View Slide

57. Ͳ͏΋͋Γ͕ͱ͏͟͝·ͨ͠ʂʂ
    

    View Slide