令和時代の WordPress テーマ開発・ウェブサイト制作の勘所 #wpshinshu / 2019-07-27 Shinshu WordPress Meetup vol.14

Shinshu WordPress Meetup vol.14 登壇資料です

Transcript

1. ྩ࿨࣌୅ͷ WordPress ςʔϚ։ൃɾ
   ΢ΣϒαΠτ੍࡞ͷצॴ
   Toro_Unit @Shinshu WP Meetup vol.14
   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. Contribution
   • WordPress 4.3 / 4.4 / 4.7 / 5.0 / 5.1 /
   5.2
   • WordCamp Osaka 2019
   • WordCamp Osaka 2018 Speaker.
   • etc...
   4
   

   View Slide

5. Plugins and Themes
   • Custom Post Type Permalinks
   • Advanced Posts Blocks
   • Simple Post Type Permalinks
   • Powerful Posts Per Page (PPPP)
   • Vanilla
   • and more...
   5
   

   View Slide

6. ྩ࿨ݩ೥5݄8೔
   WordPress 5.2 “δϟί”
   6
   

   View Slide

7. ςʔϚपΓͷมߋ
   wp_body_open() ͷಋೖɻ wp_head, wp_footer ͷ஥ؒɻ
   ࢖͍ํ
   >
   
   ͷ௚Լʹు͖ग़͢HTMLͳͲΛग़ྗ͢ΔͨΊͷϞϊɻ
   Plugin ͳͲ͕ Facebook SDK ͳͲΛग़ྗ͢ΔͨΊʹ࢖͏ɻ
   7
   

   View Slide

8. ϒϩοΫΤσΟλʔ
   • WordPress 5.2 Ͱ͸ Gutenberg 5.3 ͕Ϛʔδ͞Ε͍ͯΔ
   • ΧελϜϒϩοΫͳͲͷ։ൃͷ஌ݟ΋͜ͷ൒೥ͰͦΕͳΓʹ
   ཷ·͖ͬͯͨɻ
   8
   

   View Slide

9. ࠷ۙ͜Μͳײ͡ͰςʔϚɾWEBαΠτ
   ࡞ͬͯ·͢ɻ
   9
   

   View Slide

10. 1. gutenberg-starter-theme ΛϕʔεʹΧελϚΠζɻ
    2. editor-style ͪΌΜͱ࡞Δɻ
    3. ΧελϜϑΟʔϧυ͸ۃྗ࢖ΘͣɺΧελϜϒϩοΫΛ࡞੒
    ͢Δ͜ͱͰରԠɻ
    4. ςʔϚʹ͸ɺՄೳͳݶΓʮαΠτͷݟͨ໨ʯҎ֎ͷ࢓ࣄΛ͞
    ͤͳ͍ɻ
    5. ςʔϚ͕ಛఆͷϓϥάΠϯʹґଘ͢Δ͜ͱ͸͋ͬͯ͸ͳΒͳ
    ͍ɻ
    10
    

    View Slide

11. 1. gutenberg-starter-theme ΛϕʔεʹΧε
    λϚΠζɻ
    WordPress/gutenberg-starter-theme: A simple theme for
    testing Gutenberg.
    Github ʹެ։͞Ε͍ͯΔɺGutenberg Λςετ͢ΔͨΊͷςʔ
    Ϛɻ
    શ෦1͔Βࣗ෼Ͱ࡞Δͱ࣮֬ʹ͍Ζ͍Ζ࿙ΕΔͷͰɺ͔͜͜Βɺ
    ඞཁͳ͍΋ͷ͸Ҿ͖ࢉͨ͠Γɺ଍͠ࢉͨ͠Γɻ
    11
    

    View Slide

12. 2. editor-style ͪΌΜͱ࡞Δɻ
    • ϒϩοΫΤσΟλʔΛ༻͍Δ͜ͱͰɺίϯςϯπͷฤूͷࣗ
    ༝౓͕͕͋ͬͨɻ͔͠͠ฤूը໘ͱදࣔ໘ͰผͷελΠϧ͕
    ͍͋ͨͬͯͨΒ͋Μ·Γҙຯ͕ແ͍ͷͰɺeditor-style ͸ͬ͠
    ͔Γ࡞Δɻ
    • ͪΌΜͱઃܭ͞Ε͍ͯΔCSSͰ͋Ε͹ɺςʔϚͰ࢖͍ͬͯΔ
    CSSͦͷ··ಡΈࠐΜͰΑ͍͸ͣɻ
    12
    

    View Slide

13. add_theme_support( 'editor-styles' );
    add_editor_style( 'editor-style.css' );
    • gutenberg-starter-theme ʹ͸ద༻͞Ε͍ͯͳ͍ͷͰɺ஫
    ҙɻ
    13
    

    View Slide

14. editor-styleɹͷྫɻ
    @charset "UTF-8";
    @import 'variable.css'; //ม਺
    @import '_elements.css'; //HTMLཁૉ
    @import '_accessibility.css';
    @import 'components/blocks/snow-monkey-blocks/_smb-box.css';
    @import 'components/blocks/snow-monkey-blocks/_smb-balloon.css';
    @import 'components/blocks/advanced-posts-block/_post.css';
    @import 'components/blocks/advgb/_summary.css';
    @import 'components/blocks/_image.css';
    @import 'components/blocks/_button.css';
    @import 'components/blocks/_table.css';
    @import 'components/blocks/_column.css';
    14
    

    View Slide

15. //σϑΥϧτͩͱɺ610px ͔͠ͳ͍ΤσΟλͷԣ෯Λมߋ
    .wp-block {
    max-width: 1024px !important;
    }
    .wp-block[data-align="wide"] {
    max-width: 1200px !important;
    }
    .wp-block[data-align="full"] {
    max-width: none !important;
    }
    15
    

    View Slide

16. 3. ΧελϜϑΟʔϧυ͸ۃྗ࢖ΘͣΧ
    ελϜϒϩοΫΛ࡞੒͢Δ͜ͱͰରԠ
    16
    

    View Slide

17. HTMLͷմ͸ΧελϜϒϩοΫΛ࡞Γ·͘Δɻ
    • Simple Definition List Blocks
    dl dt dd Λѻ͏ͨΊͷϒϩοΫɻ
    • Advanced Posts Blocks
    WordPress ͷ౤ߘΛ༷ʑͳ৚݅Ͱग़ྗͰ͖ΔϒϩοΫɻ
    17
    

    View Slide

18. ίϯςϯπͷHTMLͷ੍ޚ͸ΤσΟλͷ࢓ࣄɻςʔϚͷ࢓ࣄͰ͸ͳ͍ɻ
    18
    

    View Slide

19. ΧελϜϑΟʔϧυͷ࢖͍Ͳ͜Ζɻ
    • ΧελϜ ϑΟʔϧυ ɻσʔλΛೖΕΔശɻͦ΋ͦ΋σβΠϯͷ౎߹Ͱ૿ݮ͢
    Δ΋ͷͰ͸ແ͍ɻ
    • ςʔϚ΍ग़ྗํ๏͕มΘͬͯ΋ ( ex. RSS / WP-API ʣऔಘ͢Δ΂͖΋ͷ͸ɺϓ
    ϥάΠϯͰ࣮૷͢΂͖ɻ
    • ࠜຊతʹɺίϯςϯπ͸ຊจཝʹಥͬࠐΉͷ͕ WordPress ͷઃܭɻ
    • ίϯςϯπ (จষɺهࣄͰ঺հ͢ΔϞϊʹؔ͢Δσʔλ) ͳͲͷHTMLΛίϯ
    τϩʔϧ͢ΔͨΊ͚ͩʹΧελϜϑΟʔϧυΛ༻͍Δ΂͖Ͱ͸ͳ͍ɻ
    • هࣄʹ෇ਵ͢Δϝλσʔλɺ঎඼ͷՁ֨ͳͲͷεΩʔϚͳͲʹͷΈ༻͍Δɻ
    19
    

    View Slide

20. Ձ֨ɺ஍ਤͷ࠲ඪͳͲɺΧελϜϑΟʔϧυʹ΋σʔλΛอଘͭͭ͠ɺදࣔ΋
    ͍ͨ͠͹͍͋͸ɺͦͷΑ͏ͳΧελϜϒϩοΫΛ࡞੒ɻ
    attributes: {
    author: {
    type: 'string',
    source: 'meta',
    meta: 'author'
    },
    },
    ΧελϜϒϩοΫͷσʔλͷऔಘઌΛΧελϜϑΟʔϧυʹ͢Δ͜ͱ͕ग़དྷΔɻ
    Attributes | Block Editor Handbook | WordPress Developer Resources
    20
    

    View Slide

21. ʮϦχϡʔΞϧ΍ςʔϚͷมߋͰͿͬ
    ͱΜͩΒࠔΔ΋ͷ͸ϓϥάΠϯʯ
    Plugin Territory – WordPressͷͦͷॲཧ͸ςʔϚͰ΍Δ΂͖͔ϓϥάΠϯͰ΍Δ΂͖͔ʁ | Firegoby
    21
    

    View Slide

22. ςʔϚͷมߋͰίϯςϯπ͕ͿͬඈͿ
    ͜ͱ͸͋ͬͯ͸͍͚ͳ͍ɻ
    22
    

    View Slide

23. ςʔϚ͕มߋ͞ΕΔέʔε
    • AMP ϓϥάΠϯɻಠࣗͷςʔϚػߏΛ࣋ͭɻ
    • ࠷ۙগͳ͍͕ɺϞόΠϧઐ༻ςʔϚ
    23
    

    View Slide

24. 
    
    
    
    
    Ͱɺίϯςϯπ͕͖ͪΜͱશͯు͖ग़͞ΕΔΑ͏ʹ͢Δͷ͕ཧ
    ૝ɻ
    get_post_metaɺ΍ɺACF ͷ get_field ͳͲ͸جຊతʹɺςʔ
    ϚͰ༻͍Δ΂͖Ͱ͸ͳ͍ɻ
    24
    

    View Slide

25. ΧελϜϑΟʔϧυͷ஋Λग़ྗ͍ͨ͠ͷͰ͋Ε͹ɺ
    add_filter( 'the_content', function( $content ) {
    ob_start(); ?>
    
    
    
    $append = ob_get_clean();
    return $content.$append;
    } );
    25
    

    View Slide

26. 4. ςʔϚʹ͸ɺՄೳͳݶΓʮαΠτͷݟͨ໨ʯ
    Ҏ֎ͷ࢓ࣄΛͤ͞ͳ͍ɻ
    • ςʔϚͰΰϦΰϦHTMLͱ͔Λॻ͖ग़ͨ͠Β͍͍ͩͨԫ৴
    ߸ɻ
    • ΧελϜϒϩοΫΛ࣮૷ -> ͦͷ CSS ΛςʔϚͰ࣮૷ͱ͍͏
    ͷ͕ྲྀΕͱͯ͠͸ྑͦ͞͏ɻ
    26
    

    View Slide

27. ςʔϚʹ৐ͤΔ΂͖ཁૉ
    • ϔομʔɾϑολʔɾαΠυόʔͳͲͷϨΠΞ΢τ෦෼ͷ࣮
    ૷ɻ
    • CSSͰͷ૷০
    • ϔομʔը૾ɺεϥΠυγϣʔͳͲɺϏδϡΞϧ͕ϝΠϯͳ
    ΋ͷɻଘࡏ͠ͳͯ͘΋ɺ࠷௿ݶͷίϯςϯπͷఏڙʹࢧোͷ
    ແ͍΋ͷɻ
    27
    

    View Slide

28. 5.ςʔϚ͕ಛఆͷϓϥάΠϯʹґଘ͢Δ͜ͱ͸
    ͋ͬͯ͸ͳΒͳ͍ɻ
    • ϓϥάΠϯΛఀࢭͨ͠ͱ͖ʹɺςʔϚ͕Τϥʔʹͳͬͯ͸͍͚ͳ
    ͍ɻ
    • ຊମ͸ޓ׵ੑΛकΔ͕ɺϓϥάΠϯ͸࡞ऀͷํ਑࣍ୈɻ
    • PHPͷόʔδϣϯΞοϓʹϓϥάΠϯ͕͍͍͚ͭͯͳ͍έʔε
    ΋ɻ
    • ϓϥάΠϯ͕ఀࢭͯ͠΋ɺ80%Ґͷঢ়ଶͰػೳ͢ΔΑ͏ʹ࡞Δɻ
    28
    

    View Slide

29. • 5.2Ͱ௥Ճ͞ΕͨαΠτϔϧεػೳͰ͸ɺ໰୊Λىͨ͜͠ϓϥ
    άΠϯΛఀࢭͨ͠ঢ়ଶͰϩάΠϯग़དྷΔػೳ͕௥Ճ͞Εͨ
    ͕ɺͦͷ৔߹ͷσόοά΋ࠔ೉ʹɻ
    29
    

    View Slide

30. WordPress ͷ ڧΈ͸֦ுੑɾɾɾʁ
    • WordPress ͷڧΈ͸ɺ๛෋ͳϓϥάΠϯͱ֦ுੑͩͱ͔ݴΘΕΔ
    ͜ͱ΋͋ΔΑ͏ͳɻ
    • ϓϥάΠϯ͸ɺಠࣗఆٛͷΧελϜϑΟʔϧυʹ͸ରԠ͍ͯ͠ͳ
    ͍ɻ
    • ެࣜϨϙδτϦܝࡌςʔϚͱಉ͡Α͏ʹςʔϚΛ࡞͍ͬͯ͘͜ͱ
    ͸௒ॏཁɻ
    • Theme Developer Handbook ͸͕ۭ݀͘΄Ͳಡ΋͏΄Μͱʹɻ
    30
    

    View Slide

31. ahmadawais/create-guten-block
    ΧελϜϒϩοΫϓϥάΠϯͷ։ൃ؀ڥΛαΫοͱ࡞ΔϠπɻ
    WordPress/gutenberg-examples
    ϒϩοΫͷαϯϓϧɺνϡʔτϦΞϧɻ
    31
    

    View Slide

32. JS ೉͍͠ɾɾɾʁ
    • ҰੲલΑΓ৘ใ΋ଟ͍ɻ։ൃ؀ڥͷ੔උ΋؆୯ɻ؆୯ͳΧελϜϒϩοΫΛ࡞
    ΕΔ͘Β͍ͷ React ྗͳΒׂͱ͙͢ʹ਎ʹ͚ͭΒΕΔͷͰɺϏϏΒͣʹ৮ͬͨ
    ํ͕ྑ͍ɻ
    • ʮReact ͰΰϦΰϦΞϓϦέʔγϣϯΛ࡞ΔʯΈ͍ͨͳͱ͜Ζ·Ͱ͸ཁٻ͞Ε
    ͳ͍ɻ
    • ͪΐͬͱͨ͠HTMLͷίϯϙʔωϯτΛ࡞ΕΔ͚ͩͰ͔ͳΓ࢖͍উख͕มΘΔɻ
    • WordPress ͰαΠτΛ࡞ΔݶΓɺͲʔ͍͔ͤͭ͸ JS ͱ஥ྑ͘ͳΒͳ͚Ε͹͍͚
    ͳ͍೔͕དྷΔɻ͖͋ΒΊͯ JS ͱ React ΍ͬͱ͜ɻ
    32
    

    View Slide

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

    View Slide