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
240
この一年で身についた“マトモ”な WordPressテーマの作り方
chiilog
7
1.9k
Google Optimizeで始めるA/Bテスト #wbkyoto
chiilog
1
3.2k
こんなCSSからはそろそろ卒業しよう
chiilog
18
16k
まだCSSで消耗したい?Sassを覚えて楽しちゃおう!
chiilog
4
2k
さいきょうのWordPressサイト構築フローとは
chiilog
2
990
エンジニアから見た、すごくやりやすかった構築フローの話
chiilog
0
1.9k
Other Decks in Technology
See All in Technology
マルチテナントのサービスインフラに大きなテナントを受け入れるまで
7474
0
790
APIs for AI: Have we failed?
zdne
0
130
実は仲良し?Amplify Gen2と生成AI
mkdev10
0
150
入社半年(合計1年)でGoogle Cloud 認定を全冠した秘訣🤫
risatube
1
280
Deep dive into Nuxt Server Components
wattanx
1
1.3k
サーバレスで挑む IoT プロジェクトの現実解 / Real solutions for the IoT project using serverless service
genkiogasawara
1
130
Delta Commit…の最近...
akuwano
2
130
組織デバイスのための効率的なアプリケーション更新戦略
kenchan0130
0
460
次は君だ。~Japan AWS Jr. Champions 受賞までの奇跡~
fukuchiiinu
0
120
テクニカルライターのチームで「目標」をどう決めたか / MVV for a Team of Technical Writers
lycorptech_jp
PRO
3
160
Amazon Managed Grafana で AWS IoT TwinMaker によるデジタルツインアプリケーションを動かしてみた
wakatsuki
0
120
KongによるAPIライフサイクル マネジメント
hashitokyo
1
160
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
31
1.7k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Producing Creativity
orderedlist
PRO
341
39k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4.1k
Rails Girls Zürich Keynote
gr2m
93
13k
Ruby is Unlike a Banana
tanoku
96
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
630
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.8k
Building Your Own Lightsaber
phodgson
102
6k
Happy Clients
brianwarren
97
6.7k
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ͬͯ؆୯ʁ
୯Ձͱݟ߹ͬͯ·͔͢ʁ
Α͍ςʔϚ࡞ϥΠϑΛůŢ