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

WordBench Nagoya 登壇資料です。

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
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
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
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
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
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
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