WordPress テーマ開発者から見たブロックテーマを利用する際のメリット/デメリット

by bouya Imamura

Slide 1

Slide 1 text

AnimaGate Imamura 8PSE1SFTTςʔϚ։ൃऀ͔Βݟͨ ϒϩοΫςʔϚΛར༻͢Δࡍͷ ϝϦοτσϝϦοτ ୅ද גࣜձࣾ ձ৔ɿ͘͞ΒΠϯλʔωοτ౦ژࢧࣾ'

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

ࣗݾ঺հ ෋ࢁݝग़਎ ౦ژ౎ʢे৚ʣࡏॅ Ӧۀ/։ൃͱ྆ํͰ͖Δ͜ͱΛڧΈʹ ಠཱ/๏ਓԽͯ͠גࣜձࣾ AnimaGate Λઃཱʢ2016೥ʣ

Slide 4

Slide 4 text

ओͳۀ຿ ΢Σϒ੍࡞ ΢ΣϒγεςϜ։ൃ EC αΠτߏங ࣗࣾαʔϏεӡӦ ΢Σϒ੍࡞ऀ޲͚ٕज़ߨࢣ

Slide 5

Slide 5 text

8PSE1SFTTʹؔ͢Δ׆ಈ Nishiki Pro Hakoniwa ςʔϚ։ൃ

Slide 6

Slide 6 text

8PSE1SFTTʹؔ͢Δ׆ಈ ΠϕϯτࢀՃɿWordCamp Tokyoɿొஃ Kansaiɿεϙϯαʔ

Slide 7

Slide 7 text

ʮWordPress ςʔϚ։ൃऀʯͷఆٛ

Slide 8

Slide 8 text

ʮWordPress ςʔϚ։ൃऀʯͷఆٛ ͜Μͳ͜ͱ͕Ͱ͖ΔςʔϚ։ൃऀ ެࣜσΟϨΫτϦͰ഑෍͢Δ൚༻ςʔϚͷ։ൃ ϓϩδΣΫτͷཁ݅ʹԠͨ͡ςʔϚͷ։ൃ ͦΕΒͷςʔϚͷܧଓతͳӡ༻/อक͕Ͱ͖Δ

Slide 9

Slide 9 text

ʮWordPress ςʔϚ։ൃऀʯͷఆٛ ެࣜσΟϨΫτϦͰແྉ഑෍த IUUQTXPSEQSFTTPSHUIFNFTIBLPOJXB URL HakoniwaʢϒϩοΫςʔϚʣ

Slide 10

Slide 10 text

ʮWordPress ςʔϚ։ൃऀʯͷఆٛ Hakoniwa ެࣜαΠτ IUUQTIBLPOJXBBOJNBHBUFDPN URL ܾࡁαʔϏεͱͷ࿈ܞ ϩάΠϯϖʔδ ϥΠηϯε؅ཧ/ϓϩϑΟʔϧฤू ϒϩοΫςʔϚͰ࡞ΒΕͨձһ੍αΠτ ςʔϚઐ༻ϓϥάΠϯ Beta ൛Λແྉ഑෍ ΧελϚΠζ ϒϩοΫςʔϚͷجຊతͳ࢖͍ํΛղઆ ΧελϚΠζʹ͍ͭͯͷߟ࡯ ৘ใൃ৴

Slide 11

Slide 11 text

ϝϦοτ / σϝϦοτ Λ஌Δ͜ͱͷॏཁੑ

Slide 12

Slide 12 text

ϝϦοτ / σϝϦοτ Λ஌Δ͜ͱͷॏཁੑ ͜͜਺೥ͷ WordPress ຊମͷΞοϓσʔτ͸ ϒϩοΫςʔϚʹؔ͢Δศརͳػೳ௥Ճ͕ଟ͍ ͦΖͦΖɺϒϩοΫςʔϚ ৮ͬͯΈΑ͏͔ͳɾɾɾʁ

Slide 13

Slide 13 text

ϝϦοτ / σϝϦοτ Λ஌Δ͜ͱͷॏཁੑ ΫϥγοΫςʔϚͱͷൺֱ ஌Γ͍ͨͷ͸ ࣮༻ੑ ͲͪΒ͕༏Ε͍ͯΔʁ Կ͕Ͱ͖Δʁ ѻ͍ํ͸Ͳ͏มΘΔʁ ੍࡞Ҋ݅Ͱ࢖͑Δʁ ։ൃޮ཰͸্͕Δʁ ϝϯςφϯεੑ͸Ͳ͏ʁ

Slide 14

Slide 14 text

ϝϦοτ / σϝϦοτ Λ஌Δ͜ͱͷॏཁੑ ϝϦοτͱσϝϦοτΛ஌Δͱ ϒϩοΫςʔϚͷʮಘҙͳ͜ͱʯʮͦ͏Ͱͳ͍͜ͱʯ͕ݟ͑ͯ͘Δ ϓϩδΣΫτ΍ཁ݅ʹԠͯ͡ɺద੾ͳςʔϚબͼ͕͠΍͍͢ ΧελϚΠζ/ϝϯςφϯε࡞ۀʹ΋උ͑ΒΕΔ ΛͰ͖ΔݶΓݮΒ͢ ͜Μͳ͸ͣ͡Όͳ͔ͬͨʂ

Slide 15

Slide 15 text

ϒϩοΫςʔϚͬͯͳʹʁ

Slide 16

Slide 16 text

ϒϩοΫςʔϚͬͯͳʹʁ φϏήʔγϣϯϝχϡʔɺϔομʔɺ ίϯςϯπɺαΠτϑολʔͳͲɺ αΠτͷ͋ΒΏΔύʔπʹϒϩοΫΛ࢖༻͢ΔςʔϚ WordPress.org ΑΓҾ༻ ϒϩοΫςʔϚͱ͸ʁ

Slide 17

Slide 17 text

ϒϩοΫςʔϚͬͯͳʹʁ αΠτͷ͢΂ͯͷύʔπΛฤूɺΧελϚΠζͰ͖Δ WordPress ౥ࡌͷ࠷৽ػೳʹ߹Θͤͯ࡞ΒΕ͍ͯ·͢ɻ ςʔϚΛมߋ͢Δ͜ͱͳ͘ɺ มߋ͍ͨ͠ύʔπͷΈΛࠩ͠ସ͑ΒΕ·͢ɻ WordPress.org ΑΓҾ༻ ϒϩοΫςʔϚͱ͸ʁ

Slide 18

Slide 18 text

3 ͭͷϝϦοτ

Slide 19

Slide 19 text

ϝϦοτ 01 ϑϧαΠτฤूͷԸܙ͕Ͱ͔͍ʂ

Slide 20

Slide 20 text

ϑϧαΠτฤूͷԸܙ͕Ͱ͔͍ʂ αΠτͷ͋ΒΏΔύʔπΛϒϩοΫͰ؅ཧͰ͖Δ FSEʢFull Site EditingʣɿϑϧαΠτฤू

Slide 21

Slide 21 text

ϑϧαΠτฤूͷԸܙ͕Ͱ͔͍ʂ ϔομʔ / ϑολʔΛϒϩοΫͰ؅ཧʢҰྫʣ ϩΰը૾ φϏήʔγϣϯ ίϯςϯπͱͷִؒ ΧϥϜ਺ ύλʔϯΛద༻͢Δ͜ͱ΋ʂ ౰೔ಈըͰ঺հ͠·ͨ͠ʂ

Slide 22

Slide 22 text

ϑϧαΠτฤूͷԸܙ͕Ͱ͔͍ʂ ݕࡧ݁Ռϖʔδ / 404 ϖʔδΛϒϩοΫͰ؅ཧʢҰྫʣ ߜΓࠐΈݕࡧ ࠷৽ͷ౤ߘ ϖʔδ཭୤Λ๷͙Α͏ͳ ಋઢ࡞Γ͕Ͱ͖Δʂ ౰೔ಈըͰ঺հ͠·ͨ͠ʂ

Slide 23

Slide 23 text

ϑϧαΠτฤूͷԸܙ͕Ͱ͔͍ʂ ʮΫΤϦʔϧʔϓʯϒϩοΫͰ ࣗ༝ʹΧελϚΠζ͠Α͏ʂ ΧςΰϦʔ / λάͳͲͷΞʔΧΠϒϖʔδΛϒϩοΫͰ؅ཧʢҰྫʣ λΠτϧ ൈਮ ެ։೔ ஶऀ໊ ౰೔ಈըͰ঺հ͠·ͨ͠ʂ

Slide 24

Slide 24 text

ϑϧαΠτฤूͷԸܙ͕Ͱ͔͍ʂ ʮΫΤϦʔϧʔϓʯϒϩοΫʹΧελϜϒϩοΫΛ௥Ճ ʮ͓ؾʹೖΓϘλϯʯϒϩοΫ ౰೔ಈըͰ঺հ͠·ͨ͠ʂ

Slide 25

Slide 25 text

ϑϧαΠτฤूͷԸܙ͕Ͱ͔͍ʂ ʮ͓ؾʹೖΓϘλϯʯϒϩοΫ IUUQTIBLPOJXBBOJNBHBUFDPNNBOVBMCMPDLT GBWPSJUFCVUUPO URL ࢀߟɿInteractivity API IUUQTNBLFXPSEQSFTTPSHDPSF JOUFSBDUJWJUZBQJEFWOPUF URL

Slide 26

Slide 26 text

ϑϧαΠτฤूͷԸܙ͕Ͱ͔͍ʂ ʮΫΤϦʔϧʔϓʯϒϩοΫΛ֦ு͢Δͱ͞Βʹศརʹʂ ʮؔ࿈౤ߘʯϒϩοΫ IUUQTIBLPOJXBBOJNBHBUFDPNNBOVBMCMPDLT SFMBUFEQPTUT URL ࢀߟɿExtending the Query Loop block IUUQTEFWFMPQFSXPSEQSFTTPSHCMPDLFEJUPSIPXUP HVJEFTCMPDLUVUPSJBMFYUFOEJOHUIFRVFSZMPPQCMPDL URL

Slide 27

Slide 27 text

ϝϦοτ 02 αΠτશମͷઃఆΛҰݩ؅ཧ

Slide 28

Slide 28 text

αΠτશମͷઃఆΛҰݩ؅ཧ αΠτશମͷઃఆʢάϩʔόϧελΠϧʣΛҰݩ؅ཧ theme.json

Slide 29

Slide 29 text

αΠτશମͷઃఆΛҰݩ؅ཧ ϓϩάϥϛϯά͕ඞཁʹͳΓ͕ͪ PHP ΍ JavaScript ͷ஌͕ࣝඞཁ ։ൃऀతʹ͸݁ߏͳखؒ ϑΥϯτͷαΠζΛେ͖͘͢Δػೳ͕ཉ͍͠ʂ ը૾ʹυϩοϓγϟυ΢Λ͚ͭΔػೳ͕ཉ͍͠ʂ ೉͍͠ίʔυΛॻ͔ͳͯ͘΋ ϓϩάϥϛϯά͕Ͱ͖ͳͯ͘΋ theme.json Ͱػೳ௥ՃͰ͖Δ ଞͷϓϩδΣΫτͰ΋࠶ར༻͠΍͍͢ ※ theme.json ͕ೖ͍ͬͯͳ͍৔߹ ΫϥγοΫςʔϚ ϒϩοΫςʔϚ

Slide 30

Slide 30 text

αΠτશମͷઃఆΛҰݩ؅ཧ theme.json ͷجຊతͳॻ͖ํ IUUQTKBXPSEQSFTTPSHUFBNIBOECPPLCMPDLFEJUPS IPXUPHVJEFTDVSBUJOHUIFFEJUPSFYQFSJFODFUIFNFKTPO URL

Slide 31

Slide 31 text

αΠτશମͷઃఆΛҰݩ؅ཧ theme.json ͸্ॻ͖Ͱ͖Δ IUUQTEFWFMPQFSXPSEQSFTTPSHSFGFSFODFIPPLT CMPDL@FEJUPS@TFUUJOHT@BMM URL ϓϥάΠϯͰ΍ΔͳΒ block_editor_settings_all ࢠςʔϚͰ΍ΔͳΒ theme.json ΛೖΕͯ༗ޮԽ͢Δ

Slide 32

Slide 32 text

ϝϦοτ 03 ύλʔϯͰίϯςϯπ࡞੒Λޮ཰Խʂ

Slide 33

Slide 33 text

ύλʔϯͰίϯςϯπ࡞੒Λޮ཰Խʂ ύλʔϯͱ͸ʁ ෳ਺ͷϒϩοΫΛ૊Έ߹Θͤͯ࡞ΒΕͨ ਽ܕʢ͓खຊʣίϯςϯπ

Slide 34

Slide 34 text

ύλʔϯͰίϯςϯπ࡞੒Λޮ཰Խʂ ύλʔϯͷΤΫεϙʔτ/ΠϯϙʔτʢҰྫʣ τοϓϖʔδΛؙ͝ͱύλʔϯԽ demo01.json ΤΫεϙʔτ ෳ਺ͷϒϩοΫͰ࡞ΒΕͨ json ϑΝΠϧΛΠϯϙʔτ ϚΠύλʔϯͱͯ͠ར༻Մೳ

Slide 35

Slide 35 text

ύλʔϯͰίϯςϯπ࡞੒Λޮ཰Խʂ ύλʔϯͷ࢖͍ํʢҰྫʣ ύλʔϯ͔Β௥Ճͨ͠ϒϩοΫ͸ฤूՄೳ ౰೔ಈըͰ঺հ͠·ͨ͠ʂ

Slide 36

Slide 36 text

ύλʔϯͰίϯςϯπ࡞੒Λޮ཰Խʂ θϩ͔ΒίϯςϯπΛ࡞Βͳͯ͘΋͍͍ ίʔυΛॻ͔ͳͯ͘΋ίϯςϯπ͕࡞ΕΔ ύλʔϯ͔ΒσβΠϯ΍ίϯςϯπ࡞Γͷ ΠϯεϐϨʔγϣϯ͕ಘΒΕΔʢύλʔϯͨ͘͞Μ࡞Γ͍ͨʣ ύλʔϯΛݩʹͯ͠৽͍͠ύλʔϯΛ࡞੒Ͱ͖Δ ͞ΒʹଞͷαΠτ΁ΤΫεϙʔτ΋ɻ࠶ར༻ੑ

Slide 37

Slide 37 text

3 ͭͷσϝϦοτ

Slide 38

Slide 38 text

σϝϦοτ 01 ϒϩοΫςʔϚ༻ͷֶशίετ͕͔͔Δ

Slide 39

Slide 39 text

ΫϥγοΫςʔϚ։ൃͰ஝͑ͨεΩϧ͕࢖͑ͳ͍͜ͱ͕͋Δ ಉ͡Α͏ͳ͜ͱΛͨͯ͘͠΋ɺϒϩοΫςʔϚ༻ͷॻ͖ํΛ ֮͑ͳ͍ͱ͍͚ͳ͍ ϒϩοΫςʔϚ༻ͷֶशίετ͕͔͔Δ

Slide 40

Slide 40 text

ϒϩοΫʹରͯ͠Կ͔Λ͢Δ render_block ग़ྗλάͷ্ॻ͖ WP_html_tag_processor ϒϩοΫςʔϚ༻ͷֶशίετ͕͔͔Δ IUUQTEFWFMPQFSXPSEQSFTTPSHSFGFSFODFIPPLTSFOEFS@CMPDL IUUQTEFWFMPQFSXPSEQSFTTPSHSFGFSFODFIPPLTSFOEFS@CMPDL@UIJTOBNF URL IUUQTEFWFMPQFSXPSEQSFTTPSHSFGFSFODFDMBTTFT XQ@IUNM@UBH@QSPDFTTPS URL ΧελϜϑΟʔϧυͱͷ࿈ܞ Block Bindings API IUUQTEFWFMPQFSXPSEQSFTTPSHOFXTJOUSPEVDJOH CMPDLCJOEJOHTQBSUDPOOFDUJOHDVTUPN fi FMET URL

Slide 41

Slide 41 text

σϝϦοτ 02 ࠷৽৘ใΛ௥͍ଓ͚Δඞཁ͕͋Δ

Slide 42

Slide 42 text

ެࣜαΠτ͕࠷৽ͷ৘ใʹߋ৽͞Ε͍ͯͳ͍͜ͱ͕͋Δ ߪೖٕͨ͠ज़ຊ͕࠷৽ͷ WordPress ʹରԠ͍ͯ͠ͳ͍ ※ؤுͬͯߋ৽ͯ͘͠Ε͍ͯΔͷ͸΋ͪΖΜཧղ͍ͯ͠Δ ࠷৽৘ใΛ௥͍ଓ͚Δඞཁ͕͋Δ ৘ใͷมԽεϐʔυʹ͍͍ͭͯͨ͘Ίͷ౒ྗ͸͋Δఔ౓࢓ํ͕ͳ͍

Slide 43

Slide 43 text

σϝϦοτ 03 ࣮ݧతͳػೳͷ೺Ѳ

Slide 44

Slide 44 text

͍ͣΕ࢖͑ͳ͘ͳΔʁࠩ͠ସ͕͑ඞཁʁ ࣮ݧతͳػೳͷ೺Ѳ experimentalʢ࣮ݧతͳʣػೳ

Slide 45

Slide 45 text

__experimentalExposeControlsToChildren ࣮ݧతͳػೳͷ೺Ѳ __experimentalLayout __experimentalDefaultControls Ұྫ

Slide 46

Slide 46 text

σϝϦοτʹର͢ΔΞΫγϣϯ ϒϩοΫςʔϚΛѻ͏ษڧձʹࢀՃ͢Δ ಉ͡໨తͷ஥ؒΛ࡞ͬͯ৘ใަ׵͢Δ ಈըͰษڧ͢ΔʢLearn WordPressʣ ϒϩάߪಡ͢ΔʢMake WordPressʣ GitHub ϦϙδτϦͷίʔυΛಡΉ

Slide 47

Slide 47 text

Learn WordPress IUUQTMFBSOXPSEQSFTTPSH URL Make WordPressʢcoreʣ IUUQTNBLFXPSEQSFTTPSHDPSF URL Twenty Twenty-Five IUUQTHJUIVCDPN8PSE1SFTTUXFOUZUXFOUZ fi WF URL

Slide 48

Slide 48 text

޷͖উखʹ৮ΕΔ։ൃ؀ڥΛ࣋ͱ͏ʂ ͍ͭͰʹ΋͏ҰͭΞΫγϣϯ

Slide 49

Slide 49 text

Studio by WordPress.com IUUQTEFWFMPQFSXPSEQSFTTDPNTUVEJP URL Πϯετʔϧ͢Δͱ ϩʔΧϧ؀ڥͷߏங͕ ؆୯ʹͰ͖Δ

Slide 50

Slide 50 text

WordPress Playground IUUQTQMBZHSPVOEXPSEQSFTTOFU URL ϩʔΧϧ؀ڥΛ࡞Βͳͯ͘΋ ϒϩοΫςʔϚͷػೳΛࢼͤΔ WordPress ຊମ΍ PHP ͷ όʔδϣϯࢦఆͯ͠ىಈ΋Ͱ͖Δ ౰೔ಈըͰ঺հ͠·ͨ͠ʂ

Slide 51

Slide 51 text

·ͱΊ

Slide 52

Slide 52 text

৽͍ٕ͠ज़ͷशಘίετ͕͔͔Δ ࣮ݧతͳػೳͷ೺Ѳ ࠷৽৘ใΛ௥͍ଓ͚Δඞཁ͕͋Δ ςʔϚͷ༷ʑͳઃఆΛҰݩ؅ཧ ύλʔϯͰίϯςϯπ࡞੒Λޮ཰Խʂ ϑϧαΠτฤूͷԸܙ͕Ͱ͔͍ʂ ϝϦοτ σϝϦοτ 01 02 03 01 02 03

Slide 53

Slide 53 text

ʮίετ͸౤ࢿʯͩͱߟ͑ɺϓϩδΣΫτͷཁ݅ʹԠͯ͡ ঃʑʹϒϩοΫςʔϚΛ࠾༻͍ͯ͜͠͏ ͍ͣΕ͸ϒϩοΫςʔϚओྲྀͷ࣌୅͕དྷΔʢͨͿΜʣ ૢ࡞ͷ׳Ε΍৽͍ٕ͠ज़ͷशಘίετ͸ඞཁ ΋ͪΖΜΫϥγοΫςʔϚͷར༻΋

Slide 54

Slide 54 text

͓·͚

Slide 55

Slide 55 text

͜ͷ୊ࡐҎ֎ʹ΋ 2 ͭީิ͕͋Γ·ͨ͠ WordPress ςʔϚൢചͷܦݧ͔Βಋ͘ɺ ϒϩοΫςʔϚͷޮՌతͳ഑෍ͱൢചํ๏ ϒϩοΫςʔϚͰձһ੍αΠτͬͯͲ͏࡞Ε͹͍͍ʁ ࢼߦࡨޡͷཪଆڭ͑·͢ 01 02