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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Chiaki Okamoto
December 14, 2019
Programming
7
2.1k
この一年で身についた“マトモ”な WordPressテーマの作り方
前回WPZoomUPでおはなししたことのリライト版ですしおすし。
Chiaki Okamoto
December 14, 2019
Tweet
Share
More Decks by Chiaki Okamoto
See All by Chiaki Okamoto
生成AIを使ったコードレビューで定性的に品質カバー
chiilog
1
260
コンテンツ作成者の体験を設計する
chiilog
0
94
20251102 WordCamp Kansai 2025
chiilog
1
1.5k
2025/09/18 AIコーディングで「保活手帳」を作ってみた
chiilog
0
86
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
3
840
私の推しはブロックエディター 〜デフォルトブロックに触れ合う〜
chiilog
0
400
WordPressテーマの作り方 2019 私のベストプラクティス
chiilog
24
14k
Google Optimizeで始めるA/Bテスト #wbkyoto
chiilog
1
3.5k
こんなCSSからはそろそろ卒業しよう
chiilog
18
17k
Other Decks in Programming
See All in Programming
Apache Iceberg V3 and migration to V3
tomtanaka
0
160
インターン生でもAuth0で認証基盤刷新が出来るのか
taku271
0
190
2026年 エンジニアリング自己学習法
yumechi
0
130
Rust 製のコードエディタ “Zed” を使ってみた
nearme_tech
PRO
0
170
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
himorishige
11
7.4k
AgentCoreとHuman in the Loop
har1101
5
230
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
izumin5210
7
2.3k
Implementation Patterns
denyspoltorak
0
280
AIフル活用時代だからこそ学んでおきたい働き方の心得
shinoyu
0
130
Data-Centric Kaggle
isax1015
2
770
izumin5210のプロポーザルのネタ探し #tskaigi_msup
izumin5210
1
110
Fragmented Architectures
denyspoltorak
0
150
Featured
See All Featured
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
110
Making the Leap to Tech Lead
cromwellryan
135
9.7k
First, design no harm
axbom
PRO
2
1.1k
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
130
Design in an AI World
tapps
0
140
How to Ace a Technical Interview
jacobian
281
24k
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
64
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
140
The browser strikes back
jonoalderson
0
370
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
170
Art, The Web, and Tiny UX
lynnandtonic
304
21k
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
200
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 ≠ ؆୯ ͦΖͦΖೝࣝΛվΊΑ͏
Α͍ςʔϚ࡞ϥΠϑΛůŢ