WordPressテーマの作り方 2019 私のベストプラクティス

#26 WP ZoomUP でお話した内容です。

「WordPressテーマ、つくれますか？」

Transcript

1. WordPressςʔϚͷ࡞Γํ 2019 ࢲͷϕετϓϥΫςΟε Chiaki Okamoto
2. Profile Chiilog Ԭຊ ઍळ
3. WordPressςʔϚ ͭ͘Ε·͔͢ʁ
4. ͦ΋ͦ΋ WordPressςʔϚͬͯʁ
5. ฏͨ͘ݴ͑͹ σβΠϯςϯϓϨʔτ
6. ͱ͍͏͜ͱ͸ʁ λΠτϧ΍ຊจ͸΋ͪΖΜɺղੳλά΍ϝ χϡʔͳͲͳͲͳͲ…ςʔϚΛม͑ͯ΋͖ͪΜ ͱදࣔͰ͖ͳ͍ͱͩΊͰ͢ΑͶʁ
7. ͳΜͰμϝͳΜ • ϦχϡʔΞϧ͕େมͮ͠Β͘ͳΔʹςʔϚͷ վम͕େมʹͳΔ • ςʔϚϑΝΠϧ಺ͷͲͷϑΝΠϧʹԿΛॻ͍ ͯ͋Δͷ͔Λݕূ͢Δख͕ؒ૿͑Δ • ྫΛ্͛Δͱղੳλά͸header.php ʹॻ͍ͯΔͷ͔ɺfunctions.php ʹॻ͍ͯΔͷ͔ɺfooter.php ʹ͋Δͷ͔…ͳͲͳͲ
8. ʮ֎؍ʯͱʮίϯςϯπʯ͸ ෼཭ͤ͞·͠ΐ͏ 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/
9. ֎؍͸Θ͔Δɺίϯςϯπͬͯʁ • Θ͔Γ΍͍͢ͷͰݴ͑͹ɺϩΰɺຊจɺλΠ τϧ͔ΒɺϝχϡʔɻOGPͳΜ͔΋ͦ͏Ͱ͢ Ͷɻ • ʮςʔϚΛແޮԽͨ͠ͱ͖ʹɺҰॹʹແޮԽ ͞ΕΔͱࠔΔ΋ͷʯ͸େମίϯςϯπͱࢥͬ ͯOK
10. ίϯςϯπΛ ςʔϚʹؚΊΔͱ…
11. ͍Ζ͍ΖͱࠔΓ·͢ʢͬ͘͟Γʣ • ςʔϚΛ༗ޮԽ͍ͯͨ͠ͱ͖ʹೖྗͰ͖͍ͯ ߲ͨ໨͕ফ͑ΔɻαΠτ্ͰݟΕͳ͘ͳΔɻ ʢओʹΧελϜϑΟʔϧυʣ • ղੳͰ͖ͳ͘ͳΔʢGoogle AnalyticsͳͲʣ • ϝχϡʔ͕Ҿ͖ܧ͛ͳ͍
12. ͜͜·ͰΛ;·͑ͯ
13. WordPressςʔϚ ͭ͘Ε·͔͢ʁ
14. ͜Μͳ͜ͱͯ͠·ͤΜ͔ʁ • ςϯϓϨʔτଆʹϖʔδͷ಺༰Λॻ͘ • page-about.php Λ࡞ͬͯίϯςϯπͷ಺༰Λॻ͘ͱ͔…front- page.phpͷத਎Λϕλॻ͖ͱ͔… • ػೳΛςʔϚʹؚΊΔ • ฤूՄೳྖҬ͕ͳ͍ or গͳ͍
15. ػೳͬͯ…ʁ Θ͔Γ΍͍͢΋ͷͩͱ ղੳλάɺSEO༻ͷλάɺSNSͷγΣΞϘλϯ ྨɺγϣʔτίʔυɺΧελϜ౤ߘλΠϓɺΧ ελϜλΫιϊϛʔɺΧελϜϒϩοΫɺϑΥʔ Ϝ
16. WordPress Theme Handbook • https://developer.wordpress.org/themes/ • Google຋༁Ͱे෼ಡΊΔ • ςʔϚ࡞੒͢ΔͳΒ100ճಡ΋͏
17. WordPress͸؆୯ʁ
18. ຊ౰͸WordPressͬͯ೉͘͠ͳ͍ʁ • ࢓༷Λ͔ͬ͠Γ٧ΊΔඞཁ͕͋Δ • WordPressҎ֎΋બ୒ࢶʹ͍ΕΔ͜ͱΛߟ͑Δ • ϒϩοΫΤσΟλʔΛ͖ͪΜͱཧղ͢Δ • σϑΥϧτʹԿͷϒϩοΫ͕͋Δͷ͔Λ೺Ѳ͓ͯ͘͜͠ ͱɺΧελϜϒϩοΫΛ࡞Δඞཁ͕͋Δͷ͔Ͳ͏͔΋ݕ౼ • σβΠϯɺCSS͸ίϯϙʔωϯτ͝ͱʹελΠϧ͢Δ͜ͱ Λҙࣝ͢Δ
19. ࢲ͕WordPressςʔϚΛ ࡞Δͱ͖ʹؾΛ഑͍ͬͯΔ ϙΠϯτ
20. ػೳͱ֎؍͸͖ͪΜͱ෼཭͢Δ • ͍ΘΏΔϓϥάΠϯςϦτϦʔΛ৵͞ͳ͍ • ςʔϚΛແޮԽͨ͠ͱ͖ʹɺҰॹʹແޮԽ͞ ΕΔͱࠔΔ΋ͷ͸ςʔϚʹ͸ೖΕͳ͍ • ྫ͑͹γϣʔτίʔυɺΧελϜϒϩοΫɻGoogle AnalyticsͳͲͷղੳλά΋ʂ • Ҋ͔݅ͩΒʢorgʹొ࿥͠ͳ͍ʣ͔Βͬͯ؁͑ͳ͍ɻͷͪ ͷͪҾ͖ܧ͍ͩ୭͔ʢࣗ෼͔΋͠Εͳ͍ʂʣ͕ࠔΓ·͢ɻ
21. ద੾ͳλάΛ࢖͏ • ΧςΰϦʔϖʔδ΁ͷϦϯΫʹ <?php echo esc_url( home_url( ‘/’ ) ); ?>/hoge/fuga Έͨ ͍ͳॻ͖ํΛେมΑ͘ݟ͔͚Δ… • get_category_link() ͱ͔ get_term_link() ͱ͔͋Γ·͢ɻ Codex౳Λݟͯɺద੾ͳϦϯΫ͕ͳ͍͔ௐ΂·͠ΐ͏ɻ ʢຖճௐ΂ͯΔʣ
22. ద੾ͳλάΛ࢖͏ • ϝχϡʔܥͷλά͸ςϯϓϨʔτʹ΂ͨॻ͖ ͞Ε͍ͯΔͷΛΊͪΌͪ͘ΌΑ͘ݟ͔͚·͢ ͕ɺΧελϜϝχϡʔΛ࢖ͬͨ΄͏͕ΊͪΌ ͪ͘ΌָͰ͢ɻ • ੲΈ͍ͨʹϝχϡʔ͕ը૾ͱ͔ͦ͏͍͏͜ͱ΋গͳ͘ͳͬ ͖ͯͨ͠ɾɾɾʢͦ΋ͦ΋ը૾΋ϓϥάΠϯ͍ΕͨΒ࢖͑ ΔΑ͏ʹͳΔΑʣ
23. ద੾ͳλάʁ • Googleઌੜ͸ΈΜͳͷຯํɻ • ʮ౤ߘΞʔΧΠϒͷλΠτϧग़͍ͨ͠ͳʯͱ ࢥͬͨΒɺarchive-post_type.php ʹ౤ߘλΠ ϓ໊Λϕλॻ͖͢ΔલʹɺGoogleઌੜͰ ʮWordPress archive titleʯͱ͔ௐ΂ͯΈΑ͏
 େࣄͳͷ͸ʮݕࡧྗʯʂ
24. ద੾ͳςϯϓϨʔτΛ࢖͏ • τοϓϖʔδɺindex.php ʹͯ͠·ͤΜΑͶʁ • ͪΌΜͱςʔϚϋϯυϒοΫʹ΋ςϯϓϨʔ τ֊૚ʹ͍ͭͯهࡌ͕͋Γ·͢ɻ४͡·͠ΐ ͏ɻ
25. https://developer.wordpress.org/themes/basics/template-hierarchy/
26. ద੾ͳςϯϓϨʔτΛ࢖͏ • ΧςΰϦʔͱλά͕ಉ͡ͳΒarchive.php Λɺ ҧ͏ͳΒͪΌΜͱcategory.php ΍ tag.php ͳ ͲΛ४උ͠·͢ɻ • if จͰ෼ذͤͯ͞ɺ໌೔ɺ1ϲ݄ޙɺ3ϲ݄ޙɺ൒೥ޙ(ry ͷ ࣗ෼͕Θ͔Γ·͔͢ʁࢲ͸͍֮͑ͯΒΕ·ͤΜɻ
 ࠓޙࣗ෼Ҏ֎ͷਓ͕৮ΔՄೳੑ΋े෼ߟ͑ΒΕΔͷͰɺς ϯϓϨʔτ͸ࡉ͔͘෼͚ͨ΄͏͕ྑ͍ͱߟ͑·͢ɻ
27. ϒϩοΫʹελΠϧΛ௥Ճ͢Δ • ϒϩοΫʹΫϥεͷ௥Ճͱ͔ͰͳΜͱ͔Ͱ͖ Δέʔε͸ׂͱଟ͍Ͱ͢ɻ • wp.blocks.registerBlockStyleͰελΠϧͷ௥ Ճ͸؆୯ʹͰ͖·͢ʂ
 https://developer.wordpress.org/block- editor/developers/filters/block-filters/
28. ΧελϜϒϩοΫΛ࡞Δ ʢ࡞ͬͯ΋Β͏ʣ • طଘϒϩοΫΛ૊Έ߹Θͤͯ΋࣮ݱͰ͖ͳ͍ ͱ͔ɺػೳͷ։ൃ͕ඞཁͩͬͨΒ໎ΘͣΧε λϜϒϩοΫΛ࡞Γ·͠ΐ͏ɻ • ΋͔ͨ͠͠ΒࣅͨػೳΛ୭͔͕࡞͍ͬͯΔ͔ ΋͠Εͳ͍͔ΒɺϓϥάΠϯ΋୳ͯ͠Έ· ͠ΐ͏ɻʢAdvanced Posts Blocks͸ਆʂʣ
29. ΤσΟλελΠϧΛ࡞Δ • ΫϥγοΫΤσΟλʔͷͱ͖ΑΓ΋ͬͱॏཁ Ͱ͢ʂʂ
 ΤσΟλ্Ͱݟ͑Δ΋ͷʹαΠτͰݟ͑Δ΋ ͷ͘Β͍ͷؾ࣋ͪͰ͔ͬ͠Γͭ͘Γ·͠ΐ ͏ɻϒϩοΫͷCSSΛeditor-style.cssʹಡΈࠐ ·ͤΔ͚ͩͰ͢ΑɻͶɺ؆୯Ͱ͠ΐ͏ʁ
30. ϒϩοΫ୯ҐͰ CSSίϯϙʔωϯτઃܭΛ͢Δ • ϒϩοΫΤσΟλʔʹͳͬͯॊೈ౓͕ʢΫϥ γοΫΤσΟλʔͷࠒΑΓʣ্͕ͬͨͷͰɺ ϒϩοΫ୯ҐͰCSSΛॻ͔ͳ͍ͱ่ΕͷݪҼ ʹͳΓ·͢ɻ
31. ίϯϙʔωϯτ୯Ґʁ ϘλϯϒϩοΫΛྫʹ͠·͢ɻ <div class="wp-block-button">
 <a class="wp-block-button__link" href="#"> Ϙλϯ</a>
 </div>
32. ίϯϙʔωϯτ୯Ґʁ CSS͸͜͏ॻ͖·͢ɻ .wp-block-button {}
 .wp-block-button__link {} ͜͏͍͏ॻ͖ํ͸͠ͳ͍΄͏͕͍͍ʂ .entry-content .wp-block-button {}
33. ίϯϙʔωϯτʹ͢ΔϝϦοτ • ίϯϙʔωϯτઃܭͰCSSΛॻ͘Α͏ʹ͢Δ ͱɺ࠶ར༻ੑ͕ߴ·ΔͷͰeditor-style.css ͕ ָʹ࡞ΕΔʂ • .entry-content ͸؅ཧը໘Ͱ͸ग़ͯͳ͍͔Βɺeditor- style.cssͰಡΈࠐ·ͤͯ΋ελΠϧ͕౰ͨΒͳ͘ͳͬͯ͠ ·͏ʂ
34. ͱ͜ΖͰ… ΧελϜϑΟʔϧυ͸ʁ
35. ҆қʹΧελϜϑΟʔϧυ͸࢖Θͳ͍ ͔ͤͬ͘ͷϒϩοΫΤσΟλʔͰ͢ɻ׆༻͠· ͠ΐ͏ɻΧελϜϑΟʔϧυલఏͰ࿩ΛਐΊͳ ͍͜ͱɻΧελϚΠβʔͰͰ͖ͳ͍͔ɺΧελ ϜϒϩοΫΛ࡞Δඞཁ͕͋Δ͔ɺͪΌΜͱ੍࡞ લʹ٧Ί·͠ΐ͏ɻ
 ͪ͜͜ΌΜͱ΍Βͳ͍ͱ·͡Ͱ٧Ή͠ࢮ͵ͱ৺ ಘΑɻ
36. ҆қʹΧελϜϑΟʔϧυ͸࢖Θͳ͍ جຊతʹίϯςϯπ͸ΤσΟλʔ಺Ͱ׬݁ͤ͞ ·͢ɻʢ΄΅࢖ΘΕͯͳ͍͚Ͳɺ౤ߘϑΥʔϚοτ΋σϑΥϧ τͷػೳ΋͋Δ͠ʣ
 σβΠϯ্ͰͲ͏ͯ͠΋ΧελϜϑΟʔϧυʹ ͠ͳ͍ͱೖྗ߲໨Λ࡞Εͳ͍ɺͱ͍͏ͱ͖͸ͦ ΋ͦ΋ϫΠϠʔͷ࣌఺Ͱؒҧͬͯ·͢ɻ
37. ͡Ό͋ɺͲ͏͍͏ͱ͖ʹ ΧελϜϑΟʔϧυΛ࢖͏ͷʁ جຊతʹɺϨΠΞ΢τมߋ͢ΔͨΊͷϑϥάʹ ࢖͍·͢ɻ ͨͱ͑͹ɺ௨ৗ2ΧϥϜͷϨΠΞ΢τ͚ͩͲɺϑ ϥάΛ͚ͭͨ౤ߘ͚ͩ1ΧϥϜʹ͢Δʂͱ͔ɺ PRϚʔΫΛ͚ͭΔʂͱ͔…
38. େࣄͳ͜ͱͳͷͰ΋͏Ұ౓
39. ίϯςϯπͷͨΊʹ ΧελϜϑΟʔϧυ͸ ࢖ͬͯ͸͍͚ͳ͍ʂ
40. ·ͱΊ
41. ࠓ๺࢈ۀ • ػೳͱ֎؍͸͖ͪΜͱ෼཭ͯ͠ɺλά΋ͪΌΜ ͱWordPress͕ఏڙ͍ͯ͠Δ΋ͷΛ׆༻͠Α͏ • ΧελϜϑΟʔϧυ͸σβΠϯίϯτϩʔϧͷ ͨΊʹ࢖͓͏ • ઃܭϚδେࣄɻWordPressҊ݅࢓ࣄͷ7ׂ͸࢓ ༷ࡦఆͱࢥ͓͏
42. ຊ౰ʹWordPressͬͯ؆୯ʁ
43. ୯Ձͱݟ߹ͬͯ·͔͢ʁ
44. Α͍ςʔϚ࡞੒ϥΠϑΛůŢ