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

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

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

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

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

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

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

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

D745070c3c0904b7021886559a00dcb5?s=128

bouya Imamura

May 25, 2019
Tweet

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ςʔϚ/JTIJLJ1SPσϞαΠτ IUUQTEFNPBOJNBHBUFDPNXQOJTIJLJQSP

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

  49. ओͳ׆ಈɾऔΓ૊Έ

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

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

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

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

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

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

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

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