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テーマの作り方 2019 私のベストプラクティス
Search
Chiaki Okamoto
September 30, 2019
Technology
24
13k
WordPressテーマの作り方 2019 私のベストプラクティス
#26 WP ZoomUP でお話した内容です。
「WordPressテーマ、つくれますか?」
Chiaki Okamoto
September 30, 2019
Tweet
Share
More Decks by Chiaki Okamoto
See All by Chiaki Okamoto
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
280
私の推しはブロックエディター 〜デフォルトブロックに触れ合う〜
chiilog
0
320
この一年で身についた“マトモ”な WordPressテーマの作り方
chiilog
7
2k
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 Technology
See All in Technology
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
3
230
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
390
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
190
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
120
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
3
1.1k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
990
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
4.1k
AWS CDKの仕組み / how-aws-cdk-works
gotok365
10
890
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
230
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
280
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
730
Featured
See All Featured
Navigating Team Friction
lara
187
15k
Raft: Consensus for Rubyists
vanstee
140
7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Six Lessons from altMBA
skipperchong
28
3.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
A Tale of Four Properties
chriscoyier
160
23k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Transcript
WordPressςʔϚͷ࡞Γํ 2019 ࢲͷϕετϓϥΫςΟε Chiaki Okamoto
Profile Chiilog Ԭຊ ઍळ
WordPressςʔϚ ͭ͘Ε·͔͢ʁ
ͦͦ WordPressςʔϚͬͯʁ
ฏͨ͘ݴ͑ σβΠϯςϯϓϨʔτ
ͱ͍͏͜ͱʁ λΠτϧຊจͪΖΜɺղੳλάϝ χϡʔͳͲͳͲͳͲ…ςʔϚΛม͖͑ͯͪΜ ͱදࣔͰ͖ͳ͍ͱͩΊͰ͢ΑͶʁ
ͳΜͰμϝͳΜ • ϦχϡʔΞϧ͕େมͮ͠Β͘ͳΔʹςʔϚͷ վम͕େมʹͳΔ • ςʔϚϑΝΠϧͷͲͷϑΝΠϧʹԿΛॻ͍ ͯ͋Δͷ͔Λݕূ͢Δख͕ؒ૿͑Δ • ྫΛ্͛Δͱղੳλάheader.php ʹॻ͍ͯΔͷ͔ɺfunctions.php
ʹॻ͍ͯΔͷ͔ɺfooter.php ʹ͋Δͷ͔…ͳͲͳͲ
ʮ֎؍ʯͱʮίϯςϯπʯ ͤ͞·͠ΐ͏ 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%e8%a 8%ad%e8%a8%88%e3%81%a8/
֎؍Θ͔Δɺίϯςϯπͬͯʁ • Θ͔Γ͍͢ͷͰݴ͑ɺϩΰɺຊจɺλΠ τϧ͔ΒɺϝχϡʔɻOGPͳΜ͔ͦ͏Ͱ͢ Ͷɻ • ʮςʔϚΛແޮԽͨ͠ͱ͖ʹɺҰॹʹແޮԽ ͞ΕΔͱࠔΔͷʯେମίϯςϯπͱࢥͬ ͯOK
ίϯςϯπΛ ςʔϚʹؚΊΔͱ…
͍Ζ͍ΖͱࠔΓ·͢ʢͬ͘͟Γʣ • ςʔϚΛ༗ޮԽ͍ͯͨ͠ͱ͖ʹೖྗͰ͖͍ͯ ߲͕ͨফ͑ΔɻαΠτ্ͰݟΕͳ͘ͳΔɻ ʢओʹΧελϜϑΟʔϧυʣ • ղੳͰ͖ͳ͘ͳΔʢGoogle AnalyticsͳͲʣ • ϝχϡʔ͕Ҿ͖ܧ͛ͳ͍
͜͜·ͰΛ;·͑ͯ
WordPressςʔϚ ͭ͘Ε·͔͢ʁ
͜Μͳ͜ͱͯ͠·ͤΜ͔ʁ • ςϯϓϨʔτଆʹϖʔδͷ༰Λॻ͘ • page-about.php Λ࡞ͬͯίϯςϯπͷ༰Λॻ͘ͱ͔…front- page.phpͷதΛϕλॻ͖ͱ͔… • ػೳΛςʔϚʹؚΊΔ •
ฤूՄೳྖҬ͕ͳ͍ or গͳ͍
ػೳͬͯ…ʁ Θ͔Γ͍͢ͷͩͱ ղੳλάɺSEO༻ͷλάɺSNSͷγΣΞϘλϯ ྨɺγϣʔτίʔυɺΧελϜߘλΠϓɺΧ ελϜλΫιϊϛʔɺΧελϜϒϩοΫɺϑΥʔ Ϝ
WordPress Theme Handbook • https://developer.wordpress.org/themes/ • Google༁ͰेಡΊΔ • ςʔϚ࡞͢ΔͳΒ100ճಡ͏
WordPress؆୯ʁ
ຊWordPressͬͯ͘͠ͳ͍ʁ • ༷Λ͔ͬ͠Γ٧ΊΔඞཁ͕͋Δ • WordPressҎ֎બࢶʹ͍ΕΔ͜ͱΛߟ͑Δ • ϒϩοΫΤσΟλʔΛ͖ͪΜͱཧղ͢Δ • σϑΥϧτʹԿͷϒϩοΫ͕͋Δͷ͔ΛѲ͓ͯ͘͜͠ ͱɺΧελϜϒϩοΫΛ࡞Δඞཁ͕͋Δͷ͔Ͳ͏͔ݕ౼
• σβΠϯɺCSSίϯϙʔωϯτ͝ͱʹελΠϧ͢Δ͜ͱ Λҙࣝ͢Δ
ࢲ͕WordPressςʔϚΛ ࡞Δͱ͖ʹؾΛ͍ͬͯΔ ϙΠϯτ
ػೳͱ֎؍͖ͪΜͱ͢Δ • ͍ΘΏΔϓϥάΠϯςϦτϦʔΛ৵͞ͳ͍ • ςʔϚΛແޮԽͨ͠ͱ͖ʹɺҰॹʹແޮԽ͞ ΕΔͱࠔΔͷςʔϚʹೖΕͳ͍ • ྫ͑γϣʔτίʔυɺΧελϜϒϩοΫɻGoogle AnalyticsͳͲͷղੳλάʂ •
Ҋ͔݅ͩΒʢorgʹొ͠ͳ͍ʣ͔Βͬͯ͑ͳ͍ɻͷͪ ͷͪҾ͖ܧ͍ͩ୭͔ʢ͔ࣗ͠Εͳ͍ʂʣ͕ࠔΓ·͢ɻ
దͳλάΛ͏ • ΧςΰϦʔϖʔδͷϦϯΫʹ <?php echo esc_url( home_url( ‘/’ ) );
?>/hoge/fuga Έͨ ͍ͳॻ͖ํΛେมΑ͘ݟ͔͚Δ… • get_category_link() ͱ͔ get_term_link() ͱ͔͋Γ·͢ɻ CodexΛݟͯɺదͳϦϯΫ͕ͳ͍͔ௐ·͠ΐ͏ɻ ʢຖճௐͯΔʣ
దͳλάΛ͏ • ϝχϡʔܥͷλάςϯϓϨʔτʹͨॻ͖ ͞Ε͍ͯΔͷΛΊͪΌͪ͘ΌΑ͘ݟ͔͚·͢ ͕ɺΧελϜϝχϡʔΛͬͨ΄͏͕ΊͪΌ ͪ͘ΌָͰ͢ɻ • ੲΈ͍ͨʹϝχϡʔ͕ը૾ͱ͔ͦ͏͍͏͜ͱগͳ͘ͳͬ ͖ͯͨ͠ɾɾɾʢͦͦը૾ϓϥάΠϯ͍ΕͨΒ͑ ΔΑ͏ʹͳΔΑʣ
దͳλάʁ • 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 ͷ ͕ࣗΘ͔Γ·͔͢ʁࢲ͍֮͑ͯΒΕ·ͤΜɻ ࠓޙࣗҎ֎ͷਓ͕৮ΔՄೳੑेߟ͑ΒΕΔͷͰɺς ϯϓϨʔτࡉ͔͚ͨ͘΄͏͕ྑ͍ͱߟ͑·͢ɻ
ϒϩοΫʹελΠϧΛՃ͢Δ • ϒϩοΫʹΫϥεͷՃͱ͔ͰͳΜͱ͔Ͱ͖ Δέʔεׂͱଟ͍Ͱ͢ɻ • wp.blocks.registerBlockStyleͰελΠϧͷ Ճ؆୯ʹͰ͖·͢ʂ https://developer.wordpress.org/block- editor/developers/filters/block-filters/
ΧελϜϒϩοΫΛ࡞Δ ʢ࡞ͬͯΒ͏ʣ • طଘϒϩοΫΛΈ߹Θ࣮ͤͯݱͰ͖ͳ͍ ͱ͔ɺػೳͷ։ൃ͕ඞཁͩͬͨΒ໎ΘͣΧε λϜϒϩοΫΛ࡞Γ·͠ΐ͏ɻ • ͔ͨ͠͠ΒࣅͨػೳΛ୭͔͕࡞͍ͬͯΔ͔ ͠Εͳ͍͔ΒɺϓϥάΠϯ୳ͯ͠Έ· ͠ΐ͏ɻʢAdvanced
Posts Blocksਆʂʣ
ΤσΟλελΠϧΛ࡞Δ • ΫϥγοΫΤσΟλʔͷͱ͖ΑΓͬͱॏཁ Ͱ͢ʂʂ ΤσΟλ্Ͱݟ͑ΔͷʹαΠτͰݟ͑Δ ͷ͘Β͍ͷؾ࣋ͪͰ͔ͬ͠Γͭ͘Γ·͠ΐ ͏ɻϒϩοΫͷCSSΛeditor-style.cssʹಡΈࠐ ·ͤΔ͚ͩͰ͢ΑɻͶɺ؆୯Ͱ͠ΐ͏ʁ
ϒϩοΫ୯ҐͰ 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 {}
ίϯϙʔωϯτʹ͢ΔϝϦοτ • ίϯϙʔωϯτઃܭͰCSSΛॻ͘Α͏ʹ͢Δ ͱɺ࠶ར༻ੑ͕ߴ·ΔͷͰeditor-style.css ͕ ָʹ࡞ΕΔʂ • .entry-content ཧը໘Ͱग़ͯͳ͍͔Βɺeditor- style.cssͰಡΈࠐ·ͤͯελΠϧ͕ͨΒͳ͘ͳͬͯ͠
·͏ʂ
ͱ͜ΖͰ… ΧελϜϑΟʔϧυʁ
҆қʹΧελϜϑΟʔϧυΘͳ͍ ͔ͤͬ͘ͷϒϩοΫΤσΟλʔͰ͢ɻ׆༻͠· ͠ΐ͏ɻΧελϜϑΟʔϧυલఏͰΛਐΊͳ ͍͜ͱɻΧελϚΠβʔͰͰ͖ͳ͍͔ɺΧελ ϜϒϩοΫΛ࡞Δඞཁ͕͋Δ͔ɺͪΌΜͱ੍࡞ લʹ٧Ί·͠ΐ͏ɻ ͪ͜͜ΌΜͱΒͳ͍ͱ·͡Ͱ٧Ή͠ࢮ͵ͱ৺ ಘΑɻ
҆қʹΧελϜϑΟʔϧυΘͳ͍ جຊతʹίϯςϯπΤσΟλʔͰ݁ͤ͞ ·͢ɻʢ΄΅ΘΕͯͳ͍͚ͲɺߘϑΥʔϚοτσϑΥϧ τͷػೳ͋Δ͠ʣ σβΠϯ্ͰͲ͏ͯ͠ΧελϜϑΟʔϧυʹ ͠ͳ͍ͱೖྗ߲Λ࡞Εͳ͍ɺͱ͍͏ͱ͖ͦ ͦϫΠϠʔͷ࣌Ͱؒҧͬͯ·͢ɻ
͡Ό͋ɺͲ͏͍͏ͱ͖ʹ ΧελϜϑΟʔϧυΛ͏ͷʁ جຊతʹɺϨΠΞτมߋ͢ΔͨΊͷϑϥάʹ ͍·͢ɻ ͨͱ͑ɺ௨ৗ2ΧϥϜͷϨΠΞτ͚ͩͲɺϑ ϥάΛ͚ͭͨߘ͚ͩ1ΧϥϜʹ͢Δʂͱ͔ɺ PRϚʔΫΛ͚ͭΔʂͱ͔…
େࣄͳ͜ͱͳͷͰ͏Ұ
ίϯςϯπͷͨΊʹ ΧελϜϑΟʔϧυ ͍͚ͬͯͳ͍ʂ
·ͱΊ
ࠓ࢈ۀ • ػೳͱ֎؍͖ͪΜͱͯ͠ɺλάͪΌΜ ͱWordPress͕ఏڙ͍ͯ͠ΔͷΛ׆༻͠Α͏ • ΧελϜϑΟʔϧυσβΠϯίϯτϩʔϧͷ ͨΊʹ͓͏ • ઃܭϚδେࣄɻWordPressҊ݅ࣄͷ7ׂ ༷ࡦఆͱࢥ͓͏
ຊʹWordPressͬͯ؆୯ʁ
୯Ձͱݟ߹ͬͯ·͔͢ʁ
Α͍ςʔϚ࡞ϥΠϑΛůŢ