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.2k
現場でも使える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
310
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
720
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
11
2.3k
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
torounit
2
1.8k
プラグインとの付き合い方 #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
150
Nuxt は簡単に SPA 作れるけど、アプリケーションが簡単に作れると思ったら大間違いだった / CaT vol.7
torounit
0
1.8k
令和時代の WordPress テーマ開発・ウェブサイト制作の勘所 #wpshinshu / 2019-07-27 Shinshu WordPress Meetup vol.14
torounit
0
160
WordPress Plugin 入門 #wpshinshu / 2019-06-22 Shinshu WordPress Meetup
torounit
2
180
Other Decks in Technology
See All in Technology
A3-1 IBM Championが本音で語る「IBM Cloud」
kolinz
0
310
EC/CRMの自社サービス開発をマネジメントするようになって1年でやってきたこととこれから / devio2022-takano-sho-road-to-good-development-team-management
masaru_b_cl
0
410
ECS Fargate+Mackerelにおける監視費用を削減するまでの話
nulabinc
PRO
1
420
Micro frontends and micro services
kashif98
0
140
バッファープールが大きいMySQL v5.7でDROP DATABASEが詰まった原因と対策 / Causes and Remedies for DROP DATABASE Stuck in MySQL v5.7 with Large Buffer Pool
line_developers
PRO
4
760
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
10
19k
やってみたLT会 Fleet Managerのススメ
yukiiiiikuma
PRO
0
380
Djangoで組織とユーザーの権限管理をやってみよう #devio2022
seiichi1101
0
380
今 SLI/SLO の監視をするなら Sloth が良さそうという話
shotakitazawa
1
280
漫画で使えそうな背景画像をblenderを使って作ってみた!
nokonoko1203
1
280
Goで実装するブランドネットワークとの接続ポイント
pongzu
2
270
脆弱性スキャナのOWASP ZAPを コードベースで扱ってみる / OWASP ZAP on a code base
task4233
1
220
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Atom: Resistance is Futile
akmur
255
20k
Stop Working from a Prison Cell
hatefulcrawdad
262
17k
YesSQL, Process and Tooling at Scale
rocio
157
12k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
10k
Three Pipe Problems
jasonvnalue
89
8.7k
Designing for humans not robots
tammielis
241
24k
Design by the Numbers
sachag
271
17k
What's in a price? How to price your products and services
michaelherold
229
9.4k
The Web Native Designer (August 2011)
paulrobertlloyd
75
2k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
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