最近作ったプラグインをせっかくなので紹介する #wpshinshu / 2019-01-12 WPShinshu

信州 WordPress Meetup vol.9 登壇資料です。

Transcript

1. ࠷ۙ࡞ͬͨϓϥάΠϯΛ
   ͔ͤͬ͘ͳͷͰ঺հ͢Δ
   Toro_Unit@ Shinshu WP Meetup
   vol.9
   1
   

   View Slide

2. $ whoami
   2
   

   View Slide

3. Toro_Unit
   ઎෦ ߛ (͏Β΂ ͻΖ͠)
   • Frontend Engineer
   • WordPress Plugin and Theme
   Developer
   Github: @torounit
   Twitter: @Toro_Unit
   3
   

   View Slide

4. ࡳຈͷձࣾͰϦϞʔτϫʔΫͯ͠·͢
   4
   

   View Slide

5. View Slide

6. Contribution
   • WordPress 5.0.1 and 5.1 (Α͍ͯ)
   • WordCamp Kyoto 2017 / Osaka
   2018 / Ogijima 2018 ࣮ߦҕһ
   • WordCamp Osaka 2018 Speaker.
   • etc...
   6
   

   View Slide

7. Plugins and Themes
   • Custom Post Type Permalinks
   • Simple Post Type Permalinks
   • Powerful Posts Per Page (PPPP)
   • Smart PWA <- new!
   • Vanilla
   • and more...
   7
   

   View Slide

8. ͚͋·͓ͯ͠ΊͰͱ͏͍͟͝·͢ɻ
   8
   

   View Slide

9. ೥຤೥࢝Կͯ͠·ͨ͠ʁ
   9
   

   View Slide

10. ࣮ՈͰೣٔΕͨΓ
    10
    

    View Slide

11. View Slide

12. χϡʔΠϠʔӺ఻ݟͨΓ
    ஍ݩ͕܈അݝଠాࢢ
    12
    

    View Slide

13. View Slide

14. ϓϥάΠϯ࡞ͬͨ
    Γͯ͠·ͨ͠
    14
    

    View Slide

15. ΍Δ͜ͱ͕ͳ͗ͯ͢͞…
    15
    

    View Slide

16. ࡞ͬͨϓϥάΠϯ
    • Advanced Posts Blocks
    • Advanced Archive Blocks
    • Code Editor Blocks
    • Review Mode
    16
    

    View Slide

17. Advanced Posts Blocks
    17
    

    View Slide

18. View Slide

19. Advanced Posts Blocks
    https://wordpress.org/plugins/advanced-posts-blocks/
    • ʮ࠷৽ͷ౤ߘʯϒϩοΫΛڧԽͨ͠Ϡπͱ͔ͦͷ΄͔΋Ζ΋
    Ζɻ
    • ςʔϚʹPHPϑΝΠϧΛઃஔ͢Δ͜ͱͰݟͨ໨ͷΧελϚΠ
    ζ͕Մೳɻ
    • WEB੍࡞Ͱ͍Ζ͍Ζ࢖ͬͨϒϩοΫΛ·ͱΊͨɻ
    19
    

    View Slide

20. Posts Blocks
    • ౤ߘλΠϓɾΧςΰϦʔɾλάɾλΫιϊϛʔ ͰߜΓࠐΜͩ
    ౤ߘҰཡΛදࣔɻ
    • τοϓϖʔδ΍ɺࣄۀ঺հϖʔδͰͷؔ࿈χϡʔεͱ͔ɻ
    20
    

    View Slide

21. Post Blocks
    • ಛఆͷ౤ߘΛબΜͰදࣔɻ
    • ؔ࿈هࣄͱ͔Λखಈઃఆ͢Δͱ͖ͱ͔ɻ
    21
    

    View Slide

22. Children Blocks
    • ಛఆͷ౤ߘͷࢠϖʔδΛ͢΂ͯදࣔɻ
    • ݻఆϖʔδͳͲͰαϒϝχϡʔΛ࡞ͬͨΓɻ
    22
    

    View Slide

23. Advanced Archive Blocks
    23
    

    View Slide

24. View Slide

25. Advanced Archive Blocks
    https://wordpress.org/plugins/advanced-archive-blocks/
    • ௨ৗͷΞʔΧΠϒϒϩοΫ͸݄ผ͔͠ग़དྷͳ͍ͷͰɺ೥ɾ
    ݄ɾ೔ɾि ͷΞʔΧΠϒ࢖͑ΔΑ͏ʹͨ͠Ϡπɻ
    25
    

    View Slide

26. Code Editor Blocks
    26
    

    View Slide

27. View Slide

28. Code Editor Blocks
    https://wordpress.org/plugins/code-editor-blocks/
    • ΧελϜHTMLϒϩοΫͷϓϨϏϡʔ͕ iframe ͳͷͰɺී௨
    ʹϨϯμϦϯά͢ΔΑ͏ʹͨ͠ɻϝσΟΞΫΤϦʔͳͲ͕ద
    ༻͞Ε͍ͯͯ΋ྑ͍ײ͡ʹϓϨϏϡʔ͢ΔΑ͏ʹɻ
    • λμͷςΩετΤϦΞͰ͸ͳͯ͘ɺΤσΟλʔ(CodeMirror)
    Λ࢖͏Α͏ʹͯ͠ΤϥʔͳͲΛݕ஌Ͱ͖ΔΑ͏ʹɻ
    28
    

    View Slide

29. Review Mode
    29
    

    View Slide

30. View Slide

31. Review Mode
    https://wordpress.org/plugins/review-mode/
    • ϨϏϡʔϞʔυ͕༗ޮʹͳ͍ͬͯΔ৔߹ʹɺެ։ࡁΈʹՃ͑
    ͯʮϨϏϡʔ଴ͪʯͷ౤ߘ΋ؚΊͯදࣔ͢ΔΑ͏ʹ͢Δɻ
    • ϨϏϡʔϞʔυͷઃఆ͸Ϣʔβʔ͝ͱʹɻ΋ͪΖΜϩάΠϯ
    ͍ͯ͠ͳ͍Ϣʔβʔ΍ଞͷϢʔβʔͷը໘ʹ͸Өڹ͠ͳ͍ɻ
    ެ։͍ͨ͠هࣄ͕ΞʔΧΠϒ΍ҰཡͳͲͰͲͷΑ͏ʹݟ͑Δ
    ͷ͔Λ֬ೝ͢ΔͨΊͷϓϥάΠϯɻ
    31
    

    View Slide

32. ײ૝
    • ஌ࣝͷ୨Է͠΋݉Ͷͯɺ࢓ࣄͰ࡞ͬͨػೳͰසग़ͨ͠ϠπΛϓϥάΠϯʹɻ
    • খ͞ͳ୯ҐͰϓϥάΠϯʹ͓ͯ͘͠ͱϝϯςφϯε΋ָͰখճΓ΋ޮ͍ͯྑ
    ͍ײ͡ɻ
    • All in One ͳϞϊ͕ྑ͍͔Ͳ͏͔͸έʔεόΠέʔε͚ͩͲɺϒϩοΫप
    Γ͸খ෼͚ʹͨ͠ํ͕࢖͍উखྑͦ͞͏ɻ
    • ৭Μͳػೳ͕ೖͬͯΔϞϊ͸ػೳ͕ڝ߹ͨ͠ͱ͖໘౗͍͘͞ɻ
    • ཉ͍͠΋ͷ͚ͩΠϯετʔϧ͢Ε͹͍͍ɻ
    32
    

    View Slide

33. ΧελϜϒϩοΫͷϓϥάΠϯʹ͍ͭͯ
    • Gutenberg ͷιʔείʔυɺಘʹ block-library ลΓͷιʔείʔυΛ໓஡
    ۤ஡ಡΜͩํ͕͍͍ɻ࣮૷ྫͳͲ͕গͳ͍ͷͰιʔεΛಡΉͱࢀߟʹͳΔɻ
    • HOC ౳ɺReact ͷษڧʹ͸ͳΔ͠ɺศརͳϥΠϒϥϦ΋ଟ͍ͷͰ WP API
    Λ࢖͏ͱ͖ʹ໾ʹཱͭ஌͕͍ࣝΖ͍Ζɻ (@wordpress/data,@wordpress/
    api-fetch)
    • ΧελϜϒϩοΫΛҊ݅͝ͱʹຖճ࡞Δͷ͸ຊ౰ʹۤߦɻʢϒϩοΫ͝ͱͷ
    ೖྗͷ࢓༷ܾΊͳͲ͕େมʣ
    • γϯϓϧͳίϯϙʔωϯτΛ࡞ͬͯϓϥάΠϯʹ͓ͯ͘͠ͷ͕ྑ͍ɻ
    33
    

    View Slide

34. Thanks!
    Github: @torounit
    Twitter: @Toro_Unit
    Facebook: fb.me/torounit
    Blog: https://torounit.com
    34
    

    View Slide