$30 off During Our Annual Pro Sale. View Details »

この一年で身についた“マトモ”な WordPressテーマの作り方

この一年で身についた“マトモ”な WordPressテーマの作り方

前回WPZoomUPでおはなししたことのリライト版ですしおすし。

Chiaki Okamoto

December 14, 2019
Tweet

More Decks by Chiaki Okamoto

Other Decks in Programming

Transcript

  1. ͜ͷҰ೥Ͱ਎ʹ͍ͭͨ
    ❝ϚτϞ❞ͳ
    WordPressςʔϚͷ࡞Γํ
    Chiaki Okamoto

    View Slide

  2. Profile
    Chiilog
    Ԭຊ ઍळ
    Chiilog
    Ԭຊ ઍळ

    View Slide

  3. δϧ - ͏ΔΘ͠ͷ͔͍͓࢞͜͠͞Μ

    View Slide

  4. Ϩʔφ - ͝͸Μ͍͖ͩ͢େ૽͗຤ͬࢠ

    View Slide

  5. ࢲͷεΩϧηοτ
    • جຊతʹϚʔΫΞοϓܥ
    • HTMLɺCSSɺ͋ͱjQueryʢJSΉ͍ͣʣ
    • PHP͸WordPressςʔϚͰΑ͘ݟΔײ͡ͷ΍
    ͔ͭ͠Θ͔Βͳ͍ʂ
    • whileͱ͔foreachͱ͔ɺجຊతͳؔ਺ͱ͔…
    • ࠷ۙnamespaceΛཧղͨ͠ʂ
    • ϖΞϓϩͯ͠΋ΒͬͨΒίʔυ͖Ε͍ʹͳΔ

    View Slide

  6. WordPressςʔϚ
    ͭͬͯ͘Δਓʂ

    View Slide

  7. ʮͭ͘ΕΔʯͷج४ͱ͸
    ਖ਼௚ΫΦϦςΟ͹Β͹Β͡ΌΜʁ

    View Slide

  8. WordPressςʔϚͱ͸
    ฏͨ͘ݴ͑͹
    σβΠϯςϯϓϨʔτ

    View Slide

  9. Ͱ͖ͯ౰ͨΓલͷ͜ͱ
    • λΠτϧ΍ຊจ͕ςʔϚΛม͑ͯ΋͖ͪΜͱ
    ݟΕΔ͜ͱ
    • ςʔϚΛม͑ͯ΋ϝχϡʔ͕มΘΒͳ͍͜ͱ
    • ςʔϚΛม͑ͯ΋ղੳλά͕ૠೖ͞Ε͍ͯΔ
    ͜ͱ

    View Slide

  10. ςʔϚΛม͑ͨΒ
    ○○͕ಈ͔ͳ͘ͳͬͨʂ͸
    ࿦֎

    View Slide

  11. Ͳ͏͢Δʁ

    View Slide

  12. σϑΥϧτςʔϚʹ໭ͯ͠΋
    ಈ͘Α͏ʹͭ͘Δʂ

    View Slide

  13. ֎؍ͱίϯςϯπ͸
    ͖ͬͪΓ෼཭͓ͤͯ͘͞
    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%e
    σβΠϯ

    View Slide

  14. ͦΕ͕ҙࣝͰ͖ͳ͍ͱ͜͏ͳΔ
    • ϦχϡʔΞϧ͕େมͮ͠Β͘ͳΔʹςʔϚͷ
    վम͕େมʹͳΔʹݟੵ΋Γ௓Ͷ্͕Δ
    • ςʔϚϑΝΠϧ಺ͷͲͷϑΝΠϧʹԿΛॻ͍
    ͯ͋Δͷ͔Λݕূ͢Δख͕ؒ૿͑Δ
    • ͨͱ͑͹ɺφϏήʔγϣϯϝχϡʔΛςʔϚଆʹॻ͍͍ͯͨ৔߹ɺ
    header.phpʹॻ͍ͯ͋Δͷ͔ɺͦΕͱ΋ϑΝΠϧΛ෼͚ͯ
    navigation.phpͳͲʹॻ͍͍ͯΔͷ͔ͱ͔୳͞ͳ͍ͱ͍͚ͳ͍ʂ

    View Slide

  15. ”ςʔϚ࡞੒”ͷج४Ͱࢲ͕਎ʹ͚ͭͨ͜ͱ

    View Slide

  16. લఏ

    View Slide

  17. ϒϩοΫΤσΟλʔͱ
    ஥ྑ͘͢Δ
    ݱঢ়ɺWordPressͷΤσΟλʔ͸ϒϩοΫΤσΟ
    λʔͰ͢ɻଟ෼ɺ͜ͷઌΫϥγοΫΤσΟλʔʹ
    ໭Δ͜ͱ͸ͳ͍ͱࢥ͏ʢଟ෼Ͷʂଟ෼ʂʣͷͰɺ
    ͦΖͦΖ޲͖߹͍·͠ΐ͏ɻ
    5.3ͰάϧʔϓϒϩοΫ͕௥Ճ͞ΕͨΓɺΠϯφʔ
    ϒϩοΫʹελΠϧ௥ՃͰ͖ͨΓͱɺ͔ͳΓ࢖͍
    উख͕Α͘ͳΓ·ͨ͠Αʂ

    View Slide

  18. https://wptavern.com/gutenberg-one-year-later

    View Slide

  19. ϒϩοΫΤσΟλʔͷ͍͍ͱ͜Ζ
    • ଟ਺ͷϒϩοΫ͔Β͔ͳΓࣗ༝ͳϨΠΞ΢τ
    ͰϖʔδΛ࡞Δ͜ͱ͕Ͱ͖Δ
    • the_content() ͚ͩͰίϯςϯπ͕׬݁͢Δ
    • ͭ·ΓɺେྔͷΧελϜϑΟʔϧυΛ࡞ͬͯςϯϓϨʔτ
    Λͭ͘ΔΑ͏ͳ͜ͱΛ͠ͳͯ͘Α͘ͳΔͷͰ͢ʂ

    View Slide

  20. ςʔϚϋϯυϒοΫΛಡΉ
    • https://developer.wordpress.org/themes/
    • ςʔϚΛ࡞ΔͨΊͷجຊ͸໢ཏ͞Ε͍ͯΔ
    • Google຋༁Ͱे෼ಡΊΔ
    • ςʔϚ࡞੒͢ΔͳΒ100ճಡ΋͏ʢby toro_unitʣ

    View Slide

  21. ೉қ౓ɿॳڃ

    View Slide

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

    View Slide

  23. ͪͳΈʹɺػೳͬͯ…ʁ
    Θ͔Γ΍͍͢΋ͷͩͱ
    ղੳλάɺSEO༻ͷλάɺSNSͷγΣΞϘλϯ
    ྨɺγϣʔτίʔυɺΧελϜ౤ߘλΠϓɺΧ
    ελϜλΫιϊϛʔɺΧελϜϒϩοΫɺϑΥʔ
    Ϝ
    ͜ΕΒ͸શ෦ϓϥάΠϯԽ͠·͠ΐ͏

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. ద੾ͳςϯϓϨʔτΛ࢖͏
    ΧςΰϦʔͱλά͕ಉ͡ͳΒarchive.php Λɺ
    ҧ͏ͳΒͪΌΜͱcategory.php ΍ tag.php ͳͲ
    Λ४උ͠·͢ɻ
    • if จͰ෼ذͤͯ͞ɺ໌೔ɺ1ϲ݄ޙɺ3ϲ݄ޙɺ൒೥ޙ(ry ͷ
    ࣗ෼͕Θ͔Γ·͔͢ʁࢲ͸͍֮͑ͯΒΕ·ͤΜɻ
    ࠓޙࣗ෼Ҏ֎ͷਓ͕৮ΔՄೳੑ΋े෼ߟ͑ΒΕΔͷͰɺς
    ϯϓϨʔτ͸ࡉ͔͘෼͚ͨ΄͏͕ྑ͍ͱߟ͑·͢ɻ

    View Slide

  29. ೉қ౓ɿதڃ

    View Slide

  30. ΤσΟλελΠϧΛ࡞Δ
    ΫϥγοΫΤσΟλʔͷͱ͖ΑΓॏཁͰ͢ʂʂ
    ΤσΟλ্Ͱݟ͑Δ΋ͷʹαΠτͰݟ͑Δ΋ͷ
    ͘Β͍ͷؾ࣋ͪͰ͔ͬ͠Γͭ͘Γ·͠ΐ͏ɻ
    ʢਖ਼௚ॳڃ͔ͱࢥ͏͚ͲɺCSSͷઃܭ͕ೖΔͷͰதڃʹʣ

    View Slide

  31. // ΤσΟλʔελΠϧΛ௥Ճ
    add_editor_style();
    // σϑΥϧτͷϒϩοΫͷCSS͕ϑϩϯτͰద༻͞ΕΔ
    add_theme_support( 'wp-block-styles' );
    // ϒϩοΫΤσΟλʔʹCSSΛ͋ͯΔ
    function themename_block_editor_styles {
    wp_enqueue_style( ‘style-name’, get_theme_file_uri( '/path/to/
    editor-style-block.css' ), array(), wp_get_theme()-
    >get( 'Version' ), 'all' );
    }
    add_action( 'enqueue_block_editor_assets',
    'themename_block_editor_styles', 1, 1 );
    ΤσΟλελΠϧͷಡΈࠐ·ͤํ
    https://developer.wordpress.org/block-editor/developers/themes/theme-support/

    View Slide

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

    View Slide

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

    Ϙλϯ


    View Slide

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

    .wp-block-button__link {}
    .entry-content .wp-block-button {}

    View Slide

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

    View Slide

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

    View Slide

  37. ͜͏͍͏ͷʂˠ

    View Slide

  38. ೉қ౓ɿ্ڃ

    View Slide

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

    View Slide

  40. νϡʔτϦΞϧΛ΍ͬͯΈΔ
    ΧελϜϒϩοΫΛ΍Ζ͏ʂͱෲΛܾΊͨΒɺ
    ͱΓ͋͑ͣνϡʔτϦΞϧ͔Β΍ͬͯΈΔͷΛ
    Φεεϝ͠·͢ɻ
    https://developer.wordpress.org/block-editor/
    tutorials/block-tutorial/

    View Slide

  41. ϒϩοΫΤσΟλʔͷొ৔Ͱ
    ίϯςϯπͷࣗ༝౓
    ര্͕Γ

    View Slide

  42. Ͱ΋ɺ΋ͱ΋ͱͰ͖ͯͨΑͶ

    View Slide

  43. ΧελϜϑΟʔϧυͬͯ΍ͭ

    View Slide

  44. View Slide

  45. ҆қʹΧελϜϑΟʔϧυ͸࢖Θͳ͍
    ͔ͤͬ͘ͷϒϩοΫΤσΟλʔͰ͢ɻ׆༻͠·
    ͠ΐ͏ɻΧελϜϑΟʔϧυલఏͰ࿩ΛਐΊͳ
    ͍͜ͱɻΧελϚΠβʔͰͰ͖ͳ͍͔ɺΧελ
    ϜϒϩοΫΛ࡞Δඞཁ͕͋Δ͔ɺͪΌΜͱ੍࡞
    લʹ٧Ί·͠ΐ͏ɻ
    ͪ͜͜ΌΜͱ΍Βͳ͍ͱҊ݅͸ؒҧ͍ͳ͘೩͑
    ·͢ʢܦݧஊʣ
    ※ WooCommerce΍௒ݕࡧۦ࢖͠ͳ͍ͱ͍͚ͳ͍Α͏ͳಛघͳҊ݅͸আ͘

    View Slide

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

    View Slide

  47. ͡Ό͋ɺͲ͏͍͏ͱ͖ʹ
    ΧελϜϑΟʔϧυΛ࢖͏ͷʁ
    جຊతʹɺϨΠΞ΢τมߋ͢ΔͨΊͷϑϥάʹ
    ࢖͍·͢ɻ
    ͨͱ͑͹ɺ௨ৗ2ΧϥϜͷϨΠΞ΢τ͚ͩͲɺϑ
    ϥάΛ͚ͭͨ౤ߘ͚ͩ1ΧϥϜʹ͢Δʂͱ͔ɺ
    PRϚʔΫΛ͚ͭΔʂͱ͔…
    ΧελϜϑΟʔϧυ͸ʮϝλσʔλʯʂίϯςϯπೖΕΔͱ͜ΖͰ͸ͳ͍Αʂ

    View Slide

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

    View Slide

  49. ίϯςϯπͷͨΊʹ
    ΧελϜϑΟʔϧυ͸
    ࢖ͬͯ͸͍͚ͳ͍Αʂ
    ݟੵ΋Γ͕௓ͶΔݪҼ…

    View Slide

  50. ϓϥάΠϯ൛Gutenberg

    View Slide

  51. ϓϥάΠϯ͸͍ΘΏΔ։ൃ൛ʂ
    ։ൃ൛ͳͷͰຊ൪؀ڥʹೖΕΔͷ͸Φεεϝ͠
    ·ͤΜ͕ɺࣗ෼ͷςετ؀ڥ౳Ͱ৮ͬͯΈΔͷ
    ͸ΦεεϝͰ͢ɻ
    ͜ͷઌʹ౥ࡌ͞ΕΔ͔΋͠Εͳ͍ػೳ͕͍ͪૣ
    ͘ࢼͤ·͢ʂ

    View Slide

  52. ·ͱΊ

    View Slide

  53. ຊ౰ʹWordPressͬͯ؆୯ʁ
    ਖ਼௚೉͘͠ͳ͍ʁੵΈ্͕Δ࢓༷ʹຐվ଄ɺ;͍ʹ߱ͬͯ͘Δ࢓༷มߋ…

    View Slide

  54. WordPress ≠ ؆୯
    ͦΖͦΖೝࣝΛվΊΑ͏

    View Slide

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

    View Slide