Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
この一年で身についた“マトモ”な WordPressテーマの作り方
Search
Chiaki Okamoto
December 14, 2019
Programming
7
2k
この一年で身についた“マトモ”な WordPressテーマの作り方
前回WPZoomUPでおはなししたことのリライト版ですしおすし。
Chiaki Okamoto
December 14, 2019
Tweet
Share
More Decks by Chiaki Okamoto
See All by Chiaki Okamoto
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
0
64
私の推しはブロックエディター 〜デフォルトブロックに触れ合う〜
chiilog
0
310
WordPressテーマの作り方 2019 私のベストプラクティス
chiilog
24
13k
Google Optimizeで始めるA/Bテスト #wbkyoto
chiilog
1
3.4k
こんなCSSからはそろそろ卒業しよう
chiilog
18
17k
まだCSSで消耗したい?Sassを覚えて楽しちゃおう!
chiilog
4
2.1k
さいきょうのWordPressサイト構築フローとは
chiilog
2
1k
エンジニアから見た、すごくやりやすかった構築フローの話
chiilog
0
2k
Other Decks in Programming
See All in Programming
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
280
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
780
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
41
28k
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
2
520
Using AI Tools Around Software Development
inouehi
0
1.2k
生成AIで日々のエラー調査を進めたい
yuyaabo
0
610
Is Xcode slowly dying out in 2025?
uetyo
1
170
社内での開発コミュニティ活動とモジュラーモノリス標準化事例のご紹介/xPalette and Introduction of Modular monolith standardization
m4maruyama
1
130
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
250
Gleamという選択肢
comamoca
6
740
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
130
Featured
See All Featured
Designing for Performance
lara
609
69k
The Invisible Side of Design
smashingmag
299
51k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
We Have a Design System, Now What?
morganepeng
52
7.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Automating Front-end Workflow
addyosmani
1370
200k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Transcript
͜ͷҰͰʹ͍ͭͨ ❝ϚτϞ❞ͳ WordPressςʔϚͷ࡞Γํ Chiaki Okamoto
Profile Chiilog Ԭຊ ઍळ Chiilog Ԭຊ ઍळ
δϧ - ͏ΔΘ͠ͷ͔͍͓࢞͜͠͞Μ
Ϩʔφ - ͝Μ͍͖ͩ͢େ૽͗ͬࢠ
ࢲͷεΩϧηοτ • جຊతʹϚʔΫΞοϓܥ • HTMLɺCSSɺ͋ͱjQueryʢJSΉ͍ͣʣ • PHPWordPressςʔϚͰΑ͘ݟΔײ͡ͷ ͔ͭ͠Θ͔Βͳ͍ʂ • whileͱ͔foreachͱ͔ɺجຊతͳؔͱ͔…
• ࠷ۙnamespaceΛཧղͨ͠ʂ • ϖΞϓϩͯ͠ΒͬͨΒίʔυ͖Ε͍ʹͳΔ
WordPressςʔϚ ͭͬͯ͘Δਓʂ
ʮͭ͘ΕΔʯͷج४ͱ ਖ਼ΫΦϦςΟΒΒ͡ΌΜʁ
WordPressςʔϚͱ ฏͨ͘ݴ͑ σβΠϯςϯϓϨʔτ
Ͱ͖ͯͨΓલͷ͜ͱ • λΠτϧຊจ͕ςʔϚΛม͖͑ͯͪΜͱ ݟΕΔ͜ͱ • ςʔϚΛม͑ͯϝχϡʔ͕มΘΒͳ͍͜ͱ • ςʔϚΛม͑ͯղੳλά͕ૠೖ͞Ε͍ͯΔ ͜ͱ
ςʔϚΛม͑ͨΒ ◦◦͕ಈ͔ͳ͘ͳͬͨʂ ֎
Ͳ͏͢Δʁ
σϑΥϧτςʔϚʹͯ͠ ಈ͘Α͏ʹͭ͘Δʂ
֎؍ͱίϯςϯπ ͖ͬͪΓ͓ͤͯ͘͞ https://wordpress.tv/2017/10/04/hiroshi-urabe-hiromu-hasegawa- %e3%81%9d%e3%81%ae%e8%a8%ad%e8%a8%88%e5%a4%a7%e4%b8%88%e5%a4%ab%ef% bc%9f%e7%84%a1%e7%90%86%e3%81%ae%e3%81%aa%e3%81%84wordpress%e3%81%ae%e σβΠϯ
ͦΕ͕ҙࣝͰ͖ͳ͍ͱ͜͏ͳΔ • ϦχϡʔΞϧ͕େมͮ͠Β͘ͳΔʹςʔϚͷ վम͕େมʹͳΔʹݟੵΓͶ্͕Δ • ςʔϚϑΝΠϧͷͲͷϑΝΠϧʹԿΛॻ͍ ͯ͋Δͷ͔Λݕূ͢Δख͕ؒ૿͑Δ • ͨͱ͑ɺφϏήʔγϣϯϝχϡʔΛςʔϚଆʹॻ͍͍ͯͨ߹ɺ header.phpʹॻ͍ͯ͋Δͷ͔ɺͦΕͱϑΝΠϧΛ͚ͯ
navigation.phpͳͲʹॻ͍͍ͯΔͷ͔ͱ͔୳͞ͳ͍ͱ͍͚ͳ͍ʂ
”ςʔϚ࡞”ͷج४Ͱࢲ͕ʹ͚ͭͨ͜ͱ
લఏ
ϒϩοΫΤσΟλʔͱ ྑ͘͢Δ ݱঢ়ɺWordPressͷΤσΟλʔϒϩοΫΤσΟ λʔͰ͢ɻଟɺ͜ͷઌΫϥγοΫΤσΟλʔʹ Δ͜ͱͳ͍ͱࢥ͏ʢଟͶʂଟʂʣͷͰɺ ͦΖͦΖ͖߹͍·͠ΐ͏ɻ 5.3ͰάϧʔϓϒϩοΫ͕Ճ͞ΕͨΓɺΠϯφʔ ϒϩοΫʹελΠϧՃͰ͖ͨΓͱɺ͔ͳΓ͍ উख͕Α͘ͳΓ·ͨ͠Αʂ
https://wptavern.com/gutenberg-one-year-later
ϒϩοΫΤσΟλʔͷ͍͍ͱ͜Ζ • ଟͷϒϩοΫ͔Β͔ͳΓࣗ༝ͳϨΠΞτ ͰϖʔδΛ࡞Δ͜ͱ͕Ͱ͖Δ • the_content() ͚ͩͰίϯςϯπ͕݁͢Δ • ͭ·ΓɺେྔͷΧελϜϑΟʔϧυΛ࡞ͬͯςϯϓϨʔτ Λͭ͘ΔΑ͏ͳ͜ͱΛ͠ͳͯ͘Α͘ͳΔͷͰ͢ʂ
ςʔϚϋϯυϒοΫΛಡΉ • https://developer.wordpress.org/themes/ • ςʔϚΛ࡞ΔͨΊͷجຊཏ͞Ε͍ͯΔ • Google༁ͰेಡΊΔ • ςʔϚ࡞͢ΔͳΒ100ճಡ͏ʢby toro_unitʣ
қɿॳڃ
ػೳͱ֎؍͖ͪΜͱ͢Δ ςʔϚΛແޮԽͨ͠ͱ͖ʹɺҰॹʹແޮԽ͞Ε ΔͱࠔΔͷςʔϚʹೖΕͳ͍ • ྫ͑γϣʔτίʔυɺΧελϜϒϩοΫɻGoogle AnalyticsͳͲͷղੳλάʂ • Ҋ͔݅ͩΒͬͯ͑ͯςʔϚʹೖΕͳ͍ɻ ͷͪͷͪҾ͖ܧ͍ͩ୭͔ʢ͔ࣗʂʣ͕ࠔΓ·͢ɻ
ͪͳΈʹɺػೳͬͯ…ʁ Θ͔Γ͍͢ͷͩͱ ղੳλάɺSEO༻ͷλάɺSNSͷγΣΞϘλϯ ྨɺγϣʔτίʔυɺΧελϜߘλΠϓɺΧ ελϜλΫιϊϛʔɺΧελϜϒϩοΫɺϑΥʔ Ϝ ͜ΕΒશ෦ϓϥάΠϯԽ͠·͠ΐ͏
దͳλάΛ͏ ྫ͑ɺϝχϡʔܥͷλάςϯϓϨʔτʹ ͨॻ͖͞Ε͍ͯΔͷΛΑ͘ݟ͔͚·͢ʢࢲ ͬͨ͜ͱ͋ΔΑʂʣ͕ɺΧελϜϝχϡʔΛ ͬͨ΄͏͕ΊͪΌͪ͘ΌָͰ͢ɻ ੲΈ͍ͨʹϝχϡʔ͕ը૾ͱ͔ͦ͏͍͏͜ͱগͳ͘ͳ͖ͬͯ ͨ͠ɾɾɾʢͦͦը૾ϓϥάΠϯ͍ΕͨΒ͑ΔΑ͏ʹ ͳΔΑʣ
దͳλάʁ • GoogleઌੜΈΜͳͷຯํɻ • ʮߘΞʔΧΠϒͷλΠτϧग़͍ͨ͠ͳʯͱ ࢥͬͨΒɺarchive-post_type.php ʹߘλΠ ϓ໊Λϕλॻ͖͢ΔલʹɺGoogleઌੜͰ ʮWordPress archive
titleʯͱ͔ௐͯΈΑ͏ େࣄͳͷʮݕࡧྗʯʂ
దͳςϯϓϨʔτΛ͏ τοϓϖʔδɺindex.php ʹͯ͠·ͤΜΑͶʁ ͪΌΜͱςʔϚϋϯυϒοΫʹςϯϓϨʔτ ֊ʹ͍ͭͯهࡌ͕͋Γ·͢ɻ४͡·͠ΐ͏ɻ
https://developer.wordpress.org/themes/basics/template-hierarchy/
దͳςϯϓϨʔτΛ͏ ΧςΰϦʔͱλά͕ಉ͡ͳΒarchive.php Λɺ ҧ͏ͳΒͪΌΜͱcategory.php tag.php ͳͲ Λ४උ͠·͢ɻ • if
จͰذͤͯ͞ɺ໌ɺ1ϲ݄ޙɺ3ϲ݄ޙɺޙ(ry ͷ ͕ࣗΘ͔Γ·͔͢ʁࢲ͍֮͑ͯΒΕ·ͤΜɻ ࠓޙࣗҎ֎ͷਓ͕৮ΔՄೳੑेߟ͑ΒΕΔͷͰɺς ϯϓϨʔτࡉ͔͚ͨ͘΄͏͕ྑ͍ͱߟ͑·͢ɻ
қɿதڃ
ΤσΟλελΠϧΛ࡞Δ ΫϥγοΫΤσΟλʔͷͱ͖ΑΓॏཁͰ͢ʂʂ ΤσΟλ্Ͱݟ͑ΔͷʹαΠτͰݟ͑Δͷ ͘Β͍ͷؾ࣋ͪͰ͔ͬ͠Γͭ͘Γ·͠ΐ͏ɻ ʢਖ਼ॳڃ͔ͱࢥ͏͚ͲɺCSSͷઃܭ͕ೖΔͷͰதڃʹʣ
// ΤσΟλʔελΠϧΛՃ add_editor_style(); // σϑΥϧτͷϒϩοΫͷCSS͕ϑϩϯτͰద༻͞ΕΔ add_theme_support( 'wp-block-styles' ); // ϒϩοΫΤσΟλʔʹCSSΛ͋ͯΔ
function themename_block_editor_styles { wp_enqueue_style( ‘style-name’, get_theme_file_uri( '/path/to/ editor-style-block.css' ), array(), wp_get_theme()- >get( 'Version' ), 'all' ); } add_action( 'enqueue_block_editor_assets', 'themename_block_editor_styles', 1, 1 ); ΤσΟλελΠϧͷಡΈࠐ·ͤํ https://developer.wordpress.org/block-editor/developers/themes/theme-support/
ϒϩοΫ୯ҐͰ CSSίϯϙʔωϯτઃܭΛ͢Δ ϒϩοΫΤσΟλʔʹͳͬͯॊೈ͕ʢΫϥ γοΫΤσΟλʔͷࠒΑΓʣ্͕ͬͨͷͰɺϒ ϩοΫ୯ҐͰCSSΛॻ͔ͳ͍ͱ่ΕͷݪҼʹͳ Γ·͢ɻ
ίϯϙʔωϯτ୯Ґʁ ϘλϯϒϩοΫΛྫʹ͠·͢ɻ <div class="wp-block-button"> <a class="wp-block-button__link" href="#">Ϙλϯ</a> </div>
ίϯϙʔωϯτ୯Ґʁ CSS͜͏ॻ͖·͢ɻ .wp-block-button {} .wp-block-button__link {} ͜͏͍͏ॻ͖ํ͠ͳ͍΄͏͕͍͍ʂ .entry-content .wp-block-button {}
.wp-block-button {} .wp-block-button__link {} .entry-content .wp-block-button {}
ίϯϙʔωϯτʹ͢ΔϝϦοτ ίϯϙʔωϯτઃܭͰCSSΛॻ͘Α͏ʹ͢Δ ͱɺ࠶ར༻ੑ͕ߴ·ΔͷͰeditor-style.css ָ͕ ʹ࡞ΕΔʂ • .entry-content ཧը໘Ͱग़ͯͳ͍͔Βɺeditor- style.cssͰಡΈࠐ·ͤͯελΠϧ͕ͨΒͳ͘ͳͬͯ͠ ·͏ʂ
ϒϩοΫʹελΠϧΛՃ͢Δ • ϒϩοΫʹΫϥεͷՃͱ͔ͰͳΜͱ͔Ͱ͖ Δέʔεׂͱଟ͍Ͱ͢ɻ • wp.blocks.registerBlockStyleͰελΠϧͷ Ճ؆୯ʹͰ͖·͢ʂ https://developer.wordpress.org/block- editor/developers/filters/block-filters/
͜͏͍͏ͷʂˠ
қɿ্ڃ
ΧελϜϒϩοΫΛ࡞Δ ʢ࡞ͬͯΒ͏ʣ • طଘϒϩοΫΛΈ߹Θ࣮ͤͯݱͰ͖ͳ͍ ͱ͔ɺػೳͷ։ൃ͕ඞཁͩͬͨΒ໎ΘͣΧε λϜϒϩοΫΛ࡞Γ·͠ΐ͏ɻ • ͔ͨ͠͠ΒࣅͨػೳΛ୭͔͕࡞͍ͬͯΔ͔ ͠Εͳ͍͔ΒɺϓϥάΠϯ୳ͯ͠Έ· ͠ΐ͏ɻʢAdvanced
Posts Blocksਆʂʣ ʮ؆୯ͩΑʂʯͬͯݴΘΕΔ͚Ͳɺ͘͢ͳ͘ͱReactͷ͕͍ࣝΔ͔Β্ڃ
νϡʔτϦΞϧΛͬͯΈΔ ΧελϜϒϩοΫΛΖ͏ʂͱෲΛܾΊͨΒɺ ͱΓ͋͑ͣνϡʔτϦΞϧ͔ΒͬͯΈΔͷΛ Φεεϝ͠·͢ɻ https://developer.wordpress.org/block-editor/ tutorials/block-tutorial/
ϒϩοΫΤσΟλʔͷొͰ ίϯςϯπͷࣗ༝ ര্͕Γ
ͰɺͱͱͰ͖ͯͨΑͶ
ΧελϜϑΟʔϧυͬͯͭ
None
҆қʹΧελϜϑΟʔϧυΘͳ͍ ͔ͤͬ͘ͷϒϩοΫΤσΟλʔͰ͢ɻ׆༻͠· ͠ΐ͏ɻΧελϜϑΟʔϧυલఏͰΛਐΊͳ ͍͜ͱɻΧελϚΠβʔͰͰ͖ͳ͍͔ɺΧελ ϜϒϩοΫΛ࡞Δඞཁ͕͋Δ͔ɺͪΌΜͱ੍࡞ લʹ٧Ί·͠ΐ͏ɻ ͪ͜͜ΌΜͱΒͳ͍ͱҊ݅ؒҧ͍ͳ͘೩͑ ·͢ʢܦݧஊʣ ※ WooCommerceݕࡧۦ͠ͳ͍ͱ͍͚ͳ͍Α͏ͳಛघͳҊ݅আ͘
͍ॴΑ͘ߟ͑ͯʂ جຊతʹίϯςϯπΤσΟλʔͰ݁ͤ͞ ·͢ɻʢ΄΅ΘΕͯͳ͍͚ͲɺߘϑΥʔϚοτͱ͍͏σ ϑΥϧτͷػೳ͋Γ·͢ʣ σβΠϯ্ͰͲ͏ͯ͠ΧελϜϑΟʔϧυʹ ͠ͳ͍ͱೖྗ߲Λ࡞Εͳ͍ɺͱ͍͏ͱ͖ͦ ͦϫΠϠʔͷ࣌Ͱؒҧͬͯ·͢ɻ
͡Ό͋ɺͲ͏͍͏ͱ͖ʹ ΧελϜϑΟʔϧυΛ͏ͷʁ جຊతʹɺϨΠΞτมߋ͢ΔͨΊͷϑϥάʹ ͍·͢ɻ ͨͱ͑ɺ௨ৗ2ΧϥϜͷϨΠΞτ͚ͩͲɺϑ ϥάΛ͚ͭͨߘ͚ͩ1ΧϥϜʹ͢Δʂͱ͔ɺ PRϚʔΫΛ͚ͭΔʂͱ͔… ΧελϜϑΟʔϧυʮϝλσʔλʯʂίϯςϯπೖΕΔͱ͜ΖͰͳ͍Αʂ
େࣄͳ͜ͱͳͷͰ͏Ұ
ίϯςϯπͷͨΊʹ ΧελϜϑΟʔϧυ ͍͚ͬͯͳ͍Αʂ ݟੵΓ͕ͶΔݪҼ…
ϓϥάΠϯ൛Gutenberg
ϓϥάΠϯ͍ΘΏΔ։ൃ൛ʂ ։ൃ൛ͳͷͰຊ൪ڥʹೖΕΔͷΦεεϝ͠ ·ͤΜ͕ɺࣗͷςετڥͰ৮ͬͯΈΔͷ ΦεεϝͰ͢ɻ ͜ͷઌʹࡌ͞ΕΔ͔͠Εͳ͍ػೳ͕͍ͪૣ ͘ࢼͤ·͢ʂ
·ͱΊ
ຊʹWordPressͬͯ؆୯ʁ ਖ਼͘͠ͳ͍ʁੵΈ্͕Δ༷ʹຐվɺ;͍ʹ߱ͬͯ͘Δ༷มߋ…
WordPress ≠ ؆୯ ͦΖͦΖೝࣝΛվΊΑ͏
Α͍ςʔϚ࡞ϥΠϑΛůŢ