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
1.9k
この一年で身についた“マトモ”な WordPressテーマの作り方
前回WPZoomUPでおはなししたことのリライト版ですしおすし。
Chiaki Okamoto
December 14, 2019
Tweet
Share
More Decks by Chiaki Okamoto
See All by Chiaki Okamoto
私の推しはブロックエディター 〜デフォルトブロックに触れ合う〜
chiilog
0
230
WordPressテーマの作り方 2019 私のベストプラクティス
chiilog
24
13k
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.8k
Other Decks in Programming
See All in Programming
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
970
A New Era of Testing
mannodermaus
2
120
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
240
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
13
6.5k
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
140
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
110
Why Prism?
kddnewton
4
1.7k
iOSの隠されたAPIを解明し、開発効率を向上させる方法/iOSDC24
noppefoxwolf
2
130
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
240
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
180
Prolog入門
qnighy
3
870
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
520
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
201
19k
Why Our Code Smells
bkeepers
PRO
334
56k
How to Think Like a Performance Engineer
csswizardry
16
940
Large-scale JavaScript Application Architecture
addyosmani
508
110k
Scaling GitHub
holman
458
140k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Optimising Largest Contentful Paint
csswizardry
29
2.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
24
590
Automating Front-end Workflow
addyosmani
1365
200k
Designing Experiences People Love
moore
138
23k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Writing Fast Ruby
sferik
623
60k
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 ≠ ؆୯ ͦΖͦΖೝࣝΛվΊΑ͏
Α͍ςʔϚ࡞ϥΠϑΛůŢ