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 Slide

  2. Profile
    Chiilog
    Ԭຊ ઍळ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. ͜͜·ͰΛ;·͑ͯ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  17. WordPress͸؆୯ʁ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    େࣄͳͷ͸ʮݕࡧྗʯʂ

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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


    Ϙλϯ


    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  40. ·ͱΊ

    View Slide

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

    View Slide

  42. ຊ౰ʹWordPressͬͯ؆୯ʁ

    View Slide

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

    View Slide

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

    View Slide