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
1
270
私の推しはブロックエディター 〜デフォルトブロックに触れ合う〜
chiilog
0
320
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
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
テスト駆動Kaggle
isax1015
0
370
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
14k
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
150
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
11k
型で語るカタ
irof
0
170
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
660
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
810
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
5.8k
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.4k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Unsuck your backbone
ammeep
671
58k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Faster Mobile Websites
deanohume
307
31k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
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 ≠ ؆୯ ͦΖͦΖೝࣝΛվΊΑ͏
Α͍ςʔϚ࡞ϥΠϑΛůŢ