WordPressテーマ開発再入門 ~ Do you Know Customizer ~

WordPressテーマ開発再入門 ~ Do you Know Customizer ~

WordBench Nagoya 登壇資料です。

E03953e0c18d776fead147601fdc3899?s=128

Toro_Unit (Hiroshi Urabe)

January 13, 2018
Tweet

Transcript

  1. WordPressςʔϚ։ൃ࠶ೖ໳ Do you Know Customizer? Toro_Unit @2018.01.13 / WordBench Nagoya

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

    Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 2
  3. ࡳຈͷձࣾͰϦϞʔτϫʔΫͯ͠·͢ 3

  4. 4

  5. 5

  6. 6

  7. Plugins and Themes • Custom Post Type Permalinks • Simple

    Post Type Permalinks • Powerful Posts Per Page (PPPP) • Responsive Slide • Vanilla • and more... 7
  8. Contribution • WordBench ௕໺ ϞσϨʔλʔ • WordCamp Kyoto 2017 ࣮ߦҕһ

    • WordCamp Tokyo 2017 Speaker • WordBench.org • VCCW Team • etc... 8
  9. ௕໺ݝদຊࢢ͔Β͖·ͨ͠ɻ1 • ϫΠϯ͓͍͍͠Αɻ • ͦΖͦΖڶഴ΋͓͍͍͠Αɻ 1 https://commons.wikimedia.org/wiki/File: 130608_Matsumoto_Castle_Matsumoto_Nagano_pref_Japan02bs4.jpg Author: 663highland.

    License: CC BY 2.5 9
  10. 10

  11. WordBench Nagano Special 2018!!! • 2/3 ͸দຊ΁Ͳ͏ͧɻ • 1/20 ΋΍Δ͔ΒͲ͏ͧɻ

    11
  12. Agenda 1. WordFes ͷ෮शɻ 2. Customizer ͱ͸ 3. UX ΛߴΊΔͨΊʹɻ

    1. Selective Refresh 2. JavaScript API 12
  13. 0. WordFes ͷ෮शɻ 13

  14. WordPress.org ςʔϚσΟ ϨΫτϦܝࡌςʔϚ ͱ͸ʁ • https://wordpress.org/themes/ • WordPress ͷ؅ཧը໘͔ΒΠϯε τʔϧɾߋ৽͕ग़དྷΔςʔϚୡɻ

    • ςʔϚϨϏϡʔΛ௨ա͠ͳ͍ͱܝࡌ Ͱ͖ͳ͍ɻ 14
  15. ςʔϚͷ࡞Γํɻ ެࣜͷυΩϡϝϯςʔγϣϯɻࠓͷͱ͜ Ζӳޠ͔͠ແ͍͚ͲɺίʔυͰͷղઆ΋ ଟ͍ͷͰҙ֎ʹͳΜͱ͔ͳΔɻ • Theme Developer Handbook • https://developer.wordpress.org/

    themes/ 15
  16. ςʔϚϨϏϡʔΛ௨Βͳ͍͜ͱɻ • ΤεέʔϓͳͲ͕͞Ε͍ͯͳ͍ɻ੬ऑੑ͕༗ΔϞϊɻ • ϓϥάΠϯςϦτϦʔͷػೳɺϓϥάΠϯͰରԠ͢Δ΂͖ػ ೳ͕৐͍ͬͯΔϞϊɻ ༷ʑͳ͖·Γ͕͋Δɻ 16

  17. Required – Theme Review Team • https://make.wordpress.org/themes/handbook/review/ required/ • ೔ຊޠ༁

    https://mirucon.github.io/required-ja/ 17
  18. ϓϥάΠϯςϦτϦʔ • https://make.wordpress.org/themes/handbook/review/ required/explanations-and-examples/#plugin-territorys σβΠϯʹؔ࿈͠ͳ͍ػೳΛςʔϚʹؚΊͯ͸͍͚ͳ͍ɻ 18

  19. ྫ • Analytics·ͨ͸τϥοΩϯάͷαϙʔτ • SEOΦϓγϣϯ • ͓໰͍߹ΘͤϑΥʔϜ • ඇσβΠϯؔ࿈ͷϝλϘοΫε •

    ϦιʔεΩϟογϯά • ؅ཧྖҬͷμογϡϘʔυ΢ΟδΣοτ • ΧελϜ౤ߘλΠϓͱγϣʔτίʔυ • ιʔγϟϧϝσΟΞͷʮ޷͖ʯɺʮϑΥϩʔʯɺʮڞ༗ʯϘλϯ 19
  20. Theme Unit Test ςʔϚϢχοτςετ - WordPress Codex ೔ຊޠ൛ WYSIWYG ΤσΟλͰී௨ʹهࣄΛॻ͍ͨ

    Βී௨ʹදࣔ͞ΕΔΑ͏ʹͪΌΜͱCSSΛ ॻ͘ɻ • ճΓࠐΈ΍Ωϟϓγϣϯ෇͖ը૾ɺΪϟ ϥϦʔ౳݁ߏ๨Ε͕ͪɻ • ී௨ͷHTML͕class౳Λ෇͚ͣʹɺͪΌ Μͱදࣔग़དྷΕ͹ɺςʔϚΛม͑ͯ΋ ͪΌΜͱදࣔͰ͖Δ͸ͣɻ 20
  21. WordPressͰग़དྷΔ͜ͱΛͪΌΜͱग़དྷΔΑ͏ʹͭ͘Ζ͏ɻ • WordPressʹඪ४౥ࡌ͞Ε͍ͯΔ΋ͷ͕ͪΌΜͱಈ͘Α͏ʹ ͢Δɻ • υΩϡϝϯςʔγϣϯɺαϙʔτͷίετ͕ݮΔɻ • ຊʹ͸ग़དྷΔͬͯॻ͍ͯ͋ΔͷʹɾɾɾͬͯͳΔͷ͸ɺ࢖ ͍ͮΒ͞ͱγεςϜ΁ͷෆ৴ײΛੜΉɻ 21

  22. Theme Check Theme Check — WordPress Plugins 22

  23. νΣοΫ߲໨ • ίʔσΟϯάϧʔϧ • ΤεέʔϓɾαχλΠζ͞Ε͍ͯͳ͍஋ • ඇਪ঑ͳؔ਺ɾςϯϓϨʔτλά • ඞਢͷ class

    ͷଘࡏɻ • etc... 23
  24. ͦ͏͸͍ͬͯ΋Ҋ݅Ͱ͸ ༷ʑͳཁٻ͕ɻ 24

  25. ؅ཧը໘͔Β͍Ζ͍Ζม ߋग़དྷΔΑ͏ʹ͍ͨ͠ɻ 25

  26. Contents 1. WordFes ͷ෮शɻ 2. Customizer ͱ͸ 3. UX ΛߴΊΔͨΊʹɻ

    26
  27. ࠓ೔ͷຊ୊ɻ 27

  28. 1. Customizer API 28

  29. 29

  30. The Customize API Theme Options – The Customize API |

    Theme Developer Handbook | WordPress Developer Resources • ΧελϚΠβʔʹઃఆΛ௥Ճ͢ΔͨΊͷAPI. • WordPress 3.4 Ͱ௥Ճ͞Εͨػೳɻ • WordPress 4.5 ͰSelective Reflesh౳͕௥Ճɻ • WordPress 4.9 Ͱ༧໿ެ։ͳͲɺߋʹڧԽ͞ΕΔɻ 30
  31. ࣮૷ 31

  32. function my_customize_register( WP_Customize_Manager $wp_customize ) { //ηΫγϣϯͷ௥Ճ $wp_customize->add_section( 'jumbotron', array(

    'title' => 'jumbotron', ) ); //ઃఆͷΦϓγϣϯ $wp_customize->add_setting( 'jumbotron_title', array( 'default' => 'Hello World!', 'sanitize_callback' => 'esc_html', )); // ϑΥʔϜͷ௥Ճ $wp_customize->add_control( 'jumbotron_title', array( 'section' => 'jumbotron', 'label' => 'Jumbotron Title', )); } add_action( 'customize_register', 'my_customize_register' ); 32
  33. 33

  34. 34

  35. ςϯϓϨʔτͰͷදࣔ <h1> <?php echo esc_html( get_theme_mod( 'jumbotron_title' ) ); ?>

    </h1> 35
  36. ͜Μ͚ͩʂ ΧελϜϑΟʔϧυΑΓ؆୯͡Όͳ͍Ͱ͔͢ʁ 36

  37. DEMO torounit/customizer-demo 37

  38. ࣮૷ग़དྷΔϑΟʔϧυͷλΠϓ • ςΩετϑΟʔϧυ(σϑΥϧτ) • νΣοΫϘοΫε (checkbox) • ϥδΦϘλϯ (radio) •

    ηϨΫτϘοΫε (select) • ςΩετϘλϯ (textarea) • ݻఆϖʔδ (doropdown-pages) 38
  39. 39

  40. $wp_customize->add_control( 'sample_radio', array( 'label' => 'Radio', 'section' => 'sample', 'type'

    => 'radio', 'choices' => array( 'option1' => 'Option 1', 'option2' => 'Option 2', ), ) ); $wp_customize->add_setting( 'sample_select', array( 'sanitize_callback' => 'esc_html', 'default' => 'option1', ) ); 40
  41. type ʹ ͜ΕҎ֎ͷ஋Λ౉͢ͱɺinputλάͷtypeଐੑ͕ઃఆ ͞ΕΔɻ $wp_customize->add_setting( 'sample_date', array( 'sanitize_callback' => 'esc_html',

    'default' => '2018-01-31', ) ); $wp_customize->add_control( 'sample_date', array( 'label' => 'Date', 'section' => 'sample', 'type' => 'date', ) ); 41
  42. add_control ʹɺ WP_Customize_Control ͷαϒΫϥ εΛ౉ͯ͠ɺߋʹ֦ுՄೳɻ 42

  43. built-inͷ WP_Customize_Control ͷαϒΫϥεྫɻ • WP_Customize_Upload_Control • WP_Customize_Image_Control • WP_Customize_Cropped_Image_Control •

    WP_Customize_Color_Control • WP_Customize_Date_Time_Control • WP_Customize_Code_Editor_Control 43
  44. 44

  45. WP_Customize_Control Λܧঝͨ͠ΫϥεΛࣗ࡞͢Ε͹ɺࣗ ෼ͳΓͷϑΟʔϧυΛఆٛ΋ग़དྷΔɻ 45

  46. • Twentysevnteen ͷτοϓϖʔδͷΧελϚΠζ ΋ΧελϚ ΠβʔͰͷ࣮૷ɻ • Lightning • s56bouya/nishiki: WordPress

    theme Nishiki. • Snow Monkey – 100%GPL ͷϝσΟΞ/ϒϩά޲͚ WordPress ༗ྉςʔϚ 46
  47. • ΧελϜϑΟʔϧυ/Option ϖʔδͳͲͰ΍͍ͬͯͨ΋ͷ͕ ͋Δఔ౓ΧελϚΠβʔʹҠߦ͢ΔͷͰ͸ɻ • ϓϨϏϡʔͰݟͳ͕Β࿔ΕΔͬͯͷ͸΍͸Γڧ͍ɻ 47

  48. Contents 1. WordFes ͷ෮शɻ 2. Customizer ͱ͸ 3. UX ΛߴΊΔͨΊʹɻ

    48
  49. 2. UX ΛߴΊΔɻ 49

  50. Customizer ͷ໰୊఺ • ϓϨϏϡʔͷiframeΛؙ͝ͱߋ৽͢ΔͷͰ஗͍ɻ • ઃఆΛ͙͢ʹ͍ͬͨ͡Γ͢ΔͱϓϨϏϡʔʹग़ͳ͍͜ͱ ΋ɻ 50

  51. 2-1. Selective Refresh 51

  52. Selective Refresh ͱ͸ • Ajax Λ࢖ͬͯ෦෼తʹHTMLΛߋ ৽ɻ • Selective Refresh

    in the Customizer – Make WordPress Core • ԖචͷϚʔΫ͕ग़Δͷ͕໨ҹɻ 52
  53. function my_jumbotron_lead() { echo get_theme_mod( 'jumbotron_lead' ); } function my_customize_register(

    WP_Customize_Manager $wp_customize ) { $wp_customize->add_setting( 'jumbotron_lead', array( 'sanitize_callback' => 'esc_html', 'transport' => 'postMessage', // JSͰߋ৽͢ΔΑ͏ʹɻ ) ); $wp_customize->add_control( 'jumbotron_lead', array( 'section' => 'jumbotron', )); //Selective Refresh $wp_customize->selective_refresh->add_partial( 'jumbotron_lead', array( 'selector' => '.jumbotron .lead', 'render_callback' => 'my_jumbotron_lead', //ςϯϓϨʔτλάΛࢦఆɻ ) ); } add_action( 'customize_register', 'my_customize_register' ); 53
  54. ෦෼తʹHTML͕ஔ͖׵ΘΔɻ • render_callback ʹࢦఆ͢Δؔ਺ΛɺͪΌΜͱઃܭ͢Ε͹ɺ ςϯϓϨʔτλάͱͯ͠࢖͏͜ͱ΋ग़དྷΔɻ 54

  55. 2-2. JavaScript API 55

  56. JavaScript Ͱ΋ૢ࡞Մೳɻ 56

  57. function my_customize_preview_js() { wp_enqueue_script( 'my-customize-preview', get_template_directory_uri() . '/customize-preview.js', array( 'customize-preview'

    ), false, true ); } add_action( 'customize_preview_init', 'my_customize_preview_js' ); 57
  58. ྫɿJavaScriptͰૢ࡞ͯ͠ɺߋʹߴ଎ʹɻ (function( $ ) { wp.customize( 'jumbotron_lead', function( value )

    { value.bind( function( to ) { $( '.jumbotron .lead' ).text( to ); } ); } ); })( jQuery ); 58
  59. JavaScript API Λ࢖͏΂͖έʔε • Selective Refresh ͕ਏ͍ɻ • ଐੑͳͲɺHTMLΛͦͷ··ஔ͖׵͑ΔΘ͚Ͱ͸ແ͍έʔε. •

    Selective Refresh ͚ͩͩͱਏ͍ɻ • ίϯςϯπεϥΠμʔͳͲ͕ೖ͍ͬͯΔέʔεɻ • JSͷঢ়ଶΛ࠶ߋ৽ɺ࠶ॳظԽͳͲ͕ඞཁͳέʔεɻ • DRY ͳײ͡ͰJSΛॻ͘ʹ͸͍Ζ͍Ζࢼߦࡨޡ͕ඞཁɻ 59
  60. JS ͰؤுΕ͹͍Ζ͍Ζग़དྷΔɻ • ΊͬͪΌେม͚ͩͲɾɾɾɻ 60

  61. ࢖͍Ͳ͜Ζྫɻ 61

  62. DEMO torounit/fesdemo ίϯςϯπεϥΠμʔΛςʔϚΧελϚΠβʔͰมߋग़དྷΔΑ͏ ʹɻ 62

  63. • Twentysevnteen ͸ Selective Refresh ౳ʹରԠɻ 63

  64. ݁ߏେมɻ • ಘʹ Serective Refresh ΍ JavaScript Λ৮Γग़͢ͱେมɻ • ͪΌΜͱ࡞ͬͨϞϊΛίϯϙʔωϯτతʹ࢖͍ճ͢ͷ͕ϕ

    λʔɻ • ΧελϚΠβʔ൛ͷACFΈ͍ͨͳϠπ͕ग़Δؾ͸͢Δɻ • ࠓ͕νϟϯε͔΋͠Εͳ͍ɻ 64
  65. WordPress ͕ࡢ೥ྗΛೖΕͨϙΠϯτͷͻͱͭɻ • Gutenberg ΋ͦ͏͚ͩͲɺWordPressͷUX͕େ͖͘มΘΖ͏ͱ ͍ͯ͠Δɻ • ϏδϡΞϧͰΈͨ··࿔ΕΔͷ͸ͭΑ͍ɻ • Ϣʔβʔ͕ΧελϚΠβʔΛ৮Δػձ΋૿͑Δ͸ͣɻ

    • ṖͷઃఆϖʔδΛ࡞ͬͨΓɺṖͷΧελϜϑΟʔϧυΛ࡞ͬͯ ͍ΔͱɺʮσϑΥϧτςʔϚͱ͔ͳΒͰ͖Δͷʹɾɾɾʯͬ ͯͳΔ೔͸ͦ͏ԕ͘ͳ͍ʁ 65
  66. WordPress ͷϢʔβʔ΁ͷϑΥʔΧε͸ྑ͞ͷ ͻͱͭɻ దࡐదॴͰɺWordPressͷඒຯ͠͞ΛҾ͖ग़͢Α͏ͳઃܭ͕େ ࣄʹͳΔؾ͸͢Δɻʢئ๬͔΋͠Εͳ͍ʣ ͱΓ͋͑ͣWEBαΠτΛͱ͍͏બ୒ࢶ͕૿͖͑ͯͨҎ্ɺΘ͟ Θ͟WordPressΛબͿཧ༝͸ɺΧελϚΠζੑͱ͔ॊೈੑͩͬ ͨΓɻཁٻεΩϧͱWordPress΁ͷཧղ౓͸ߴ·ΔͷͰ͸ʁ 66

  67. ·ͱΊɻ • ·ͣຊମͷػೳΛͪΌΜͱ࢖͍౗ͦ͏ɻ • ͍͍ͩͨͷ͜ͱ͸ɺTheme Developer Handbook ʹࡌͬͯ ΔͷͰɺಡ΋͏ɻ •

    ಡॻձͱ͔ʹͨ͠Βָ͍͠Μ͡Όແ͍Ͱ͠ΐ͏͔ʁ • _s ΍ σϑΥϧτςʔϚ ( Twenty γϦʔζ ) ΛಡΉͱ͍Ζ͍Ζ ൃݟ͕ଟ͍ɻTheme Development Examples 67
  68. Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 68