Upgrade to Pro — share decks privately, control downloads, hide ads and more …

デザイナーが効率よくテーマ作成を進めるには? デザインから WordPress のテーマ作成のワークフローを見直す

h2ham
September 17, 2016
6.1k

デザイナーが効率よくテーマ作成を進めるには? デザインから WordPress のテーマ作成のワークフローを見直す

WordCamp Tokyo 2016 の (´°ム°`)の発表スライド

h2ham

September 17, 2016
Tweet

Transcript

  1. View Slide

  2. σβΠφʔ͕ޮ཰Α͘ςʔϚ࡞੒ΛਐΊΔʹ͸ʁ
    σβΠϯ͔Β8PSE1SFTTͷ
    ςʔϚ࡞੒ͷϫʔΫϑϩʔΛݟ௚͢
    HIROMU HASEGAWA

    View Slide

  3. Question

    View Slide

  4. ීஈͷ੍࡞खॱʢϫʔΫϑϩʔʣ͸
    ͲͷΑ͏ͳखॱͰਐΊ͍ͯ·͔͢ʁ

    View Slide

  5. 8PSE1SFTTͷ࣌͸ʁ

    View Slide

  6. ͜ͷηογϣϯ͸
    ීஈͷϫʔΫϑϩʔΛ
    ݟͳ͓࣌ؒ͢ʹ

    View Slide

  7. About me

    View Slide

  8. ϜA

    ৽ׁग़਎๺ւಓࡳຈࢢࡏॅ
    ϑϦʔϥϯεˠ๏ਓԽɿ୅දऔక໾
    ϑϩϯτΤϯυΤϯδχΞ
    ݉ςΫχΧϧσΟϨΫλʔ
    ࠷ۙͷझຯɿϋϜՈࡊԂਫ΍Γʢ೶ԂͰ͸ͳ͍ʣ

    View Slide

  9. View Slide

  10. ࠓ͸·ͩ
    ίʔσΟϯάத৺ͷۀ຿

    View Slide

  11. QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ
    ීஈͷ੍࡞खॱʢϫʔΫϑϩʔʣ͸
    ͲͷΑ͏ͳखॱͰਐΊ͍ͯ·͔͢ʁ

    View Slide

  12. ! !
    %FTJHOFS 1SPHSBNNFS
    ϜA
    ͷ͓࢓ࣄ
    ϫΠϠʔ΍σβΠϯ͔Β࢓༷೺Ѳ΍
    ΞʔΩςΫνϟͷ੔ཧͱεέδϡʔϧௐ੔
    ૒ํͷίϛϡχέʔγϣϯͷڮ౉͠໾

    View Slide

  13. "

    "
    \DTT^
    "
    \+4^
    $
    4ZTUFN
    5FNQMBUFT
    #

    View Slide

  14. QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ
    ࡢ೥ͷ8PSE$BNQ5PLZPͷ࠙਌ձͰ

    View Slide

  15. QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ
    ίʔσΟϯάઌʹ΍Δͷͬͯɺ
    ແବ͡Όͳ͍Ͱ͔͢ʁ

    View Slide

  16. QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ
    ʂʂʂ

    View Slide

  17. QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ
    ແବͱ͍͏ൃ૝͕ͳ͔ͬͨʂ

    View Slide

  18. MJOLIUUQTIIBNOFUXPSEQSFTTDPEJOHqPX

    View Slide

  19. "

    "
    \DTT^
    "
    \+4^
    #
    % !
    %FTJHOFS 1SPHSBNNFS
    $ #
    4ZTUFN5FNQMBUFT 4ZTUFN4FUUJOH

    View Slide

  20. ϫʔΫϑϩʔͷύλʔϯΛߟ͑ͯΈΔ

    View Slide

  21. ᶃཁ݅ఆٛɾઃܭɾσβΠϯ࡞੒
    ᶄ8PSE1SFTTͷઃఆ
    ᶄجຊઃఆ
    ᶄGVODUJPOTQIQʹίʔυ௥Ճ
    ᶄϓϥάΠϯಋೖɾઃఆɹ
    ᶅςʔϚ࡞੒
    ᶆσʔλ౤ߘ
    ᶅςʔϚ࡞੒

    View Slide

  22. ᶃཁ݅ఆٛɾઃܭɾσβΠϯ࡞੒
    ᶄ8PSE1SFTTͷઃఆ
    ᶄجຊઃఆ
    ᶄGVODUJPOTQIQʹίʔυ௥Ճ
    ᶄϓϥάΠϯಋೖɾઃఆɹ
    ᶅςʔϚ࡞੒
    ᶆσʔλ౤ߘ
    ᶅςʔϚ࡞੒

    View Slide

  23. σβΠϯΑΓޙͷ
    ίʔσΟϯάΛͲ͏ਐΊ͍ͯΔ͔

    View Slide

  24. &ςʔϚʹ௚઀
    &੩తʹҰ౓ίʔσΟϯά

    View Slide

  25. ᶃςʔϚʹ௚઀

    View Slide

  26. ○ެࣜςʔϚ΍ελʔλʔςʔϚͳͲ
    ഑෍ςϯϓϨʔτΛΒΧελϚΠζͯ͠
    ○͔̍ΒߏஙʢϑϧεΫϥονʣ

    View Slide

  27. (͋Β͔͡Ί࢖͑Δ༷ʑͳػೳ
    ʢػೳͱͯ͠࢖͏༧ఆͰ͋Ε͹ޮ཰తʣ
    (σβΠϯ͕ϑϧΦʔμʔͰ͸ͳ͚Ε͹

    ͙͢ʹར༻Մೳͳέʔε΋
    ϝϦοτ

    View Slide

  28. )ߏ଄೺Ѳͷॳظίετ
    ʢ࢓૊Έ΍ػೳͷ೺Ѳʣ
    )ϑϧΦʔμʔσβΠϯͷ৔߹
    ϕʔεͱͯ͠ར༻͢Δ৔߹ͷίετ
    σϝϦοτ

    View Slide

  29. ○8PSE1SFTTͷλά΍ػೳΛ֮͑ΔΑΓ
    ɹςʔϚػೳͷൣғͷ͚ͩͳΒ௿ίετ
    ɹͦͷ࿮Λ௒͑Δ৔߹͸ɾɾɾʁ

    View Slide

  30. ○ϫʔΫϑϩʔͱͯ֬͠཰Ͱ͖ΔͳΒ
    ແବΛ࠷খݶʹ཈͑ΒΕΔ

    View Slide

  31. ݸਓతҰ൪ͷٙ໰

    View Slide

  32. ?ݻఆϖʔδɾ౤ߘͷ

    ΤσΟλ෦෼ͷϑϩʔʁ

    View Slide

  33. View Slide

  34. ᶃ8FC্ͷΤσΟλ෦෼ͰϚʔΫΞοϓ
    ᶄอଘ
    ᶅ)5.-मਖ਼ɾௐ੔
    ᶆอଘɾɾɾʁ

    View Slide

  35. ?؅ཧը໘Λ௨ͯ͠ʁͦΕͱ΋ผʁ

    View Slide

  36. ᶄ੩తʹҰ౓ίʔσΟϯά

    View Slide

  37. )࡞ΔਓͷεΩϧɾ஌ࣝɾ഑ྀʹӨڹ
    ɹߟྀ΋Εɺख໭Γ͕ଟ͘ൃੜͯ͠͠·͏

    ɹςʔϚԽ͢Δࡍʹ͏·͘࠶ݱͰ͖Δ͔ʁ
    ))5.-ɾ$44ΛҰ͔Β࡞Βͳ͍ͱ

    ௚઀ॻ͘ͷͱมΘΒͳ͍
    σϝϦοτ

    View Slide

  38. ○ϓϥάΠϯར༻ͳͲͷ΋ͷʹΑͬͯ
    ग़ྗʹ੍ݶ͕͋Δ৔߹
    ɹίʔσΟϯάͦͷ··࢖͑ͳ͍Մೳੑ΋

    View Slide

  39. ○ϓϥάΠϯར༻ͳͲͷ΋ͷʹΑͬͯ
    ग़ྗʹ੍ݶ͕͋Δ৔߹
    ɹίʔσΟϯάͦͷ··࢖͑ͳ͍Մೳੑ΋
    ෼ۀͰϓϩάϥϜدΓͷਓ͸
    ͜ͷखͷख໭Γ͕ݏ͍ͳ܏޲
    ʢ͋͘·Ͱݸਓతͳҙݟʣ

    View Slide

  40. (ϑϧΦʔμʔσβΠϯʹ΋ॊೈʹରԠ
    ()5.-ͱ$44ʹूதͰ͖Δ
    (ςʔϚԽ͢ΔલͰ΋ґཔऀʹ

    ϒϥ΢β্Ͱ֬ೝͯ͠΋Β͑Δ
    (෼ۀԽ͠΍͍͢
    ϝϦοτ

    View Slide

  41. ○ίʔσΟϯά໘͚ͩʹϑΥʔΧε͢Δͱ
    8PSE1SFTTͷߏங஌͕ࣝແͯ͘΋
    ɹ࡞ۀཁһͱͯ͠ࢀըՄೳ
    ɹʢϙΠϯτΛ཈͑Δඞཁ͸͋Γʣ

    View Slide

  42. ͲͪΒͷϑϩʔ΋ળ͠ѱ͠

    View Slide

  43. ϙΠϯτʁ

    View Slide

  44. ϙΠϯτख໭ΓΛ࠷খݶʹ

    View Slide

  45. ख໭ΓΛݮΒ͢ϙΠϯτ

    View Slide

  46. (࡞੒͢Δ)5.-Λ
    ςϯϓϨʔτɾ7JFXʹ͠΍͍͢Α͏ʹ
    (γεςϜ୲౰ͱ࿈ܞΛߟྀͯ͠༻ҙ
    (όά΍ϛεͷग़དྷΔݶΓͳ͍

    ඼࣭ͷΑ͍ίʔυʹ

    View Slide

  47. ςϯϓϨʔτɾ7JFXʹ
    ͠΍͍͢Α͏ʹʁ

    View Slide

  48. (ϧʔϓ͕͠΍͍͢
    (ڞ௨෦ΛΘ͔Γ΍͘͢෼཭
    ($44PSγεςϜPSӡ༻

    View Slide


  49. ~
    ʢ´°Ϝ°`ʣ
    ࡳຈʹ͍ΔΑ
    2هࣄ໨


    ը૾ͷԣʹճΓࠐΉจࣈ


    ̍هࣄͷऴΘΓ͕
    Θ͔ΓͮΒ͍

    View Slide

  50. )ೖͬͯ͘ΔσʔλɾελΠϧʹΑͬͯ
    σβΠϯ่ΕͷݪҼ΋

    View Slide


  51. ~

    ʢ´°Ϝ°`ʣ
    ϞδϡʔϧຖΛҙࣝग़དྷͯΔʁ



    ~



    ը૾ͷԣʹճΓࠐΉจࣈ



    $.4ͷ৔߹͸
    ΤσΟλʹΑͬͯ
    ՝୊ʹ

    View Slide

  52. $44PSγεςϜPSӡ༻ʁ

    View Slide

  53. ݟग़͠ͷ૷০
    ݟग़͠ͷ૷০จࣈ਺͕ଟ͘
    ͳͬͨ৔߹͸ʁ
    ݟग़͠ͷ૷০จࣈ਺͕ଟ͘
    ͳͬͨ৔߹͸ʁ
    ݟग़͠ͷ૷০จࣈ਺͕ଟ͘ʜ

    View Slide

  54. QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ
    Ϧϐʔτཁૉͷ)5.-ߏ੒

    View Slide

  55. View Slide











  56. View Slide

  57. View Slide









  58. View Slide

  59. View Slide

  60. ($44ͷઃܭ
    (*%ηϨΫλ͕࢖ΘΕͯͳ͍͔Ͳ͏͔
    (ग़ྗ͞ΕΔ)5.-͕഑ྀ͞Ε͍ͯΔ͔
    (Τϥʔ΍ɺ৘ใ͕ͳ͍࣌ͷ
    ελΠϧ͕༻ҙ͞Ε͍ͯΔ͔Ͳ͏͔

    View Slide

  61. #news .main .heading-lv2 {
    border: solid #333;
    border-width: 0 0 1px 10px:
    padding 10px 5px;
    font-size: 20px;
    font-weight: bold;
    }
    #home .main h2.entry-title {
    border: solid #333;
    border-width: 0 0 1px 10px;
    padding: 10px 5px;
    font-size: 20px;
    font-weight: bold;
    }
    + +
    +
    +
    + +

    View Slide

  62. .heading-lv2 {
    border: solid #333;
    border-width: 0 0 1px 10px:
    padding 10px 5px;
    font-size: 20px;
    font-weight: bold;
    }
    .entry-title {
    border: solid #333;
    border-width: 0 0 1px 10px;
    padding: 10px 5px;
    font-size: 20px;
    font-weight: bold;
    }

    View Slide

  63. ࣗ෼ͷ࢓ࣄͷґཔൣғ͔Β

    ϫʔΫϑϩʔΛߟ͑Δ

    View Slide

  64. "

    "
    \DTT^
    "
    \+4^
    $
    4ZTUFN
    5FNQMBUFT
    #

    View Slide

  65. ,੩తϑΝΠϧೲ඼PSνΣοΫ
    ,$.4ͷछྨ໰Θͣʢ8PSE1SFTTҎ֎΋ʣ

    View Slide

  66. ○͍Ζ͍Ζͳܗ͕ࣜ͋ͬͯ΋γεςϜʹ
    ೖΕΔલͷϫʔΫϑϩʔΛҰఆʹ
    ○Ҋ݅ʹΑΔߏ੒ͷϒϨͷٵऩ
    ґཔઌຖʹҧ͏
    ίʔσΟϯάϨΪϡϨʔγϣϯ

    View Slide

  67. ○ӨڹൣғͷϦεΫݮ
    -ີ݁߹ηϨΫλͰద༻͞Εͳ͘ͳͬͨ
    -ผՕॴʹ΋ಉ͡DMBTT໊͕ʂཁૉ͕ʂ

    View Slide

  68. ෼ۀ͔Βߟ͑Δޮ཰Խ

    View Slide

  69. .ಘҙͳ෦෼ʹूத
    .$.4ͷछྨ໰Θͣʢ8PSE1SFTTҎ֎΋ʣ

    View Slide

  70. ར༻πʔϧͱϙΠϯτ

    View Slide

  71. project/
    +-- .editorconfig
    +-- .gitignore
    +-- gulpfile.js
    +-- metalsmith.json
    +-- package.json
    +-- html
    +-- _resource
    +-- _layouts
    ¦ +-- default.html
    ¦ +-- footer.html
    ¦ +-- header.html
    +-- index.html
    +-- common
    +-- style.scss

    View Slide

  72. View Slide

  73. MJOLIUUQHVMQKTDPN

    View Slide

  74. MJOLIUUQTXXXCSPXTFSTZODJP

    View Slide

  75. MJOLIUUQXXXNFUBMTNJUIJP

    View Slide

  76. MJOLIUUQTHJUIVCDPNQBVMBSNTUSPOHTXJH

    View Slide

  77. TXJHMBZPVU




    {{ title }}


    {% include 'header.html' %}
    {{ contents | safe }}
    {% include 'footer.html' %}


    View Slide

  78. ---
    template: default.html
    title: "λΠτϧ"
    ---
    ίϯςϯπ
    TXJHJOEFYIUNM

    View Slide





  79. λΠτϧ


    ~
    ίϯςϯπ
    ~


    σϓϩΠޙ

    View Slide


  80. >






    ίϯςϯπ




    5IFNFʹ

    View Slide

  81. OQNJOTUBMM
    OQNTUBSU

    View Slide

  82. ͜ͷઌ3&45"1*͕ඞཁʹͳͬͯ΋

    View Slide

  83. .੩తʹ༻ҙ͓ͯ͘͠HVMQͷϑϩʔ͸
    ɹͦͷ··+4ςϯϓϨʔτͰ΋ར༻Մೳ

    View Slide

  84. import React from 'react';
    class Header extends React.Component {
    render() {
    return (

    ʙ

    );
    };
    }
    export default Header;
    ྫ͑͹3FBDU

    View Slide

  85. ੩తΛ༻ҙ͢Δʹͯ͠΋

    View Slide

  86. ᶃ8PSE1SFTTͷઃఆ
    ᶃجຊઃఆ
    ᶃGVODUJPOTQIQʹίʔυ௥Ճ
    ᶃϓϥάΠϯಋೖɾઃఆɹ
    ᶄ੩తϖʔδʹίʔσΟϯά
    ᶅίʔσΟϯάσʔλʹ81λά

    View Slide

  87. ຊ೔ͷ·ͱΊ

    View Slide

  88. /ίʔσΟϯάઌͰ΋ΠΩφϦςʔϚͰ΋
    ɹͲͪΒ΋஌ࣝ΍εΩϧͰޮ཰త͔มΘΔ
    #ࣗ෼ʹ͋ͬͨϑϩʔ͸ͲΕ͔Λߟ͑Δ
    /λεΫϥϯφʔͳͲɺޮ཰Խπʔϧ΋׆༻Λ
    #੩తίʔσΟϯάͷϑϩʔͰ΋
    ɹઌʹ8PSE1SFTTͷભҠͳͲ༻ҙ
    0ϓϩδΣΫτɾϝϯόʔߏ੒ʹΑͬͯ
    ՝୊΋͔ΘΔͨΊ
    ɹϫʔΫϑϩʔ΋౎౓ݟ௚͠Λߦ͏͜ͱ
    ·ͱΊ

    View Slide

  89. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide