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

Transcript

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

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

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

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

5. ࢲͷεΩϧηοτ • جຊతʹϚʔΫΞοϓܥ • HTMLɺCSSɺ͋ͱjQueryʢJSΉ͍ͣʣ • PHP͸WordPressςʔϚͰΑ͘ݟΔײ͡ͷ΍ ͔ͭ͠Θ͔Βͳ͍ʂ • whileͱ͔foreachͱ͔ɺجຊతͳؔ਺ͱ͔…

   • ࠷ۙnamespaceΛཧղͨ͠ʂ • ϖΞϓϩͯ͠΋ΒͬͨΒίʔυ͖Ε͍ʹͳΔ

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

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

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

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

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

11. Ͳ͏͢Δʁ

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

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 σβΠϯ

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

    navigation.phpͳͲʹॻ͍͍ͯΔͷ͔ͱ͔୳͞ͳ͍ͱ͍͚ͳ͍ʂ

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

16. લఏ

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

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

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

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

21. ೉қ౓ɿॳڃ

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

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

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

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

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

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

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

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

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

29. ೉қ౓ɿதڃ

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

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/

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

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

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 {}

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

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

37. ͜͏͍͏ͷʂˠ

38. ೉қ౓ɿ্ڃ

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

    Posts Blocks͸ਆʂʣ ʮ؆୯ͩΑʂʯͬͯݴΘΕΔ͚Ͳɺ͘͢ͳ͘ͱ΋Reactͷ஌͕͍ࣝΔ͔Β্ڃ

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

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

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

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

44. None

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

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

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

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

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

50. ϓϥάΠϯ൛Gutenberg

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

52. ·ͱΊ

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

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

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