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.9k
Other Decks in Programming
See All in Programming
How to Break into Reading Open Source
kaspth
2
220
A New Era of Testing
mannodermaus
2
510
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
220
Prolog入門
qnighy
4
1k
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
200
Shinjuku.rb#95:心の技術書紹介
free_world21
1
110
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
420
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
220
GoのIteratorに詳しくなってしまう
inatonix
1
200
LangChainの現在とv0.3にむけて
os1ma
4
920
仮想ファイルシステムを導入して開発環境のストレージ課題を解消する
segadevtech
2
550
[DroidKaigi 2024] Android ViewからJetpack Composeへ 〜Jetpack Compose移行のすゝめ〜 / From Android View to Jetpack Compose: A Guide to Migration
syarihu
1
630
Featured
See All Featured
Bash Introduction
62gerente
608
210k
Adopting Sorbet at Scale
ufuk
73
8.9k
[RailsConf 2023] Rails as a piece of cake
palkan
48
4.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Visualization
eitanlees
142
15k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
48k
Practical Orchestrator
shlominoach
185
10k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
The Invisible Customer
myddelton
119
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
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 ≠ ؆୯ ͦΖͦΖೝࣝΛվΊΑ͏
Α͍ςʔϚ࡞ϥΠϑΛůŢ