現場でも使えるWordPress.org掲載テーマのメソッド

Transcript

1. 1.

   ݱ৔Ͱ΋࢖͑Δ WordPress.orgܝࡌςʔϚͷ ϝιου Toro_Unit @2017.10.28 / WordFes 1

2. 2.

   ʮެࣜσΟϨΫτϦͷςʔϚͱɺҊ݅ͰͷςʔϚͬͯผ෺?ʯ 2

3. 3.

   ͦΜͳ͜ͱͳ͍Αʂ 3

4. 4.

   Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) ϑϦʔϥϯε Frontend Engineer / Web

   Designer Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 4
5. 5.

   5

6. 6.

   6

7. 7.

   Plugins and Themes. • Custom Post Type Permalinks • Simple

   Post Type Permalinks • Powerful Posts Per Page (PPPP) • Responsive Slide • Vanilla • and more... 7
8. 8.

   Contribution • WordBench ௕໺ ϞσϨʔλʔ • WordCamp Kyoto 2017 ࣮ߦҕһ

   • WordCamp Tokyo 2017 Speaker • WordBench.org • VCCW Team • etc... 8
9. 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.

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

    • ςʔϚϨϏϡʔΛ௨ա͠ͳ͍ͱܝࡌ Ͱ͖ͳ͍ɻ 10
11. 11.

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

    themes/ 11
12. 12.

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

13. 13.

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

    https://mirucon.github.io/required-ja/ 13
14. 14.

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

15. 15.

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

    ϦιʔεΩϟογϯά • ؅ཧྖҬͷμογϡϘʔυ΢ΟδΣοτ • ΧελϜ౤ߘλΠϓͱγϣʔτίʔυ • ιʔγϟϧϝσΟΞͷʮ޷͖ʯɺʮϑΥϩʔʯɺʮڞ༗ʯϘλϯ 15
16. 16.

    ͍ͨ΁Μʁ 16

17. 17.

    ͪΌΜͱकΔͱޮ཰తͳ։ൃ͕ग़དྷΔɻ ݁ՌతʹָʹͳΔΑɻ 17

18. 18.

    ςʔϚΛૄ݁߹ʹͰ͖Δɻ 18

19. 19.

    νʔϜͰͷ։ൃʹ͓͚Δɺ໾ׂͷ໌֬Խɻ • ͦΕͧΕ͕୯ಠͰ͔ͬ͠Γػೳ͢Ε͹෼ۀ͕͠΍͍͢ɻ • ػೳ͸A͞ΜɺσβΠϯɾϚʔΫΞοϓ͸B͞Μɺهࣄೖྗ͸ C͞Μɻ • ྫɿςʔϚͷ functions.php ͰΧελϜ౤ߘλΠϓΛઃఆ

    ͢ΔͱͦͷςʔϚΛ༗ޮʹ͠ͳ͍ͱɺهࣄ͕ॻ͚ͳ͍ɻ 19
20. 20.

    • ϝϯςφϯεɾվमɾϦχϡʔΞϧ࣌ͷख͕ؒগͳ͍ɻ • @see Hiroshi Urabe, Hiromu Hasegawa: ͦͷઃܭେৎ෉ʁແ ཧͷͳ͍WordPressͷઃܭͱߏஙΛߟ͑Δ

    | WordPress.tv 20
21. 21.

    ͦͷͨΊʹ. 21

22. 22.

    Theme Unit Test ςʔϚϢχοτςετ - WordPress Codex ೔ຊޠ൛ WYSIWYG ΤσΟλͰී௨ʹهࣄΛॻ͍ͨ

    Βී௨ʹදࣔ͞ΕΔΑ͏ʹͪΌΜͱCSSΛ ॻ͘ɻ • ճΓࠐΈ΍Ωϟϓγϣϯ෇͖ը૾ɺΪϟ ϥϦʔ౳݁ߏ๨Ε͕ͪɻ • ී௨ͷHTML͕class౳Λ෇͚ͣʹɺͪΌ Μͱදࣔग़དྷΕ͹ɺςʔϚΛม͑ͯ΋ ͪΌΜͱදࣔͰ͖Δ͸ͣɻ 22
23. 23.

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

24. 24.

    Theme Check Theme Check — WordPress Plugins 24

25. 25.

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

    ͷଘࡏɻ • etc... 25
26. 26.

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

27. 27.

    27

28. 28.

    The Customize API Theme Options – The Customize API |

    Theme Developer Handbook | WordPress Developer Resources ΧελϚΠβʔʹઃఆΛ௥Ճ͢ΔAPI. 28
29. 29.

    ࣮૷ 29

30. 30.

    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', 'demo' ), )); } add_action( 'customize_register', 'my_customize_register' ); 30
31. 31.

    ςϯϓϨʔτͰͷදࣔ <h1> <?php echo esc_html( get_theme_mod( 'jumbotron_title', 'Hello World' )

    ); ?> </h1> 31
32. 32.

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

33. 33.

    DEMO torounit/customizer-demo 33

34. 34.

    ͳΜ͔΋ͬ͞Γ͢Δɻɻ 34

35. 35.

    Selective Refresh 35

36. 36.

    Selective Refresh ͱ͸ Ajax Λ࢖ͬͯ෦෼తʹHTMLΛߋ৽ɻ Selective Refresh in the Customizer

    – Make WordPress Core 36
37. 37.

    function my_customize_register( WP_Customize_Manager $wp_customize ) { $wp_customize->add_setting( 'jumbotron_lead', array( 'default'

    => '', 'sanitize_callback' => 'esc_html', 'transport' => 'postMessage', // JSͰߋ৽͢ΔΑ͏ʹɻ ) ); $wp_customize->add_control( 'jumbotron_lead', array( 'section' => 'jumbotron', )); //ॻ͖׵͑ΔHTMLΛઃఆ $wp_customize->selective_refresh->add_partial( 'jumbotron_lead', array( 'selector' => '.jumbotron .lead', 'render_callback' => function() { return get_theme_mod( 'jumbotron_lead' ); }, ) );} add_action( 'customize_register', 'my_customize_register' ); 37
38. 38.

    ͜ΕͰAJAXͰߋ৽͞ΕΔΑ͏ʹɻ 38

39. 39.

    JavaScriptͰૢ࡞ͯ͠ɺߋʹߴ଎ʹɻ 39

40. 40.

    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' ); 40
41. 41.

    (function( $ ) { wp.customize( 'jumbotron_lead', function( value ) {

    value.bind( function( to ) { $( '.jumbotron .lead' ).text( to ); } ); } ); })( jQuery ); 41
42. 42.

    ࢖͍Ͳ͜Ζ 42

43. 43.

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

44. 44.

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

    theme Nishiki. • Snow Monkey – 100%GPL ͷϝσΟΞ/ϒϩά޲͚ WordPress ༗ྉςʔϚ 44
45. 45.

    ·ͱΊɻ • ܝࡌςʔϚ΋ɺීஈͷҊ݅΋ಉ͡Α͏ʹ࡞ΕΔʂ • ·ͣຊମͷػೳΛͪΌΜͱ࢖͍౗ͦ͏ɻ • _s ΍ σϑΥϧτςʔϚ (

    Twenty γϦʔζ ) ΛಡΉͱ͍Ζ͍Ζ ൃݟ͕ଟ͍ɻTheme Development Examples 45
46. 46.

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