$30 off During Our Annual Pro Sale. View Details »

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

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

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

More Decks by Toro_Unit (Hiroshi Urabe)

Other Decks in Technology

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