デザイン事例で見る WordPressのカスタマイズと ブロックエディター（Gutenberg）で変わる未来

WordPressをニュース更新やブログとして使うのではなく、会社概要、お客様の声、セミナー情報、求人サイトなど、ある程度決まったフォーマットで内容を増やしていきたい、更新したい。そのためにどのようなデザインでカスタマイズをしているのか、実例を見ながらお話します。旧エディターでは更新者のスキルによって裏の作りを変えることもありました。旧エディターでは難しかったこと、新エディターであるブロックエディターの登場で、どう変わったのか、何がラクになっていくのかを説明します。

Transcript

2. ࣗݾ঺հ ੴ௩ઍتʢ͍͔͖ͮͪ͠ʣ גࣜձࣾ͘ͷ͍ͪσβΠϯ ୅දऔక໾ ౦ژ౎ࡏॅ ࣇͷ฼ σβΠφʔྺ໿೥ɺ8PSE1SFTTྺ໿೥ɻ ݩάϥϑΟοΫσβΠφʔ͕ɺҩӃ΍ϥΠλʔʹґཔ͞Εɺ 8PSE1SFTTͷΧελϚΠζΛ࢝ΊΔɻݱࡏ͸͓٬༷͕ ߋ৽͠΍͍͢8&#αΠτ࡞ΓͱΧελϚΠζΛ໨ࢦ͍ͯ͠Δɻ 2
3. 8PSE1SFTTͰԿΛߋ৽͍ͯ͠·͔͢ʁ Φ΢ϯυϝσΟΞ΍ɺχϡʔεҰཡɻ ΋ͪΖΜɺԦಓͳ࢖͍ํ͸͋Γ·͕͢ɺ $.4ͳΒͰ͸ͷػೳΛ࢖͍ɺߋ৽͠·ͤΜ͔ʁ 3
4. Ͳ͜Λߋ৽͍ͨ͠Ͱ͔͢ʁ ͬͦ͘͞ɺݟͯΈΑ͏ʂ 4
5. ձࣾ֓ཁΛࣗ෼ୡͰߋ৽͍ͨ͠ • ച্ߴ΍ԊֵͳͲΛ ࣗ෼ୡͰߋ৽͍ͨ͠ • ৄ͘͠ࡌͤͨ1%'Λ ຖ೥ࠩ͠ସ͍͑ͨ 5
6. ͓٬༷ͷ੠Λɺ501ͱҰཡϖʔδʹද͍ࣔͨ͠ 501ϖʔδ Ұཡϖʔδ • ߋ৽Ͱ501දࣔΛ ೖΕସΘΒ͍ͤͨɻ • Ұཡϖʔδ͸ɺͲΜ ͲΜ૿΍͍ͨ͠ɻ 6
7. සൟʹߦ͏ηϛφʔΛɺࣗ෼ୡͰߋ৽͍ͨ͠ • ߲໨͝ͱʹೖྗɻ • ࣸਅ΍஍ਤ΋ೖΕ͍ͨɻ 7
8. ۀ຿ϑϩʔʹ߹Θͤɺ಺༰Λද͍ࣔͨ͠ • ϨΠΞ΢τϑΥʔϚοτ Λ͋ΘͤɺͦΕͧΕͷΧ ςΰϦʔʹ಺༰Λࡌͤɺ ࣄྫΛ૿΍͍ͨ͠ɻ 8
9. ٻਓαΠτͷࣾһมߋΛࣗࣾͰ΍Γ͍ͨ • ࣾһͷೖΕସ͑Λࣗ෼ୡ Ͱࠩ͠ସ͍͑ͨ • ࣸਅ΍จࣈΛม͍͑ͨɻ 9
10. ٻਓαΠτͷৄࡉ΍ɺ೔ͷྲྀΕ΋ม͍͑ͨ 10
11. ืू෺݅Λɺ501ͱҰཡͰಈతʹද͍ࣔͨ͠ 501ϖʔδ Ұཡϖʔδ • ߋ৽Ͱ501Λࣗಈత ʹೖΕସ͍͑ͨ͠ɻ • Ұཡϖʔδ͸ɺͲΜ ͲΜ૿΍͍ͨ͠ɻ 11
12. ཪͷ࡞ΓΛݟͯΈΑ͏ʂ چΤσΟλʔͱ৽ΤσΟλʔͷҧ͍͸ʁ ϒϩοΫΤσΟλʔͬͯԿʁ 12
13. ߋ৽ऀͷεΩϧ΍ΤσΟλʔͷҧ͍Ͱཪͷ࡞Γ͕ҧ͏ɻ ৽෣͞Μ ɾλάଧ͕ͪΘ͔Δ ɾαΠτશͯ࡞Δͷ͸೉͍͠ ాޱ͞Μ ɾϒϩά 
    4/4ߋ৽ ɾϩάΠϯ
    ೖྗ 
    मਖ਼ 13
14. ϒϩοΫ͞Μ ɾ௚ײతʹೖྗͰ͖Δ ɾ৽࢝͘͠ΊΔਓʹΦεεϝ ϒϩοΫΤσΟλʔͰ͸ɺ͞Βʹཪͷ࡞Γ͕ҧ͏ 14
15. ձࣾ֓ཁΛࣗ෼ୡͰߋ৽͍ͨ͠ 15
16. ৽෣͞Μ༻ʹΧελϚΠζ "
    ࠨ͕ݻఆɺӈͷΈߋ৽ #
    ྻͷೖΕସ͑Մೳ ࠨ ӈ ࠨ ӈ ࠨ ӈ 16
17. ాޱ͞Μ༻ʹΧελϚΠζ ࠨ ӈ ࠨ ӈ 17
18. ϒϩοΫ͞Μ͸ɺςʔϒϧʹೖྗ͚ͩ ಺༰ʹΑͬͯ εΩϧ΋ؔ܎ͳ͘ ؆୯ʹͰ͖Δʂʁ 18
19. ࣸਅจࣈͷೖྗ ೖྗϖʔδ࡞੒ ϓϩάϥϜ࡞੒ $44Ͱઃఆ ද ࣔ Ͱ͖Δ෺͸ ࣮͸ಉ͡ ੍࡞ ੍࡞ ͳ ͠ ੍࡞ ੍࡞ ͳ ͠ ྫ͑͹ɺද૊Έͷ৔߹ ιʔεͷ࡞੒ ϖʔδͷ࡞੒ ςʔϒϧΛબͿ͚ͩ ཪͷ࡞Γํ͕ҧ͏ࣄͰɺ੍࡞εΩϧ΍ֹۚ΋มΘΓ·͢ɻ 19
20. ืू෺݅Λɺ501ͱҰཡͰಈతʹද͍ࣔͨ͠ 501ϖʔδ Ұཡϖʔδ 20
21. Ͳ͜Λಈతʹ͍͔ͨ͠ɺ ग़ྗΛෳ਺ͷ৔ॴʹ͍ͨ͠ɺͳͲΑΓ ϒϩοΫΤσΟλʔͰ΋ɺ ϓϩάϥϜ౳ͷΧελϚΠζ͕ ඞཁʹͳΔ͔΋͠Ε·ͤΜɻ 21
22. ͦͷଞʹ΋ɺ ϒϩοΫΤσΟλʔ͸Կ͕Ͱ͖Δʁ 22
23. ɾ௚ײతʹߋ৽Ͱ͖Δ ɾ8&#αΠτશͯΛ࡞੒ ɾ4/4ͷຒΊࠐΈ͕Ͱ͖Δ ɾྻ෼͚ʢΧϥϜʣ͕Ͱ͖Δ ɾද૊ʢςʔϒϧʣ͕Ͱ͖Δ ɾΪϟϥϦʔ͕Ͱ͖Δ ϒϩοΫΤσΟλʔͷ ྑ͍఺͸ʁ ͳͲɺ৭ʑʜ 23
24. ࣮ࡍʹϒϩοΫΤσΟλʔͰ࡞ͬͯΈΑ͏ʂ 24
25. ·ͣ͸ࣗ෼Ͱࡌ͍ͤͨํʹ͸Φεεϝʂ ࡉ͔͘ௐ੔͍ͨ͠৔߹͸ɺ ΋͏গ͠ະདྷ͔ɺ$44౳ͷ஌͕ࣝ ඞཁ͔΋͠Ε·ͤΜɻ 25
26. ΍͸Γɺ࢓༷ɾઃܭ͕େࣄͰ͢ɻ ΍Γ͍ͨ͜ͱɺͰ͖Δ͜ͱɺ༧ࢉͷόϥϯεͰ ࢖͍΍͍͢αΠτ࡞ΓΛɻ ˎΧελϚΠζΛ͢ͰʹچΤσΟλʔͰ࡞͍ͬͯΔ৔߹ͷɺ όʔδϣϯΞοϓʹ͸஫ҙ͠·͠ΐ͏ɻ ·ͱΊ 26
27. ૉఢͳ8PSE1SFTTϥΠϑΛ̇ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ ͘ͷ͍ͪσβΠϯ ੴ௩ઍت 27