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
私の推しはブロックエディター 〜デフォルトブロックに触れ合う〜
chiilog
0
310
この一年で身についた“マトモ”な WordPressテーマの作り方
chiilog
7
2k
Google Optimizeで始めるA/Bテスト #wbkyoto
chiilog
1
3.4k
こんなCSSからはそろそろ卒業しよう
chiilog
18
16k
まだCSSで消耗したい?Sassを覚えて楽しちゃおう!
chiilog
4
2.1k
さいきょうのWordPressサイト構築フローとは
chiilog
2
1k
エンジニアから見た、すごくやりやすかった構築フローの話
chiilog
0
2k
Other Decks in Technology
See All in Technology
面接を通過するためにやってて良かったこと3選
sansantech
PRO
0
110
スプリントゴールで価値を駆動しよう
takufujii
3
1.6k
人とAIとの共創を夢見た2か月 #共創AIミートアップ / Co-Creation with Keito-chan
kondoyuko
1
640
初めてのGoogle Cloud by AWS出身者
harukasakihara
1
720
toittaにOpenTelemetryを導入した話 / Mackerel APM リリースパーティ
cohalz
1
440
Cloud Run を解剖して コンテナ監視を考える / Breaking Down Cloud Run to Rethink Container Monitoring
aoto
PRO
0
110
カンファレンスのつくりかた / The Conference Code: What Makes It All Work
tomzoh
7
870
Data Hubグループ 紹介資料
sansan33
PRO
0
1.7k
Rebase エンジニアリング組織の現状とこれから
rebase_engineering
0
130
ゴリラ.vim #36 ~ Vim x SNS ~ スポンサーセッション
yasunori0418
1
260
AIエージェントデザインパターンの選び方
almondo_event
0
120
FastMCPでSQLをチェックしてくれるMCPサーバーを自作してCursorから動かしてみた
nayuts
1
160
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
180
53k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
RailsConf 2023
tenderlove
30
1.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Documentation Writing (for coders)
carmenintech
71
4.8k
How GitHub (no longer) Works
holman
314
140k
Bash Introduction
62gerente
613
210k
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ͬͯ؆୯ʁ
୯Ձͱݟ߹ͬͯ·͔͢ʁ
Α͍ςʔϚ࡞ϥΠϑΛůŢ