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

Transcript

1. 1.

   WordPressςʔϚͷ࡞Γํ 2019 ࢲͷϕετϓϥΫςΟε Chiaki Okamoto

2. 2.

   Profile Chiilog Ԭຊ ઍळ

3. 3.

   WordPressςʔϚ ͭ͘Ε·͔͢ʁ

4. 4.

   ͦ΋ͦ΋ WordPressςʔϚͬͯʁ

5. 5.

   ฏͨ͘ݴ͑͹ σβΠϯςϯϓϨʔτ

6. 6.

   ͱ͍͏͜ͱ͸ʁ λΠτϧ΍ຊจ͸΋ͪΖΜɺղੳλά΍ϝ χϡʔͳͲͳͲͳͲ…ςʔϚΛม͑ͯ΋͖ͪΜ ͱදࣔͰ͖ͳ͍ͱͩΊͰ͢ΑͶʁ

7. 7.

   ͳΜͰμϝͳΜ • ϦχϡʔΞϧ͕େมͮ͠Β͘ͳΔʹςʔϚͷ վम͕େมʹͳΔ • ςʔϚϑΝΠϧ಺ͷͲͷϑΝΠϧʹԿΛॻ͍ ͯ͋Δͷ͔Λݕূ͢Δख͕ؒ૿͑Δ • ྫΛ্͛Δͱղੳλά͸header.php ʹॻ͍ͯΔͷ͔ɺfunctions.php

   ʹॻ͍ͯΔͷ͔ɺfooter.php ʹ͋Δͷ͔…ͳͲͳͲ
8. 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. 9.

   ֎؍͸Θ͔Δɺίϯςϯπͬͯʁ • Θ͔Γ΍͍͢ͷͰݴ͑͹ɺϩΰɺຊจɺλΠ τϧ͔ΒɺϝχϡʔɻOGPͳΜ͔΋ͦ͏Ͱ͢ Ͷɻ • ʮςʔϚΛແޮԽͨ͠ͱ͖ʹɺҰॹʹແޮԽ ͞ΕΔͱࠔΔ΋ͷʯ͸େମίϯςϯπͱࢥͬ ͯOK

10. 10.

    ίϯςϯπΛ ςʔϚʹؚΊΔͱ…

11. 11.

    ͍Ζ͍ΖͱࠔΓ·͢ʢͬ͘͟Γʣ • ςʔϚΛ༗ޮԽ͍ͯͨ͠ͱ͖ʹೖྗͰ͖͍ͯ ߲ͨ໨͕ফ͑ΔɻαΠτ্ͰݟΕͳ͘ͳΔɻ ʢओʹΧελϜϑΟʔϧυʣ • ղੳͰ͖ͳ͘ͳΔʢGoogle AnalyticsͳͲʣ • ϝχϡʔ͕Ҿ͖ܧ͛ͳ͍

12. 12.

    ͜͜·ͰΛ;·͑ͯ

13. 13.

    WordPressςʔϚ ͭ͘Ε·͔͢ʁ

14. 14.

    ͜Μͳ͜ͱͯ͠·ͤΜ͔ʁ • ςϯϓϨʔτଆʹϖʔδͷ಺༰Λॻ͘ • page-about.php Λ࡞ͬͯίϯςϯπͷ಺༰Λॻ͘ͱ͔…front- page.phpͷத਎Λϕλॻ͖ͱ͔… • ػೳΛςʔϚʹؚΊΔ •

    ฤूՄೳྖҬ͕ͳ͍ or গͳ͍
15. 15.

    ػೳͬͯ…ʁ Θ͔Γ΍͍͢΋ͷͩͱ ղੳλάɺSEO༻ͷλάɺSNSͷγΣΞϘλϯ ྨɺγϣʔτίʔυɺΧελϜ౤ߘλΠϓɺΧ ελϜλΫιϊϛʔɺΧελϜϒϩοΫɺϑΥʔ Ϝ

16. 16.

    WordPress Theme Handbook • https://developer.wordpress.org/themes/ • Google຋༁Ͱे෼ಡΊΔ • ςʔϚ࡞੒͢ΔͳΒ100ճಡ΋͏

17. 17.

    WordPress͸؆୯ʁ

18. 18.

    ຊ౰͸WordPressͬͯ೉͘͠ͳ͍ʁ • ࢓༷Λ͔ͬ͠Γ٧ΊΔඞཁ͕͋Δ • WordPressҎ֎΋બ୒ࢶʹ͍ΕΔ͜ͱΛߟ͑Δ • ϒϩοΫΤσΟλʔΛ͖ͪΜͱཧղ͢Δ • σϑΥϧτʹԿͷϒϩοΫ͕͋Δͷ͔Λ೺Ѳ͓ͯ͘͜͠ ͱɺΧελϜϒϩοΫΛ࡞Δඞཁ͕͋Δͷ͔Ͳ͏͔΋ݕ౼

    • σβΠϯɺCSS͸ίϯϙʔωϯτ͝ͱʹελΠϧ͢Δ͜ͱ Λҙࣝ͢Δ
19. 19.

    ࢲ͕WordPressςʔϚΛ ࡞Δͱ͖ʹؾΛ഑͍ͬͯΔ ϙΠϯτ

20. 20.

    ػೳͱ֎؍͸͖ͪΜͱ෼཭͢Δ • ͍ΘΏΔϓϥάΠϯςϦτϦʔΛ৵͞ͳ͍ • ςʔϚΛແޮԽͨ͠ͱ͖ʹɺҰॹʹແޮԽ͞ ΕΔͱࠔΔ΋ͷ͸ςʔϚʹ͸ೖΕͳ͍ • ྫ͑͹γϣʔτίʔυɺΧελϜϒϩοΫɻGoogle AnalyticsͳͲͷղੳλά΋ʂ •

    Ҋ͔݅ͩΒʢorgʹొ࿥͠ͳ͍ʣ͔Βͬͯ؁͑ͳ͍ɻͷͪ ͷͪҾ͖ܧ͍ͩ୭͔ʢࣗ෼͔΋͠Εͳ͍ʂʣ͕ࠔΓ·͢ɻ
21. 21.

    ద੾ͳλάΛ࢖͏ • ΧςΰϦʔϖʔδ΁ͷϦϯΫʹ <?php echo esc_url( home_url( ‘/’ ) );

    ?>/hoge/fuga Έͨ ͍ͳॻ͖ํΛେมΑ͘ݟ͔͚Δ… • get_category_link() ͱ͔ get_term_link() ͱ͔͋Γ·͢ɻ Codex౳Λݟͯɺద੾ͳϦϯΫ͕ͳ͍͔ௐ΂·͠ΐ͏ɻ ʢຖճௐ΂ͯΔʣ
22. 22.

    ద੾ͳλάΛ࢖͏ • ϝχϡʔܥͷλά͸ςϯϓϨʔτʹ΂ͨॻ͖ ͞Ε͍ͯΔͷΛΊͪΌͪ͘ΌΑ͘ݟ͔͚·͢ ͕ɺΧελϜϝχϡʔΛ࢖ͬͨ΄͏͕ΊͪΌ ͪ͘ΌָͰ͢ɻ • ੲΈ͍ͨʹϝχϡʔ͕ը૾ͱ͔ͦ͏͍͏͜ͱ΋গͳ͘ͳͬ ͖ͯͨ͠ɾɾɾʢͦ΋ͦ΋ը૾΋ϓϥάΠϯ͍ΕͨΒ࢖͑ ΔΑ͏ʹͳΔΑʣ

23. 23.

    ద੾ͳλάʁ • Googleઌੜ͸ΈΜͳͷຯํɻ • ʮ౤ߘΞʔΧΠϒͷλΠτϧग़͍ͨ͠ͳʯͱ ࢥͬͨΒɺarchive-post_type.php ʹ౤ߘλΠ ϓ໊Λϕλॻ͖͢ΔલʹɺGoogleઌੜͰ ʮWordPress archive

    titleʯͱ͔ௐ΂ͯΈΑ͏
 େࣄͳͷ͸ʮݕࡧྗʯʂ
24. 24.

    ద੾ͳςϯϓϨʔτΛ࢖͏ • τοϓϖʔδɺindex.php ʹͯ͠·ͤΜΑͶʁ • ͪΌΜͱςʔϚϋϯυϒοΫʹ΋ςϯϓϨʔ τ֊૚ʹ͍ͭͯهࡌ͕͋Γ·͢ɻ४͡·͠ΐ ͏ɻ

25. 25.

    https://developer.wordpress.org/themes/basics/template-hierarchy/

26. 26.

    ద੾ͳςϯϓϨʔτΛ࢖͏ • ΧςΰϦʔͱλά͕ಉ͡ͳΒarchive.php Λɺ ҧ͏ͳΒͪΌΜͱcategory.php ΍ tag.php ͳ ͲΛ४උ͠·͢ɻ •

    if จͰ෼ذͤͯ͞ɺ໌೔ɺ1ϲ݄ޙɺ3ϲ݄ޙɺ൒೥ޙ(ry ͷ ࣗ෼͕Θ͔Γ·͔͢ʁࢲ͸͍֮͑ͯΒΕ·ͤΜɻ
 ࠓޙࣗ෼Ҏ֎ͷਓ͕৮ΔՄೳੑ΋े෼ߟ͑ΒΕΔͷͰɺς ϯϓϨʔτ͸ࡉ͔͘෼͚ͨ΄͏͕ྑ͍ͱߟ͑·͢ɻ
27. 27.

    ϒϩοΫʹελΠϧΛ௥Ճ͢Δ • ϒϩοΫʹΫϥεͷ௥Ճͱ͔ͰͳΜͱ͔Ͱ͖ Δέʔε͸ׂͱଟ͍Ͱ͢ɻ • wp.blocks.registerBlockStyleͰελΠϧͷ௥ Ճ͸؆୯ʹͰ͖·͢ʂ
 https://developer.wordpress.org/block- editor/developers/filters/block-filters/

28. 28.

    ΧελϜϒϩοΫΛ࡞Δ ʢ࡞ͬͯ΋Β͏ʣ • طଘϒϩοΫΛ૊Έ߹Θͤͯ΋࣮ݱͰ͖ͳ͍ ͱ͔ɺػೳͷ։ൃ͕ඞཁͩͬͨΒ໎ΘͣΧε λϜϒϩοΫΛ࡞Γ·͠ΐ͏ɻ • ΋͔ͨ͠͠ΒࣅͨػೳΛ୭͔͕࡞͍ͬͯΔ͔ ΋͠Εͳ͍͔ΒɺϓϥάΠϯ΋୳ͯ͠Έ· ͠ΐ͏ɻʢAdvanced

    Posts Blocks͸ਆʂʣ
29. 29.

    ΤσΟλελΠϧΛ࡞Δ • ΫϥγοΫΤσΟλʔͷͱ͖ΑΓ΋ͬͱॏཁ Ͱ͢ʂʂ
 ΤσΟλ্Ͱݟ͑Δ΋ͷʹαΠτͰݟ͑Δ΋ ͷ͘Β͍ͷؾ࣋ͪͰ͔ͬ͠Γͭ͘Γ·͠ΐ ͏ɻϒϩοΫͷCSSΛeditor-style.cssʹಡΈࠐ ·ͤΔ͚ͩͰ͢ΑɻͶɺ؆୯Ͱ͠ΐ͏ʁ

30. 30.

    ϒϩοΫ୯ҐͰ CSSίϯϙʔωϯτઃܭΛ͢Δ • ϒϩοΫΤσΟλʔʹͳͬͯॊೈ౓͕ʢΫϥ γοΫΤσΟλʔͷࠒΑΓʣ্͕ͬͨͷͰɺ ϒϩοΫ୯ҐͰCSSΛॻ͔ͳ͍ͱ่ΕͷݪҼ ʹͳΓ·͢ɻ

31. 31.

    ίϯϙʔωϯτ୯Ґʁ ϘλϯϒϩοΫΛྫʹ͠·͢ɻ <div class="wp-block-button">
 <a class="wp-block-button__link" href="#"> Ϙλϯ</a>
 </div>

32. 32.

    ίϯϙʔωϯτ୯Ґʁ CSS͸͜͏ॻ͖·͢ɻ .wp-block-button {}
 .wp-block-button__link {} ͜͏͍͏ॻ͖ํ͸͠ͳ͍΄͏͕͍͍ʂ .entry-content .wp-block-button {}

33. 33.

    ίϯϙʔωϯτʹ͢ΔϝϦοτ • ίϯϙʔωϯτઃܭͰCSSΛॻ͘Α͏ʹ͢Δ ͱɺ࠶ར༻ੑ͕ߴ·ΔͷͰeditor-style.css ͕ ָʹ࡞ΕΔʂ • .entry-content ͸؅ཧը໘Ͱ͸ग़ͯͳ͍͔Βɺeditor- style.cssͰಡΈࠐ·ͤͯ΋ελΠϧ͕౰ͨΒͳ͘ͳͬͯ͠

    ·͏ʂ
34. 34.

    ͱ͜ΖͰ… ΧελϜϑΟʔϧυ͸ʁ

35. 35.

    ҆қʹΧελϜϑΟʔϧυ͸࢖Θͳ͍ ͔ͤͬ͘ͷϒϩοΫΤσΟλʔͰ͢ɻ׆༻͠· ͠ΐ͏ɻΧελϜϑΟʔϧυલఏͰ࿩ΛਐΊͳ ͍͜ͱɻΧελϚΠβʔͰͰ͖ͳ͍͔ɺΧελ ϜϒϩοΫΛ࡞Δඞཁ͕͋Δ͔ɺͪΌΜͱ੍࡞ લʹ٧Ί·͠ΐ͏ɻ
 ͪ͜͜ΌΜͱ΍Βͳ͍ͱ·͡Ͱ٧Ή͠ࢮ͵ͱ৺ ಘΑɻ

36. 36.

    ҆қʹΧελϜϑΟʔϧυ͸࢖Θͳ͍ جຊతʹίϯςϯπ͸ΤσΟλʔ಺Ͱ׬݁ͤ͞ ·͢ɻʢ΄΅࢖ΘΕͯͳ͍͚Ͳɺ౤ߘϑΥʔϚοτ΋σϑΥϧ τͷػೳ΋͋Δ͠ʣ
 σβΠϯ্ͰͲ͏ͯ͠΋ΧελϜϑΟʔϧυʹ ͠ͳ͍ͱೖྗ߲໨Λ࡞Εͳ͍ɺͱ͍͏ͱ͖͸ͦ ΋ͦ΋ϫΠϠʔͷ࣌఺Ͱؒҧͬͯ·͢ɻ

37. 37.

    ͡Ό͋ɺͲ͏͍͏ͱ͖ʹ ΧελϜϑΟʔϧυΛ࢖͏ͷʁ جຊతʹɺϨΠΞ΢τมߋ͢ΔͨΊͷϑϥάʹ ࢖͍·͢ɻ ͨͱ͑͹ɺ௨ৗ2ΧϥϜͷϨΠΞ΢τ͚ͩͲɺϑ ϥάΛ͚ͭͨ౤ߘ͚ͩ1ΧϥϜʹ͢Δʂͱ͔ɺ PRϚʔΫΛ͚ͭΔʂͱ͔…

38. 38.

    େࣄͳ͜ͱͳͷͰ΋͏Ұ౓

39. 39.

    ίϯςϯπͷͨΊʹ ΧελϜϑΟʔϧυ͸ ࢖ͬͯ͸͍͚ͳ͍ʂ

40. 40.

    ·ͱΊ

41. 41.

    ࠓ๺࢈ۀ • ػೳͱ֎؍͸͖ͪΜͱ෼཭ͯ͠ɺλά΋ͪΌΜ ͱWordPress͕ఏڙ͍ͯ͠Δ΋ͷΛ׆༻͠Α͏ • ΧελϜϑΟʔϧυ͸σβΠϯίϯτϩʔϧͷ ͨΊʹ࢖͓͏ • ઃܭϚδେࣄɻWordPressҊ݅࢓ࣄͷ7ׂ͸࢓ ༷ࡦఆͱࢥ͓͏

42. 42.

    ຊ౰ʹWordPressͬͯ؆୯ʁ

43. 43.

    ୯Ձͱݟ߹ͬͯ·͔͢ʁ

44. 44.

    Α͍ςʔϚ࡞੒ϥΠϑΛůŢ