Upgrade to Pro — share decks privately, control downloads, hide ads and more …

本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp t...

本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019

Avatar for Toro_Unit (Hiroshi Urabe)

Toro_Unit (Hiroshi Urabe)

November 02, 2019
Tweet

More Decks by Toro_Unit (Hiroshi Urabe)

Other Decks in Technology

Transcript

  1. 1

  2. Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) • Frontend Engineer • WordPress

    Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 2
  3. Plugins and Themes • Custom Post Type Permalinks • Advanced

    Posts Blocks • Simple Post Type Permalinks • Powerful Posts Per Page (PPPP) • Vanilla • and more... 3
  4. 4

  5. 6

  6. 2018.11.13 • WordPress 5.0 beta 4, Gutenberg 4.3 ͷϦϦʔεɻ •

    Gutenberg 4.3 ͸ WordPress ʹϚʔδࡁΈ • ͜ͷ࣌఺Ͱ͸ɺ11/27 ϦϦʔε༧ఆɻ 17
  7. • ϒϩοΫΤσΟλʔΛ࢖͏ͧʂͱ͍͏Ҋ݅ΛఏҊ͍ͯͨ͠ɻ • ͜ͷ··ϦϦʔε͞ΕͨΒɺʮWordPress ͬͯόάͬͯΔΜ Ͱ͠ΐʁʯΈ͍ͨͳ͜ͱΛݴΘΕΔͷ͸ɺ৺͕௧͍ɻετϨ εɻ • Classic Editor

    ΛೖΕΔͷ͕౰ͨΓલʹͳΔͱɺࠓ౓͸͍ͭɺ ϒϩοΫΤσΟλʔʹ͢Δͷͱ͍͏໰୊ɻ • ࠓޙϢʔβʔɾΫϥΠΞϯτʹઆ໌͢Δͷ΋Ұۤ࿑ɻɻɻ 25
  8. 19:18 ίϛολʔͷElla ͞Μ͕ɺΩλδϚ͞Μ ͷ issue ʹίϝϯτɻ Mac ͷ "ͻΒ͕ͳ" ౳ͷ೔ຊޠೖྗγε

    ςϜΛೖΕͯΈ͚ͨͲɺྑ͘ղΒͳ͍ɻ ΋ͬͱ৘ใ͕ཉ͍͠ʂͱͷ͜ͱɻ ͔͜͜Βɺ̍࣌ؒ΄ͲɺΩλδϚ͞Μ ͱɺElla͞Μͷ΍ΓͱΓɻ 30
  9. • ίϛολʔͷ Ella ͞Μ͔Β Gutenberg ͷमਖ਼൛ͷZIP͕ඈΜ Ͱ͘Δɻ͔͜͜Β͠͹Β͘ɺElla ͞Μ͕௚ͨ͠΋ͷΛ๻͕ख ݩͰݕূ͢Δɻ •

    ӳޠྑ͘ղΒͳ͍͚Ͳɺֆจࣈͱ Google ຋༁Ͱ͔ͳΓί ϛϡχέʔγϣϯ͕औΕΔɻ • ͪΌΜͱಈ͍ͯͳ͍ͱ͖͸ɺͱΓ͋͑ͣɺʮOh no...ʯͱ͔ݴ ͑͹఻Θͬͨɻ 32
  10. 34

  11. ͜ΕҎ߱ɺ 1. Ella ͞Μ͕ Gutenberg Λमਖ਼ 2. ๻ͷखݩͷ WordPress ʹΠϯετʔϧɺݕূɻ

    3. ಈ࡞ใࠂͱɺhttps://input-inspector.now.sh/ ͷ݁ՌΛ࿈བྷɻ 4. ݴޠԽɺӳޠԽ͠ʹ͍͘Ϟϊ͸ɺಈըΛࡱͬͯͦΕΛڞ༗ɻ ͱ͍͏ྲྀΕͰमਖ਼ɾݕূ͕ਐΉɻ 10~20෼ʹҰ౓͜ΕΛࢼͯ͠ʔͱ͍͏࿈བྷ͕དྷΔͷͰɺͦΕΛͻ ͨ͢Βݕূɻ 35
  12. 23:30 ʮWordPress 5.0 RCʯͷϚΠϧετʔ ϯɺʮ[Priority] Highʯ͕ઃఆ͞ΕΔɻ • ͜ͷ໰୊͕ɺॏཁͳ໰୊ͱίϛο λʔਞ͕൑அͨ͠ɻ •

    ͜Ε͕ղܾ͞Εͳ͍ݶΓ WordPress 5.0 RC (ϦϦʔεީิ൛) ͸ग़ՙ͞Ε ͳ͍ɻ ͱ͍͏͜ͱ͕ܾ·Δɻ҆৺ͨ͠ͱಉ࣌ ʹɺۤ࿑͕ใΘΕͨؾ͕ͨ͠ɻ 36
  13. 39

  14. 40

  15. 41

  16. ݁ہ๻͕΍ͬͨ͜ͱ ݁ہ๻͕΍ͬͨ͜ͱ 1. ౉͞Εͨ ϓϥάΠϯΛΠϯετʔϧͯ͠ɺೖྗςετ 2. https://input-inspector.now.sh/ ͷ݁ՌΛใࠂ 3. εΫϦʔϯΩϟϓνϟࡱӨɻGithubʹషΔͨΊʹɺgif

    ʹม׵ɻ 4. ͱΓ͋͑ͣGoogle ຋༁Ͱίϝϯτͱ͔ΛಡΉɻ 5. OK!!! ͱ͔ Oh No.. ͱ͔ݴ͏ɻͪΐͬͱෳࡶͳ͜ͱݴ͍ͨ͘ͳͬͨΒɺ Google ຋༁ɻ 43
  17. ͋ͬͨΒศརͳεΩϧ • ͪΐͬͱͷ Git ྗɻ • npm install, npm run

    build ग़དྷͳͯ͘΋ɺzip ͰσʔλΛૹͬͯ͘ΕͨͷͰɺ΄Μͱʹඞਢ Ͱ͸ແ͍ɻ 45
  18. ಈըࡱӨ mov ౳͸ Github ͷίϝϯτʹషΕͳ͍ͷͰɺGif Ξχϝʹม׵͢ Δɻ Windows : ScreenToGif:

    Ωϟϓνϟ͔ΒGifੜ੒·ͰҰൃͰग़དྷΔɻ mac 1. command + shift + 5 Ͱ mov ࡱӨ 2. ffmpeg Ͱ mov -> gif ͕؆୯ɻCLI. $ ffmpeg -i issue.mov -r 24 issue.gif 48
  19. 56

  20. 57

  21. • ௚Βͳ͍͔Βɺ೉͍͠໰୊ͳͷͰ͸ŋŋŋ → ͩΕ΋ใࠂͯ͠ͳ ͍ɻ • ͩΕ͔ใࠂͯͨ͠Β໎࿭ͳͷͰ͸ŋŋŋ → ॏෳ͍ͯ͠ΔͳΒ ͦͬͪʹ༠ಋͯ͘͠ΕΔ͠ɺෳ਺Ͱى͍ͬͯ͜Δ͜ͱ͕Մࢹ

    Խ͞ΕΔɺใࠂ͞Εͳ͍͜ͱͷํ͕໰୊ɻ • ผʹΠϥοͱ͞Εͳ͍͔Βେৎ෉ɻ5෼ௐ΂ͯͦΕͬΆ͍ Ϟϊ͕ແ͚Ε͹ใࠂ͞Εͯͳ͍ͱࢥͬͯ issue ॻ͘ɻ 59