Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

91c1739f71d94f9ce16efc553b84a18c?s=128

Chiaki Okamoto

September 30, 2019
Tweet

More Decks by Chiaki Okamoto

Other Decks in Technology

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. Α͍ςʔϚ࡞੒ϥΠϑΛůŢ