Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
現場でも使えるWordPress.org掲載テーマのメソッド
Toro_Unit (Hiroshi Urabe)
October 28, 2017
Technology
2
3.3k
現場でも使えるWordPress.org掲載テーマのメソッド
https://2017.wordfes.org/sessions/1703/
WordFes 2017 での登壇資料です。
Toro_Unit (Hiroshi Urabe)
October 28, 2017
Tweet
Share
More Decks by Toro_Unit (Hiroshi Urabe)
See All by Toro_Unit (Hiroshi Urabe)
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
350
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
740
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
11
2.4k
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
torounit
2
2k
プラグインとの付き合い方 #WPmeetupkobe / 2019-08-31 Kansai WordPress Meetup Kobe vol.10
torounit
4
1.2k
プラグインとの付き合い方 #wpshinshu / 2019-08-24 Shinshu WordPress Meetup vol.15
torounit
0
160
Nuxt は簡単に SPA 作れるけど、アプリケーションが簡単に作れると思ったら大間違いだった / CaT vol.7
torounit
0
1.9k
令和時代の WordPress テーマ開発・ウェブサイト制作の勘所 #wpshinshu / 2019-07-27 Shinshu WordPress Meetup vol.14
torounit
0
160
WordPress Plugin 入門 #wpshinshu / 2019-06-22 Shinshu WordPress Meetup
torounit
2
190
Other Decks in Technology
See All in Technology
【NGK2023S】 ノードエディタ形式の画像処理ツール「Image-Processing-Node-Editor」
kazuhitotakahashi
0
300
OpenShift.Run2023_create-aro-with-terraform
ishiitaiki20fixer
1
310
cdk deployに必要な権限ってなんだ?
kinyok
0
180
Pentesting Password Reset Functionality
anugrahsr
0
480
Oracle Transaction Manager for Microservices Free 22.3 製品概要
oracle4engineer
PRO
5
110
創業1年目のスタートアップでAWSコストを抑えるために取り組んでいること / How to Keep AWS Costs Down at a Startup
yuj1osm
3
2.2k
NGINXENG JP#2 - 1-NGINX-エンジニアリング勉強会-きょうの見どころ
hiropo20
0
110
Kaggleシミュレーションコンペの動向
nagiss
0
270
AI Services 概要 / AI Services overview
oracle4engineer
PRO
0
170
日経電子版だけじゃない! 日経の新規Webメディアの開発 - NIKKEI Tech Talk #3
sztm
0
320
OCI DevOps 概要 / OCI DevOps overview
oracle4engineer
PRO
0
500
SmartHRからOktaへのSCIM連携で作り出すHRドリブンのアカウント管理
jousysmiler
1
120
Featured
See All Featured
The Web Native Designer (August 2011)
paulrobertlloyd
76
2.2k
Rails Girls Zürich Keynote
gr2m
87
12k
It's Worth the Effort
3n
177
26k
Designing Experiences People Love
moore
130
22k
4 Signs Your Business is Dying
shpigford
171
20k
Side Projects
sachag
451
37k
Designing with Data
zakiwarfel
91
4.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
7
580
Building Flexible Design Systems
yeseniaperezcruz
314
35k
Build your cross-platform service in a week with App Engine
jlugia
221
17k
Building Applications with DynamoDB
mza
85
5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k
Transcript
ݱͰ͑Δ WordPress.orgܝࡌςʔϚͷ ϝιου Toro_Unit @2017.10.28 / WordFes 1
ʮެࣜσΟϨΫτϦͷςʔϚͱɺҊ݅ͰͷςʔϚͬͯผ?ʯ 2
ͦΜͳ͜ͱͳ͍Αʂ 3
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
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.jpg
Author: 663highland. License: CC BY 2.5 9
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.tv 20
ͦͷͨΊʹ. 21
Theme Unit Test ςʔϚϢχοτςετ - WordPress Codex ຊޠ൛ WYSIWYG ΤσΟλͰී௨ʹهࣄΛॻ͍ͨ
Βී௨ʹදࣔ͞ΕΔΑ͏ʹͪΌΜͱCSSΛ ॻ͘ɻ • ճΓࠐΈΩϟϓγϣϯ͖ը૾ɺΪϟ ϥϦʔ݁ߏΕ͕ͪɻ • ී௨ͷHTML͕classΛ͚ͣʹɺͪΌ Μͱදࣔग़དྷΕɺςʔϚΛม͑ͯ ͪΌΜͱදࣔͰ͖Δͣɻ 22
WordPressͰग़དྷΔ͜ͱΛͪΌΜͱग़དྷΔΑ͏ʹͭ͘Ζ͏ɻ • WordPressʹඪ४ࡌ͞Ε͍ͯΔͷ͕ͪΌΜͱಈ͘Α͏ʹ ͢Δɻ • υΩϡϝϯςʔγϣϯɺαϙʔτͷίετ͕ݮΔɻ • ຊʹग़དྷΔͬͯॻ͍ͯ͋ΔͷʹɾɾɾͬͯͳΔͷɺ ͍ͮΒ͞ͱγεςϜͷෆ৴ײΛੜΉɻ 23
Theme Check Theme Check — WordPress Plugins 24
νΣοΫ߲ • ίʔσΟϯάϧʔϧ • ΤεέʔϓɾαχλΠζ͞Ε͍ͯͳ͍ • ඇਪͳؔɾςϯϓϨʔτλά • ඞਢͷ class
ͷଘࡏɻ • etc... 25
ཧը໘͔Β͍Ζ͍Ζมߋग़དྷΔΑ͏ ʹ͍ͨ͠ɻ 26
27
The Customize API Theme Options – The Customize API |
Theme Developer Handbook | 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
ςϯϓϨʔτͰͷදࣔ <h1> <?php echo esc_html( get_theme_mod( 'jumbotron_title', 'Hello World' )
); ?> </h1> 31
͜Μ͚ͩʂ ΧελϜϑΟʔϧυΑΓ؆୯͡Όͳ͍Ͱ͔͢ʁ 32
DEMO torounit/customizer-demo 33
ͳΜ͔ͬ͞Γ͢Δɻɻ 34
Selective Refresh 35
Selective Refresh ͱ Ajax Λͬͯ෦తʹHTMLΛߋ৽ɻ Selective Refresh in the Customizer
– Make WordPress Core 36
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
DEMO torounit/fesdemo ίϯςϯπεϥΠμʔΛςʔϚΧελϚΠβʔͰมߋग़དྷΔΑ͏ ʹɻ 43
• Twentysevnteen ͷτοϓϖʔδͷΧελϚΠζ ΧελϚ ΠβʔͰͷ࣮ɻ • Lightning • s56bouya/nishiki: WordPress
theme Nishiki. • Snow Monkey – 100%GPL ͷϝσΟΞ/ϒϩά͚ WordPress ༗ྉςʔϚ 44
·ͱΊɻ • ܝࡌςʔϚɺීஈͷҊ݅ಉ͡Α͏ʹ࡞ΕΔʂ • ·ͣຊମͷػೳΛͪΌΜͱ͍ͦ͏ɻ • _s σϑΥϧτςʔϚ (
Twenty γϦʔζ ) ΛಡΉͱ͍Ζ͍Ζ ൃݟ͕ଟ͍ɻTheme Development Examples 45
Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 46