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

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

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

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

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

Chiaki Okamoto

September 30, 2019
Tweet

More Decks by Chiaki Okamoto

Other Decks in Technology

Transcript

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

    View full-size slide

  2. Profile
    Chiilog
    Ԭຊ ઍळ

    View full-size slide

  3. WordPressςʔϚ
    ͭ͘Ε·͔͢ʁ

    View full-size slide

  4. ͦ΋ͦ΋
    WordPressςʔϚͬͯʁ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. ͜͜·ͰΛ;·͑ͯ

    View full-size slide

  13. WordPressςʔϚ
    ͭ͘Ε·͔͢ʁ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. WordPress͸؆୯ʁ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. ػೳͱ֎؍͸͖ͪΜͱ෼཭͢Δ
    • ͍ΘΏΔϓϥάΠϯςϦτϦʔΛ৵͞ͳ͍
    • ςʔϚΛແޮԽͨ͠ͱ͖ʹɺҰॹʹແޮԽ͞
    ΕΔͱࠔΔ΋ͷ͸ςʔϚʹ͸ೖΕͳ͍
    • ྫ͑͹γϣʔτίʔυɺΧελϜϒϩοΫɻGoogle
    AnalyticsͳͲͷղੳλά΋ʂ
    • Ҋ͔݅ͩΒʢorgʹొ࿥͠ͳ͍ʣ͔Βͬͯ؁͑ͳ͍ɻͷͪ
    ͷͪҾ͖ܧ͍ͩ୭͔ʢࣗ෼͔΋͠Εͳ͍ʂʣ͕ࠔΓ·͢ɻ

    View full-size slide

  21. ద੾ͳλάΛ࢖͏
    • ΧςΰϦʔϖʔδ΁ͷϦϯΫʹ esc_url( home_url( ‘/’ ) ); ?>/hoge/fuga Έͨ
    ͍ͳॻ͖ํΛେมΑ͘ݟ͔͚Δ…
    • get_category_link() ͱ͔ get_term_link() ͱ͔͋Γ·͢ɻ
    Codex౳Λݟͯɺద੾ͳϦϯΫ͕ͳ͍͔ௐ΂·͠ΐ͏ɻ
    ʢຖճௐ΂ͯΔʣ

    View full-size slide

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

    View full-size slide

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

    େࣄͳͷ͸ʮݕࡧྗʯʂ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. ద੾ͳςϯϓϨʔτΛ࢖͏
    • ΧςΰϦʔͱλά͕ಉ͡ͳΒarchive.php Λɺ
    ҧ͏ͳΒͪΌΜͱcategory.php ΍ tag.php ͳ
    ͲΛ४උ͠·͢ɻ
    • if จͰ෼ذͤͯ͞ɺ໌೔ɺ1ϲ݄ޙɺ3ϲ݄ޙɺ൒೥ޙ(ry ͷ
    ࣗ෼͕Θ͔Γ·͔͢ʁࢲ͸͍֮͑ͯΒΕ·ͤΜɻ

    ࠓޙࣗ෼Ҏ֎ͷਓ͕৮ΔՄೳੑ΋े෼ߟ͑ΒΕΔͷͰɺς
    ϯϓϨʔτ͸ࡉ͔͘෼͚ͨ΄͏͕ྑ͍ͱߟ͑·͢ɻ

    View full-size slide

  27. ϒϩοΫʹελΠϧΛ௥Ճ͢Δ
    • ϒϩοΫʹΫϥεͷ௥Ճͱ͔ͰͳΜͱ͔Ͱ͖
    Δέʔε͸ׂͱଟ͍Ͱ͢ɻ
    • wp.blocks.registerBlockStyleͰελΠϧͷ௥
    Ճ͸؆୯ʹͰ͖·͢ʂ

    https://developer.wordpress.org/block-
    editor/developers/filters/block-filters/

    View full-size slide

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

    View full-size slide

  29. ΤσΟλελΠϧΛ࡞Δ
    • ΫϥγοΫΤσΟλʔͷͱ͖ΑΓ΋ͬͱॏཁ
    Ͱ͢ʂʂ

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

    View full-size slide

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

    View full-size slide

  31. ίϯϙʔωϯτ୯Ґʁ
    ϘλϯϒϩοΫΛྫʹ͠·͢ɻ


    Ϙλϯ


    View full-size slide

  32. ίϯϙʔωϯτ୯Ґʁ
    CSS͸͜͏ॻ͖·͢ɻ
    .wp-block-button {}

    .wp-block-button__link {}
    ͜͏͍͏ॻ͖ํ͸͠ͳ͍΄͏͕͍͍ʂ
    .entry-content .wp-block-button {}

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    ͪ͜͜ΌΜͱ΍Βͳ͍ͱ·͡Ͱ٧Ή͠ࢮ͵ͱ৺
    ಘΑɻ

    View full-size slide

  36. ҆қʹΧελϜϑΟʔϧυ͸࢖Θͳ͍
    جຊతʹίϯςϯπ͸ΤσΟλʔ಺Ͱ׬݁ͤ͞
    ·͢ɻʢ΄΅࢖ΘΕͯͳ͍͚Ͳɺ౤ߘϑΥʔϚοτ΋σϑΥϧ
    τͷػೳ΋͋Δ͠ʣ

    σβΠϯ্ͰͲ͏ͯ͠΋ΧελϜϑΟʔϧυʹ
    ͠ͳ͍ͱೖྗ߲໨Λ࡞Εͳ͍ɺͱ͍͏ͱ͖͸ͦ
    ΋ͦ΋ϫΠϠʔͷ࣌఺Ͱؒҧͬͯ·͢ɻ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. ຊ౰ʹWordPressͬͯ؆୯ʁ

    View full-size slide

  42. ୯Ձͱݟ߹ͬͯ·͔͢ʁ

    View full-size slide

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

    View full-size slide