https://2017.wordfes.org/sessions/1703/ WordFes 2017 での登壇資料です。
ݱͰ͑ΔWordPress.orgܝࡌςʔϚͷϝιουToro_Unit @2017.10.28 / WordFes1
View Slide
ʮެࣜσΟϨΫτϦͷςʔϚͱɺҊ݅ͰͷςʔϚͬͯผ?ʯ2
ͦΜͳ͜ͱͳ͍Αʂ3
Toro_Unit෦ ߛ (͏Β ͻΖ͠)ϑϦʔϥϯεFrontend Engineer / Web DesignerPlugin and Theme DeveloperGithub: @torounitTwitter: @Toro_UnitFacebook: fb.me/torounitBlog: https://torounit.com4
5
6
Plugins and Themes.• Custom Post Type Permalinks• Simple Post Type Permalinks• Powerful Posts Per Page (PPPP)• Responsive Slide• Vanilla• and more...7
Contribution• WordBench ϞσϨʔλʔ• WordCamp Kyoto 2017 ࣮ߦҕһ• WordCamp Tokyo 2017 Speaker• WordBench.org• VCCW Team• etc...8
ݝদຊࢢ͔Β͖·ͨ͠ɻ1• ϫΠϯ͓͍͍͠Αɻ• ͦΖͦΖڶഴ͓͍͍͠Αɻ• ͍͔͓͍͍͢͠Αɻ1 https://commons.wikimedia.org/wiki/File:130608_Matsumoto_Castle_Matsumoto_Nagano_pref_Japan02bs4.jpgAuthor: 663highland. License: CC BY 2.59
WordPress.org ςʔϚσΟϨΫτϦܝࡌςʔϚ ͱʁ• https://wordpress.org/themes/• WordPress ͷཧը໘͔ΒΠϯετʔϧɾߋ৽͕ग़དྷΔςʔϚୡɻ• ςʔϚϨϏϡʔΛ௨ա͠ͳ͍ͱܝࡌͰ͖ͳ͍ɻ10
ςʔϚͷ࡞ΓํɻެࣜͷυΩϡϝϯςʔγϣϯɻࠓͷͱ͜Ζӳޠ͔͠ແ͍͚ͲɺίʔυͰͷղઆଟ͍ͷͰҙ֎ʹͳΜͱ͔ͳΔɻ• Theme Developer Handbook• https://developer.wordpress.org/themes/11
ςʔϚϨϏϡʔΛ௨Βͳ͍͜ͱɻ• ΤεέʔϓͳͲ͕͞Ε͍ͯͳ͍ɻ੬ऑੑ͕༗ΔϞϊɻ• ϓϥάΠϯςϦτϦʔͷػೳɺϓϥάΠϯͰରԠ͢Δ͖ػೳ͕͍ͬͯΔϞϊɻ༷ʑͳ͖·Γ͕͋Δɻ12
Required – Theme Review Team• https://make.wordpress.org/themes/handbook/review/required/• ຊޠ༁ https://mirucon.github.io/required-ja/13
ϓϥάΠϯςϦτϦʔ• https://make.wordpress.org/themes/handbook/review/required/explanations-and-examples/#plugin-territorysσβΠϯʹؔ࿈͠ͳ͍ػೳΛςʔϚʹؚΊ͍͚ͯͳ͍ɻ14
ྫ• Analytics·ͨτϥοΩϯάͷαϙʔτ• SEOΦϓγϣϯ• ͓͍߹ΘͤϑΥʔϜ• ඇσβΠϯؔ࿈ͷϝλϘοΫε• ϦιʔεΩϟογϯά• ཧྖҬͷμογϡϘʔυΟδΣοτ• ΧελϜߘλΠϓͱγϣʔτίʔυ• ιʔγϟϧϝσΟΞͷʮ͖ʯɺʮϑΥϩʔʯɺʮڞ༗ʯϘλϯ15
͍ͨΜʁ16
ͪΌΜͱकΔͱޮతͳ։ൃ͕ग़དྷΔɻ݁ՌతʹָʹͳΔΑɻ17
ςʔϚΛૄ݁߹ʹͰ͖Δɻ18
νʔϜͰͷ։ൃʹ͓͚Δɺׂͷ໌֬Խɻ• ͦΕͧΕ͕୯ಠͰ͔ͬ͠Γػೳ͢Εۀ͕͍͢͠ɻ• ػೳA͞ΜɺσβΠϯɾϚʔΫΞοϓB͞ΜɺهࣄೖྗC͞Μɻ• ྫɿςʔϚͷ functions.php ͰΧελϜߘλΠϓΛઃఆ͢ΔͱͦͷςʔϚΛ༗ޮʹ͠ͳ͍ͱɺهࣄ͕ॻ͚ͳ͍ɻ19
• ϝϯςφϯεɾվमɾϦχϡʔΞϧ࣌ͷख͕ؒগͳ͍ɻ• @see Hiroshi Urabe, Hiromu Hasegawa: ͦͷઃܭେৎʁແཧͷͳ͍WordPressͷઃܭͱߏஙΛߟ͑Δ | WordPress.tv20
ͦͷͨΊʹ.21
Theme Unit TestςʔϚϢχοτςετ - WordPress Codexຊޠ൛WYSIWYG ΤσΟλͰී௨ʹهࣄΛॻ͍ͨΒී௨ʹදࣔ͞ΕΔΑ͏ʹͪΌΜͱCSSΛॻ͘ɻ• ճΓࠐΈΩϟϓγϣϯ͖ը૾ɺΪϟϥϦʔ݁ߏΕ͕ͪɻ• ී௨ͷHTML͕classΛ͚ͣʹɺͪΌΜͱදࣔग़དྷΕɺςʔϚΛม͑ͯͪΌΜͱදࣔͰ͖Δͣɻ22
WordPressͰग़དྷΔ͜ͱΛͪΌΜͱग़དྷΔΑ͏ʹͭ͘Ζ͏ɻ• WordPressʹඪ४ࡌ͞Ε͍ͯΔͷ͕ͪΌΜͱಈ͘Α͏ʹ͢Δɻ• υΩϡϝϯςʔγϣϯɺαϙʔτͷίετ͕ݮΔɻ• ຊʹग़དྷΔͬͯॻ͍ͯ͋ΔͷʹɾɾɾͬͯͳΔͷɺ͍ͮΒ͞ͱγεςϜͷෆ৴ײΛੜΉɻ23
Theme CheckTheme Check — WordPress Plugins24
νΣοΫ߲• ίʔσΟϯάϧʔϧ• ΤεέʔϓɾαχλΠζ͞Ε͍ͯͳ͍• ඇਪͳؔɾςϯϓϨʔτλά• ඞਢͷ class ͷଘࡏɻ• etc...25
ཧը໘͔Β͍Ζ͍Ζมߋग़དྷΔΑ͏ʹ͍ͨ͠ɻ26
27
The Customize APITheme Options – The Customize API | Theme DeveloperHandbook | WordPress Developer ResourcesΧελϚΠβʔʹઃఆΛՃ͢ΔAPI.28
࣮29
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
ςϯϓϨʔτͰͷදࣔecho esc_html( get_theme_mod( 'jumbotron_title', 'Hello World' ) );?>31
͜Μ͚ͩʂΧελϜϑΟʔϧυΑΓ؆୯͡Όͳ͍Ͱ͔͢ʁ32
DEMOtorounit/customizer-demo33
ͳΜ͔ͬ͞Γ͢Δɻɻ34
Selective Refresh35
Selective Refresh ͱAjax Λͬͯ෦తʹHTMLΛߋ৽ɻSelective Refresh in the Customizer – Make WordPress Core36
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
͜ΕͰAJAXͰߋ৽͞ΕΔΑ͏ʹɻ38
JavaScriptͰૢ࡞ͯ͠ɺߋʹߴʹɻ39
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
(function( $ ) {wp.customize( 'jumbotron_lead', function( value ) {value.bind( function( to ) {$( '.jumbotron .lead' ).text( to );} );} );})( jQuery );41
͍Ͳ͜Ζ42
DEMOtorounit/fesdemoίϯςϯπεϥΠμʔΛςʔϚΧελϚΠβʔͰมߋग़དྷΔΑ͏ʹɻ43
• Twentysevnteen ͷτοϓϖʔδͷΧελϚΠζ ΧελϚΠβʔͰͷ࣮ɻ• Lightning• s56bouya/nishiki: WordPress theme Nishiki.• Snow Monkey – 100%GPL ͷϝσΟΞ/ϒϩά͚ WordPress༗ྉςʔϚ44
·ͱΊɻ• ܝࡌςʔϚɺීஈͷҊ݅ಉ͡Α͏ʹ࡞ΕΔʂ• ·ͣຊମͷػೳΛͪΌΜͱ͍ͦ͏ɻ• _s σϑΥϧτςʔϚ ( Twenty γϦʔζ ) ΛಡΉͱ͍Ζ͍Ζൃݟ͕ଟ͍ɻTheme Development Examples45
Thanks!Github: @torounitTwitter: @Toro_UnitFacebook: fb.me/torounitBlog: https://torounit.com46
torounit
ysasago
yoshiitaka
yutoy
rakus_dev
leveragestech
iamshunta
miyakemito
pict3
yuj1osm
nagix
tomoaki25
fujiwara3
sachag
malarkey
keithpitt
shpigford
paulrobertlloyd
garrettdimon
tammyeverts
akosma
zakiyama
dotmariusz
jrom
tanoku