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

by Toro_Unit (Hiroshi Urabe)

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) HAMWORKS • Frontend Engineer • Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 2

Slide 3

Slide 3 text

ࡳຈͷձࣾͰϦϞʔτϫʔΫͯ͠·͢ 3

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Plugins and Themes • Custom Post Type Permalinks • Simple Post Type Permalinks • Powerful Posts Per Page (PPPP) • Responsive Slide • Vanilla • and more... 7

Slide 8

Slide 8 text

Contribution • WordBench ௕໺ ϞσϨʔλʔ • WordCamp Kyoto 2017 ࣮ߦҕһ • WordCamp Tokyo 2017 Speaker • WordBench.org • VCCW Team • etc... 8

Slide 9

Slide 9 text

௕໺ݝদຊࢢ͔Β͖·ͨ͠ɻ1 • ϫΠϯ͓͍͍͠Αɻ • ͦΖͦΖڶഴ΋͓͍͍͠Αɻ 1 https://commons.wikimedia.org/wiki/File: 130608_Matsumoto_Castle_Matsumoto_Nagano_pref_Japan02bs4.jpg Author: 663highland. License: CC BY 2.5 9

Slide 10

Slide 10 text

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Agenda 1. WordFes ͷ෮शɻ 2. Customizer ͱ͸ 3. UX ΛߴΊΔͨΊʹɻ 1. Selective Refresh 2. JavaScript API 12

Slide 13

Slide 13 text

0. WordFes ͷ෮शɻ 13

Slide 14

Slide 14 text

WordPress.org ςʔϚσΟ ϨΫτϦܝࡌςʔϚ ͱ͸ʁ • https://wordpress.org/themes/ • WordPress ͷ؅ཧը໘͔ΒΠϯε τʔϧɾߋ৽͕ग़དྷΔςʔϚୡɻ • ςʔϚϨϏϡʔΛ௨ա͠ͳ͍ͱܝࡌ Ͱ͖ͳ͍ɻ 14

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

ྫ • Analytics·ͨ͸τϥοΩϯάͷαϙʔτ • SEOΦϓγϣϯ • ͓໰͍߹ΘͤϑΥʔϜ • ඇσβΠϯؔ࿈ͷϝλϘοΫε • ϦιʔεΩϟογϯά • ؅ཧྖҬͷμογϡϘʔυ΢ΟδΣοτ • ΧελϜ౤ߘλΠϓͱγϣʔτίʔυ • ιʔγϟϧϝσΟΞͷʮ޷͖ʯɺʮϑΥϩʔʯɺʮڞ༗ʯϘλϯ 19

Slide 20

Slide 20 text

Theme Unit Test ςʔϚϢχοτςετ - WordPress Codex ೔ຊޠ൛ WYSIWYG ΤσΟλͰී௨ʹهࣄΛॻ͍ͨ Βී௨ʹදࣔ͞ΕΔΑ͏ʹͪΌΜͱCSSΛ ॻ͘ɻ • ճΓࠐΈ΍Ωϟϓγϣϯ෇͖ը૾ɺΪϟ ϥϦʔ౳݁ߏ๨Ε͕ͪɻ • ී௨ͷHTML͕class౳Λ෇͚ͣʹɺͪΌ Μͱදࣔग़དྷΕ͹ɺςʔϚΛม͑ͯ΋ ͪΌΜͱදࣔͰ͖Δ͸ͣɻ 20

Slide 21

Slide 21 text

WordPressͰग़དྷΔ͜ͱΛͪΌΜͱग़དྷΔΑ͏ʹͭ͘Ζ͏ɻ • WordPressʹඪ४౥ࡌ͞Ε͍ͯΔ΋ͷ͕ͪΌΜͱಈ͘Α͏ʹ ͢Δɻ • υΩϡϝϯςʔγϣϯɺαϙʔτͷίετ͕ݮΔɻ • ຊʹ͸ग़དྷΔͬͯॻ͍ͯ͋ΔͷʹɾɾɾͬͯͳΔͷ͸ɺ࢖ ͍ͮΒ͞ͱγεςϜ΁ͷෆ৴ײΛੜΉɻ 21

Slide 22

Slide 22 text

Theme Check Theme Check — WordPress Plugins 22

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ͦ͏͸͍ͬͯ΋Ҋ݅Ͱ͸ ༷ʑͳཁٻ͕ɻ 24

Slide 25

Slide 25 text

؅ཧը໘͔Β͍Ζ͍Ζม ߋग़དྷΔΑ͏ʹ͍ͨ͠ɻ 25

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

ࠓ೔ͷຊ୊ɻ 27

Slide 28

Slide 28 text

1. Customizer API 28

Slide 29

Slide 29 text

Slide 30

Slide 30 text

The Customize API Theme Options – The Customize API | Theme Developer Handbook | WordPress Developer Resources • ΧελϚΠβʔʹઃఆΛ௥Ճ͢ΔͨΊͷAPI. • WordPress 3.4 Ͱ௥Ճ͞Εͨػೳɻ • WordPress 4.5 ͰSelective Reﬂesh౳͕௥Ճɻ • WordPress 4.9 Ͱ༧໿ެ։ͳͲɺߋʹڧԽ͞ΕΔɻ 30

Slide 31

Slide 31 text

࣮૷ 31

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

ςϯϓϨʔτͰͷදࣔ

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

DEMO torounit/customizer-demo 37

Slide 38

Slide 38 text

࣮૷ग़དྷΔϑΟʔϧυͷλΠϓ • ςΩετϑΟʔϧυ(σϑΥϧτ) • νΣοΫϘοΫε (checkbox) • ϥδΦϘλϯ (radio) • ηϨΫτϘοΫε (select) • ςΩετϘλϯ (textarea) • ݻఆϖʔδ (doropdown-pages) 38

Slide 39

Slide 39 text

Slide 40

Slide 40 text

$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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

add_control ʹɺ WP_Customize_Control ͷαϒΫϥ εΛ౉ͯ͠ɺߋʹ֦ுՄೳɻ 42

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

• Twentysevnteen ͷτοϓϖʔδͷΧελϚΠζ ΋ΧελϚ ΠβʔͰͷ࣮૷ɻ • Lightning • s56bouya/nishiki: WordPress theme Nishiki. • Snow Monkey – 100%GPL ͷϝσΟΞ/ϒϩά޲͚ WordPress ༗ྉςʔϚ 46

Slide 47

Slide 47 text

• ΧελϜϑΟʔϧυ/Option ϖʔδͳͲͰ΍͍ͬͯͨ΋ͷ͕ ͋Δఔ౓ΧελϚΠβʔʹҠߦ͢ΔͷͰ͸ɻ • ϓϨϏϡʔͰݟͳ͕Β࿔ΕΔͬͯͷ͸΍͸Γڧ͍ɻ 47

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

2. UX ΛߴΊΔɻ 49

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

2-1. Selective Refresh 51

Slide 52

Slide 52 text

Selective Refresh ͱ͸ • Ajax Λ࢖ͬͯ෦෼తʹHTMLΛߋ ৽ɻ • Selective Refresh in the Customizer – Make WordPress Core • ԖචͷϚʔΫ͕ग़Δͷ͕໨ҹɻ 52

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

෦෼తʹHTML͕ஔ͖׵ΘΔɻ • render_callback ʹࢦఆ͢Δؔ਺ΛɺͪΌΜͱઃܭ͢Ε͹ɺ ςϯϓϨʔτλάͱͯ͠࢖͏͜ͱ΋ग़དྷΔɻ 54

Slide 55

Slide 55 text

2-2. JavaScript API 55

Slide 56

Slide 56 text

JavaScript Ͱ΋ૢ࡞Մೳɻ 56

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

ྫɿJavaScriptͰૢ࡞ͯ͠ɺߋʹߴ଎ʹɻ (function( $ ) { wp.customize( 'jumbotron_lead', function( value ) { value.bind( function( to ) { $( '.jumbotron .lead' ).text( to ); } ); } ); })( jQuery ); 58

Slide 59

Slide 59 text

JavaScript API Λ࢖͏΂͖έʔε • Selective Refresh ͕ਏ͍ɻ • ଐੑͳͲɺHTMLΛͦͷ··ஔ͖׵͑ΔΘ͚Ͱ͸ແ͍έʔε. • Selective Refresh ͚ͩͩͱਏ͍ɻ • ίϯςϯπεϥΠμʔͳͲ͕ೖ͍ͬͯΔέʔεɻ • JSͷঢ়ଶΛ࠶ߋ৽ɺ࠶ॳظԽͳͲ͕ඞཁͳέʔεɻ • DRY ͳײ͡ͰJSΛॻ͘ʹ͸͍Ζ͍Ζࢼߦࡨޡ͕ඞཁɻ 59

Slide 60

Slide 60 text

JS ͰؤுΕ͹͍Ζ͍Ζग़དྷΔɻ • ΊͬͪΌେม͚ͩͲɾɾɾɻ 60

Slide 61

Slide 61 text

࢖͍Ͳ͜Ζྫɻ 61

Slide 62

Slide 62 text

DEMO torounit/fesdemo ίϯςϯπεϥΠμʔΛςʔϚΧελϚΠβʔͰมߋग़དྷΔΑ͏ ʹɻ 62

Slide 63

Slide 63 text

• Twentysevnteen ͸ Selective Refresh ౳ʹରԠɻ 63

Slide 64

Slide 64 text

݁ߏେมɻ • ಘʹ Serective Refresh ΍ JavaScript Λ৮Γग़͢ͱେมɻ • ͪΌΜͱ࡞ͬͨϞϊΛίϯϙʔωϯτతʹ࢖͍ճ͢ͷ͕ϕ λʔɻ • ΧελϚΠβʔ൛ͷACFΈ͍ͨͳϠπ͕ग़Δؾ͸͢Δɻ • ࠓ͕νϟϯε͔΋͠Εͳ͍ɻ 64

Slide 65

Slide 65 text

WordPress ͕ࡢ೥ྗΛೖΕͨϙΠϯτͷͻͱͭɻ • Gutenberg ΋ͦ͏͚ͩͲɺWordPressͷUX͕େ͖͘มΘΖ͏ͱ ͍ͯ͠Δɻ • ϏδϡΞϧͰΈͨ··࿔ΕΔͷ͸ͭΑ͍ɻ • Ϣʔβʔ͕ΧελϚΠβʔΛ৮Δػձ΋૿͑Δ͸ͣɻ • ṖͷઃఆϖʔδΛ࡞ͬͨΓɺṖͷΧελϜϑΟʔϧυΛ࡞ͬͯ ͍ΔͱɺʮσϑΥϧτςʔϚͱ͔ͳΒͰ͖Δͷʹɾɾɾʯͬ ͯͳΔ೔͸ͦ͏ԕ͘ͳ͍ʁ 65

Slide 66

Slide 66 text

WordPress ͷϢʔβʔ΁ͷϑΥʔΧε͸ྑ͞ͷ ͻͱͭɻ దࡐదॴͰɺWordPressͷඒຯ͠͞ΛҾ͖ग़͢Α͏ͳઃܭ͕େ ࣄʹͳΔؾ͸͢Δɻʢئ๬͔΋͠Εͳ͍ʣ ͱΓ͋͑ͣWEBαΠτΛͱ͍͏બ୒ࢶ͕૿͖͑ͯͨҎ্ɺΘ͟ Θ͟WordPressΛબͿཧ༝͸ɺΧελϚΠζੑͱ͔ॊೈੑͩͬ ͨΓɻཁٻεΩϧͱWordPress΁ͷཧղ౓͸ߴ·ΔͷͰ͸ʁ 66

Slide 67

Slide 67 text

·ͱΊɻ • ·ͣຊମͷػೳΛͪΌΜͱ࢖͍౗ͦ͏ɻ • ͍͍ͩͨͷ͜ͱ͸ɺTheme Developer Handbook ʹࡌͬͯ ΔͷͰɺಡ΋͏ɻ • ಡॻձͱ͔ʹͨ͠Βָ͍͠Μ͡Όແ͍Ͱ͠ΐ͏͔ʁ • _s ΍ σϑΥϧτςʔϚ ( Twenty γϦʔζ ) ΛಡΉͱ͍Ζ͍Ζ ൃݟ͕ଟ͍ɻTheme Development Examples 67

Slide 68

Slide 68 text

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